Web Portfolio Template

A free, open-source portfolio website for engineers, designers, makers, and 3D artists.
Dark theme. Animated. Interactive 3D model viewers. Fully responsive.
Zero cost to deploy.

Live Demo · Quick Start · Customization · Deploy · Report Bug

What You Get

Section	Description
Hero	Animated name reveal, social links, CV download, 3D image carousel
About Me	Flip-card grid + bio + color-coded skill pills
Projects	Filterable project cards with detail overlays
CAD Designs	Embedded Sketchfab 3D model viewers
Poly Models	ArtStation / external portfolio links
Library	Full media gallery with category filters, lightbox, video support
Footer	Contact info, social links, copyright

Screenshots (click to expand)

About Section

Projects

3D Model Viewer (Sketchfab)

Library / Gallery

Tech Stack

Layer	Tool
Framework	Next.js 16 (App Router, TypeScript)
Styling	Tailwind CSS 4
3D Rendering	Three.js + @react-three/fiber + Drei
Animation	Framer Motion
3D Embeds	Sketchfab (free tier)
Fonts	Space Grotesk, Inter, JetBrains Mono (via `next/font`)

Quick Start

Prerequisites

Node.js 18+ installed
Git installed

1. Clone or Fork

# Option A: Fork this repo on GitHub, then clone your fork
git clone https://github.com/YOUR-USERNAME/Web-Portfolio-Template.git
cd Web-Portfolio-Template

# Option B: Clone directly
git clone https://github.com/Murathanx12/Web-Portfolio-Template.git
cd Web-Portfolio-Template

2. Install Dependencies

npm install

3. Start the Dev Server

npm run dev

Open http://localhost:3000 — you should see the template with placeholder content.

4. Make It Yours

Edit the data files in src/data/ — that's where all your content lives. No need to touch the components unless you want to change the layout. See the Customization Guide below.

5. Deploy

npm run build   # make sure it builds clean

Then push to GitHub and connect to Vercel (free). See Deploy for Free.

Customization Guide

All your content lives in 5 data files. You rarely need to touch the components.

File Map

File	What It Controls
`src/data/projects.ts`	Projects + Personal Info — your name, bio, social links, and all project entries
`src/data/about.ts`	About Section — flip card highlights and skills list
`src/data/cad.ts`	CAD Designs — Sketchfab 3D model embeds
`src/data/gallery.ts`	Library — all gallery images and videos
`src/data/polymodels.ts`	Poly Models — ArtStation/external 3D art links

Step-by-Step Personalization

1. Update Your Identity (`src/data/projects.ts`)

export const personalInfo = {
  name: "Jane Doe",                              // Your full name
  title: "Mechanical Engineer & 3D Artist",      // Your title
  tagline: "I design and build things.",          // One-liner
  bio: "Your bio goes here...",                   // 2-3 paragraphs
  email: "jane@example.com",                     // Contact email
  links: {
    linkedin: "https://linkedin.com/in/janedoe",
    github: "https://github.com/janedoe",
    artstation: "https://www.artstation.com/janedoe",
    sketchfab: "https://sketchfab.com/janedoe",
    grabcad: "https://grabcad.com/janedoe",
    youtube: "https://www.youtube.com/@janedoe",
  },
};

2. Update the Navbar Initials (`src/components/global/Navbar.tsx`)

Find the line that says YN and change it to your initials.

3. Update Page Metadata (`src/app/layout.tsx`)

export const metadata: Metadata = {
  title: "Jane Doe — Mechanical Engineer & 3D Artist",
  description: "Portfolio of Jane Doe — robotics, CAD, and 3D art.",
};

4. Add Your Projects (`src/data/projects.ts`)

Each project is an object in the projects array. Copy an existing entry and modify it. The template includes 5 sample projects to show you the format.

5. Add Your Images

Place your images in the public/ directory:

public/
├── images/
│   ├── hero/           ← Hero carousel images (recommended: 8 images)
│   ├── gallery/
│   │   └── <category>/ ← Gallery images sorted by project/category
│   ├── video-thumbs/   ← Thumbnail images for videos
│   └── cad/            ← CAD model thumbnails
├── videos/             ← MP4 video files
└── cv.pdf              ← Your resume/CV

