Project Overview

Portfolio UI 18 is a static-first Next.js App Router application. It has one main page (/) composed of several sections: a hero with profile and CTA, experience timeline, tech stack grid, project cards, and a contact form that submits to Web3Forms (no custom backend). The app uses Framer Motion for animations, react-icons (Tabler) for icons, Geist fonts, and Tailwind CSS 4 for styling. All content is driven by a single data file (src/data/portfolio.ts), making it easy to customize for your own profile while keeping the codebase minimal and educational.

Features & Functionality

Technology Stack

• Framework: Next.js 16 (App Router, Turbopack)
• UI: React 19, TypeScript 5
• Styling: Tailwind CSS 4, CSS variables (primary/secondary/accent)
• Fonts: Geist Sans & Geist Mono (next/font/google)
• Animation: Framer Motion
• Icons: react-icons (Tabler: Tb*)
• Utilities: clsx, tailwind-merge (cn())
• Third-party: @next/third-parties (Google Analytics), Web3Forms (contact form)
• Tooling: ESLint (eslint-config-next), TypeScript strict mode

Project Structure

portfolio-ui-18/
├── public/
│   └── icons/
│       └── icon.svg                 # Favicon / app icon
├── src/
│   ├── app/
│   │   ├── layout.tsx               # Root layout, metadata, fonts, Navbar/Footer
│   │   ├── page.tsx                 # Home page composing all sections
│   │   ├── globals.css              # Tailwind + CSS variables + scrollbar
│   │   ├── robots.ts                # Dynamic robots.txt
│   │   └── sitemap.ts               # Dynamic sitemap.xml
│   ├── components/
│   │   ├── layout/
│   │   │   ├── Navbar.tsx           # Fixed nav, scroll state, mobile menu
│   │   │   └── Footer.tsx           # Copyright + social links
│   │   ├── sections/
│   │   │   ├── Hero.tsx             # Hero with profile and CTAs
│   │   │   ├── Experience.tsx       # Timeline of jobs
│   │   │   ├── TechStack.tsx        # Skill categories grid
│   │   │   ├── Projects.tsx         # Projects grid + SectionHeading
│   │   │   └── Contact.tsx           # Contact form (Web3Forms)
│   │   ├── ui/
│   │   │   ├── SectionHeading.tsx   # Reusable section title + subtitle
│   │   │   ├── ProjectCard.tsx      # Single project card
│   │   │   └── SocialIcons.tsx      # Social link icons (hero/footer)
│   │   └── seo/
│   │       └── StructuredData.tsx   # JSON-LD Person, WebSite, ProfilePage
│   ├── data/
│   │   └── portfolio.ts             # Single source of truth (profile, experience, projects, skills, social)
│   └── lib/
│       └── utils.ts                 # cn() for class names
├── next.config.ts
├── tsconfig.json
├── eslint.config.mjs
└── package.json

Getting Started

Prerequisites

• Node.js 18+ (recommended: LTS)
• npm (or yarn/pnpm)

Install & Run

# Clone the repository (or use your fork)
git clone <your-repo-url>
cd portfolio-ui-18

# Install dependencies
npm install

# Development (with Turbopack)
npm run dev

# Build for production
npm run build

# Start production server
npm start

• Dev: http://localhost:3000
• Lint: npm run lint

Optional: Webpack dev server

npm run dev:webpack

Environment Variables

The app works without any env vars (suitable for a static demo). For full functionality (analytics, contact form), add the following.

Required for contact form (Web3Forms)

1. Go to Web3Forms.
2. Enter your email and get an Access Key.
3. Create a file in the project root:

.env.local (never commit this file; it’s in .gitignore):

# Web3Forms: get your key at https://web3forms.com
NEXT_PUBLIC_WEB3FORMS_KEY=your_access_key_here

Without this key, the form still renders but submissions will fail (the code falls back to "ACCESS_KEY_HERE", which is invalid).

Optional: Google Analytics

1. Create a GA4 property and get your Measurement ID (e.g. G-XXXXXXXXXX).
2. Add to .env.local:

# Google Analytics 4 Measurement ID
NEXT_PUBLIC_GOOGLE_ANALYTICS=G-XXXXXXXXXX

If unset, the GA script is not loaded (no errors; analytics simply disabled).

Summary

Use .env.example in the repo (without real values) so others know what to set:

# .env.example
NEXT_PUBLIC_WEB3FORMS_KEY=
NEXT_PUBLIC_GOOGLE_ANALYTICS=

Routes & API

App routes (Next.js)

There are no custom API routes in this project. All data is static (from portfolio.ts).

External API: Web3Forms (contact form)

The contact form is a client-side fetch to Web3Forms:

• Endpoint: https://api.web3forms.com/submit
• Method: POST
• Body: JSON with access_key, name, email, message, subject

Example (conceptually what the app sends):

const response = await fetch("https://api.web3forms.com/submit", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    access_key: process.env.NEXT_PUBLIC_WEB3FORMS_KEY || "ACCESS_KEY_HERE",
    name: formData.name,
    email: formData.email,
    message: formData.message,
    subject: `New Contact Form Submission from ${formData.name}`,
  }),
});
const data = await response.json();
// data.success === true means delivery succeeded

Components Walkthrough

Layout components

• Navbar (components/layout/Navbar.tsx): Fixed header, in-page links (#about, #experience, #projects, #contact), scroll-based background, active section via IntersectionObserver, mobile menu with Framer Motion.
• Footer (components/layout/Footer.tsx): Copyright year, optional tagline, SocialIcons (same data as hero).

Section components

• HeroSection: Intro line, name, role, about text, profile image (Next Image), SocialIcons, “Projects” (smooth scroll) and “Resume” (link) buttons.
• ExperienceSection: Reads portfolioData.experience, renders a timeline with role, company, period, description list.
• TechStack: Reads portfolioData.skills (mobile, libraries, web, tools), renders SkillCategory cards.
• ProjectsSection: Reads portfolioData.projects, renders a grid of ProjectCard.
• ContactSection: Contact info (email, location from data) + form; on submit calls Web3Forms, then shows success/error state.

UI components

• SectionHeading: Title (gradient) + optional subtitle + underline. Props: title, subtitle?, className?, center?.
• ProjectCard: Thumbnail, title, description, tech tags, GitHub/live links. Props: project, index (for animation).
• SocialIcons: Renders social links from portfolioData.social; variant: "default" (hero circles) or "footer" (compact).

SEO component

• StructuredData: Injects JSON-LD for Person, WebSite, and ProfilePage (used in layout.tsx inside <head>).

Reusing Components in Other Projects

1. Copy the component and its dependencies

• Copy the component file (e.g. SectionHeading.tsx).
• Copy src/lib/utils.ts (for cn) and ensure clsx + tailwind-merge are installed.
• If the component uses portfolioData, either copy `s