Ocianix Corporate Website
The official digital presence for Ocianix technology studio. A showcase of our architecture-first approach — static, fast, and content-rich.
Visit Live Site →The Challenge
Building a corporate website that practices what we preach — minimal stack, maximum performance, real content that demonstrates expertise.
Key Results
- 27 pages, 11 articles, 8 project case studies
- 100/100 Lighthouse performance
- Zero-JS content pages
- Automated deployment via GitHub → Cloudflare
Technology Stack
Overview
The Ocianix website is the studio’s digital headquarters — communicating brand positioning, showcasing project work, publishing technical articles, and handling inbound inquiries. More than a brochure site, it’s a living demonstration of our approach to web development.
Every technical decision mirrors what we recommend to clients: static-first architecture, minimal dependencies, content managed through version control, and infrastructure that scales without operational overhead.
Architecture
The site runs on Astro with content collections for both projects and insights. Pages compile to static HTML with JavaScript used only for interactive elements — scroll animations, form submission, and counter animations. This produces consistently fast page loads and strong Core Web Vitals scores.
Cloudflare Pages handles hosting with automatic deployments triggered by GitHub pushes. Supabase provides the backend for the contact form. The total infrastructure cost is effectively zero.
Content System
All content is managed through Markdown files in the repository. Articles and project case studies use Astro’s content collections with typed schemas, providing structure without CMS overhead. The editorial workflow is: write in Markdown → commit to GitHub → live in minutes.
This approach gives the team full version control over every published piece, makes collaboration straightforward through pull requests, and eliminates an entire category of security concerns that come with traditional CMS platforms.
Design System
The visual identity is built on CSS Custom Properties — a design token system that controls typography, spacing, color, and layout across every page. No CSS framework, no utility classes, no build-time processing. The tokens provide consistency while keeping the codebase lean and readable.
Interactive elements use the Intersection Observer API for scroll-triggered animations, creating a polished browsing experience without heavy animation libraries.