Portfolio Website V2

Overview:

This article discusses an improvement made to an existing portfolio website. The updated website is built using NextJS and Tailwind and is designed to showcase the author's projects and designs. The new version of the website includes various features, such as Direction Aware Card Hover, Scroll Animations using Animate on Scroll, Carousel using Glide JS, Responsive Layout, Themes Switch (light and dark mode), and more. The website also utilizes ISR (Incremental Static Regeneration) to improve performance while reducing server load. Additionally, the author integrates external resources like the Github API, Dribbble v2 API, Typewriter Effect, and TS Particles.

Features:

• Direction Aware Card Hover: Provides an interactive hover effect on cards based on the direction of the mouse movement.
• Scroll Animations using AoS: Implements scroll-based animations using Animate on Scroll library.
• Carousel using Glide JS: Incorporates a carousel feature using Glide JS library.
• Responsive Layout: Ensures that the website is optimized for different screen sizes and devices.
• Themes Switch (light and dark mode) using next-themes: Offers a switch to toggle between light and dark themes.
• ISR (revalidates every 60 seconds): Uses Incremental Static Regeneration to improve website performance by revalidating data every 60 seconds.
• Dynamic Web using API: Utilizes APIs such as the Github API and Dribbble API to fetch and display dynamic data.
• 404 Page with particle animations (Recently added): Includes a customized 404 page with particle animations.
• Contact Form integration using nodemailer, with ReCAPTCHA v2 (Recently added): Integrates a contact form on the website using nodemailer library, with added security measures using ReCAPTCHA v2.

Summary:

The article introduces an improved version of a portfolio website using NextJS and Tailwind. It highlights the key features of the website, such as Direction Aware Card Hover, Scroll Animations using Animate on Scroll, Carousel using Glide JS, and Themes Switch (light and dark mode). The article also provides a step-by-step guide for installing and setting up the website, including the necessary environment variables. Overall, this project offers a visually appealing and performant portfolio website to showcase projects and designs.