Design System
The foundation of eu4nza.me. A strict monochrome aesthetic combined with squircle geometry, floating contextual overlays, and fluid, state-anchored motion interactions.
Foundations
Colors
Strictly black and white theme. Neutrals are used purely for depth, disabled states, and borders. No accent colors.
Typography
Page Components
Previews of structural components designed for the upcoming About, Socials, Blogs, and Contact pages.
About Structure
Layout designed for the profile and experience section. Removed ambient hover per review update.
Socials Link Banner
A wide button-like card. Removed ambient hover per review update.
Scroll Indicator
A contextual sticky overlay. Appears gracefully at the very top of a page with an ambient bounce array, naturally fading via AnimatePresence when a user scrolls down.
Writing minimal components
Blog posts will utilize a very narrow column width (max 65ch) for optimal readability, relying heavily on typography scale rather than structural boxes.
Contact Form Layout
Motion & Physics
Motion should feel physically grounded and responsive. We rely heavily on spring configurations to avoid linear/abrupt stops.
Spring Scaling
Hover and click to feel the mass and tension of the spring. It overshoots naturally.
Breathing State
Elements in a resting state should have a subtle, slow sinusoidal pulse indicating readiness.
Fluid Interaction
Hovering between elements transfers state fluidly without waiting for animations to resolve.
Chain Response
Neighboring items react in quick succession to keep motion cohesive and avoid isolated, robotic transitions.
Damped Loop
Long-running ambient loops stay smooth and controlled, emulating the subtle breathing cadence of premium interfaces.
UI Toolkit
Interactive
Data Display
Feedback
Overlays & Selection
Tables
| Component | Status |
|---|---|
| Buttons | Live |
| Contact Form | Draft |
Large data table with fixed viewport and both-axis scroll behavior.
| ID | Project | Environment | Resource Group | Owner | Status | Build ID | Priority | ETA | Region | Tags | Updated |
|---|---|---|---|---|---|---|---|---|---|---|---|
| #1000 | Core Infrastructure Revamp 1 | Production | rg-core-infra-1 | E. Chua | Live | 35ab | High | Q1 2026 | APAC | eu4nza | 10m ago |
| #1001 | Core Infrastructure Revamp 2 | Development | rg-core-infra-2 | E. Chua | In Progress | 6b56 | Medium | Q2 2026 | APAC | sys | 11m ago |
| #1002 | Core Infrastructure Revamp 3 | Staging | rg-core-infra-3 | E. Chua | In Progress | a101 | High | Q3 2026 | APAC | eu4nza | 12m ago |
| #1003 | Core Infrastructure Revamp 4 | Production | rg-core-infra-4 | E. Chua | Live | d6ac | Medium | Q4 2026 | APAC | sys | 13m ago |
| #1004 | Core Infrastructure Revamp 5 | Staging | rg-core-infra-5 | E. Chua | In Progress | 10c57 | High | Q1 2026 | APAC | eu4nza | 14m ago |
| #1005 | Core Infrastructure Revamp 6 | Development | rg-core-infra-1 | E. Chua | In Progress | 14202 | Medium | Q2 2026 | APAC | sys | 15m ago |
| #1006 | Core Infrastructure Revamp 7 | Production | rg-core-infra-2 | E. Chua | Live | 177ad | High | Q3 2026 | APAC | eu4nza | 16m ago |
| #1007 | Core Infrastructure Revamp 8 | Development | rg-core-infra-3 | E. Chua | In Progress | 1ad58 | Medium | Q4 2026 | APAC | sys | 17m ago |
| #1008 | Core Infrastructure Revamp 9 | Staging | rg-core-infra-4 | E. Chua | In Progress | 1e303 | High | Q1 2026 | APAC | eu4nza | 18m ago |
| #1009 | Core Infrastructure Revamp 10 | Production | rg-core-infra-5 | E. Chua | Live | 218ae | Medium | Q2 2026 | APAC | sys | 19m ago |
| #1010 | Core Infrastructure Revamp 11 | Staging | rg-core-infra-1 | E. Chua | In Progress | 24e59 | High | Q3 2026 | APAC | eu4nza | 20m ago |
| #1011 | Core Infrastructure Revamp 12 | Development | rg-core-infra-2 | E. Chua | In Progress | 28404 | Medium | Q4 2026 | APAC | sys | 21m ago |
| #1012 | Core Infrastructure Revamp 13 | Production | rg-core-infra-3 | E. Chua | Live | 2b9af | High | Q1 2026 | APAC | eu4nza | 22m ago |
| #1013 | Core Infrastructure Revamp 14 | Development | rg-core-infra-4 | E. Chua | In Progress | 2ef5a | Medium | Q2 2026 | APAC | sys | 23m ago |
| #1014 | Core Infrastructure Revamp 15 | Staging | rg-core-infra-5 | E. Chua | In Progress | 32505 | High | Q3 2026 | APAC | eu4nza | 24m ago |
| #1015 | Core Infrastructure Revamp 16 | Production | rg-core-infra-1 | E. Chua | Live | 35ab0 | Medium | Q4 2026 | APAC | sys | 25m ago |
| #1016 | Core Infrastructure Revamp 17 | Staging | rg-core-infra-2 | E. Chua | In Progress | 3905b | High | Q1 2026 | APAC | eu4nza | 26m ago |
| #1017 | Core Infrastructure Revamp 18 | Development | rg-core-infra-3 | E. Chua | In Progress | 3c606 | Medium | Q2 2026 | APAC | sys | 27m ago |
| #1018 | Core Infrastructure Revamp 19 | Production | rg-core-infra-4 | E. Chua | Live | 3fbb1 | High | Q3 2026 | APAC | eu4nza | 28m ago |
| #1019 | Core Infrastructure Revamp 20 | Development | rg-core-infra-5 | E. Chua | In Progress | 4315c | Medium | Q4 2026 | APAC | sys | 29m ago |
| #1020 | Core Infrastructure Revamp 21 | Staging | rg-core-infra-1 | E. Chua | In Progress | 46707 | High | Q1 2026 | APAC | eu4nza | 10m ago |
| #1021 | Core Infrastructure Revamp 22 | Production | rg-core-infra-2 | E. Chua | Live | 49cb2 | Medium | Q2 2026 | APAC | sys | 11m ago |
| #1022 | Core Infrastructure Revamp 23 | Staging | rg-core-infra-3 | E. Chua | In Progress | 4d25d | High | Q3 2026 | APAC | eu4nza | 12m ago |
| #1023 | Core Infrastructure Revamp 24 | Development | rg-core-infra-4 | E. Chua | In Progress | 50808 | Medium | Q4 2026 | APAC | sys | 13m ago |