Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/viniciuscosta89/viniciuscosta89.github.io
My personal website!
https://github.com/viniciuscosta89/viniciuscosta89.github.io
Last synced: about 4 hours ago
JSON representation
My personal website!
- Host: GitHub
- URL: https://github.com/viniciuscosta89/viniciuscosta89.github.io
- Owner: viniciuscosta89
- Created: 2016-06-09T16:22:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-07-31T23:59:46.000Z (4 months ago)
- Last Synced: 2024-08-01T03:03:06.071Z (4 months ago)
- Language: TypeScript
- Homepage: https://viniciuscosta.dev
- Size: 3.75 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Single-page developer portfolio solution
This is a solution to the [Single-page developer portfolio challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/singlepage-developer-portfolio-bBVj2ZPi-x). And is my own website as well!
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
- Receive an error message when the `form` is 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
### Screenshot
### Links
- Solution URL: [https://www.frontendmentor.io/solutions/single-page-frontend-developer-portfolio-astro-react-and-pandacss-4V1qeTfghy](https://www.frontendmentor.io/solutions/single-page-frontend-developer-portfolio-astro-react-and-pandacss-4V1qeTfghy)
- Live Site URL: [https://viniciuscosta89-github-io.vercel.app](https://viniciuscosta89-github-io.vercel.app)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- [pnpm](https://pnpm.io) - Fast, disk space efficient package manager
- [Astro](https://astro.build) - Astro is the all-in-one web framework designed for speed.
- [React](https://reactjs.org/) - JS library
- [Vite](https://vitejs.dev) - Frontend Tooling
- [Panda CSS](https://panda-css.com) - CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience
- [Typescript](https://www.typescriptlang.org) - JavaScript with syntax for types
- [Zod](https://zod.dev) - TypeScript-first schema validation with static type inference
- [React Hook Form](https://www.react-hook-form.com) - Performant, flexible and extensible forms with easy-to-use validation
- [Framer Motion](https://www.framer.com/motion/) - A production-ready motion library for React
- [reaptcha](https://github.com/sarneeh/reaptcha) - Google reCAPTCHA v2 for React
### What I learned
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.
### Continued development
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.
### Useful resources
- Documentations from React, Astro, Panda CSS, Vite, Zod, React Hoof Form, Framer Motion and reaptcha.
## Author
- Website - [Vinicius Costa](https://viniciuscosta89-github-io.vercel.app)
- GitHub - [https://github.com/viniciuscosta89](https://github.com/viniciuscosta89)
- Frontend Mentor - [@viniciuscosta89](https://www.frontendmentor.io/profile/viniciuscosta89)