diff --git a/README.md b/README.md index c403366..0586e12 100644 --- a/README.md +++ b/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. +
+ +

Marissa Vargas Sánchez

+

First version of my frontend developer portfolio.

+

UI design by the amazing Brittany Chiang. Check her work!

+
+ +## 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/). diff --git a/assets/fonts/DMSans-Medium.ttf b/assets/fonts/DMSans-Medium.ttf new file mode 100644 index 0000000..c29713e Binary files /dev/null and b/assets/fonts/DMSans-Medium.ttf differ diff --git a/assets/fonts/SplineSansMono-Bold.ttf b/assets/fonts/SplineSansMono-Bold.ttf new file mode 100644 index 0000000..63c5701 Binary files /dev/null and b/assets/fonts/SplineSansMono-Bold.ttf differ diff --git a/package.json b/package.json index 426e9b4..c7df202 100644 --- a/package.json +++ b/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" } } diff --git a/public/be-my-friend.webp b/public/be-my-friend.webp new file mode 100644 index 0000000..d5b356f Binary files /dev/null and b/public/be-my-friend.webp differ diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/npm.webp b/public/npm.webp new file mode 100644 index 0000000..eb9f4f6 Binary files /dev/null and b/public/npm.webp differ diff --git a/public/powertrain-ventures.webp b/public/powertrain-ventures.webp new file mode 100644 index 0000000..69cbf3a Binary files /dev/null and b/public/powertrain-ventures.webp differ diff --git a/public/queen-pattys.webp b/public/queen-pattys.webp new file mode 100644 index 0000000..fff3585 Binary files /dev/null and b/public/queen-pattys.webp differ diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index d2f8422..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/api/og/route.tsx b/src/app/api/og/route.tsx new file mode 100644 index 0000000..fe1a8f0 --- /dev/null +++ b/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( + ( +
+

+ Marissa Vargas +

+

Frontend Developer

