Merge pull request #10 from thatmare/portfolio

The portfolio contains relevant information, experiences and projects and it's ready for mobile, tablet and desktop

README.md

@@ -1,36 +1,30 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+<div align="center">
+  <img src="https://raw.githubusercontent.com/thatmare/my-portfolio/portfolio/src/app/favicon.ico" width="50" height="50"/>
+  <h1>Marissa Vargas Sánchez</h1>
+  <p>First version of my frontend developer portfolio.</p>
+  <p>UI design by the amazing <a href="https://brittanychiang.com/" target="_blank">Brittany Chiang</a>. Check her work!</p>
+</div>
+
+## Development
+It was developed with Next.js, TypeScript and Tailwind CSS. 
+
+## Style Reference
+
+### Color palette
+It was made with the [Tailwind CSS Color Generator](https://uicolors.app/create). 
+
+| Color          | Hex                                                                |
+| -------------- | ------------------------------------------------------------------ |
+| moody-blue-200 | ![#c4caff](https://via.placeholder.com/10/c4caff?text=+) `#c4caff` |
+| moody-blue-300 | ![#a0a7ff](https://via.placeholder.com/10/a0a7ff?text=+) `#a0a7ff` |
+| moody-blue-400 | ![#7371ff](https://via.placeholder.com/10/7371ff?text=+) `#7371ff` |
+| moody-blue-500 | ![#695bf9](https://via.placeholder.com/10/695bf9?text=+) `#695bf9` |
+| moody-blue-800 | ![#3f29aa](https://via.placeholder.com/10/3f29aa?text=+) `#3f29aa` |
+| slate-900      | ![#0f172a](https://via.placeholder.com/10/0f172a?text=+) `#0f172a` |
+
+### Fonts
+- [Spline Sans Mono](https://fonts.google.com/specimen/Spline+Sans+Mono)
+- [DM Sans](https://fonts.google.com/specimen/DM+Sans)
+
+### Favicon
+![favicon-16x16](https://github.com/thatmare/my-portfolio/assets/113146161/bb4948e3-5f97-4fcd-827c-da676f34239f)  It was made with the [Favicon generator](https://favicon.io/favicon-generator/). 

package.json

@@ -9,19 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.1.4",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.1.4"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.4",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.4"
+    "typescript": "^5"
   }
 }

src/app/api/og/route.tsx

@@ -0,0 +1,38 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+
+export async function GET() {
+  const fontSpline = await fetch(
+    new URL("../../../../assets/fonts/SplineSansMono-Bold.ttf", import.meta.url)
+  ).then((res) => res.arrayBuffer());
+
+  const fontDmSans = await fetch(
+    new URL("../../../../assets/fonts/DMSans-Medium.ttf", import.meta.url)
+  ).then((res) => res.arrayBuffer());
+
+  return new ImageResponse(
+    (
+      <div tw="flex flex-col w-full h-full items-center justify-center bg-slate-900">
+        <h1 style={{ fontFamily: "Spline" }} tw="text-indigo-400/80 text-8xl tracking-wider">
+          Marissa Vargas
+        </h1>
+        <h2 style={{ fontFamily: "DmSans" }} tw="text-indigo-400/80 text-6xl bg-indigo-900 py-2 px-10 rounded-full">Frontend Developer</h2>
+      </div>
+    ),
+    {
+      fonts: [
+        {
+          name: "Spline",
+          data: fontSpline,
+          style: "normal",
+        },
+        {
+            name: "DmSans",
+            data: fontDmSans,
+            style: "normal",
+        }
+      ],
+    }
+  );
+}

src/app/components/About.tsx

@@ -0,0 +1,45 @@
+import { Spline_Sans_Mono } from "next/font/google";
+
+const spline = Spline_Sans_Mono({
+  subsets: ["latin"],
+});
+
+export default function About() {
+  return (
+    <section className="mb-20 lg:py-20 lg:mb-0" id="about">
+      <div className="sticky top-0 w-full backdrop-blur-sm px-8 py-4 lg:hidden">
+        <h3
+          className={`${spline.className} font-semibold tracking-widest text-moody-blue-400`}
+        >
+          about
+        </h3>
+      </div>
+      <div className="px-8">
+        <p className="font-light leading-relaxed">
+          In 2022 I decided to pivot in my professional life: I started to code.
+          In that time, I had a project for which I needed to create a website -
+          I said to myself, why not? And that’s how it all started.
+          <br />
+          <br />I studied Applied Linguistics in university. As a former
+          language teacher, I spent my afternoons learning about CSS and
+          JavaScript. I realized something that never occurred to me:{" "}
+          <span className="font-bold text-moody-blue-200/80">
+            coding is a creative activity.
+          </span>{" "}
+          Slow but steady, I fell in love with it.
+          <br />
+          <br />
+          Nowadays, as a developer, my main focus is in the frontend side of
+          buidling digital products. I find beauty in landing designs.{" "}
+          <span className="font-bold text-moody-blue-200/80">
+            I consider that the skills I acquired from the humanities field
+            define me as a frontend programmer
+          </span>
+          , as analytical and communication abilities are crucial for
+          problem-solving and teamwork. And, honestly, it’s satisfying to solve
+          a programming challenge.
+        </p>  
+      </div>
+    </section>
+  );
+}

src/app/components/Intro.tsx

@@ -0,0 +1,76 @@
+import { Spline_Sans_Mono } from "next/font/google";
+import GithubSvg from "./svg/Github";
+import LinkedinSvg from "./svg/Linkedin";
+import EmailSvg from "./svg/Email";
+
+const spline = Spline_Sans_Mono({
+  subsets: ["latin"],
+});
+
+export default function Intro() {
+  return (
+    <header className="px-8 mb-20 lg:w-1/2 lg:sticky lg:top-0 lg:max-h-screen lg:pl-20 lg:mb-0">
+      <h1
+        className={`${spline.className} text-moody-blue-400/80 tracking-widest text-3xl font-bold pt-20 lg:text-5xl`}
+      >
+        Marissa Vargas Sánchez
+      </h1>
+      <h2 className="text-moody-blue-200/90 font-medium text-xl py-2 lg:text-2xl">
+        Frontend Developer
+      </h2>
+      <p className="font-light lg:text-lg">
+        I find creativity in building digital products.
+      </p>
+      <nav>
+        <ul
+          className={`${spline.className} text-moody-blue-400 font-semibold hidden h-40 lg:block`}
+        >
+          <li className="h-10">
+            <a href="#about" className="group flex items-center py-2">
+              <span className="block w-10 h-px bg-moody-blue-400 mr-2 group-hover:bg-moody-blue-200 group-hover:w-14 transition-all"></span>
+              <span className="group-hover:text-moody-blue-200 group-hover:text-lg group-hover:tracking-widest group-focus-visible:text-moody-blue-200 group-focus-visible:text-lg transition-all">
+                about
+              </span>
+            </a>
+          </li>
+          <li className="h-10">
+            <a href="#experience" className="group flex items-center py-2">
+              <span className="block w-10 h-px bg-moody-blue-400 mr-2 group-hover:bg-moody-blue-200 group-hover:w-14 transition-all"></span>
+              <span className="group-hover:text-moody-blue-200 group-hover:text-lg group-hover:tracking-widest group-focus-visible:text-moody-blue-200 group-focus-visible:text-lg transition-all">
+                relevant experience
+              </span>
+            </a>
+          </li>
+          <li className="h-10">
+            <a href="#projects" className="group flex items-center py-2">
+              <span className="block w-10 h-px bg-moody-blue-400 mr-2 group-hover:bg-moody-blue-200 group-hover:w-14 transition-all"></span>
+              <span className="group-hover:text-moody-blue-200 group-hover:text-lg group-hover:tracking-widest group-focus-visible:text-moody-blue-200 group-focus-visible:text-lg transition-all">
+                projects
+              </span>
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <div className="flex flex-row my-4">
+        <a
+          href="https://www.linkedin.com/in/thatmare/"
+          className="flex items-center justify-center w-14 h-14"
+        >
+          <LinkedinSvg className="hover:fill-moody-blue-400 hover:w-10 hover:h-10 transition-all" />
+        </a>
+        <a
+          href="https://github.com/thatmare"
+          className="flex items-center justify-center w-14 h-14"
+        >
+          <GithubSvg className="hover:fill-moody-blue-400 hover:w-10 hover:h-10 transition-all" />
+        </a>
+        <a
+          href="mailto:marissa.lorena@hotmail.com"
+          className="flex items-center justify-center w-14 h-14"
+        >
+          <EmailSvg className="hover:fill-moody-blue-400 hover:w-10 hover:h-10 transition-all" />
+        </a>
+      </div>
+    </header>
+  );
+}

src/app/components/Jobs.tsx

@@ -0,0 +1,45 @@
+import data from "@/app/data/jobs.json";
+import { Spline_Sans_Mono } from "next/font/google";
+
+const spline = Spline_Sans_Mono({
+  subsets: ["latin"],
+});
+
+export default function Jobs() {
+  return (
+    <section className="mb-20 lg:py-12 lg:mb-0" id="experience">
+      <div className="sticky top-0 w-full backdrop-blur-sm lg:hidden">
+        <h3
+          className={`${spline.className} text-moody-blue-400 font-semibold tracking-widest px-8 py-4`}
+        >
+          relevant experience
+        </h3>
+      </div>
+      <div className="px-8">
+        {data.jobs.map((job, index) => (
+          <div key={index} className="mb-8 grid sm:grid-cols-3">
+            <div>
+              <p className="font-extralight text-sm sm:py-1">{job.period}</p>
+            </div>
+            <div className="sm:col-span-2">
+              <h4 className="font-bold text-moody-blue-200 tracking-wider text-lg">
+                {job.title} • {job.place}
+              </h4>
+              <p className="leading-relaxed py-2">{job.description}</p>
+              <ul className="flex flex-wrap py-2">
+                {job.skills.map((skill, i) => (
+                  <li
+                    key={i}
+                    className={`${spline.className} bg-moody-blue-950 text-moody-blue-400 flex items-center rounded-full py-1 px-3 m-1 text-xs`}
+                  >
+                    {skill}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

src/app/components/Projects.tsx

@@ -0,0 +1,57 @@
+import Image from "next/image";
+import data from "@/app/data/projects.json";
+import { Spline_Sans_Mono } from "next/font/google";
+import LinkSvg from "./svg/Link";
+
+const spline = Spline_Sans_Mono({
+  subsets: ["latin"],
+});
+
+export default function Projects() {
+  return (
+    <section className="mb-20 lg:py-12 lg:mb-0" id="projects">
+      <div className="sticky top-0 w-full backdrop-blur-sm z-10 lg:hidden">
+        <h3
+          className={`${spline.className} font-semibold tracking-widest px-8 py-4 text-moody-blue-400`}
+        >
+          projects
+        </h3>
+      </div>
+      <div className="px-8">
+        {data.projects.map((project, index) => (
+          <div
+            key={index}
+            className="mb-8 grid sm:grid-cols-4 py-4"
+          >
+            <div className="sm:col-span-3 lg:ml-5">
+              <div className="flex items-center group">
+                <LinkSvg className="fill-moody-blue-200/90 mr-2 group-hover:fill-moody-blue-400 group-hover:w-5 group-hover:h-5 transition-all" />
+                <a href={project.link}>
+                  <h4 className="font-bold text-moody-blue-200 tracking-wider text-lg group-hover:text-moody-blue-400 group-hover:text-xl transition-all">
+                    {project.title}
+                  </h4>
+                </a>
+              </div>
+              <p className="py-2 font-extralight leading-relaxed">
+                {project.description}
+              </p>
+              <ul className="flex flex-wrap py-2">
+                {project.skills.map((skill, i) => (
+                  <li
+                    key={i}
+                    className={`${spline.className} bg-moody-blue-950 text-moody-blue-400  flex items-center rounded-full py-1 px-3 m-1 text-xs`}
+                  >
+                    {skill}
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className="sm:order-first">
+              <Image src={project.image} width={120} height={70} alt="" className="rounded-md sm:my-2"/>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

src/app/components/svg/Email.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+export default function EmailSvg(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      {...props}
+      width="32px"
+      height="32px"
+      fill="currentColor"
+    >
+      <path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4l217.6 163.2c11.4 8.5 27 8.5 38.4 0l217.6-163.2c12.1-9.1 19.2-23.3 19.2-38.4 0-26.5-21.5-48-48-48H48zM0 176v208c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V176L294.4 339.2a63.9 63.9 0 01-76.8 0L0 176z" />
+    </svg>
+  );
+}

src/app/components/svg/Github.tsx

@@ -0,0 +1,10 @@
+import * as React from "react"
+import { SVGProps } from "react"
+
+export default function GithubSvg(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 512" {...props} fill="currentColor" width="32px" height="32px">
+      <path d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z" />
+    </svg>
+  )
+}