← Back to the website THE UNNECESSARILY OFFICIAL MANUAL

YES, THERE IS DOCUMENTATION

Yeah, I
made docs.

A field guide to every public corner of this site: what it does, what it is made from, why it exists, and how it got here.

01 / THE MAP

What goes into every page

The animated front door

The portfolio’s overview: identity, projects, experience, personality, and contact.

Built with
HTML, the original Webflow structure, GSAP, Lenis, and focused refresh CSS.
Important files
/index.html, /assets/css/style.css, /assets/css/home-refresh.css, and the active scripts in /assets/js/.
How it works
Scroll-driven sections, a view-switching project grid, an interactive résumé deck, theme toggle, and contact modal.
DATABASEOpen ↗

Hearth inventory

A home-inventory interface for organizing belongings by room and category.

Built with
Plain HTML, CSS, and JavaScript with an API-first path and a browser-saved demo fallback.
Important files
/database/index.html, database.css, and database.js.
How it works
Search, filters, room navigation, grid/list views, add and delete flows, computed summary cards, and local persistence.
NYC EVENTSOpen ↗

City Signals

A city event dashboard for finding plans by date, neighborhood, type, venue, and price.

Built with
HTML, CSS, JavaScript, event APIs, and scraper utilities for event sources.
Important files
/nyc-events/, /api/events.js, /api/scrape.js, and /scrapers/.
How it works
Loads event records, normalizes them, filters the feed, opens detail modals, and supports manual or URL-based additions.
EMBAGENTOpen ↗

The chatbot workshop

The separate AI-agent experience linked from this portfolio.

Built with
Next.js and a standalone browser agent-builder experience.
Lives elsewhere
Its source and deployment are intentionally separate in embadmin/embagentlanding.
How it works
A landing page introduces the product; the builder collects identity, mission, knowledge, and tone before opening a test chat.
CRASH MONITOROpen ↗

Website pulse check

A focused utility for checking whether a website responds successfully.

Built with
A compact HTML interface and browser JavaScript.
Important files
/website-crash-monitoring/index.html and monitor.js.
How it works
Normalizes entries like www.google.com, adds the missing protocol, requests a check, and explains the result.
TECH STACKOpen ↗

The toolkit map

An interactive inventory of the technologies used across the projects.

Built with
The shared Project Lab visual system and lightweight JavaScript.
Important files
/techstack/index.html, /techstack/techstack.js, and /assets/css/project-lab.css.
How it works
Technology records are rendered into cards and filtered by frontend, backend, data, or cloud and AI layers.
JUNKYARDOpen ↗

The idea workbench

A deliberately unfinished place for scraps, questions, experiments, and unexpected combinations.

Built with
The shared Project Lab styles plus a small local-storage application.
Important files
/junkyard/index.html and /junkyard/junkyard.js.
How it works
Saves scraps in the browser, counts them, removes them, and remixes two entries into a new prompt.
TIMELINEOpen ↗

The experience timeline

A visual, interactive version of the résumé and career path.

Built with
A self-contained HTML page using the portfolio type, color, and motion vocabulary.
Important file
/timeline/index.html.
How it works
Career entries are arranged chronologically with interactive detail and a direct route back home.

The site explaining itself

This page is the maintainers’ map and the curious visitor’s backstage pass.

Built with
Semantic HTML and a dedicated playful documentation stylesheet.
Important files
/docs/index.html and /docs/docs.css.
How it works
Documents active routes, shared systems, deployment boundaries, and verified repository milestones.

02 / THE LORE

How the site evolved

  1. The animated portfolio takes shape

    The homepage grows through many small visual, motion, résumé, project-image, contact, and responsive-layout commits. The current page still carries that experimental Webflow-and-GSAP DNA.

  2. The database idea appears

    The first home-database project is introduced locally and linked into the portfolio.

  3. The site becomes a project neighborhood

    Database, NYC Events, Apps, Junkyard, Tech Stack, Timeline, and Crash Monitoring routes are established together. NYC Events then goes through an especially energetic run of filtering, scraper, date, area, and UI refinements.

  4. The résumé becomes interactive

    The Timeline page receives multiple rounds of interaction and aesthetic work, followed by homepage menu changes.

  5. The big usability refresh

    The homepage and interactive project pages are reorganized into cleaner, more usable interfaces while preserving their individual personalities.

  6. One visual family—and documentation

    Database and NYC Events adopt the portfolio palette, homepage spacing and navigation are corrected, Playground is tucked away, broken legacy runtime code is removed, and this living guide arrives.

03 / SHARED INGREDIENTS

The rules holding it together

COLOR

Cream + chocolate + chaos

#ffe9cf and #270f03 form the base. Bright green, pink, blue, yellow, orange, and purple make each tool feel playful without losing the family resemblance.

TYPE

Big voice, useful details

Anton or expressive display faces do the shouting. Work Sans, IBM Plex Mono, and other compact utility faces keep interfaces readable.

MOTION

Motion with a job

The homepage uses GSAP and Lenis for expressive storytelling. Tool pages stay lighter, using small transitions and respecting reduced-motion preferences.

DATA

Useful without a backend

Interactive projects prefer real APIs when available, then provide local demo data or browser storage so the experience remains understandable and testable.

DEPLOYMENT

Two GitHub homes

The portfolio deploys through vinarajaa/vinarajaa.github.io. Embagent remains separate under embadmin/embagentlanding.

MAINTENANCE

Keep the whimsy, remove the friction

Cleanup should preserve icons, color, animation, and voice while removing broken bundles, inaccessible controls, stale links, accidental duplication, and layout hacks.

04 / THE ATTIC

Hidden and legacy pages

Apps Playground is still available in the source at /apps/, but it is intentionally hidden from the homepage while it waits for its next direction.

Older template pages—including about.html, contact.html, work.html, index2.html, and several files under /pages/—are historical artifacts. They are not treated as the current public navigation and remain useful as references for earlier experiments.

Scraper debug pages under /scrapers/ support development and troubleshooting; they are tools, not visitor destinations.