A serious, consequence-driven roleplay gateway built to convert visitors into community members. This project prioritizes Core Web Vitals and Visual Identity to reflect the high-stakes nature of the Sunstone RP server.

Visit the live site at https://sunstonerp.net

Performance Architecture

For this project, I moved away from traditional Single Page Applications (SPAs) to a Static-First approach.

Astro (Framework): I chose Astro to leverage its “Islands Architecture.” Since the landing page is 90% static content, Astro allows me to ship zero JavaScript to the browser, resulting in near-instant load times.
Tailwind CSS (Styling): Used for a utility-first workflow. It allowed me to build the custom “dark-mode” aesthetic with precision—specifically the glassmorphism effects on the feature cards and the custom red-to-transparent gradients.
Vercel (Deployment): The site is deployed on Vercel’s Edge Network. This ensures that whether a player is in Europe or North America, the site assets are served from the nearest CDN node.

Technologies Used

Technology	Role in Project
Astro	Static Site Generation (SSG) for elite performance.
Tailwind CSS	Responsive layouts, typography, and custom UI.
Vercel	Global hosting, CI/CD, and Edge delivery.
Lucide Icons	Minimalist iconography for server features.

Design Breakdown

1. The Hero Section

The goal was immediate clarity. The hero uses a high-contrast typography scale to emphasize the “Serious RP” brand.

The “How”: Using Tailwind’s bg-gradient-to-b and absolute positioning for the background imagery to maintain depth without sacrificing readability.
The “Why”: Gamers make split-second decisions. A clear “Play Now” vs. “Join Discord” hierarchy ensures we capture both active players and community lurkers.

2. The Features Grid

I implemented a three-pillar layout to address the primary concerns of RP players: Persistence, Lore, and Lag.

Persistent World: Highlights the database-driven nature of the server.
Immersive Lore: Uses a soft-red background tint to distinguish the “Story” aspect.
Reliable Performance: Explicitly mentions FiveM stability to build technical trust.

The footer acts as a secondary navigation hub. By including GitHub and TikTok links, we show that the project is transparent (Open Source/Dev-friendly) and active on social media.

“A serious, consequence-driven RP city where actions persist and power is earned slowly. Built for the community, by the community.”

Key Achievements

96/100 Lighthouse Performance Score: Thanks to Astro’s static output (needs accessbility improvements).
Responsive Design: Fully optimized for mobile users (Discord’s primary demographic).
Brand Consistency: Maintained a strict color palette of #D1112E (Sunstone Red) and deep neutrals.

Sunstone Landing