Modernize site UX and fix navigation/theme/event behavior#337
Merged
Conversation
- Drop Bootstrap 5.3.3 CDN; replace with hand-crafted modern CSS system - Implement design tokens via CSS custom properties (color, typography, spacing, shadows) - Add light/dark mode support with prefers-color-scheme + localStorage persistence - Replace fixed-px type with fluid clamp() typography scale for responsive design - Remove Fontello icon font; replace with inline SVG icons (GitHub, LinkedIn, X, etc.) - Build custom accessible navbar with hamburger menu + IntersectionObserver active link - Add scroll-reveal animations honoring prefers-reduced-motion - Implement theme-toggle button with no flash (pre-paint script in head) - Redesign hero as typographic section (drop background photo) with improved scroll cue - Update all Razor components with modern markup (Profile, Events, Certifications, etc.) - Add OG/Twitter card meta, canonical, JSON-LD Person schema, improved SEO - Improve accessibility: fix link hover contrast, add :focus-visible, aria-labels - Update index.html: remove Bootstrap CDN, add theme script, modernize meta tags - Rewrite site.js: custom nav, modern JS without Bootstrap.Collapse dependency - CSS file size: 12K → 23K (feature-rich vs legacy bloat) - Zero external CDN dependencies (everything self-hosted) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Fix dark theme toggle: Add CSS rules for html[data-theme="dark"] to properly support manual theme switching via JavaScript - Fix dark theme flash: Remove hardcoded data-theme="light" from body element, let theme.js control it - Fix X/Twitter icon: Update SVG path from old Twitter bird logo to modern X symbol - Fix events scroll reveal: Add .section class to profile-contact section for IntersectionObserver tracking - All fixes verified with clean build (0 errors, 0 warnings) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Updated X icon SVG path in QuickInformation.razor to modern X logo - Was still using old Twitter bird logo in profile-item section - Both Profile.razor and QuickInformation.razor now have consistent X logo Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…M configuration files
There was a problem hiding this comment.
Pull request overview
This PR modernizes the Blazor WebAssembly SPA’s UX and fixes navigation/theme/event-filtering behavior by updating the app shell (HTML/CSS/JS), simplifying the Home/About structure, and extending in-memory event data.
Changes:
- Reworked UI shell: new design-token-based
app.css, updated layout/components for Home/About, Events, and Certifications. - Rebuilt theme + navigation behaviors: pre-paint theme initialization (
theme.js), theme toggle, mobile menu, smooth scroll guard, section reveal, and scrollspy. - Updated content/data and tooling/config: added 2026 events (and more 2025 entries), updated sitemap, and introduced agent/APM configuration files.
Reviewed changes
Copilot reviewed 41 out of 49 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| src/PersonalWebApp/wwwroot/sitemap.xml | Updates sitemap entries for new section structure. |
| src/PersonalWebApp/wwwroot/js/theme.js | Adds pre-paint theme initialization to avoid flash. |
| src/PersonalWebApp/wwwroot/js/site.js | Reworks client-side shell behavior (menu, theme toggle, scroll/scrollspy, reveal). |
| src/PersonalWebApp/wwwroot/index.html | Updates metadata/SEO tags, loader markup, and includes theme pre-paint script. |
| src/PersonalWebApp/wwwroot/fonts/fontello.svg | Removes legacy icon font asset. |
| src/PersonalWebApp/wwwroot/fonts/config.json | Removes legacy fontello config. |
| src/PersonalWebApp/wwwroot/css/app.css | Major CSS modernization with tokens, utilities, new section styles, and loader/reveal styles. |
| src/PersonalWebApp/Services/InMemoryStorageService.cs | Extends event storage to include 2026 and refactors backing dictionary naming. |
| src/PersonalWebApp/Properties/launchSettings.json | Adds local dev port/profile settings. |
| src/PersonalWebApp/Pages/Home.razor | Updates top-level layout/nav and event loading guard; wires JS shell init/dispose. |
| src/PersonalWebApp/Extensions/CommonStrings.cs | Adds NewYork location constant. |
| src/PersonalWebApp/EventsList/Events2026.cs | Adds 2026 events list. |
| src/PersonalWebApp/EventsList/Events2025.cs | Adds 2025 events entries and collateral. |
| src/PersonalWebApp/Components/QuickInformation.razor | Removes the old quick-info/profile-contact strip. |
| src/PersonalWebApp/Components/Profile.razor | Rebuilds About/Profile hero (portrait avatar, social actions, bio). |
| src/PersonalWebApp/Components/EventsSection.razor | Modernizes events UI (timeline/cards, chips, period filter). |
| src/PersonalWebApp/Components/ErrorPage.razor | Updates error page layout and adds a “Go Home” action. |
| src/PersonalWebApp/Components/Certifications.razor | Converts certifications list into a responsive badge grid. |
| PersonalWebApp.sln.DotSettings | Adds a Rider/ReSharper user dictionary entry. |
| apm.yml | Adds APM project configuration. |
| apm.lock.yaml | Adds APM lockfile for marketplace plugin/skill dependencies. |
| .gitignore | Ignores APM dependency directory. |
| .github/github-app.yml | Adds GitHub app automation/dev-server script config. |
| .github/copilot-instructions.md | Updates agent instructions to reflect new navigation/JS behavior. |
| .agents/skills/use-js-interop/SKILL.md | Adds Blazor JS interop guidance skill content. |
| .agents/skills/support-prerendering/SKILL.md | Adds prerendering guidance skill content. |
| .agents/skills/plan-ui-change/SKILL.md | Adds UI planning/decomposition guidance skill content. |
| .agents/skills/fetch-and-send-data/SKILL.md | Adds Blazor data-fetching lifecycle guidance skill content. |
| .agents/skills/create-blazor-project/SKILL.md | Adds Blazor project scaffolding guidance skill content. |
| .agents/skills/create-blazor-project/assets/agents-md/webassembly-per-page.md | Adds AGENTS.md template for WASM per-page mode. |
| .agents/skills/create-blazor-project/assets/agents-md/webassembly-global.md | Adds AGENTS.md template for WASM global mode. |
| .agents/skills/create-blazor-project/assets/agents-md/ssr-none.md | Adds AGENTS.md template for static SSR mode. |
| .agents/skills/create-blazor-project/assets/agents-md/server-per-page.md | Adds AGENTS.md template for Server per-page mode. |
| .agents/skills/create-blazor-project/assets/agents-md/server-global.md | Adds AGENTS.md template for Server global mode. |
| .agents/skills/create-blazor-project/assets/agents-md/auto-per-page.md | Adds AGENTS.md template for Auto per-page mode. |
| .agents/skills/create-blazor-project/assets/agents-md/auto-global.md | Adds AGENTS.md template for Auto global mode. |
| .agents/skills/coordinate-components/SKILL.md | Adds shared-state coordination guidance skill content. |
| .agents/skills/configure-auth/SKILL.md | Adds auth configuration guidance skill content. |
| .agents/skills/collect-user-input/SKILL.md | Adds forms/input/validation guidance skill content. |
| .agents/skills/author-component/SKILL.md | Adds component authoring guidance skill content. |
| .agents/skills/author-component/references/component-disposal.md | Adds disposal guidance reference. |
| .agents/skills/author-component/references/breaking-down-components.md | Adds decomposition guidance reference. |
| .agents/skills/author-component/references/async-programming-rules.md | Adds async rules reference. |
…d sync, sitemap query URL, remove missing assets, fix YAML/namespace typos, use CSS utility classes
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://happy-meadow-096172110-337.centralus.7.azurestaticapps.net |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
This refresh modernizes the site experience and resolves key usability issues that appeared during exploratory testing: event filtering/navigation regressions, unclear theme control behavior, broken social icon rendering, and inconsistent hero/profile structure.
What changed
#homeAbout hero with updated navigation (About,Events,Certifications) and simplified information hierarchy.theme.js) to avoid flash and preserve consistent stateapp.css, removed obsolete font/image assets, and aligned sitemap/instructions/docs with the current structureNotes for reviewers
launchSettings.jsondefaults (http://localhost:5247).