Image tips:

Use JPG at 80% quality, 1200-1600px wide
Compress videos to 720p with ffmpeg or HandBrake
Keep total repo size under 500MB for fast deploys

6. Add 3D Models (`src/data/cad.ts`)

Upload your models to Sketchfab (free), then:

{
  id: "my-robot",
  title: "My Competition Robot",
  sketchfabId: "abc123def456...",  // From the Sketchfab URL
  // ... other fields
}

7. Customize Skills (`src/data/about.ts`)

Add, remove, or recategorize skills. Categories control the color-coding:

mechanical — teal
software — blue
design — purple
tools — amber

Deploy for Free

Vercel (Recommended)

The easiest option — automatic deploys on every push.

Push your repo to GitHub
Go to vercel.com and sign in with GitHub
Click "New Project" → import your repo
Click Deploy — done

Cost: $0 on the Hobby plan (unlimited personal projects).

Custom domain: You can connect your own domain in Vercel settings. Domains cost ~$10-15/year from providers like Namecheap, Cloudflare, or Google Domains.

Netlify

Push to GitHub
Go to netlify.com → New site from Git
Build command: npm run build
Publish directory: .next

Cost: $0 on the free tier.

Cloudflare Pages

Push to GitHub
Go to Cloudflare Pages
Connect your repo, set build command to npm run build

Cost: $0 on the free tier.

Self-Hosted

npm run build
npm run start    # Runs on port 3000

Use with Nginx, Caddy, or any reverse proxy.

Paid Upgrades (Optional)

The template is fully functional for free. Here are optional upgrades if you want more:

Upgrade	Cost	What You Get
Custom domain	~$10-15/year	`yourname.com` instead of `yourname.vercel.app`
Vercel Pro	$20/month	Analytics, more bandwidth, team features
Sketchfab Pro	$15/month	Private models, download tracking, custom viewer branding
Email service	$0-5/month	Contact form via Resend, SendGrid, or Formspree
CMS integration	$0-29/month	Manage content via Sanity, Contentful, or Notion
Analytics	$0-9/month	Vercel Analytics, Plausible, or PostHog

Adding a Contact Form

Want a working contact form instead of just an email link?

Free option — Formspree:

Sign up at formspree.io
Create a form, get your endpoint
Add a <form action="https://formspree.io/f/YOUR_ID" method="POST"> to the footer

Code option — API Route + Resend:

// src/app/api/contact/route.ts
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: Request) {
  const { name, email, message } = await req.json();
  await resend.emails.send({
    from: 'Portfolio <noreply@yourdomain.com>',
    to: 'you@example.com',
    subject: `Portfolio Contact: ${name}`,
    text: `From: ${name} (${email})\n\n${message}`,
  });
  return Response.json({ success: true });
}

Adding a Blog

Want to write articles alongside your portfolio?

Option 1 — MDX (free, in-repo):

Install @next/mdx
Create src/app/blog/[slug]/page.mdx files
Write in Markdown with React components

Option 2 — Headless CMS:

Sanity — free tier with visual editor
Notion as CMS — use the Notion API to pull content

Adding Analytics

npm install @vercel/analytics

// src/app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
// Add <Analytics /> inside your <body>

Project Structure

