N. Sri Krishna Sowri — Developer Portfolio

A premium, production-ready developer portfolio built with Next.js 15, TypeScript, Tailwind CSS, Framer Motion, and React Three Fiber. Dark/light themes, a 3D thermal-detection hero (a nod to the YOLO / solar-panel hotspot work), command palette (⌘K), custom cursor, scroll animations, and full SEO.

All content is sourced from the resume — nothing is invented.

---

Quick start

npm install
npm run dev

Open http://localhost:3000

npm run build   # production build
npm start       # serve the production build

Requires Node.js 18.18+ (Node 20+ recommended).

---

Add your assets (2 minutes)

Everything lives in the public/ folder.

1. Photo — add a square image named exactly profile.jpg to public/. If it's missing, the hero automatically shows a clean "NK" monogram, so the site never breaks.
2. Resume — public/resume.pdf is already included and wired to the Download Resume button. Replace it anytime to update.

---

Edit your content

Everything text-based lives in one file: src/lib/data.ts. Name, roles, stats, experience, projects, skills, achievements, education, profile links — all typed and centralized. Change a value there and it updates across the whole site. No component edits needed for normal updates.

To add a coding-profile handle (LeetCode / CodeChef / GeeksforGeeks), open src/lib/data.ts, find the profiles array, and set the real href + handle, then flip live: true.

---

Make the contact form send real emails (optional)

By default the form opens the visitor's mail app pre-filled to your address (works everywhere, zero setup). To receive submissions directly instead:

1. Create a free form at https://formspree.io and copy your endpoint URL.
2. In src/components/Contact.tsx, replace the submit handler body with a fetch POST to your Formspree endpoint (their docs show the exact snippet).

---

Deploy to Vercel (free, ~2 min)

1. Push this folder to a new GitHub repository.
2. Go to https://vercel.com → New Project → import the repo.
3. Framework preset is auto-detected as Next.js. Click Deploy.

That's it — you'll get a live *.vercel.app URL. Add a custom domain later under Project → Settings → Domains.

No environment variables are required for the base site.

---

Project structure

src/
  app/
    layout.tsx        # SEO metadata, fonts, JSON-LD, theme root
    page.tsx          # assembles all sections
    globals.css       # design tokens + base styles
    robots.ts         # /robots.txt
    sitemap.ts        # /sitemap.xml
  components/
    Navbar.tsx        # sticky blur nav, active-section highlight, theme toggle
    Hero.tsx          # photo/monogram, typing effect, stats, CTAs
    Hero3D.tsx        # React Three Fiber scene (thermal core + detection cage + particles)
    About.tsx
    Experience.tsx
    Projects.tsx      # BlockProof deep card
    Skills.tsx        # animated bars
    Achievements.tsx
    Education.tsx
    Profiles.tsx
    Contact.tsx       # mailto form + details
    Footer.tsx
    CommandPalette.tsx# ⌘K launcher
    Chrome.tsx        # custom cursor, scroll progress, back-to-top
    Reveal.tsx        # scroll-reveal wrapper
  lib/
    data.ts           # ← single source of truth for all content
public/
    resume.pdf        # included
    profile.jpg       # ← add this

---

Notes

• Fonts load via a <link> to Google Fonts (Space Grotesk / Inter / JetBrains Mono) — reliable in any environment, including offline builds and CI.
• Accessibility — semantic HTML, keyboard-focusable controls, visible focus rings, and prefers-reduced-motion is respected (animations disable automatically).
• Skill bar percentages are an illustrative read of the resume's skill levels — adjust the w values in data.ts to taste.
• Built to be extended: the structure supports adding a blog, more projects, or live coding stats without refactoring.