feat(ui): add aitalkmate screens and profile logo

src/App.css

@@ -108,15 +108,26 @@ main {
 .brand {
   align-items: center;
   background: linear-gradient(135deg, #0aa3c2, #62e6ba);
-  border-radius: 8px;
+  border: 2px solid rgba(255, 255, 255, 0.84);
+  border-radius: 999px;
+  box-shadow: 0 12px 30px rgba(8, 126, 164, 0.22);
   color: #ffffff;
   display: inline-flex;
   font-weight: 950;
-  height: 42px;
+  height: 48px;
   justify-content: center;
   letter-spacing: 0.08em;
+  overflow: hidden;
   text-decoration: none;
-  width: 52px;
+  width: 48px;
+}
+
+.brand img {
+  display: block;
+  height: 100%;
+  object-fit: cover;
+  object-position: 50% 42%;
+  width: 100%;
 }
 
 .nav-links {
@@ -512,7 +523,7 @@ h3 {
 .project-card-1::after {
   background-image:
     linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.88)),
-    url("/aitalkmate-preview.png");
+    url("/aitalkmate-home-screen.png");
 }
 
 .project-card-2::after {
@@ -592,7 +603,7 @@ h3 {
 }
 
 .project-preview-1::before {
-  background-image: url("/aitalkmate-preview.png");
+  background-image: url("/aitalkmate-home-screen.png");
 }
 
 .project-preview-2::before {
@@ -619,13 +630,20 @@ h3 {
     linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(238, 247, 255, 0.82));
 }
 
+.project-preview-1.project-preview-count-3 {
+  background:
+    radial-gradient(circle at 22% 24%, rgba(116, 86, 214, 0.24), transparent 31%),
+    radial-gradient(circle at 78% 24%, rgba(214, 74, 178, 0.18), transparent 32%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(242, 236, 255, 0.78));
+}
+
 .project-preview-1::after {
   inset: 34px 28px;
   opacity: 0.56;
   transform: rotate(1.2deg);
 }
 
-.project-preview-1 img {
+.project-preview-1.project-preview-count-1 img {
   aspect-ratio: 16 / 9;
   border-radius: 14px;
   max-height: none;
@@ -699,6 +717,18 @@ h3 {
   transform: translateY(-6px) rotate(0deg) rotateX(0deg) scale(1.02);
 }
 
+.project-card:hover .project-preview-1.project-preview-count-3 img:nth-child(1) {
+  transform: translate(-94%, -47%) rotate(-11deg) scale(0.95);
+}
+
+.project-card:hover .project-preview-1.project-preview-count-3 img:nth-child(2) {
+  transform: translate(-2%, -51%) rotate(0deg) scale(1.12);
+}
+
+.project-card:hover .project-preview-1.project-preview-count-3 img:nth-child(3) {
+  transform: translate(90%, -47%) rotate(11deg) scale(0.95);
+}
+
 .project-card:hover .project-preview-count-3 img:nth-child(1) {
   transform: translate(-94%, -47%) rotate(-11deg) scale(0.95);
 }

src/App.tsx

@@ -28,8 +28,12 @@ const projects = [
     name: 'AITALKMATE',
     type: 'React Native App',
     time: 'Jul 2025 - Feb 2026',
-    preview: '/aitalkmate-preview.png',
-    previews: ['/aitalkmate-preview.png'],
+    preview: '/aitalkmate-home-screen.png',
+    previews: [
+      '/aitalkmate-progress-screen.png',
+      '/aitalkmate-home-screen.png',
+      '/aitalkmate-review-screen.png',
+    ],
     description:
       'Cross-platform mobile app for English speaking practice. Designed UI/UX in Figma, implemented front-end features with React Native, and integrated Firebase realtime database and authentication.',
     links: [
@@ -158,7 +162,9 @@ function App() {
     <main>
       <div className="ambient-grid" aria-hidden="true" />
       <nav className="topbar" aria-label="Primary navigation">
-        <a className="brand" href="#hero">TQH</a>
+        <a className="brand" href="#hero" aria-label="Tran Quang Hung home">
+          <img src="/profile-avatar.png" alt="" />
+        </a>
         <div className="nav-links">
           <a href="#projects">Projects</a>
           <a href="#skills">Skills</a>