3D Portfolio Template

A forkable Next.js + Three.js portfolio template for job seekers. Clone, customize, deploy — no private data baked in.

What's in here

• Next.js 12 app with MDX articles
• Three.js scenes (displacement sphere on the home page, WebGL globe in the example project)
• Framer Motion transitions
• Storybook for the component library
• AWS Lambda contact form (optional, env-driven)

Quick start

Requires Node >= 18.0.0 and npm >= 8.6.0.

npm install
cp .env.example .env.local
# edit .env.local — set NEXT_PUBLIC_WEBSITE_URL at minimum
npm run dev

Open http://localhost:4242.

Customization checklist

Before you deploy, replace these placeholders:

Text content

• src/layouts/Home/Profile.js — your bio
• src/layouts/Home/Home.js — meta description, project summaries, URLs
• src/components/Meta/Meta.js — name, twitterHandle
• src/components/Navbar/navData.js — social links
• src/components/Footer/Footer.js — your name
• src/pages/uses/Uses.js — your tools, or delete the route
• src/posts/example-post.mdx — replace with your articles
• src/pages/projects/example-project/ — replace with your case study
• package.json — name, homepage, repository, author
• public/humans.txt — credits
• public/manifest.json — short_name, name

Assets

• public/favicon.*, public/icon-*.png, public/icon.svg — replace icons
• public/site-preview.png, public/social-image.png — add these OG images (1200×675 and 1440×900 recommended; not included in the template)
• src/components/Monogram/Monogram.js — replace the SVG path with your mark
• public/static/ — add article banners and an avatar.jpg (80×80); the template ships this folder empty. Referenced from src/posts/*.mdx frontmatter.

Environment

• .env.example → .env.local with your values
• functions/.env.example → functions/.env if using the contact form

Integrations (optional, delete if unused)

• Fathom analytics in src/pages/_app.page.js — set NEXT_PUBLIC_FATHOM_ID + NEXT_PUBLIC_FATHOM_URL, or strip the loader
• AWS Lambda contact form in functions/ — configure functions/serverless.yml for your AWS account, or delete functions/ and swap Contact.js for a mailto: link

Scripts

npm run dev          # local dev on :4242
npm run build        # production build (requires NEXT_PUBLIC_WEBSITE_URL)
npm run start        # serve production build
npm run lint         # ESLint
npm run storybook    # component library on :9009

Deploy

The template is deploy-target-agnostic. Common paths:

• Vercel — connect the repo, set NEXT_PUBLIC_WEBSITE_URL in the dashboard, done.
• Netlify — use the Next.js runtime plugin, set env vars, done.
• AWS S3 + CloudFront — convert to static export and sync the out/ directory. See the Next.js static export docs.

License

MIT — see LICENSE.