gcolombi / personal-website

This is my portfolio built with Next.js, Typescript, GSAP and Vercel.

Personal website

Introduction · Installation · Tech Stack & Features

Introduction

This is my portfolio built with Next.js, Typescript, GSAP and Vercel.

Installation

Yarn

git clone [e-mail]:gcolombi/personal-website.git project-name
cd project-name
yarn install

NPM

git clone [e-mail]:gcolombi/personal-website.git project-name
cd project-name
npm install

Tech Stack & Features

Framework

• Next.js - React framework for building performant apps with the best developer experience

Language

• TypeScript - TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale

Hosting

• Vercel - Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration

UI

• 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 or ScrambleTextPlugin. If you want to use or deploy it you need to remove CharsInOut, ImplodeExplodeInOut, LinesInOut and ShuffleTextInOut components because they use them, as well as the actual gsap package and npmrc file. Install gsap 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

Form

• Client side

  • react-hook-form - Performant, flexible and extensible forms with easy-to-use validation
  • react-toastify - Allows you to add notifications to your app
  • yup - 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 validation
  • react-google-recaptcha-v3 - React library for integrating Google ReCaptcha V3 to your App. To use react-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

Sitemap

• next-sitemap - Sitemap generator for next.js. Generate sitemap(s) and robots.txt for all static/pre-rendered/dynamic/server-side pages.

Internationalization

• next-translate-routes - Translated routing and more for Next using Next regular file-base routing system.

Hooks

• 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 changes
• useIsMounted - A React hook to check if the component is mounted
• useIsomorphicLayoutEffect - 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 modals
• useScrollbar - A React helper hook to observe scroll position
• useWindowLocation - This React Hook retrieves window location
• useWindowSize - This React Hook retrives window dimensions also works on resize