A fast, self-contained personal portfolio. No build step, no dependencies, no backend.
The whole site is one index.html file, so it deploys to Vercel's free Hobby plan as a static
site with zero configuration. Your résumé and hero photo are embedded, so everything works even
when you open the file directly.
It's static, so any of these work:
open index.html # macOS (start index.html on Windows)
# or serve it (recommended — behaves like production):
npx serve .
# or
python3 -m http.server 5173There's no compile step for a static site — what you see locally is what ships. Serve the folder, then check: no console errors, résumé downloads, the hero photo tilts to your cursor/finger, and the layout looks right on a phone.
- Push this folder to a new GitHub repo:
git init && git add . && git commit -m "portfolio" git branch -M main git remote add origin https://github.com/Divesh2424/portfolio.git git push -u origin main
- vercel.com → Add New → Project → Import your repo.
- Framework Preset: Other. Leave Build Command and Output Directory empty.
- Deploy. Every future
git pushredeploys automatically.
npm i -g vercel
vercel # link/create project, accept defaults
vercel --prod # ship to productionNo environment variables needed.
The hero uses your grey-background studio headshot with a subtle 3D tilt — it leans and catches
light as the visitor moves their cursor or finger, and sits flat/static under prefers-reduced-motion.
The photo is embedded in index.html (as a data URI) and also included as portrait.jpg.
To change it:
- Simplest: replace
portrait.jpgwith a new 3:4 portrait (e.g. 900×1200), then inindex.htmlfind the hero<img>and set itssrcto"portrait.jpg"instead of the longdata:string. - Or re-embed a new photo as a data URI in that same
src.
A clean, evenly-lit, front-facing headshot works best here.
Everything lives in index.html:
- Text (hero, projects, experience, about, contact) — plain HTML in the
<body>. Search for a heading likeChhotaLinkorTechenniaand edit inline. - Interactive data — near the bottom, inside
<script>, see the EDIT ZONE comment:SYS(the "How I think" system map) andTOOLS(the skills toolbox). Terminal commands are just below. - "Right now" cards — search for
<!-- EDIT: "currently building" -->in the About section.
The PDF is embedded so download works with no extra files. When you update it, replace resume.pdf,
then either re-embed it or set const RESUME_DATA_URI = "/resume.pdf"; in the <script> to point at
the static file.
- Replace the placeholder domain
https://your-project.vercel.app/with your real Vercel URL in:<link rel="canonical">, the Open Graphog:url, andsitemap.xml/robots.txt. - LinkedIn URL confirmed →
https://linkedin.com/in/divesh2424. - (Optional) Add a social share image at
/og.png(1200×630). The meta tags already reference it. - (Optional) Point project GitHub links at the specific repos instead of your profile.
Try the easter egg: press ~ (or the Konami code) for a working terminal — sudo hire-me.
divesh-portfolio/
├── index.html # the entire site (HTML + CSS + JS, résumé + photo embedded)
├── portrait.jpg # your hero headshot (also embedded in index.html)
├── resume.pdf # your résumé (also embedded in index.html)
├── robots.txt
├── sitemap.xml
├── .gitignore
└── README.md
Built to be truthful to the résumé, fast, responsive, keyboard-accessible, and to respect
prefers-reduced-motion.