Introduction · Installation · Tech Stack & Features
This is my portfolio built with Next.js, Typescript, GSAP and Vercel.
Yarn
git clone git@github.com:gcolombi/personal-website.git project-name
cd project-name
yarn install
NPM
git clone git@github.com:gcolombi/personal-website.git project-name
cd project-name
npm install
- Next.js - React framework for building performant apps with the best developer experience
- TypeScript - TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale
- Vercel - Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration
- CSS/SASS/SCSS Modules - CSS architecture containing generic and base style, custom configuration, grid, utilities, mixins etc.
GSAP
- GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser. A great place to get started with GSAP and React is to read GSAP with React, GSAP method gsap.context() and GSAP React Advanced Animation Techniques
Warning This project use a Club GreenSock license which gives access to bonus plugins such as
SplitText
orScrambleTextPlugin
. If you want to use or deploy it you need to removeCharsInOut
,ImplodeExplodeInOut
,LinesInOut
andShuffleTextInOut
components because they use them, as well as the actual gsap package and npmrc file. Installgsap
package without these components or join the Club GreenSock, install the corresponding package using installation steps in the dashboard and use them.
next-themes
- Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing@next/font
- Optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance
-
Client side
react-hook-form
- Performant, flexible and extensible forms with easy-to-use validationreact-toastify
- Allows you to add notifications to your appyup
- Schema builder for runtime value parsing and validation
-
Serve side
- API Routes - The form request is managed by an API route using automatic bodyparsing
- Custom HTML template - Email template with placeholders ready to use
yup
- Schema builder for runtime value parsing and validationreact-google-recaptcha-v3
- React library for integrating Google ReCaptcha V3 to your App. To usereact-google-recaptcha-v3
, you need to create a recaptcha key for your domain, you can get one from here@sendgrid/mail
- SendGrid delivers your emails through a cloud-based email delivery platform. To use Sengrid, you need to sign up here
next-sitemap
- Sitemap generator for next.js. Generate sitemap(s) and robots.txt for all static/pre-rendered/dynamic/server-side pages.
next-translate-routes
- Translated routing and more for Next using Next regular file-base routing system.
useElementSize
- This hook helps you to dynamically recover the width and the height of an HTML element. Dimensions are updated on load, on mount/un-mount, when resizing the window and when the ref changesuseIsMounted
- A React hook to check if the component is mounteduseIsomorphicLayoutEffect
- A React helper hook to schedule a layout effect with a fallback to a regular effect for environments where layout effects should not be used (such as server-side rendering)useLockedScroll
- This React hook blocks scrolling on a page, a good example is when opening modalsuseScrollbar
- A React helper hook to observe scroll positionuseWindowLocation
- This React Hook retrieves window locationuseWindowSize
- This React Hook retrives window dimensions also works on resize