Portfolio-Website-v2

An improvement of my old portfolio website, built using NextJS and Tailwind to showcase my projects and designs, this project uses ISR(Incremental Static Regeneration) to increase website performance while reducing server load.

Resources

• Github API
• Dribbble v2 API
• Animate on Scroll
• Typewriter Effect
• Glide JS
• NextJS v13
• Next Themes
• TS Particles
• Nodemailer
• React Google ReCAPTCHA

Key Features

1. Direction Aware Card Hover
2. Scroll Animations using AoS
3. Carousel using Glide JS
4. Responsive Layout
5. Themes Switch (light and dark mode) using next-themes
6. ISR (revalidates every 60 seconds)
7. Dynamic Web using API
8. 404 Page with particle animations (Recently added)
9. Contact Form integration using nodemailer, with ReCAPTCHA v2 (Recently added)

Preview Image

Installation and Setup

1. Clone this repository

git clone https://github.com/ervin-sungkono/Portfolio-Website-v2.git

2. Setup env variables

cp .env.example .env

Variable	Description
DRIBBBLE_TOKEN	Dribbble API token, get it here
GITHUB_USERNAME	Your Github username
GITHUB_TOKEN	Your Github API token(optional), get it here
SECRET_TOKEN	Secret token for on-demand ISR using /api/revalidate?secret={SECRET_TOKEN} route
SITE_URL	Your site URL
EMAIL	Your email for nodemailer
EMAIL_PASS	Your email's password for nodemailer, see how to get it here for gmail
NEXT_PUBLIC_RECAPTCHA_KEY	Your ReCAPTCHA site key
RECAPTCHA_SECRET	Your ReCAPTCHA secret, register it here

3. Install dependency

npm install

4. Run the app

npm run dev

This project is deployed using Vercel, click here to see the result.