References & Documentation
How we approached the project and the technical decisions behind it.
Worklog
Copyright Checklist
Narrative and intent
We wanted the site to feel like a real city portal, not a generic template. So we gave it a single, coherent place: a coastal city anchored in the Pacific Northwest. Every design choice (palette, imagery, copy, maps) serves that one narrative. The goal was to show that a fictional project can be built with the same rigor as a real one, so judges can evaluate structure, accessibility, and technical execution in a believable context.
We did not invent a city that could be anywhere. We invented one that clearly belongs somewhere, so the references, the map, and the technical stack all tell the same story.
Map and geography
The Maps & Transport page uses a full-screen Google Maps embed. We set the default query to Port Angeles, WA, so the demo geography matches the narrative. A carousel of featured resources updates the map query on click so users see how “click a place, jump to it on the map” would work. Resource directory popups use a Google Static Map with the resource address and a Get Directions button. Resource data includes mapCoordinates for future per-pin mapping. We used Google (embed plus static) so the experience is familiar and we did not have to maintain custom tiles or geocoding.
Technical architecture
Request flow
All routes live under app/. layout.tsx wraps the app with AuthProvider and renders Navbar and Footer. Pages are server or client components; API routes are in app/api/.
Auth and user data
Each user doc stores email, newsletterSubscribed, alerts.emergency, and preferences. Sign up sends email verification and writes the initial doc; Google sign-in creates the doc on first login if missing.
API routes
| Route | Method | Body / params | Behavior |
|---|---|---|---|
| /api/send-email | POST | email, subject, html | Validates, then Resend.send(). Used by contact and broadcasts. |
| /api/spotlight-data | GET | none | Returns spotlight entries array for home/calendar. |
| /api/admin/broadcast | POST | ?secret=, campaignType, subject, html | Checks secret. Queries Firestore (newsletterSubscribed or alerts.emergency), then sends one email per user via Resend. |
Broadcast flow
Stack
Design
Inspiration
Government and civic websites that influenced the visual direction and UX of Port Laken.
Design Philosophy
Palette
Navy
#1e3a5f
Slate
#2d4a6f
Steel
#4a6d8c
Sky
#6b9bc3
Ice
#a8c5db
Mist
#d4e4ed
Frost
#eef4f8
Display / Headings
Aa
Playfair Display
Serif, hero titles and section headers
Body / UI
Aa
Nunito
Sans-serif, body copy, nav, and buttons
Type scale
Port Laken City Portal
Community First
Civic information, clearly presented. Nunito keeps the UI friendly and legible at every size.
Label / Caption text
Accent
#6b9bc3
port-sky, highlights, icons, and links
Components & Motion
Buttons
Card Hover
Hover me
Cards lift on hover with shadow deepening
Nav Links
Scroll Reveal
Elements enter with fadeInUp at 0.8s ease-out. Staggered children animate in sequence via ScrollRevealStagger.
Frosted Glass
Navbar uses backdrop-blur-3xl + semi-transparent white
Spotlight Grid
Parks
Fire Dept
Finance
Police
Siblings dim when a card is hovered
Why it works together
Playfair Display gives Port Laken editorial weight, the kind of gravitas you'd expect from a real civic institution. Nunito keeps everything readable and warm at the UI level. The coastal blue ramp (navy to frost) creates natural depth without needing shadows everywhere. Rounded corners and subtle lift animations signal interactivity without being loud. The result is a site that feels trustworthy, approachable, and distinctly Pacific Northwest.
Disclaimer & Context
This website and all associated content is a fictional project created solely for educational, design, and portfolio demonstration purposes.
Port Laken is not a real location. It is a completely invented coastal city.
The overall aesthetic, atmosphere, and visual language are inspired by real communities in Washington State, including:
- Port Angeles
- Bellingham
- Bremerton
- Aberdeen
- Sequim
- Anacortes
Imagery and descriptions reference common characteristics of Pacific Northwest coastal regions: misty evergreen forests, rocky and rugged shorelines, active working harbors, small-town maritime culture, and contemporary community elements.
No real-world people, businesses, organizations, events, or specific locations are depicted, referenced, or intended to be represented. All content is original or used within the scope of fair-use/educational purposes.
Visual Comunity Inspiration
Reference imagery from Washington State coastal communities. Each card links to the source.
Image Sources
All images used across the site, organized by source. Used for educational/TSA competition purposes.