Refactor topbar HTML, projects TS and styles

Minor markup and formatting cleanup plus layout adjustments.

- topbar.component.html: removed mat-toolbar color attribute, compacted/normalized element attributes and spacing, fixed small markup spacing issues.
- projects.component.ts: code formatting and whitespace normalization (imports, property spacing, object literals, small function signature/timeout formatting); no logic changes.
- styles.scss: reorganized topbar rules (added app-topbar wrapper, display and color), switched .hero from grid to flex with responsive flex-basis, adjusted photo and intro flex behavior, increased project grid column min width and centered grid with max-width, removed featured card full-width grid span.

These changes improve consistency, readability and adjust layout/responsiveness of the topbar/hero/project grid.

src/styles.scss

@@ -425,16 +425,21 @@ app-root {
 }
 
 /* ---- Topbar ---- */
-.topbar {
+app-topbar {
   position: sticky;
   top: 0;
   z-index: 100;
+  display: block;
+}
+
+.topbar {
   backdrop-filter: saturate(1.1) blur(8px);
   background: color-mix(in srgb, var(--card-bg) 80%, transparent);
   border-bottom: 1px solid rgba(0, 0, 0, .08);
   display: flex;
   align-items: center;
   padding: clamp(0.5rem, 1vw, 1rem);
+  color: var(--app-fg);
 }
 
 .topbar .brand {
@@ -539,8 +544,8 @@ app-root {
 }
 
 .hero {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 425px), 1fr));
+  display: flex;
+  flex-wrap: wrap;
   gap: clamp(1rem, 4vw, 1.5rem);
   border-radius: var(--card-radius);
   background: var(--card-bg);
@@ -550,7 +555,8 @@ app-root {
 .hero .photo {
   display: flex;
   align-items: flex-start;
-  justify-content: center;
+  justify-content: flex-start;
+  flex: 0 0 clamp(300px, 100%, 425px);
 }
 
 .hero .photo img {
@@ -567,6 +573,7 @@ app-root {
   display: flex;
   flex-direction: column;
   gap: clamp(0.5rem, 2vw, 1rem);
+  flex: 1 1 300px;
 }
 
 .hero .intro h1 {
@@ -748,7 +755,9 @@ app-root {
 .project-grid {
   display: grid;
   gap: clamp(1rem, 3vw, 1.5rem);
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 450px), 1fr));
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 .project-card {
@@ -763,9 +772,7 @@ app-root {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }
 
-.project-card.featured {
-  grid-column: 1 / -1;
-}
+
 
 .project-card mat-card-header {
   padding-bottom: 1rem;