NEXUS Portfolio — AI Infrastructure Engineer

A futuristic portfolio website for an AI Infrastructure Engineer, built with Next.js 14 (App Router), Framer Motion, and Three.js.

Tech Stack

• Next.js 14 — App Router, Server Components, dynamic imports
• TypeScript — Full type safety
• Tailwind CSS — Utility-first styling with custom design tokens
• Framer Motion — Page transitions, scroll animations, micro-interactions
• Three.js / R3F — 3D visualizations (used in dashboard)
• Vercel — Deployment target

Project Structure

src/
├── app/
│   ├── layout.tsx                    # Root layout (fonts, nav, footer)
│   ├── page.tsx                      # Home page (hero + NEXUS preview)
│   ├── projects/
│   │   ├── page.tsx                  # Projects grid
│   │   └── nexus/
│   │       ├── page.tsx              # Server wrapper (dynamic import)
│   │       └── NexusPageClient.tsx   # NEXUS deep-dive client component
│   ├── architecture/
│   │   └── page.tsx                  # Interactive architecture layers
│   ├── research/
│   │   └── page.tsx                  # Research articles grid
│   └── contact/
│       └── page.tsx                  # Contact form
├── components/
│   ├── layout/
│   │   ├── Navigation.tsx            # Fixed nav with active states
│   │   └── PageTransition.tsx        # Framer Motion page wrapper
│   ├── home/
│   │   ├── Hero.tsx                  # Animated hero section
│   │   ├── ParticleField.tsx         # Canvas particle network
│   │   ├── AuroraBackground.tsx      # CSS aurora effect
│   │   └── NexusPreview.tsx          # NEXUS teaser section
│   └── projects/nexus-ai/
│       ├── DashboardEmbed.tsx        # ← REPLACE WITH YOUR DASHBOARD
│       └── ArchitectureDiagram.tsx   # SVG architecture diagram
├── lib/
│   └── utils.ts                      # cn(), animation variants
└── styles/
    └── globals.css                   # CSS variables, glass effects, fonts

Connecting Your NEXUS Dashboard

The dashboard is loaded via dynamic import with ssr: false to support Three.js and browser-only APIs.

Step 1: Place your dashboard component file at:

src/components/projects/nexus-ai/DashboardEmbed.tsx

(or any path — just update the import in page.tsx)

Step 2: Ensure your component has a default export:

export default function DashboardEmbed() {
  // Your Three.js / React component here
}

Step 3: The NEXUS page already handles everything:

// src/app/projects/nexus/page.tsx
const DashboardEmbed = dynamic(
  () => import('@/components/projects/nexus-ai/DashboardEmbed'),
  { ssr: false }  // ← Three.js safe
)

No further changes needed.

Getting Started

npm install
npm run dev

Open http://localhost:3000

Deployment (Vercel)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Or connect your GitHub repo to Vercel for automatic deployments.

Design System

Colors

Token	Value	Usage
--cyan	#00f5ff	Primary accent, active states
--purple	#b44fff	Secondary accent, alternate sections
--dark	#030712	Page background
--glass	rgba(10,15,30,0.6)	Card backgrounds

CSS Utilities

• .glass-card — Cyan-tinted glassmorphism card
• .glass-card-purple — Purple-tinted glassmorphism card
• .tech-tag — Monospace tag with cyan border
• .tech-tag-purple — Monospace tag with purple border
• .glow-cyan / .glow-purple — Text glow effects
• .grid-bg — Subtle dot grid background
• .cyber-border — Animated gradient border

Custom Fonts

• Display: Syne (headings, titles)
• Mono: Space Mono (labels, code, stats)
• Body: Inter (paragraphs, descriptions)

Customization

Personal Info

Update across these files:

• src/app/layout.tsx — Site title, meta description
• src/components/home/Hero.tsx — Name, title, stats
• src/app/contact/page.tsx — Email, GitHub, LinkedIn links

Adding Projects

Edit the projects array in src/app/projects/page.tsx.

Adding Research Articles

Edit the articles array in src/app/research/page.tsx.

Adding Architecture Layers

Edit the architectureLayers array in src/app/architecture/page.tsx.