TNK Design & Analytics

About the Project

This website is itself a project. It's a multi-page personal portfolio built to showcase analytics work, design projects, and writing — and the entire codebase was generated by Claude Code, Anthropic's AI coding assistant, without writing a single line of HTML, CSS, or JavaScript by hand.

The prompt-driven development workflow meant describing what I wanted — layout, content, interactions, brand — and letting the AI handle the implementation. The result is a production-quality static site with a cohesive design system, responsive grids, CSS animations, and real brand assets.

---

How It Was Built

Phase 1 — Design System & Shell

The first step was establishing the visual language: background #0A0F1E, primary color #00CFFF, accent #00FFB3, and three fonts — Space Grotesk for headings, Inter for body, JetBrains Mono for code. This design system was then applied consistently across every page via inline styles and a small set of shared CSS classes.

Phase 2 — Page by Page

Each page was built iteratively through conversation: Home (hero, about, experience, featured projects, skills), Projects (grid + filtering), Blog (featured post + grid), Contact (form + info sidebar), and individual detail pages for each project and blog post.

Real content was swapped in progressively — actual job history, real company logos, a real portrait photo, actual social links, and real blog post content.

Phase 3 — Content & Iteration

With the structure in place, content was layered in: a detailed dataLayer article, a blog post about the Claude Code build process itself, a full TNK Designs digital art portfolio page with a 16-image lightbox gallery, and a complete work history covering four roles at Ayesa, t2ó, Incubeta, and Telefónica.

---

The Stack

The site is deliberately simple — no build tools, no bundler, no framework. Just:

• HTML5 — semantic structure, multi-page navigation
• Tailwind CSS (CDN) — utility classes for rapid layout
• Vanilla JS — responsive grid switching, filter system, lightbox, form state
• CSS animations — fadeUp, hover transitions, animated status indicators
• Google Fonts — Space Grotesk, Inter, JetBrains Mono

No dependencies to install. No npm. No build step. Open in a browser and it works.

---

What Claude Code Got Right

The AI handled the tedious parts exceptionally well: consistent application of the design system across 13 files, responsive layout logic, hover states, relative path management between root and subdirectory pages, and propagating changes (like replacing the logo or deleting a project) across every affected file at once.

The result is a codebase that looks hand-crafted — with intentional spacing, layered shadows, gradient treatments, and a dark-mode-first visual identity — but was produced entirely through directed prompts.

"The future of building things isn't no-code. It's better-briefed."