First iteration of my personal portfolio. This site was built with Gatsby, styled with TailwindCSS, and deployed on Netlify.
- Smooth, parallax scrolling and scroll based animation (Locomotion Scroll and Framer Motion)
- Interactive landing page with animations
- Responsive web design
- A working email form submission sent from client-side (EmailJS)
- GatsbyJS
- TailwindCSS
- Framer Motion (animation library for React) + Intersection Observer API
- Locomotive Scroll (smooth scroll libary)
- VantaJS (landing page animation)
- EmailJS (for client-side form submission)
- Performance optimization -> increase page load time and performance
- Optimize SEO
- Learning how to use Framer Motion and Locomotive Scroll to create smooth scroll-based animations - first time using extensive animations and smooth scrolling in any websites I've built.
- Creating an overall design for the website - ended up changing the design and technology stack several times.
- Looking for possible design inspirations and researching how to implement the same functionality in my own site.
- Researching and comparing different tools, technologies, and libraries that ran well with React (GSAP vs Framer Motion, Next vs Gatsby, SASS vs Tailwind, different scroll libraries)
- Learning how to optimize my website for a better Lighthouse performance, accessibility, SEO and best practice scores.
- Testing the website on multiple devices and figuring out how to make the site responsive.
This project took me much longer than expected. Planning and creating a cohesive design probably took the longest amount of time for me. I spent hours looking at other developer's portfolio websites to get a general idea of what I should include and what looks good. I knew I wanted a clean, minimalist website but I was unhappy with many of my initial layouts. Overall, it was a great test of my design and styling skills. It was my first real attempt at making a website truly responsive and I'm happy with how it turned out.
I really enjoyed working with Gatsby for this project. The development process was smooth and it was easy to optimize my website when I was looking to increase my Lighthouse scores. I believe if I only used React, my performance scores would have taken a massive hit. There was a small learning curve figuring out concepts like utilizing Gatsby plugins or importing global CSS but the documentation is well written and informative.
Using Vanilla Javascript libraries was a pain when attempting to implement them into React. This was another time-sink as libraries like GSAP/Scroll Trigger, Locomotive Scroll, VantaJS all required special fine tuning when using with React. Documentation wasn't well covered so it took quite some time to figure out which libraries I wanted to use.
