This repository houses the source code for my coding portfolio page! This was made with React and Vite, and is all frontend. This serves as a convenient place to display all of my hiring materials and showcase my projects in one place. Special attention has been made to ensure that this looks very good on all screen sizes. I've made this in a way that I can easily revisit and update it later if need be.
To see the site live, visit the live link in 'Usage.' Otherwise if you'd like to run it locally, you can follow these simple steps:
- Clone the project from GitHub
- In the root directory of the repo, run
npm iin the integrated terminal - Build the dist folder with the custom script
npm run build - Start the Vite server with the command
npm run dev - Don't forget to enter
Ctrl + Cwhen you're done running the server
Link to project: https://jacciarito-portfolio-2024.netlify.app/
When you load the application, you'll be greeted with an aesthetically pleasing background, a picture of myself, a brief description of my career journey, and a dreamy footer. This About Me section is shown in the middle by default. Hovering over each item in the navbar will reveal a dropdown.
Selecting My Story under About will also show the About Me section, and selecting Cover Letter will show my cover letter explaining my experience and personal growth.
Selecting Projects under Portfolio will reveal a fun carousel that displays the projects I'm proudest of, each with a link for their GitHub repo and a link to its deployed site if it has one.
Under the Contact tab, the dropdown will reveal Contact Form and Find me at... When you select Find me at..., the middle will display my email, phone, and links to my GitHub, LinkedIn, and npm profiles. Selecting Contact Form will display a form that when all of the fields have been filled correctly, will directly allow you to contact me. To give the 'Contact Me' form functionality, I enlisted EmailJS to get genuine emails with every form completion, in real time.
Under the Resume tab, the dropdown reveals Skills, Preview, and Download. Selecting Skills will display my skills and learned technologies, categorized by language, frontend, backend, or simply if I'm still learning it. Preview will display a simple PNG of my resume, and Download will open a new tab allowing you to download the full PDF.
MIT
- Footer effect inspired by 'Simple CSS Waves' by Goodkatz
- Carousel effect inspired by 'Card Carousel' by Jonas
