This is a solution to the Single-page developer portfolio challenge on Frontend Mentor. And is my own website as well!
Users should be able to:
- Receive an error message when the
formis submitted if:- Any field is empty
- The email address is not formatted correctly
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Solution URL: https://www.frontendmentor.io/solutions/single-page-frontend-developer-portfolio-astro-react-and-pandacss-4V1qeTfghy
- Live Site URL: https://viniciuscosta89-github-io.vercel.app
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- pnpm - Fast, disk space efficient package manager
- Astro - Astro is the all-in-one web framework designed for speed.
- React - JS library
- Vite - Frontend Tooling
- Panda CSS - CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience
- Typescript - JavaScript with syntax for types
- Zod - TypeScript-first schema validation with static type inference
- React Hook Form - Performant, flexible and extensible forms with easy-to-use validation
- Framer Motion - A production-ready motion library for React
- reaptcha - Google reCAPTCHA v2 for React
It was my first time developing with Panda CSS. Since Stitches isn't maintained anymore and styled-components doesn't work properly with Astro, I need an alternative for the CSS-in-JS approach.
I like to use Composition Pattern for my components since some weeks ago. It's a good approach to avoid "prop drilling". I want to dive deeper into the composition pattern. And take a look if Panda CSS is the better solution for CSS-in-JS to work with Astro.
- Documentations from React, Astro, Panda CSS, Vite, Zod, React Hoof Form, Framer Motion and reaptcha.
- Website - Vinicius Costa
- GitHub - https://github.com/viniciuscosta89
- Frontend Mentor - @viniciuscosta89