CH Studios LLC — Studio Website
A dark-mode terminal-aesthetic website for a Detroit-based software studio I co-founded. Built entirely with vanilla HTML, CSS, and JavaScript.
Project Overview
CH Studios is a Detroit-based software studio I co-founded in April 2026. Before we could take on client work, we needed a digital presence that communicated who we are and what we build. I designed and built the full studio website from scratch — no frameworks, no CMS — just clean, hand-written HTML, CSS, and JavaScript.
The design leans into a dark-mode terminal aesthetic: monospace typography, a stark `#00ff94` green accent, and a grid-based layout with minimal decoration. The goal was to feel technical and focused without being cold.
Detroit · Software Studio · Est. 2026
A Detroit-based software studio crafting mobile apps and full stack products.
CH Studios · chstudios.dev
LIVE SITETech Stack
Features Built
- Typing animation on the hero headline (runs once per session via sessionStorage)
- Auto-rotating testimonial carousel with fade transitions every 5 seconds
- Scroll-driven fade-in for all cards using IntersectionObserver
- Modal system for team member bios — open/close with background-click dismissal
- Sticky navigation with automatic active-link detection based on current URL
- Multi-page site: Home, About, Work, Services, Contact, and a custom 404 page
- Fully mobile-responsive layout with a single 768px breakpoint
- CSS-only dark theme using a single root variable set
Design Decisions
I chose a terminal aesthetic intentionally. Most agency sites lean on photography and gradients to communicate craft. We wanted ours to communicate precision and technical credibility from the first line of text. Monospace type, sharp borders, and a single neon-green accent color do the heavy lifting.
The typing animation on the hero headline reinforces that terminal feel without being gimmicky — it runs only once per session so it doesn't become annoying on repeat visits. I used sessionStorage to track whether it's already fired rather than a cookie, keeping it lightweight.
Every interactive element — project cards, service tiles, team member bios — responds to hover with a green border accent. This creates a consistent interaction model: anything that reacts to hover is something you can dig into.
What I Learned
Building a multi-page site without a framework forces you to be disciplined about shared CSS. I used a single style.css with CSS custom properties and structured sections clearly — this made it easy to stay consistent across all six pages.
The IntersectionObserver API is more powerful than a scroll-event listener for animation. It fires only when elements enter the viewport, which is more performant and easier to manage than tracking scroll position manually.
A typing animation that replays on every page load is annoying. Using sessionStorage.getItem('typed') to guard the animation is a small detail that makes a real difference in perceived quality.