+
+ ), + { + fonts: [ + { + name: "Spline", + data: fontSpline, + style: "normal", + }, + { + name: "DmSans", + data: fontDmSans, + style: "normal", + } + ], + } + ); +} diff --git a/src/app/components/About.tsx b/src/app/components/About.tsx new file mode 100644 index 0000000..8b27ef7 --- /dev/null +++ b/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 ( +
+
+

+ about +

+
+
+

+ 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. +
+
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:{" "} + + coding is a creative activity. + {" "} + Slow but steady, I fell in love with it. +
+
+ Nowadays, as a developer, my main focus is in the frontend side of + buidling digital products. I find beauty in landing designs.{" "} + + I consider that the skills I acquired from the humanities field + define me as a frontend programmer + + , as analytical and communication abilities are crucial for + problem-solving and teamwork. And, honestly, it’s satisfying to solve + a programming challenge. +

+
+
+ ); +} diff --git a/src/app/components/Intro.tsx b/src/app/components/Intro.tsx new file mode 100644 index 0000000..89859d4 --- /dev/null +++ b/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 ( +
+

+ Marissa Vargas Sánchez +

+

+ Frontend Developer +

+

+ I find creativity in building digital products. +

+ +
+ + + + + + + + + +
+
+ ); +} diff --git a/src/app/components/Jobs.tsx b/src/app/components/Jobs.tsx new file mode 100644 index 0000000..e9fd948 --- /dev/null +++ b/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 ( +
+
+

+ relevant experience +

+
+
+ {data.jobs.map((job, index) => ( +
+
+

{job.period}

+
+
+

+ {job.title} • {job.place} +

+

{job.description}

+
    + {job.skills.map((skill, i) => ( +
  • + {skill} +
    • + ))} +
+
+
+ ))} +
+
+ ); +} diff --git a/src/app/components/Projects.tsx b/src/app/components/Projects.tsx new file mode 100644 index 0000000..8909549 --- /dev/null +++ b/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 ( +
+
+

+ projects +

+
+
+ {data.projects.map((project, index) => ( +
+
+
+ + +

+ {project.title} +

+ +
+

+ {project.description} +

+
    + {project.skills.map((skill, i) => ( +
  • + {skill} +
    • + ))} +
+
+
+ +
+
+ ))} +
+
+ ); +} diff --git a/src/app/components/svg/Email.tsx b/src/app/components/svg/Email.tsx new file mode 100644 index 0000000..da95012 --- /dev/null +++ b/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) { + return ( + + + + ); +} diff --git a/src/app/components/svg/Github.tsx b/src/app/components/svg/Github.tsx new file mode 100644 index 0000000..e52ce9a --- /dev/null +++ b/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) { + return ( + + + + ) +} diff --git a/src/app/components/svg/Link.tsx b/src/app/components/svg/Link.tsx new file mode 100644 index 0000000..f1fe624 --- /dev/null +++ b/src/app/components/svg/Link.tsx @@ -0,0 +1,10 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +export default function LinkSvg(props: SVGProps) { + return ( + + + + ); +} diff --git a/src/app/components/svg/Linkedin.tsx b/src/app/components/svg/Linkedin.tsx new file mode 100644 index 0000000..cf031ec --- /dev/null +++ b/src/app/components/svg/Linkedin.tsx @@ -0,0 +1,10 @@ +import * as React from "react" +import { SVGProps } from "react" + +export default function LinkedinSvg(props: SVGProps) { + return ( + + + + ) +} diff --git a/src/app/data/jobs.json b/src/app/data/jobs.json new file mode 100644 index 0000000..c3ac7d5 --- /dev/null +++ b/src/app/data/jobs.json @@ -0,0 +1,36 @@ +{ + "jobs": [ + { + "title": "Web Developer", + "place": "Powertrain Ventures", + "period": "October 2023 - 2024", + "skills": [ + "WordPress", + "HTML", + "CSS", + "RESTful APIs", + "Jira", + "SCRUM" + ], + "description": "Lead the rebranding of the company's website, optimizing the UI design, performance and mobile responsiveness. Manage the IT operations, improving processes by implementing project management and communication tools. Work closely with the business strategy and marketing teams to advocate for the company's path." + }, + { + "title": "Frontend Developer", + "place": "Laboratoria", + "period": "March - September 2023", + "skills": [ + "React", + "TypeScript", + "Tailwind CSS", + "JavaScript", + "CSS", + "HTML", + "Node.js", + "Jest", + "Git", + "Agile" + ], + "description": "Develop five frontend projects within six months, achieving unit testing and performance standards. Work closely with the development team to ensure responsive design and seamless integration of RESTful APIs. Participate in agile development sprints, such as retrospective and review, as well as feature planning with the Kanban methodology." + } + ] +} diff --git a/src/app/data/projects.json b/src/app/data/projects.json new file mode 100644 index 0000000..dbed51a --- /dev/null +++ b/src/app/data/projects.json @@ -0,0 +1,36 @@ +{ + "projects": [ + { + "title": "Powertrain Ventures", + "description": "Website for a startup accelerator and startup studio.", + "link": "https://powertrain-ventures.com/", + "image": "/powertrain-ventures.webp", + "alt": "Powertrain Ventures website homepage", + "skills": ["WordPress", "Elementor"] + }, + { + "title": "Queen Patty's", + "description": "Web app for restaurant management where admins are able to manage users and products, while waiters and chefs can tabke, see and complete orders.", + "link": "https://github.com/thatmare/Queen-pattys", + "image": "/queen-pattys.webp", + "alt": "Queen Patty's login page", + "skills": ["React", "TypeScript", "Tailwind CSS", "Jest"] + }, + { + "title": "md-links-thatmare", + "description": "Library and a command-line interface to analyze the links in Markdown files.", + "link": "https://www.npmjs.com/package/md-links-thatmare", + "image": "/npm.webp", + "alt": "npm", + "skills": ["Node.js", "JavaScript", "Axios", "Jest"] + }, + { + "title": "Be My Friend", + "description": "Web app that serves as a social network for homeless animals or animals caregivers who are looking for adoption.", + "link": "https://github.com/thatmare/Be-My-Friend", + "image": "/be-my-friend.webp", + "alt": "Be My Friend login page", + "skills": ["JavaScript", "Firebase", "CSS", "Jest"] + } + ] +} \ No newline at end of file diff --git a/src/app/favicon.ico b/src/app/favicon.ico index 718d6fe..70d0981 100644 Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ diff --git a/src/app/globals.css b/src/app/globals.css index 875c01e..925580e 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -2,32 +2,11 @@ @tailwind components; @tailwind utilities; -:root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } -} - body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); + @apply bg-slate-900; + @apply text-moody-blue-200/60; } -@layer utilities { - .text-balance { - text-wrap: balance; - } -} +::selection { + background: bg-moody-blue-500; +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3314e47..c73f475 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,12 +1,23 @@ import type { Metadata } from "next"; -import { Inter } from "next/font/google"; import "./globals.css"; -const inter = Inter({ subsets: ["latin"] }); +const ogUrl = process.env.NEXT_OG; export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Marissa Vargas", + icons: "/favicon.ico", + description: + "I find creativity in building digital products as a frontend developer.", + openGraph: { + images: [ + { + url: `${ogUrl}`, + width: 1200, + height: 630, + alt: "Marissa Vargas Sánchez Frontend Developer", + }, + ], + }, }; export default function RootLayout({ @@ -16,7 +27,7 @@ export default function RootLayout({ }>) { return ( - {children} + {children} ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index b81507d..dc2f19c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,113 +1,22 @@ -import Image from "next/image"; +import { DM_Sans } from "next/font/google"; +import Intro from "./components/Intro"; +import About from "./components/About"; +import Jobs from "./components/Jobs"; +import Projects from "./components/Projects"; + +const dm = DM_Sans({ + subsets: ["latin"], +}); export default function Home() { return ( -
-
-

- Get started by editing  - src/app/page.tsx -

- -
- -
- Next.js Logo -
- -
); } diff --git a/tailwind.config.ts b/tailwind.config.ts index e9a0944..8f24af7 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -13,6 +13,21 @@ const config: Config = { "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, + colors: { + "moody-blue": { + "50": "#edefff", + "100": "#dee2ff", + "200": "#c4caff", + "300": "#a0a7ff", + "400": "#7371ff", + "500": "#695bf9", + "600": "#5a3dee", + "700": "#4d2fd3", + "800": "#3f29aa", + "900": "#362986", + "950": "#22184e", + }, + }, }, }, plugins: [],