feat(icons): Expand icon library and introduce icon retrieval helper

src/lib/icons.ts

@@ -1,14 +1,47 @@
-import { FaJava, FaReact } from "react-icons/fa";
-import { SiSpring, SiTailwindcss, SiTypescript, SiPostgresql } from "react-icons/si";
-import { IconType } from "react-icons";
+import {IconType} from "react-icons";
+import {
+    SiCss3,
+    SiFramework,
+    SiGit,
+    SiGithub,
+    SiHtml5,
+    SiJava,
+    SiJavascript,
+    SiMicrogenetics,
+    SiNestjs,
+    SiNextdotjs,
+    SiPostgresql,
+    SiReact,
+    SiSpringboot,
+    SiTrello,
+    SiTypescript
+} from "react-icons/si";
 
+// Central dictionary of icons
+// The key (e.g., 'react') is what will be saved in data.
+// The value (e.g., FaReact) is the actual icon component.
 export const ICONS = {
-  react: FaReact,
-  typescript: SiTypescript,
-  tailwind: SiTailwindcss,
-  java: FaJava,
-  spring: SiSpring,
-  postgres: SiPostgresql,
-} as const; // 'as const' is crucial for deriving a narrow type
+    react: SiReact,
+    springboot: SiSpringboot,
+    java: SiJava,
+    nextjs: SiNextdotjs, // Using SiNextdotjs for consistency
+    typescript: SiTypescript,
+    git: SiGit,
+    github: SiGithub,
+    nestjs: SiNestjs,
+    microservices: SiMicrogenetics,
+    postgres: SiPostgresql,
+    trello: SiTrello,
+    html: SiHtml5,
+    css: SiCss3,
+    javascript: SiJavascript,
+    scrolljs: SiFramework, // Assuming SiFramework is for ScrollJS or similar
+} as const; // Crucial for strict typing
 
+// Derived type that only allows keys from our dictionary
 export type IconName = keyof typeof ICONS;
+
+// Helper to get an icon component by its name
+export const getIconComponent = (iconName: IconName): IconType => {
+    return ICONS[iconName];
+};

src/lib/types.ts

@@ -0,0 +1,63 @@
+import {IconName} from "./icons"; // Import our new IconName type
+
+// === Types for Projects ===
+export const projectCategories = ["all", "web", "backend", "mobile"] as const;
+export type ProjectCategory = typeof projectCategories[number];
+
+export interface TechLink {
+    name: string;
+    icon: IconName; // Use the string-based icon name
+}
+
+export interface Project {
+    id: string; // Unique identifier (UUID)
+    title: string;
+    description: string;
+    category: ProjectCategory;
+    repoGit?: string; // Renamed for clarity and consistency
+    liveUrl?: string;
+    tech: TechLink[]; // Use TechLink for project technologies
+    imageUrl?: string;
+}
+
+// === Types for Technical Stack ===
+export interface Technology {
+    id: string; // Unique identifier (UUID)
+    name: string;
+    icon: IconName; // Use the string-based icon name
+    color: string;
+    size?: 'small' | 'medium' | 'large';
+}
+
+// === Types for Blog Posts ===
+export interface BlogPost {
+    id: string; // Unique identifier (UUID)
+    title: string;
+    excerpt: string;
+    content: string; // Full HTML content or markdown
+    category: string;
+    author: string;
+    publishedAt: string; // ISO date string for easier serialization
+    image?: string; // Optional URL to the main image
+    tags: string[];
+    readingTime?: number; // Estimated reading time in minutes
+}
+
+// === Types for Experience Items ===
+export interface ExperienceItem {
+    id: string; // Unique identifier (UUID)
+    title: string;
+    institution: string;
+    date: string; // e.g., "June 2025 - Sept. 2025" or "2023 - 2025"
+    description: string;
+}
+
+// === Global Type for all Portfolio Data ===
+export interface PortfolioData {
+    projects: Project[];
+    technologies: Technology[];
+    blogPosts: BlogPost[]; // Added blog posts
+    professionalExperiences: ExperienceItem[];
+    academicBackground: ExperienceItem[];
+    // Future: services, contact info, etc.
+}

src/pages/home.tsx

@@ -1,17 +1,15 @@
 import Layout from "@/components/layout/layout";
 import HeroSection from "@/components/home/HeroSection.tsx";
-import AboutSection from "@/components/home/AboutSection.tsx";
 import ServicesSection from "@/components/home/ServicesSection.tsx";
 import AboutMe from "@/components/AboutMe.tsx";
 import MyExperience from "@/components/MyExperience.tsx";
 import MyStack from "@/components/MyStack.tsx";
-import CTA from "@/components/CTA.tsx";
 import ContactForm from "@/components/ContactForm.tsx";
 
 const Home = () => {
     return (
         <Layout
-            title="Wistant Kode - DevSecOps Practicer | Software Engineering Student"
+            title="Wistant Kode - Porfolio | Software Engineering Student"
             description="Wistant Kode's portfolio: a passionate Software Engineering Student and DevSecOps Practicer. Specializing in Java/Spring Boot, React/Next.js, Cloud, Automation, and Cybersecurity. Building innovative and scalable digital solutions."
             keywords="Wistant Kode, DevSecOps, Software Engineer, Java, Spring Boot, React, Next.js, Cloud, Automation, Cybersecurity, Portfolio, Web Development, Backend Development, Africa Tech"
             lang="en"