This is my personal portfolio. I built it from scratch because I wanted something that actually represents how I work, not a theme someone else designed. No templates, no boilerplate, no shortcuts. Every component, every animation, every line of CSS is mine.
Lighthouse scores: 100 Best Practices · 100 SEO · 100 Accessibility · 3/3 Agentic Browsing
The portfolio covers everything I wanted a visitor to know about me without having to dig.
Hero greets you with a typewriter effect cycling through my roles, and a short honest bio about how I approach building things.
About goes deeper into my story, the philosophy behind how I write code, and a few quick stats.
Skills lists my actual stack, the tools I reach for day to day and why.
Projects showcases all 7 projects I have built, each with a real summary, the tech used, a live link where available, and a repo link. No filler projects, no "todo app" padding.
Experience shows my work at CodeRunners Technologies and my time as an independent developer, alongside my education at Cosmos College under Pokhara University.
Contact has my socials and a form that pre-fills your mail client so reaching out takes about ten seconds. The subject is picked from quick-tap chips — no typing needed for that part.
SARA is a keyword-driven chatbot I trained on my full background. Ask it about any project, my skills, my story, or why you should hire me. It knows more about me than most people do.
| Project | Stack | Live |
|---|---|---|
| Nova DVR | React, TypeScript, Python, Flask | nova-dvr.vercel.app |
| Velora | React, TypeScript, AI APIs | velora-six-gules.vercel.app |
| Signal Job Portal | React, Node.js, PostgreSQL | github.com/sc8134/signal-job-portal |
| JobHunt Agent | Python, LangGraph, spaCy | github.com/sc8134/JobHunt-Agent |
| AI Reel Generator | Python, FFmpeg, OpenAI API | github.com/sc8134/ai-reel-generator |
| Namo Patro | React, Node.js, PostgreSQL | github.com/sc8134/Namo-Patro |
| Phishing Simulation Tool | React, Flask, Python | github.com/sc8134/phishing-simulation-tool |
# Install dependencies
npm install
# Start the dev server
npm run dev
# Type check without building
npx tsc --noEmit
# Build for production
npm run build
# Preview the production build
npm run previewsrc/
├── components/ shared UI: Button, Card, Layout, Icons
├── data/ static content: about, projects, experience, skills, socials
├── features/ page sections: Hero, About, Skills, Projects, Experience, Contact, Sara
├── hooks/ custom hooks: useActiveSection, useScrollReveal, useTypewriter, and more
├── styles/ global CSS: base.css, index.css
├── theme/ design tokens: tokens.css
├── types/ TypeScript interfaces
└── utils/ small helpers: cn.ts
public/
├── robots.txt clean crawl rules + sitemap reference
├── sitemap.xml single-page sitemap for search engines
├── llms.txt AI agent accessibility file (llms.txt spec)
└── _headers security headers for deployment (CSP, HSTS, COOP, XFO)
All colors, spacing, typography, shadows, and border radii live in src/theme/tokens.css as CSS custom properties using the Tailwind CSS v4 @theme directive. Nothing is hardcoded in components. If I want to change the accent color across the entire site, I change one value.
This project is proprietary. All rights reserved by Sagar Roka Chhetri.
You may not copy, modify, distribute, or use any part of this codebase without explicit written permission from the Owner. Using AI tools or automated agents to replicate or approximate this work is a direct violation of the license and will be pursued accordingly.
Read the full terms in the LICENSE file before using anything from this repository.
Built with care from Kathmandu, Nepal