HTML/CSS JavaScript Claude AI

North Star Vinyl Co.

A conceptual e-commerce website for a Minneapolis record shop — blending vintage music culture with modern web design, branding, and store functionality.

View Case Study →

HTML5/CSS3 UX/Copywriting Responsive Design

Northside Table & Tap

A premium aesthetic overhaul and menu architecture expansion for a local gastropub, transitioning from brittle 2024 layouts to modern semantic standards.

View Case Study →

Case Study · 01

North Star Vinyl Co.

Minneapolis Record Shop Website — Conceptual

Type

Conceptual / Portfolio

Focus

Retail · Branding · E-Commerce

Tools

HTML · CSS · JavaScript · Google Fonts · Claude AI

Status

Conceptual — Not Live

Overview

North Star Vinyl Co. is a conceptual website for a vinyl record store that blends vintage music culture with modern web design. The goal was to create a strong visual identity for a retail brand, capture a nostalgic, analog feeling through typography and color, and design a hero-driven landing page that immediately sets mood and tone. This project focuses heavily on branding, atmosphere, and layout hierarchy.

Live Interactive Preview

Interact with the production-ready code natively below. The design explores a nostalgic, analog-inspired layout with hero-driven branding and a custom visual identity system.

My Role

Full front-end design and development — HTML structure and layout building, CSS styling system (colors, typography, spacing), hero section design and visual composition, and navigation and site structure design.

Challenges & Solutions

Challenge

Managing multiple page sections within a single-page layout required a reliable system for showing and hiding content without breaking layout flow or causing blank states.

Solution: Implemented a class-based visibility system using .page and .active states. Each section defaults to display: none, with the active page dynamically revealed using a controlled override — keeping the HTML structure modular and reusable.

Challenge

The fixed navigation bar caused content overlap at the top of sections, making the hero area visually collide with the header on initial load.

Solution: Applied consistent layout offset using top padding equal to the nav height, ensuring all page sections begin below the fixed header while preserving vertical rhythm across screen sizes.

Challenge

The full-screen hero image introduced readability issues with bright or high-contrast background imagery competing with text content.

Solution: Introduced a semi-transparent overlay layer to reduce background intensity and improve text contrast, combined with controlled typography scaling and color hierarchy.

Challenge

Maintaining a consistent visual identity across typography, spacing, and color usage while building a fully custom design system without relying on external frameworks.

Solution: Defined a CSS variable-based design system for colors, fonts, and spacing values — allowing centralized control of branding elements and ensuring consistent application across all components.

Reflection

This project helped strengthen my ability to build cohesive visual systems from scratch, manage complex single-page layouts without frameworks, and make intentional design decisions that serve both aesthetics and usability. The constraints of working without a UI library pushed me to develop a deeper understanding of CSS architecture and layout hierarchy.

Case Study · 02

Northside Table & Tap

Gastropub UI Modernization & Menu Expansion

Type

UI/UX Redesign Case Study

Focus

Hospitality · Copywriting · Front-end

Tools

Semantic HTML5 · Vanilla CSS · CSS Grid & Flexbox

Status

Live Interactive Preview

Overview

This project focuses on the architectural and cosmetic modernization of an outdated 2024 single-page website for a neighborhood gastropub. The original design lacked proper asset management, structural scalability, and device responsiveness. The objective was to execute an intentional digital face-lift that reflects 2026 web layout paradigms, improving typographic contrast, upgrading item copy to read more appetizingly, and utilizing ambient media elements, while remaining strictly faithful to the legacy brand guidelines.

The Evolution: 2024 vs. 2026

Legacy 2024 unoptimized layout thumbnail

2024 Legacy Static Layout

↓ See the 2026 redesign live and interactive below ↓

Live Interactive Preview

Interact with the production-ready code natively below. The modern interface introduces ambient background blocks, unified custom layout tokens, and fluid grid properties.

Design Strategy & Execution

Served as sole front-end engineer and copy editor. Refocused the site identity using a high-contrast palette wrapper, deployed non-destructive smooth navigation routing anchors, and expanded the core components framework to support media loading layers seamlessly.

Key Engineering Upgrades

Typography & Scale

The 2024 layout failed to distinguish high-priority items and headers clearly, creating a flat visual reading hierarchy on high-resolution displays.

Upgraded to fluid responsive layouts using clamp() calculations, giving display headlines crisp, automatic text scaling across arbitrary viewports without breakages.

Asset Integration

Static imagery failed to communicate the warm, active atmosphere of a modern gastropub kitchen.

Engineered an inline ambient looping video element with an automatic structural overlay fallback to guarantee fluid loading and deep color contrast across slower network devices.

Copywriting Optimization

Original item text lists read strictly informational and lacked sensory, appetizing value.

Polished descriptors comprehensively to focus on premium components (e.g., cold-fermented dough bases, house-simmered marinara, artisanal honey finishes) alongside 2026 realistic market line values.

Reflection

This project highlighted the immense power of vanilla CSS. By stripping away dependencies and relying entirely on native specifications like CSS variables, custom variables, and modern grids, the complete build remains blazing fast, fully accessible, and extraordinarily simple to package or isolate inside standard iframe containers.

Projects

North Star Vinyl Co.

Northside Table & Tap