3D Portfolio

3D Portfolio is an open-source developer portfolio template that renders a fully interactive 3D keyboard in Spline, where each keycap represents a skill the developer wants to showcase. Built by Naresh Khatri, this Next.js 14 portfolio combines a space-themed canvas with GSAP and Framer Motion animations, making it a striking alternative to standard single-page portfolio layouts.

What is 3D Portfolio?

3D Portfolio is an open-source, MIT-licensed portfolio template that turns a developer's personal data, projects, and skills into a single-page animated website. It runs on Next.js 14, React 18, and TypeScript, with Tailwind CSS, Shadcn UI, and Aceternity UI for styling. The template takes input from centralized TypeScript data files — src/data/config.ts for personal info, src/data/projects.tsx for projects, and src/data/constants.ts for skills and experience — and outputs a fully usable portfolio with a contact form, light/dark mode, and optional realtime features. It is designed for one-click deployment on Vercel.

What makes 3D Portfolio stand out?

• Interactive 3D keyboard — A custom Spline keyboard sits at the hero; each keycap is a skill, and hovering or pressing a key reveals that skill's title and description.
• Animation stack — GSAP and Framer Motion drive scroll, hover, and reveal animations, while Lenis smooths the page scroll.
• Space theme — Floating particles on a dark canvas create the cosmic backdrop, with full light and dark mode switching handled by next-themes.
• Contact form — Uses Resend for email delivery; requires a RESEND_API_KEY environment variable to function.
• Optional realtime features — Setting NEXT_PUBLIC_WS_URL enables live cursors, online presence, and visitor chat through a separate backend API that is not open source.
• Optional analytics — Umami analytics can be plugged in via UMAMI_DOMAIN and UMAMI_SITE_ID environment variables.
• Single-file content editing — All personal details live in src/data/config.ts, so rebranding the site means editing one file plus the projects and constants files.
• MIT license — Free to use with a requested credit/link back to the original repository; deployed copies report only their own hostname to the author, with no visitor, page, or referrer data.

Who should use 3D Portfolio?

• Software developers who want a portfolio that stands out with real-time 3D and animation rather than static sections, and are comfortable editing TypeScript data files.
• Frontend developers who use React and Tailwind will find the component structure familiar and can restyle sections quickly with shadcn/ui primitives.
• Tech job seekers who want a memorable personal site with a working contact form and social links to make reaching out easy for recruiters.
• Developers building a personal brand can keep the distinct space theme or modify the Spline scene to match their visual identity.

What can you do with 3D Portfolio?

• Showcase skills on the keyboard — Edit the SKILLS record in src/data/constants.ts and the Spline keycap objects so each key displays your own skill names, logos, and descriptions.
• Present projects with context — In src/data/projects.tsx, add project screenshots, descriptions, and tech stacks, and the template lays them out in an animated project section.
• Accept contact form submissions — Set a RESEND_API_KEY so visitors can email you directly from the contact form.
• Add realtime presence — Set NEXT_PUBLIC_WS_URL to activate live cursors, online presence, and chat, turning the portfolio into a social experience.

How does 3D Portfolio work?

After cloning the repository, install dependencies with pnpm (or npm/yarn), copy .env.example to .env.local, and set RESEND_API_KEY. Run pnpm dev to start the Next.js development server on localhost:3000. To update the 3D keyboard, import public/assets/skills-keyboard.spline into the Spline editor, unhide keycap objects, change their logos, rename each keycap to match the skill name in src/data/constants.ts, and re-export. The SkillNames enum, SKILLS record, and Spline keycap names must stay synced for the interactions to work.

Pros and cons

• Pros: MIT-licensed and free to use; one-click Vercel deployment; responsive across screen sizes; built-in light and dark mode; centralized config for quick rebranding.
• Cons: The realtime backend is not open source, so live cursor/chat features depend on the author's private server; editing the keyboard requires the Spline editor and careful name synchronisation; the template is a single page, so it does not include a blog or multi-page layout out of the box.

Pricing

3D Portfolio is free and open source under the MIT License. There is no paid tier; the README only requests a credit or link back to the original repository when you use it.

FAQ

Is 3D Portfolio free to use?

Yes. The template is open source under the MIT License, and the README asks for a credit or link back to the original repository. A deployed copy reports its own hostname once per browser to the author — no visitor, page, or referrer data is collected.

How do I update the skills on the 3D keyboard?

Edit the SKILLS record in src/data/constants.ts and the Spline file public/assets/skills-keyboard.spline using the Spline editor. Each keycap object must be named to match the skill's name field in the code, and the SkillNames enum must include the same keys.

Does the contact form work out of the box?

No. The contact form uses Resend, so you must provide a RESEND_API_KEY in your .env.local file or Vercel environment variables. Without that key, the form cannot send emails.

Can I deploy this to Vercel easily?

Yes. The README includes a deploy button linked to Vercel that clones the repository, and the deployment guide explains connecting a GitHub repo, adding environment variables, and getting automatic deployments on every push.

Does the template support dark mode?

Yes. Light and dark mode are built in using next-themes, with a theme toggle in the header. Switching themes also triggers the cheeky disclaimer toasts mentioned in the README.