Static site. No build step, no dependencies, no framework. Five HTML pages, one stylesheet, one script.
index.html Home — hero, the record, the engineer, operating rules, work, contact
work.html Selected work — four full case studies + tooling
journal.html Learning notes
about.html Background, education timeline, focus areas
resume.html CV — target roles, education, projects, skills, contact
assets/css/site.css
assets/js/site.js
assets/files/lakshya-agarwal-resume.pdf
python -m http.server 4173Then open http://localhost:4173. Opening the files directly with file://
also works.
GitHub Pages — push to a repo and enable Pages on the branch root. Nothing needs configuring; it is already a plain static site.
git init && git add . && git commit -m "New portfolio"
git branch -M main
git remote add origin https://github.com/Lakshya172/Lakshya172.github.io.git
git push -u origin mainVercel / Netlify — import the repo. No build command, output directory ..
- Dark only. There is no theme toggle, by design.
- Palette lives in
:rootat the top ofsite.css. The accent is#38bdf8, carried over from the previous site. - Type: Newsreader (display serif), Inter (body), JetBrains Mono (labels and code), loaded from Google Fonts with system fallbacks.
Five pieces, all hand-written, no animation library and no imagery:
- Boot readout (
index.htmlonly) — a full-screen mono init sequence that reports real numbers from the site, then clips away. Built entirely in JS, so it does not exist without it. Plays once per tab viasessionStorage, skippable with the button or Esc, and has a 6s hard timeout so a dropped timer can never trap the visitor. - Eased scrolling — lerps the real scroll position each frame rather than
transforming a wrapper, so
position: sticky, fixed elements, anchors and the scrollbar all keep working. Off for coarse pointers, which already have native inertia. - Word-level headline reveal —
.displaytext is split into per-word spans that rise out of a blur on a stagger. - Ambient aurora — one fixed, oversized gradient layer drifting on a 48s loop. It is a single composited transform per frame, costs no scroll distance, and never moves anything the reader is trying to read.
- Section rules that draw in, plus staggered card reveals and counters.
Two implementation notes worth keeping:
- The scroll pass is not driven by
IntersectionObserver, and not by rAF alone. Both are suspended in some contexts (a tab that loads in the background, embedded previews), which would freeze scroll-driven state and leave content stuck atopacity: 0.schedule()queues a rAF and a timer; whichever fires first runs the pass. The smooth-scroll loop also drives the pass directly each frame, so the rail and reveals track the eased position exactly instead of waiting on a scroll event. bodyusesoverflow-x: clip, nothidden—hiddenturns the body into a scroll container and silently breaksposition: stickyfor the case bar.
- All reveal styling is scoped to
.js, set by an inline script in each<head>. Without JavaScript the page renders fully, just without motion. prefers-reduced-motiondisables the aurora drift, the constellation, the boot readout, the word reveals, and all transitions.- Because in-page anchors are routed through the eased scroll, the click handler moves focus to the target itself; preventing the default would otherwise strand keyboard and screen-reader users at the top of the page.
Everything is plain HTML — no data files or templates. To add a project, copy an
existing <article class="case"> block in work.html, give it a new id, and
add a matching entry to the .rail list at the top of that page and a card on
index.html.
rinky-commerce-engine is a private repository, so the case study links to
the live site (rinkyjewellers.in) and says the source is available on request —
a "Repository" link would 404 for anyone reading the portfolio. If you make the
repo public, add the link in work.html#rinky and resume.html.
The Facial Attendance case links to its real repo. AdityaNet and ASTRA still
point at the profile (github.com/Lakshya172) — swap in the upstream URLs when
you want them to land directly.