This is my portfolio website designed and developed by me to show case my projects and coding skills.
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vite - Frontend tooling
- React - JS UI framework
- Typescript - Typed JS
- Tailwind - CSS framework
- Framer Motion - React animations library
- react-i18next - Internationalization framework for React / React Native
Throughout the development of my portfolio, I gained valuable insights in several key areas:
-
Internationalization: By integrating React i18next, I learned how to make my portfolio easily adaptable to English and Portuguese, enabling a seamless experience for a larger audience.
-
Component Style Variants: I designed flexible and responsive components using the Tailwind framework, and by leveraging Tailwind merge and TypeScript's Record type, I learned to dynamically handle different styles based on props, allowing me to reuse components efficiently across my portfolio.
-
Animations with Tailwind and Framer Motion: I explored the power of animations in creating an engaging user experience. Using Tailwind, I applied subtle yet effective transitions. Framer Motion enhanced this further with advanced effects like reveal animations, staggered text, mouse-triggered 3D tilt card, scroll-triggered stacked cards, and dynamic hide/show behavior for the navbar on scroll. These animations brought my portfolio to life, adding a modern touch and smooth transitions.
I enjoy exploring 3D design in my free time by learning about tools like Blender and Spline to create 3D content. I'm also learning WebGL and Three.js to bring 3D experiences to the web. My goal is to build an immersive 3D website eventually.
- Stacked Cards with Sticky Positioning and a Dash of Sass
- Corey Ginnivan portfolio
- 5 - Simplify Button Styling for All Possible Variants - Problem
- React Localization - Internationalize with i18next
- Localization In React - Make Your Websites International
- React i18next (Complete Tutorial)
- Build a Smooth Scroll Cards Parallax with Framer Motion and Next.js
- Making a CSS Only Infinite Text Marquee
- Staggered Text Animation with React and Framer Motion
- On-Scroll Reveal Animation with React & Framer Motion
- Complex Animations with Framer Motion & React || useAnimate Hook
- Mouse Hover Tilt Card Effect || React, Framer Motion & Tailwind CSS
- Narrowing - Discriminated Unions
- Hide Navigation on Page Scroll || Framer Motion useMotionValueEvent