DEV Community

Cover image for Devfolio — I built 2 animated Next.js developer portfolio templates (with Three.js, working contact forms, and zero boilerplate hell)
Tariq Hassan Tiaaf
Tariq Hassan Tiaaf

Posted on

Devfolio — I built 2 animated Next.js developer portfolio templates (with Three.js, working contact forms, and zero boilerplate hell)

I got tired of rebuilding my portfolio from scratch every time I wanted to update it, so I built something reusable instead — and turned it into a proper product: Devfolio, two production-ready animated portfolio templates for developers.

The stack:

  • Next.js 14 (App Router) + TypeScript
  • Framer Motion for scroll-triggered animations
  • Three.js for interactive 3D tilt cards and scene components
  • Tailwind CSS with dark mode built in

Two templates, two moods:

  • Version 1 goes all-in on personality — aurora fields, liquid backgrounds, ambient motion, and a custom glowing cursor with follower effects
  • Version 2 strips it back to clean, minimalist, still polished — for devs who want the animation quality without the visual noise

What makes it actually usable, not just a demo:

  • The contact form isn't fake — it's backed by a real API route
  • Everything (name, bio, projects, skills, resume, socials) is edited from a single content.ts file, so there's no hunting through components to change your info
  • Fully responsive, hot-reload dev experience out of the box

Who it's for: developers who want their portfolio to actually reflect their skill level, freelancers who need something that signals "high-value" at a glance, or anyone just tired of static one-pagers.

Both templates are up on Gumroad: https://t1aaf.gumroad.com/l/hzgati

Happy to talk through how the Three.js tilt cards or the cursor-follower effect were built if anyone's interested.

Top comments (0)