├── src/
│   ├── app/
│   │   ├── layout.tsx          ← Root layout, metadata, fonts
│   │   ├── page.tsx            ← Main page (all sections)
│   │   └── globals.css         ← Tailwind + custom theme
│   ├── components/
│   │   ├── hero/               ← Hero section, social icons, 3D carousel
│   │   ├── about/              ← About section, flip cards, skill pills
│   │   ├── projects/           ← Project cards and detail views
│   │   ├── cad/                ← Sketchfab 3D model viewers
│   │   ├── polymodels/         ← ArtStation model links
│   │   ├── library/            ← Gallery with filters and lightbox
│   │   ├── global/             ← Navbar, scroll animations, shared UI
│   │   └── Footer.tsx          ← Footer with contact info
│   ├── data/                   ← YOUR CONTENT LIVES HERE
│   │   ├── projects.ts         ← Projects + personal info
│   │   ├── about.ts            ← Flip cards + skills
│   │   ├── cad.ts              ← CAD model entries
│   │   ├── gallery.ts          ← Gallery items
│   │   └── polymodels.ts       ← Poly model links
│   └── hooks/                  ← Custom React hooks
├── public/
│   ├── images/                 ← All images (hero, gallery, thumbnails)
│   ├── videos/                 ← Video files
│   └── cv.pdf                  ← Your resume
├── docs/                       ← Screenshots for this README
├── package.json
├── next.config.ts
├── tsconfig.json
└── tailwind + postcss configs

FAQ

Do I need to know React/Next.js to use this?

Not really. All your content goes in the src/data/ files, which are plain TypeScript objects. If you can edit JSON, you can use this template. The components handle all the rendering.

Can I remove sections I don't need?

Yes. Open src/app/page.tsx and comment out or remove the section components you don't want. For example, if you don't have CAD models, remove the <CADSection /> line.

How do I change the accent color?

The cyan accent is defined in src/app/globals.css as a CSS variable. Search for --cyan or #00f0ff and change it to your preferred color.

Can I use this for a non-engineering portfolio?

Absolutely. The template works for any visual portfolio — photography, architecture, game dev, industrial design, etc. Just change the section labels and data.

Is the Sketchfab viewer required?

No. If you don't have 3D models on Sketchfab, just remove the CAD section from page.tsx or leave the cadModels array empty.

How do I add more social links?

Edit src/data/projects.ts → personalInfo.links to add new URLs. Then add the corresponding icon in src/components/hero/SocialIcons.tsx. SVG icons for most platforms can be found at simpleicons.org.

Showcase

Built something with this template? Open a PR to add your site here!

Site	Author	Description
murathan.info	Murathan Abdullaev	The original — robotics engineer & 3D artist
Your site here	Your name	What you do

Contributing

Contributions are welcome! See CONTRIBUTING.md for guidelines.

Found a bug? Open an issue
Have an idea? Request a feature
Want to help? Fork, fix, and PR

How to Support This Project

If this template helped you, here's how you can give back:

Star this repo — it helps others find it
Fork it — make it your own
Share it — post on Twitter, Reddit, LinkedIn, Discord
Add your site to the showcase — open a PR
Report bugs or suggest features — open an issue
Contribute code — PRs welcome

License

MIT — use it however you want, for free, forever.

Built by Murathan Abdullaev
If you found this useful, a star goes a long way.

Name		Name	Last commit message	Last commit date
.github		.github
docs		docs
public		public
src		src
.gitignore		.gitignore
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation

Web Portfolio Template

What You Get

Tech Stack

Quick Start

Prerequisites

1. Clone or Fork

2. Install Dependencies

3. Start the Dev Server

4. Make It Yours

5. Deploy

Customization Guide

File Map

Step-by-Step Personalization

1. Update Your Identity (src/data/projects.ts)

2. Update the Navbar Initials (src/components/global/Navbar.tsx)

3. Update Page Metadata (src/app/layout.tsx)

4. Add Your Projects (src/data/projects.ts)

5. Add Your Images

6. Add 3D Models (src/data/cad.ts)

7. Customize Skills (src/data/about.ts)

Deploy for Free

Vercel (Recommended)

Netlify

Cloudflare Pages

Self-Hosted

Paid Upgrades (Optional)

Adding a Contact Form

Adding a Blog

Adding Analytics

Project Structure

FAQ

Showcase

Contributing

How to Support This Project

License

About

Topics

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

1. Update Your Identity (`src/data/projects.ts`)

2. Update the Navbar Initials (`src/components/global/Navbar.tsx`)

3. Update Page Metadata (`src/app/layout.tsx`)

4. Add Your Projects (`src/data/projects.ts`)

6. Add 3D Models (`src/data/cad.ts`)

7. Customize Skills (`src/data/about.ts`)