Skip to content
BranchesTags

Repository files navigation

Interactive Developer Portfolio

A premium, interactive developer portfolio built with React 19, TypeScript, and Vite. Designed to feel like a developer's environment — a terminal, a command palette, global search, keyboard shortcuts, and per-project case studies — all content-driven from a single source of truth in src/data/.

No fake stats. No fake screenshots. Planned projects are labeled planned, missing demos show "coming soon" placeholders, and the GitHub section reads live data from the public GitHub API.

Table of Contents

Deployed to Vercel:

Live Demo

Replace https://your-domain.vercel.app above with your deployed URL once you deploy (see Deployment).

To let users open your live site from the README, simply keep this badge or swap it for a plain link:

### Live Demo

https://www.krishkamani.online

Features

  • Themes — dark / light / system preference, persisted, animated transitions, no-flash on load.
  • Interactive terminal (Ctrl+` / K t) — help, about, skills, projects, open <id>, github, contact, theme, clear, whoami, date, ls + a sudo admin easter egg. Arrow-key history.
  • Command palette (Ctrl+K) — jump to any section, toggle theme, open GitHub, contact. Tracks recent commands.
  • Global search (/ or Ctrl+Shift+F) — live content index over projects, skills, experiments, timeline, and pages.
  • Keyboard shortcuts — g s / g w / g a / g k / g l / g r / g c, Ctrl+K, Ctrl+Shift+F, Ctrl+`, ? for help.
  • Case studies — per-project pages with problem/solution cards, tech breakdown, architecture diagram, media viewer (zoom, arrows, ESC), and prev/next navigation.
  • GitHub section — real profile, pinned-style repos, language breakdown, and a contribution grid with loading/error/rate-limit states and a 15-minute cache.
  • Animations — scroll reveals, magnetic buttons, self-drawing timeline, aurora/grid/noise background — all respecting prefers-reduced-motion.
  • SEO — Open Graph + Twitter cards, canonical URL, robots.txt, sitemap.xml, generated OG image.
  • Accessibility — semantic HTML, skip link, visible focus states, ARIA labels, keyboard-operable overlays.

Screenshots

To add screenshots: drop your images into public/images/ and reference them from src/data/projects.ts:

hero: '/images/linux-system-monitor.png',      // card / case-study cover
media: [
  { type: 'image', src: '/images/dashboard.png', alt: 'Dashboard view', caption: 'Real-time CPU + memory' },
],

hero: null and the visual field render a designed placeholder until a real image exists. For GIFs/videos use type: 'gif' / type: 'video'.

Tech Stack

Getting Started

npm install
npm run dev        # local dev server

Quality gates:

npx tsc --noEmit   # type check
npm run lint       # oxlint
npm run build      # production build
npm run preview    # preview the production build

Project Structure

.
├── api/
│   └── contact.ts          # Vercel serverless function (Resend email)
├── public/
│   ├── favicon.svg
│   ├── og-image.png        # 1200×630 social preview
│   ├── robots.txt
│   ├── sitemap.xml
│   └── images/             # add your project screenshots here
├── src/
│   ├── components/         # Navbar, Terminal, CommandPalette, GlobalSearch, ...
│   ├── data/               # profile, projects, skills, timeline, experiments, commands
│   ├── hooks/              # useTheme, useGithub, useKeyboardShortcuts, ...
│   ├── lib/                # router, app-context, search, github, toast, cn
│   ├── pages/              # HomePage, ProjectCaseStudy
│   ├── sections/           # Hero, About, Skills, Projects, Timeline, Lab, Resume, ...
│   ├── styles/index.css    # design tokens + component styles
│   ├── types/index.ts
│   ├── App.tsx
│   └── main.tsx
├── .env.example
├── index.html              # SEO metadata, theme no-flash script
└── package.json

Configuration

Copy .env.example to .env and adjust:

VITE_GITHUB_USERNAME=your-username

.env is git-ignored. No API keys are required for the public site — the GitHub section uses only public, unauthenticated API data.

Contact form (optional): set these in your host's environment variables (never commit them):

RESEND_API_KEY=re_...
CONTACT_TO_EMAIL=you@example.com      # where messages are delivered
CONTACT_FROM_EMAIL=onboarding@resend.dev

Adding Your Content

All content lives in src/data/ — edit the data files and the site updates everywhere:

  • profile.ts — name, role, bio, interests, links, education, site URL.
  • projects.ts — add/edit projects: tags, GitHub links, demo URL, demoState (live | coming-soon | local), hero screenshot, media gallery, and full case-study content.
  • skills.ts, timeline.ts, experiments.ts, commands.ts — skills, timeline entries, lab snippets, palette commands.

Live demo links per project — set these two fields:

demo: 'https://your-project.vercel.app',   // shown as a "Live demo" button
demoState: 'live',

Your own site URL — used for the canonical tag and sitemap:

// src/data/profile.ts
site: { url: 'https://your-domain.vercel.app' },
<!-- index.html -->
<link rel="canonical" href="https://your-domain.vercel.app" />
<!-- public/sitemap.xml -->
<loc>https://your-domain.vercel.app/</loc>

Deployment

Output is plain static HTML/CSS/JS — works on any static host:

  • Vercel / Netlify — connect the repo: build command npm run build, output directory dist. Vercel also auto-detects and deploys the api/ serverless function.
  • GitHub Pages — push dist/ to the gh-pages branch or use the official action (note: api/ won't run).

After deploying, update the canonical URL in index.html and the domain in public/sitemap.xml, then add your URL to the Live Demo section above.

Roadmap

  • Add real project screenshots (public/images/)
  • Publish planned projects and point their links at real repositories
  • Add a real PDF resume
  • Optional: blog/write-ups section, analytics

License

MIT — see LICENSE.

About

www.krishkamani.online

Resources

Readme
MIT license
Activity

Stars

2 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages