NORTHSTAR® Studio

NORTHSTAR Studio is a fully static, bilingual portfolio website built for an independent digital agency. The site presents the agency’s work, services, and brand identity through a minimal, high-contrast dark interface with scroll-driven animations, custom cursor interactions, and smooth page transitions. It was developed using Astro 7 with Tailwind CSS v4, GSAP for animation, and Astro’s content collections for managing multilingual project data. The entire site is statically generated at build time, resulting in fast load times, zero server dependencies, and a lightweight client-side footprint limited to a single animation bundle and Astro’s Client Router.

Challenge & Solution

The primary challenge was building a polished, production-quality agency portfolio that balances visual richness with technical performance. The site needed full bilingual support for English and Greek, a content management approach that keeps project data structured and typed, and an animation system that feels fluid without sacrificing accessibility or page weight. To address this, the project uses Astro’s islands architecture: all components are server-rendered .astro files with no framework overhead, and the only client-side JavaScript is a single GSAP animation module and Astro’s Client Router for view transitions. Content is managed through Astro’s glob-based content collections with Zod schema validation, where each project exists as a separate Markdown file per locale. The animation system is built entirely on GSAP with ScrollTrigger, using a data-attribute targeting strategy that cleanly separates animation concerns from styling. A custom cleanup mechanism kills all ScrollTrigger instances and removes event listeners on page navigation, preventing memory leaks during SPA-style transitions. Internationalization is handled through a manual locale detection utility, prefix-based routing, and per-component translation lookups, giving full control over URL structure and content rendering without relying on middleware.

Final Result

The final product is a fast, accessible, and visually refined portfolio site that ships as pure static HTML with a minimal JavaScript payload. The site generates 11 pages across two locales, with automatic image optimization through Sharp producing responsive WebP variants at build time. Every section features scroll-triggered entrance animations, the homepage includes an animated counter for key statistics, and project pages use clip-path reveal effects for hero images. The custom cursor provides a subtle interactive layer on desktop while being automatically hidden on touch devices. Full SEO metadata is present on every page, including Open Graph tags, Twitter Cards, JSON-LD structured data, and a generated sitemap. The result is a site that scores well on performance metrics while delivering a distinctive, agency-quality presentation suitable for a professional portfolio.