studio & experiments
A self-built personal site developed in vanilla HTML, CSS, and JavaScript. No frameworks, build tools, or external dependencies are used. The project is designed as a live working environment that demonstrates control over structure, styling, rendering, and client-side behaviour at platform level.
The brief
Self-initiated. Constraint as architecture.
itsvi.com is a self-initiated project built under a strict constraint: no frameworks, no package manager, and no build pipeline. All structure, styling, and behaviour are implemented directly in HTML, CSS, and vanilla JavaScript.
The constraint is used to expose and control the full stack at platform level. Layout, state, rendering, and interaction are handled explicitly, making behaviour more predictable and easier to debug. Rather than relying on abstraction layers by default, the project focuses on understanding what those layers solve and how equivalent outcomes can be produced directly.
Structure
Three distinct areas, one coherent system
The information architecture separates three modes of output, each with a different content model and purpose:
Studio
A static index linking to active projects and external destinations. The section is structured for direct navigation and quick scanning, prioritising clarity over promotional copy.
Blog
A content layer rendered dynamically from structured post data. This separates content from presentation, allowing post metadata and excerpts to be managed in JavaScript while keeping the markup pattern consistent across the homepage feed.
Lab
A space for prototypes, interface tests, and small experiments. Each item is treated as a contained unit, making it possible to test layout and interaction ideas in isolation before applying them elsewhere.
Decisions
Technical and editorial decisions
Blog posts are defined as structured data and rendered into the DOM with JavaScript rather than written as repeated static markup. This reduces duplication, supports consistent output, and separates content management from presentation logic.
Light and dark mode preferences are stored in localStorage and applied on load, allowing the interface to persist user choice across visits with minimal scripting overhead.
Styling is managed through one external stylesheet organised with resets, design tokens, layout rules, component patterns, light mode overrides, and responsive adjustments. The cascade is used intentionally as part of the architecture rather than treated as a side effect.
The site uses meaningful structural elements such as header, nav, main, section, article, and footer to produce a logical document outline. This improves accessibility, supports graceful degradation, and keeps content structure clear.
Removing external dependencies keeps the runtime environment minimal and avoids the maintenance overhead of package updates, build tooling, and third-party abstraction layers. All behaviour is authored directly and remains fully inspectable.
The site is maintained as a live project and updated incrementally. This allows new patterns, experiments, and content structures to be tested in production rather than developed in isolation.
Skills used