[UI] Implement Profile Dashboard Layout & Identity Component #27

Closed
opened 2026-05-09 17:41:49 +00:00 by mjasin · 0 comments
Owner

Context: The user profile page requires a futuristic, dark-themed layout to display identity and core metrics.
Role: Senior Frontend Engineer.
Task: Create the Profile.razor page utilizing CSS Grid and the "Nexus Station" aesthetic.
Requirements:

  1. Page Container: Create a main container with a dark background and a subtle radial gradient behind the user's avatar.
  2. Identity Section: Implement a central circular Avatar image container with a pulsing --nexus-neon (#00ff99) border and glow effect (box-shadow).
  3. Typography: Display the Username in Merriweather (serif) and the system rank (e.g., "[User_Explorer1988]") in Inter/Monospace below the avatar.
  4. Glassmorphism: Ensure surrounding metric containers use a dark, semi-transparent background (rgba(255,255,255,0.03)) with a blur backdrop filter.
**Context:** The user profile page requires a futuristic, dark-themed layout to display identity and core metrics. **Role:** Senior Frontend Engineer. **Task:** Create the `Profile.razor` page utilizing CSS Grid and the "Nexus Station" aesthetic. **Requirements:** 1. **Page Container:** Create a main container with a dark background and a subtle radial gradient behind the user's avatar. 2. **Identity Section:** Implement a central circular Avatar image container with a pulsing `--nexus-neon` (`#00ff99`) border and glow effect (`box-shadow`). 3. **Typography:** Display the Username in Merriweather (serif) and the system rank (e.g., "[User_Explorer1988]") in Inter/Monospace below the avatar. 4. **Glassmorphism:** Ensure surrounding metric containers use a dark, semi-transparent background (`rgba(255,255,255,0.03)`) with a blur backdrop filter.
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: mjasin/Nexus.Reader#27