change project sections with grid and tech skills

src/components/Project.astro

@@ -1,33 +1,9 @@
 ---
 import Section from './Section.astro';
-import SummaryItem from './SummaryItem.astro';
+import ProjectsGrid from './ProjectsGrid.astro';
 import { t } from '../utils/i18n.ts';
-
-interface Projects {
-  title: string;
-  description: string;
-  repo: string;
-}
-
-const projects = t('projects.items') as Projects[];
 ---
 
 <Section title={t('projects.title')}>
-   {projects.map((project) => (
-    <SummaryItem
-      name={project.title}
-      description={project.description}
-      link={project.repo}
-    />
-  ))}
-  <SummaryItem
-    name="Lifeguard Times (Google Play)"
-    description="A Jetpack Compose app for Lifeguard Times to allow readers trending and newsworthy articles related to lifeguards and lifeguarding-related topics"
-    link="https://play.google.com/store/apps/details?id=com.elifeguard.lifeguardtimes&hl=en_US&pli=1"
-  />
-  <SummaryItem
-    name="Lifeguard Times (App Store)"
-    description="A SwiftUI app for Lifeguard Times to allow readers trending and newsworthy articles related to lifeguards and lifeguarding-related topics"
-    link="https://apps.apple.com/us/app/lifeguard-times/id1130306650"
-  />
+  <ProjectsGrid projects={t('projects.items')} />
 </Section>

src/components/ProjectsGrid.astro

@@ -0,0 +1,69 @@
+---
+interface Project {
+  title: string;
+  description: string;
+  tech?: string[];
+  repo?: string;
+  date?: string;
+}
+
+interface Props {
+  projects: Project[];
+}
+
+const { projects } = Astro.props;
+
+const linkClass =
+  "hover:underline hover:text-black dark:hover:text-blue-400";
+---
+
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+  {projects.map((project) => (
+    <div class="mb-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-md p-6 transition hover:shadow-lg">
+
+      {project.repo ? (
+        <h3 class="font-semibold text-gray-900 dark:text-white pb-1">
+          <a
+            href={project.repo}
+            target="_blank"
+            class={linkClass}
+            aria-label={`${project.title} (opens in a new tab)`}
+          >
+            {project.title}
+          </a>
+        </h3>
+      ) : (
+        <h3 class="font-semibold text-gray-900 dark:text-white pb-1">
+          {project.title}
+        </h3>
+      )}
+
+      {project.date && (
+        <time
+          class="italic text-gray-600 dark:text-gray-300 pb-1 block"
+          datetime={project.date}
+        >
+          {project.date}
+        </time>
+      )}
+
+      <p class="text-md text-gray-600 dark:text-gray-200 font-light mb-4">
+        {project.description}
+      </p>
+
+      {project.tech && project.tech.length > 0 && (
+        <div class="flex flex-wrap gap-2 mt-2">
+          {project.tech.map((item) => (
+            <span
+              class="inline-block bg-gray-100 text-gray-800 text-sm font-medium px-3 py-1 rounded-full
+                     dark:bg-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
+            >
+              {item}
+            </span>
+          ))}
+        </div>
+      )}
+
+    </div>
+  ))}
+</div>

src/config/text.json

@@ -14,7 +14,7 @@
   },
   "about": {
     "title": "About Me",
-    "description": "I’ve spent 8+ years building reliable mobile, web, and backend applications using C#/.NET, Kotlin, Swift, TypeScript, and modern frameworks."
+    "description": "I've spent 8+ years building reliable mobile, web, and backend applications using C#/.NET, Kotlin, Swift, TypeScript, and modern frameworks."
   },
   "educations": {
     "title": "Education",
@@ -192,38 +192,51 @@
     "items": [
       {
         "title": "CareerFlow",
-        "description": "An Android application built with Jetpack Compose that provides AI-driven career guidance, resume insights, and role recommendations. Focuses on modern Android architecture and real-world AI integration.",
+        "description": "An Android application that provides AI-driven career guidance, resume insights, and personalized role recommendations.",
+        "tech": ["Kotlin", "Jetpack Compose", "Gemini API"],
         "repo": "https://github.com/iNoles/CareerFlow"
       },
       {
         "title": "Taskify",
-        "description": "A productivity-focused Android app featuring task creation, updates, and offline persistence. Built using modern Android architecture with clean separation of concerns.",
+        "description": "An productivity app for creating, updating, and organizing tasks with support for offline usage.",
+        "tech": ["Kotlin", "Room", "Jetpack Compose", "Koin"],
         "repo": "https://github.com/iNoles/Taskify"
       },
       {
         "title": "TopCoinTrack",
-        "description": "A real-time cryptocurrency tracking app that fetches and displays market data with sorting, error handling, and scalable UI state management.",
+        "description": "A real-time cryptocurrency tracker that displays market data with sorting, error handling, and responsive UI updates.",
+        "tech": ["Kotlin", "Coroutines", "Fuel", "Jetpack Compose", "Room"],
         "repo": "https://github.com/iNoles/TopCoinTrack"
       },
       {
         "title": "HackerNews",
-        "description": "A cross-platform Hacker News client built with .NET MAUI for Android and iOS. Features real-time story updates via Firebase and follows MVVM architecture.",
+        "description": "A cross-platform client for browsing Hacker News stories with real-time content updates.",
+        "tech": [".NET MAUI", "C#", "Firebase Realtime Database", "CommunityToolkit.Mvvm"],
         "repo": "https://github.com/iNoles/HackerNews"
       },
       {
         "title": "SpringTasker",
-        "description": "A RESTful backend service for managing tasks and users. Designed to support mobile or web clients with clean API design and scalable backend architecture.",
+        "description": "A backend service for managing users and tasks through a structured set of RESTful endpoints.",
+        "tech": ["Java", "Spring Boot", "Spring Data JPA", "JWT", "H2 Database"],
         "repo": "https://github.com/iNoles/SpringTasker"
       },
       {
         "title": "ShopShowcase",
-        "description": "A .NET MAUI application integrating with Shopify's Storefront GraphQL API to browse products and manage storefront data across platforms.",
+        "description": "A cross-platform application for browsing products and storefront data using Shopify's Storefront API.",
+        "tech": [".NET MAUI", "C#", "GraphQL", "Shopify Storefront API", "MVVM"],
         "repo": "https://github.com/iNoles/ShopShowcase"
       },
       {
         "title": "BookTracker",
-        "description": "A full-stack ASP.NET Core project for tracking and managing books. Includes authentication, CRUD operations, and REST API endpoints to support mobile or web clients.",
+        "description": "A full-stack application for managing books with authentication, CRUD operations, and API support for external clients.",
+        "tech": ["ASP.NET Core", "C#", "Entity Framework", "SQLite", "Vue 3", "TypeScript", "Tailwind CSS", "xUnit"],
         "repo": "https://github.com/iNoles/BookTracker"
+      },
+      {
+        "title": "Lifeguard Times (Google Play)",
+        "description": "A Jetpack Compose app that provides trending and newsworthy articles related to lifeguards and lifeguarding topics.",
+        "tech": ["Kotlin", "Jetpack Compose", "Firebase"],
+        "repo": "https://play.google.com/store/apps/details?id=com.elifeguard.lifeguardtimes"
       }
     ]
   },