Michael George's Work | ContraWork by Michael George
Michael George

Michael George

Frontend Developer crafting fast, modern web experience

New to Contra

Michael is building their profile!

Lagos, Nigeria

WorkAbout

Lagos, Nigeria

Cover image for Peaceful Hotel & Suites is
Peaceful Hotel & Suites is a web application designed as a modern marketing and booking showcase for a fictional luxury boutique hotel. Built using Next.js 14 (App Router), TypeScript, and Tailwind CSS, the project serves as a showcase of clean frontend architecture, strong Core Web Vitals performance, and comprehensive search engine optimization (SEO). Key Technical & Functional Highlights Architecture & Single-Source Content (lib/data.ts): All dynamic copy—including the 4 distinct room types, resort amenities, customer testimonials, contact details, and FAQs—is centralized in lib/data.ts. This design allows full site rebranding or price updates in a single file without modifying layout or page components. Performance Optimization & Zero External Dependencies: System Font Stack: Utilizes native system fonts (a Georgia/Iowan serif stack for display headers and native UI fonts for body text), eliminating webfont network requests and preventing build failures on restricted networks. Custom Lightweight SVGs: Replaces heavy, uncompressed photography with custom vector SVG artwork (all under ~7KB) in public/images/, ensuring sub-second load times. Smart Image Delivery: Integrates next/image with lazy loading for below-the-fold content and priority preloading strictly for Above-The-Fold (LCP) media. Zero-JS Interactivity: Features an interactive FAQ accordion powered natively by HTML <details> and <summary> elements, eliminating unnecessary client-side JavaScript. Production-Grade SEO Engineering: Implements the Next.js Metadata API for page-level <title> and <meta> description configurations. Incorporates JSON-LD Hotel structured data directly into the root layout to enable rich snippets in search engine results. Features dynamically auto-generated sitemap.xml and robots.txt files (app/sitemap.ts and app/robots.ts) along with canonical URL definitions and Open Graph / Twitter metadata cards. Included Page Routes: Home: Hero section, room highlights, key amenities, and guest reviews. Rooms & Suites: Detailed views for 4 distinct room tiers. Amenities & Gallery: Highlighting facilities (restaurant, lounge, pool, gym, spa). About & Contact: Contact forms, interactive FAQs, and location information.
0
4