Portfolio Website V2

Portfolio Website V2 is an open-source Next.js 13 portfolio template that uses Tailwind CSS and Incremental Static Regeneration (ISR) to display projects and designs with minimal server load. It pulls data from the GitHub REST API and the Dribbble v2 API, and comes with a contact form protected by ReCAPTCHA v2.

What is Portfolio Website V2?

Portfolio Website V2 is a portfolio website template built by Ervin Sungkono, intended for developers and designers to present their work. The input is configuration via environment variables—such as a GitHub username, Dribbble API token, and ReCAPTCHA keys—and the output is a statically generated site with per-page revalidation every 60 seconds. It runs on Next.js v13 and is deployed to Vercel, as shown by the live demo link. The template is open source and available for cloning from GitHub.

Key Features

• Incremental Static Regeneration (ISR) — Pages revalidate every 60 seconds, reducing server load while keeping content fresh; an on-demand revalidation route /api/revalidate with a secret token is also provided.
• Dynamic GitHub integration — Fetches repositories from the GitHub REST API using GITHUB_USERNAME and an optional GITHUB_TOKEN for authenticated requests.
• Dribbble portfolio integration — Retrieves shots from the Dribbble v2 API using DRIBBBLE_TOKEN, letting designers display their latest work.
• Light/dark theme switching — Uses next-themes to toggle between light and dark modes, with a responsive layout that adapts to any screen size.
• Contact form with Nodemailer and ReCAPTCHA v2 — Sends emails via Nodemailer using EMAIL and EMAIL_PASS environment variables, while NEXT_PUBLIC_RECAPTCHA_KEY and RECAPTCHA_SECRET handle spam protection.
• Scroll animations with AoS — Animates elements on scroll using the Animate on Scroll library.
• Carousel with Glide JS — Displays content in a lightweight, touch-friendly slider.
• Direction-aware card hover — Cards respond to mouse entry direction with a 3D tilt effect.
• 404 page with particle animations — Uses the TS Particles library to render an animated background on the not-found page.
• Tech stack — Built with Next.js 13 and Tailwind CSS; other libraries include react-google-recaptcha and typewriter-effect for typed headings.

Who should use Portfolio Website V2?

• Front-end developers who want a ready-made portfolio that automatically lists GitHub repositories without manual updates.
• UI/UX designers who want to embed a Dribbble shot feed and show design work in a clean, responsive layout.
• Freelancers and job seekers who need a professional personal site with a working contact form, theme toggle, and performance optimizations like ISR.

What can you do with Portfolio Website V2?

• Developers: Showcase GitHub projects by setting GITHUB_USERNAME, and the template will fetch and display repos with their metadata.
• Designers: Connect a Dribbble account via DRIBBBLE_TOKEN to pull shot thumbnails and titles into a carousel.
• Site owners: Add a contact form that delivers messages to an inbox via Nodemailer and blocks bots with ReCAPTCHA v2.
• Hobbyists: Customize the light/dark theme, adjust revalidation intervals, and extend the 404 page with particle effects.

How does Portfolio Website V2 work?

The template uses a static-first approach: at build time, GitHub and Dribbble data are fetched and stored as static props, then ISR revalidates those pages every 60 seconds. For immediate updates, you can trigger /api/revalidate with the SECRET_TOKEN environment variable. To run it locally, clone the repository, copy .env.example to .env, fill in the required variables, then run npm install and npm run dev.

FAQ

What environment variables are required?

You need DRIBBBLE_TOKEN, GITHUB_USERNAME, SECRET_TOKEN, SITE_URL, EMAIL, EMAIL_PASS, NEXT_PUBLIC_RECAPTCHA_KEY, and RECAPTCHA_SECRET. The optional GITHUB_TOKEN is only needed for higher GitHub API rate limits.

How do I get a Dribbble API token?

Apply for access at the Dribbble developer portal (developer.dribbble.com/v2) and set the resulting token as DRIBBBLE_TOKEN in your .env file.

Can I change the revalidation interval?

Yes, the default ISR revalidation is set to 60 seconds; you can modify the revalidate value in the page/component that calls the APIs. The on-demand revalidation route also lets you update content immediately.

Does the template support dark mode?

Yes, via next-themes. A theme switch toggles between light and dark modes, and the preference can be persisted.

Is there any server-side cost?

Because the site uses ISR, pages are generated at build time and revalidated periodically, so there is no per-request server processing for data fetching. The contact form and revalidation route run as serverless functions when hosted on Vercel.