██╗  ██╗███████╗██████╗ ██╗      ██████╗ ██╗████████╗██╗  ██╗
██║ ██╔╝██╔════╝██╔══██╗██║     ██╔═══██╗██║╚══██╔══╝╚██╗██╔╝
█████╔╝ ███████╗██████╔╝██║     ██║   ██║██║   ██║    ╚███╔╝
██╔═██╗ ╚════██║██╔═══╝ ██║     ██║   ██║██║   ██║    ██╔██╗
██║  ██╗███████║██║     ███████╗╚██████╔╝██║   ██║   ██╔╝ ██╗
╚═╝  ╚═╝╚══════╝╚═╝     ╚══════╝ ╚═════╝ ╚═╝   ╚═╝   ╚═╝  ╚═╝

THE SIGNAL IN THE NOISE.

Full-stack developer & AI engineer — security · machine learning · scalable architecture

  

     

     

---

✦ Overview

A premium developer portfolio with a dark hacker-terminal aesthetic — built to look like a system you're not supposed to be inside.

• 🖥️ Matrix rain canvas animation on the hero
• ⌨️ Interactive terminal overlay with 9+ commands (sudo hire khushneet included)
• 📜 Scroll-driven animations — no page transitions, pure reveal
• 🎯 Zero border-radius — sharp edges, zero compromise
• 🌐 Dual-deployed — Cloudflare Pages (primary) + GitHub Pages (mirror)
• 📱 Mobile-first responsive across all viewports

---

✦ Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript (strict mode)
Styling	Tailwind CSS v4
Animations	Framer Motion 12
Icons	Lucide React
Fonts	Space Grotesk · Inter · Geist Mono
Deployment	Cloudflare Pages · GitHub Pages

---

✦ Project Structure

src/
├── app/
│   ├── layout.tsx            # Global fonts, metadata, OG tags
│   ├── page.tsx              # Assembles all sections
│   └── globals.css           # Design system, grid bg, scanlines
├── components/
│   ├── Navbar.tsx            # Transparent → blur navbar + terminal btn
│   ├── sections/
│   │   ├── Hero.tsx          # Full viewport hero with matrix rain
│   │   ├── Projects.tsx      # Sticky scroll card deck
│   │   ├── Skills.tsx        # Staggered typewriter skill grid
│   │   ├── About.tsx         # Timeline with alternating cards
│   │   └── Contact.tsx       # Resume download + social links
│   └── ui/
│       ├── Terminal.tsx       # Full-screen terminal overlay
│       ├── ProjectCard.tsx    # Project display card
│       ├── SkillBadge.tsx     # Individual skill badge
│       └── SectionWrapper.tsx # Scroll-reveal wrapper
├── data/
│   ├── projects.ts           # Project entries
│   ├── skills.ts             # Skill categories
│   └── about.ts              # Timeline items
└── types/
    └── index.ts              # TypeScript interfaces

---

✦ Terminal Commands

Hit TERMINAL_ACCESS in the navbar to drop into the shell.

Command	Output
help	All available commands
whoami	Operator identity & bio
projects	Deployed systems list
skills	ASCII skill matrix
contact	Communication channels
status	Current system status
clear	Wipe the terminal
exit / quit	Close overlay
sudo hire khushneet	🥚

---

✦ Getting Started

# Clone
git clone https://github.com/KhushneetSingh/ksploit.git
cd ksploit

# Install
npm install

# Dev server → http://localhost:3000
npm run dev

---

✦ Deployment

Cloudflare Pages (Primary)

Connected to main branch. Every push auto-deploys.

Build command:  npm run build
Output dir:     .next

GitHub Pages (Mirror)

Static export via GitHub Actions. Triggers on every push to main.

# Build static export locally (for testing)
npm run build:gh

The workflow lives at .github/workflows/deploy-gh-pages.yml and publishes to the gh-pages branch automatically.

URL	Host
ksploitx.pages.dev	Cloudflare Pages
khushneetsingh.github.io/ksploit	GitHub Pages

---

✦ Design Tokens

Token	Value
Background	#131313
Surface	#1a1a1a
Accent Green	#00ff88
Accent Cyan	#00d4ff
Muted	#666666
Grid Size	24px
Border Radius	0px — everywhere

---

© 2026 KSPLOITX // ALL_SYSTEMS_OPERATIONAL