Website Description

Alabama Project is a serious, immersive roleplay community set in Alabama, designed for players seeking deep, meaningful stories and connections. The website features a visually striking landing page with confetti effects, a countdown timer for events, and clear calls to action for joining the server and Discord community.

Features

Roleplay: Create your character and live your story in an immersive Alabama setting.
Economy: Work jobs, start businesses, and build your fortune in a realistic economy.
Community: Join a dedicated community of players committed to quality roleplay.

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.

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 HTML’s video tag and absolute positioning with the trailer.
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.

“Built for Deep, Meaningful Roleplay”

Key Achievements

86/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 (Alabama Red) and deep neutrals.

Alabama Project Landing