REFACTOR(ui): remove subpages

- Remove unused subpages
- Simplify navigation structure

deploy/k8s/overlays/prod/kustomization.yaml

@@ -13,7 +13,7 @@ commonLabels:
 # 이미지 태그 설정
 images:
   - name: ghcr.io/mayne0213/portfolio
-    newTag: main-sha-a58ae10db564ef563f9fda8f033526d282c049bd
+    newTag: main-sha-fcf39f0959d4ce54d3771307e9182b121dcd8ab4
 
 patchesStrategicMerge:
   - deployment-patch.yaml

services/nextjs/app/globals.css

@@ -108,6 +108,14 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  .page-container {
+    @apply flex flex-col items-center justify-center gap-16 p-4 tablet:p-8 py-20 mt-[70px];
+  }
+
+  .theme-background {
+    @apply bg-gray-100 dark:bg-neutral-800;
+  }
 }
 
 .border-b-brand-primary {

services/nextjs/app/monitoring/page.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { useState } from "react";
+import SectionHeader from "@/components/landing/section-header";
+import { Button } from "@/components/ui/button";
+
+type Section = "overview" | "resources" | "kubernetes" | "network";
+
+const sections: { id: Section; label: string; panels: number }[] = [
+  { id: "overview", label: "Overview", panels: 8 },
+  { id: "resources", label: "Resources", panels: 8 },
+  { id: "kubernetes", label: "Kubernetes", panels: 4 },
+  { id: "network", label: "Network", panels: 6 },
+];
+
+export default function MonitoringPage() {
+  const [activeSection, setActiveSection] = useState<Section>("overview");
+
+  return (
+    <main className="page-container">
+      <SectionHeader
+        title="Monitoring"
+        description="Real-time Kubernetes cluster monitoring with Grafana dashboards"
+      />
+
+      {/* 섹션 선택 버튼 */}
+      <div className="flex gap-2 flex-wrap justify-center">
+        {sections.map((section) => (
+          <Button
+            key={section.id}
+            onClick={() => setActiveSection(section.id)}
+            variant={activeSection === section.id ? "default" : "outline"}
+            className="transition-all"
+          >
+            {section.label}
+            <span className="ml-2 text-sm opacity-60">
+              ({section.panels} panels)
+            </span>
+          </Button>
+        ))}
+      </div>
+
+      {/* Overview 섹션 */}
+      {activeSection === "overview" && (
+        <div className="flex gap-2 flex-wrap justify-center">
+          {/* 왼쪽 2개 열 (CPU, RAM) */}
+          <div className="flex gap-2">
+            {/* Global CPU Usage 열 */}
+            <div className="flex flex-col gap-2">
+              {/* Global CPU Usage (id:77) - w:6, h:8 */}
+              <div className="w-[400px] h-[320px] theme-background rounded-lg overflow-hidden">
+                {/* iframe: panelId=77 */}
+              </div>
+              {/* CPU Usage (id:37) - w:6, h:4 */}
+              <div className="w-[400px] h-[160px] theme-background rounded-lg overflow-hidden">
+                {/* iframe: panelId=37 */}
+              </div>
+            </div>
+
+            {/* Global RAM Usage 열 */}
+            <div className="flex flex-col gap-2">
+              {/* Global RAM Usage (id:78) - w:6, h:8 */}
+              <div className="w-[400px] h-[320px] theme-background rounded-lg overflow-hidden">
+                {/* iframe: panelId=78 */}
+              </div>
+              {/* RAM Usage (id:39) - w:6, h:4 */}
+              <div className="w-[400px] h-[160px] theme-background rounded-lg overflow-hidden">
+                {/* iframe: panelId=39 */}
+              </div>
+            </div>
+          </div>
+
+          {/* 가운데 좁은 열 (Nodes, Namespace, Running Pods) - w:2 */}
+          <div className="flex flex-col gap-2">
+            {/* Nodes (id:63) - w:2, h:4 */}
+            <div className="w-[133px] h-[160px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=63 */}
+            </div>
+            {/* Namespaces (id:59) - w:2, h:4 */}
+            <div className="w-[133px] h-[160px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=59 */}
+            </div>
+            {/* Running Pods (id:62) - w:2, h:4 */}
+            <div className="w-[133px] h-[160px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=62 */}
+            </div>
+          </div>
+
+          {/* 오른쪽 넓은 열 (Kubernetes Resource Count) */}
+          {/* Kubernetes Resource Count (id:52) - w:10, h:12 */}
+          <div className="w-[667px] h-[488px] theme-background rounded-lg overflow-hidden">
+            {/* iframe: panelId=52 */}
+          </div>
+        </div>
+      )}
+
+      {/* Resources 섹션 */}
+      {activeSection === "resources" && (
+        <div className="flex flex-col gap-2">
+          {/* Row 1 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* Cluster CPU Utilization (id:72) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=72 */}
+            </div>
+            {/* Cluster Memory Utilization (id:55) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=55 */}
+            </div>
+          </div>
+
+          {/* Row 2 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* CPU Utilization by namespace (id:46) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=46 */}
+            </div>
+            {/* Memory Utilization by namespace (id:50) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=50 */}
+            </div>
+          </div>
+
+          {/* Row 3 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* CPU Utilization by instance (id:54) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=54 */}
+            </div>
+            {/* Memory Utilization by instance (id:73) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=73 */}
+            </div>
+          </div>
+
+          {/* Row 4 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* CPU Throttled seconds by namespace (id:82) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=82 */}
+            </div>
+            {/* CPU Core Throttled by instance (id:83) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=83 */}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Kubernetes 섹션 */}
+      {activeSection === "kubernetes" && (
+        <div className="flex flex-col gap-2">
+          {/* Row 1 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* Kubernetes Pods QoS classes (id:84) - w:12, h:9 */}
+            <div className="w-[800px] h-[360px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=84 */}
+            </div>
+            {/* Kubernetes Pods Status Reason (id:85) - w:12, h:9 */}
+            <div className="w-[800px] h-[360px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=85 */}
+            </div>
+          </div>
+
+          {/* Row 2 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* OOM Events by namespace (id:87) - w:12, h:9 */}
+            <div className="w-[800px] h-[360px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=87 */}
+            </div>
+            {/* Container Restarts by namespace (id:88) - w:12, h:9 */}
+            <div className="w-[800px] h-[360px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=88 */}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Network 섹션 */}
+      {activeSection === "network" && (
+        <div className="flex flex-col gap-2">
+          {/* Row 1 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* Global Network Utilization by device (id:44) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=44 */}
+            </div>
+            {/* Network Saturation - Packets dropped (id:53) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=53 */}
+            </div>
+          </div>
+
+          {/* Row 2 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* Network Received by namespace (id:79) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=79 */}
+            </div>
+            {/* Total Network Received by instance (id:80) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=80 */}
+            </div>
+          </div>
+
+          {/* Row 3 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* Network Received (without loopback) by instance (id:56) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=56 */}
+            </div>
+            {/* Network Received (loopback only) by instance (id:81) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=81 */}
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+}

services/nextjs/app/page.tsx

@@ -1,15 +1,31 @@
 import Hero from '@/components/landing/hero';
+import About from '@/components/landing/about';
 import Skills from '@/components/landing/skills';
 import Projects from '@/components/landing/projects';
 import Contact from '@/components/landing/contact';
+import Grafana from '@/components/landing/grafana';
 
 export default function Home() {
   return (
     <div className="flex flex-col">
+      <div id="hero">
         <Hero />
+      </div>
+      <div id="about">
+        <About />
+      </div>
+      <div id="skills">
         <Skills />
+      </div>
+      <div id="projects">
         <Projects />
+      </div>
+      {/* <div id="grafana"> */}
+        {/* <Grafana /> */}
+      {/* </div> */}
+      <div id="contact">
         <Contact />
       </div>
+    </div>
   );
 }

services/nextjs/app/projects/page.tsx

@@ -0,0 +1,228 @@
+import SectionHeader from '@/components/landing/section-header';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { ExternalLink, BookOpen, BarChart3, Github } from 'lucide-react';
+import Image, { StaticImageData } from 'next/image';
+import Link from 'next/link';
+import joossamHome from '@/public/joossam/home.png';
+import jotionHome from '@/public/jotion/home.png';
+import joossamMain from '@/public/joossam/main.png';
+import jaejadleHome from '@/public/jaejadle/home.png';
+import portfolioHome from '@/public/portfolio/home.png';
+import todoListHome from '@/public/todoList/home.png';
+import joviesHome from '@/public/jovies/home.png';
+
+interface ProjectData {
+  title: string;
+  description: string;
+  longDescription: string;
+  tags: string[];
+  imageSrc: StaticImageData;
+  githubUrl?: string;
+  liveUrl?: string;
+  docsUrl?: string;
+  monitoringUrl?: string;
+  featured?: boolean;
+}
+
+const PROJECTS_DATA: ProjectData[] = [
+  {
+    title: 'Joossam English',
+    description: 'English learning platform for Korean students',
+    longDescription: 'A comprehensive English learning platform featuring interactive lessons, practice exercises, and progress tracking. Built with Next.js for optimal performance and SEO.',
+    tags: ['Next.js', 'TypeScript', 'Prisma', 'MySQL', 'NextAuth.js', 'Tailwind CSS'],
+    imageSrc: joossamHome,
+    githubUrl: 'https://github.com/minjo-on/joossam',
+    liveUrl: 'https://joossam.com',
+    docsUrl: '#',
+    monitoringUrl: '#',
+    featured: true,
+  },
+  {
+    title: 'Jotion',
+    description: 'Notion-like note-taking application',
+    longDescription: 'A powerful note-taking and knowledge management application inspired by Notion. Features rich text editing, hierarchical organization, and real-time collaboration.',
+    tags: ['Next.js', 'React', 'Convex', 'Clerk', 'BlockNote', 'Tailwind CSS'],
+    imageSrc: jotionHome,
+    githubUrl: 'https://github.com/minjo-on/jotion',
+    liveUrl: 'https://jotion.minjo.xyz',
+    docsUrl: '#',
+    monitoringUrl: '#',
+    featured: true,
+  },
+  {
+    title: 'Youni Classic',
+    description: 'Church community management system',
+    longDescription: 'A comprehensive church management system with member directory, event scheduling, and communication tools. Designed for efficient church administration.',
+    tags: ['Next.js', 'TypeScript', 'MySQL', 'Prisma', 'Tailwind CSS'],
+    imageSrc: joossamMain,
+    githubUrl: 'https://github.com/minjo-on/youniClassic',
+    docsUrl: '#',
+    monitoringUrl: '#',
+    featured: true,
+  },
+  {
+    title: 'Jaejadle Church',
+    description: 'Church website with event management',
+    longDescription: 'Modern church website featuring event calendars, sermon archives, and member portals. Built with focus on accessibility and mobile responsiveness.',
+    tags: ['Next.js', 'TypeScript', 'Tailwind CSS', 'Shadcn/ui'],
+    imageSrc: jaejadleHome,
+    githubUrl: 'https://github.com/minjo-on/jaejadle',
+    liveUrl: 'https://jaejadle.com',
+    docsUrl: '#',
+    monitoringUrl: '#',
+  },
+  {
+    title: 'Portfolio',
+    description: 'Personal portfolio website with Kubernetes deployment',
+    longDescription: 'My personal portfolio website showcasing projects and skills. Deployed on self-managed Kubernetes cluster with GitOps workflow using ArgoCD.',
+    tags: ['Next.js', 'TypeScript', 'Tailwind CSS', 'Docker', 'Kubernetes', 'ArgoCD'],
+    imageSrc: portfolioHome,
+    githubUrl: 'https://github.com/minjo-on/portfolio',
+    liveUrl: 'https://minjo.xyz',
+    docsUrl: '#',
+    monitoringUrl: '#',
+  },
+  {
+    title: '[Seminar] Todo List',
+    description: 'Educational todo list application for teaching',
+    longDescription: 'A todo list application created for teaching full-stack development concepts. Covers React fundamentals, state management, and API integration.',
+    tags: ['React', 'TypeScript', 'Vite', 'Tailwind CSS'],
+    imageSrc: todoListHome,
+    githubUrl: 'https://github.com/minjo-on/todoList',
+    docsUrl: '#',
+    monitoringUrl: '#',
+  },
+  {
+    title: 'Jovies',
+    description: 'Movie discovery and tracking application',
+    longDescription: 'A movie discovery platform integrating with TMDB API. Features movie search, ratings, reviews, and personal watchlists.',
+    tags: ['Next.js', 'TypeScript', 'TMDB API', 'Tailwind CSS'],
+    imageSrc: joviesHome,
+    githubUrl: 'https://github.com/minjo-on/jovies',
+    liveUrl: 'https://jovies.minjo.xyz',
+    docsUrl: '#',
+    monitoringUrl: '#',
+  },
+];
+
+interface ProjectCardProps extends ProjectData {}
+
+function ProjectCard({
+  title,
+  description,
+  longDescription,
+  tags,
+  imageSrc,
+  githubUrl,
+  liveUrl,
+  docsUrl,
+  monitoringUrl,
+  featured,
+}: ProjectCardProps) {
+  return (
+    <Card className="overflow-hidden w-full p-0 hover:shadow-lg transition-shadow">
+      {/* Image Section */}
+      <div className="aspect-1440/770 relative bg-white">
+        <Image
+          src={imageSrc}
+          alt={title}
+          fill
+          className="object-cover border-b-2 border-gray-200"
+        />
+        {featured && (
+          <div className="absolute top-4 right-4 bg-primary text-primary-foreground px-3 py-1 rounded-full text-sm font-semibold">
+            Featured
+          </div>
+        )}
+      </div>
+
+      {/* Content Section */}
+      <div className="px-6 pt-6 pb-4 flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <h3 className="font-semibold text-2xl">{title}</h3>
+          <p className="text-muted-foreground">{description}</p>
+          <p className="text-sm text-muted-foreground">{longDescription}</p>
+        </div>
+
+        {/* Tags */}
+        <div className="flex gap-2 flex-wrap">
+          {tags.map((tag) => (
+            <Button key={tag} variant="outline" size="sm" className="text-xs">
+              {tag}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {/* Links Section */}
+      <div className="px-6">
+        <Separator />
+      </div>
+      <div className="px-6 py-4 flex gap-4">
+        {githubUrl && (
+          <Link
+            href={githubUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-muted-foreground hover:text-foreground transition-colors"
+            aria-label="GitHub"
+          >
+            <Github className="w-5 h-5" />
+          </Link>
+        )}
+        {liveUrl && (
+          <Link
+            href={liveUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-muted-foreground hover:text-foreground transition-colors"
+            aria-label="Live Demo"
+          >
+            <ExternalLink className="w-5 h-5" />
+          </Link>
+        )}
+        {docsUrl && (
+          <Link
+            href={docsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-muted-foreground hover:text-foreground transition-colors"
+            aria-label="Documentation"
+          >
+            <BookOpen className="w-5 h-5" />
+          </Link>
+        )}
+        {monitoringUrl && (
+          <Link
+            href={monitoringUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-muted-foreground hover:text-foreground transition-colors"
+            aria-label="Monitoring"
+          >
+            <BarChart3 className="w-5 h-5" />
+          </Link>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+export default function ProjectsPage() {
+  return (
+    <main className="page-container">
+      <SectionHeader
+        title="Projects"
+        description="A collection of my web development projects, from full-stack applications to educational demonstrations"
+      />
+
+      <section className="grid grid-cols-1 pc:grid-cols-2 gap-6 pc:gap-8 max-w-[1400px]">
+        {PROJECTS_DATA.map((project, index) => (
+          <ProjectCard key={index} {...project} />
+        ))}
+      </section>
+    </main>
+  );
+}

services/nextjs/components/argocd/ArgoCDView.tsx

@@ -1,274 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { RefreshCw, CheckCircle2, XCircle, AlertCircle, Clock } from 'lucide-react';
-import { Card } from '@/components/ui/card';
-
-interface Application {
-  name: string;
-  namespace: string;
-  repoURL: string;
-  path: string;
-  targetRevision: string;
-  destination: {
-    server: string;
-    namespace: string;
-  };
-  health: string;
-  sync: string;
-  resources: Array<{
-    kind: string;
-    name: string;
-    namespace: string;
-    status: string;
-    health: string;
-  }>;
-}
-
-interface ArgoCDData {
-  applications: Application[];
-  timestamp: string;
-}
-
-const getHealthIcon = (status: string) => {
-  switch (status.toLowerCase()) {
-    case 'healthy':
-      return <CheckCircle2 className="w-5 h-5 text-green-500" />;
-    case 'degraded':
-      return <AlertCircle className="w-5 h-5 text-yellow-500" />;
-    case 'progressing':
-      return <Clock className="w-5 h-5 text-blue-500" />;
-    case 'suspended':
-      return <AlertCircle className="w-5 h-5 text-gray-500" />;
-    case 'missing':
-    case 'unknown':
-      return <XCircle className="w-5 h-5 text-red-500" />;
-    default:
-      return <AlertCircle className="w-5 h-5 text-gray-500" />;
-  }
-};
-
-const getSyncIcon = (status: string) => {
-  switch (status.toLowerCase()) {
-    case 'synced':
-      return <CheckCircle2 className="w-5 h-5 text-green-500" />;
-    case 'outofsync':
-      return <XCircle className="w-5 h-5 text-yellow-500" />;
-    case 'unknown':
-      return <AlertCircle className="w-5 h-5 text-gray-500" />;
-    default:
-      return <AlertCircle className="w-5 h-5 text-gray-500" />;
-  }
-};
-
-const getHealthColor = (status: string) => {
-  switch (status.toLowerCase()) {
-    case 'healthy':
-      return 'text-green-500';
-    case 'degraded':
-      return 'text-yellow-500';
-    case 'progressing':
-      return 'text-blue-500';
-    case 'suspended':
-      return 'text-gray-500';
-    case 'missing':
-    case 'unknown':
-      return 'text-red-500';
-    default:
-      return 'text-gray-500';
-  }
-};
-
-const getSyncColor = (status: string) => {
-  switch (status.toLowerCase()) {
-    case 'synced':
-      return 'text-green-500';
-    case 'outofsync':
-      return 'text-yellow-500';
-    case 'unknown':
-      return 'text-gray-500';
-    default:
-      return 'text-gray-500';
-  }
-};
-
-export default function ArgoCDView() {
-  const [data, setData] = useState<ArgoCDData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const fetchApplications = async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const response = await fetch('/api/argocd');
-      if (!response.ok) {
-        throw new Error(`Failed to fetch: ${response.status}`);
-      }
-      const result = await response.json();
-      setData(result);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch ArgoCD data');
-      console.error('Error fetching ArgoCD applications:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchApplications();
-    // 30초마다 자동 새로고침
-    const interval = setInterval(fetchApplications, 30000);
-    return () => clearInterval(interval);
-  }, []);
-
-  if (loading && !data) {
-    return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <RefreshCw className="w-8 h-8 animate-spin text-gray-500" />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-[400px] gap-4">
-        <XCircle className="w-12 h-12 text-red-500" />
-        <p className="text-red-500">{error}</p>
-        <button
-          onClick={fetchApplications}
-          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
-        >
-          Retry
-        </button>
-      </div>
-    );
-  }
-
-  if (!data || data.applications.length === 0) {
-    return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <p className="text-gray-500">No applications found</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-2xl font-bold">ArgoCD Applications</h2>
-          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-            Last updated: {new Date(data.timestamp).toLocaleString()}
-          </p>
-        </div>
-        <button
-          onClick={fetchApplications}
-          disabled={loading}
-          className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors disabled:opacity-50"
-        >
-          <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
-          Refresh
-        </button>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-        {data.applications.map((app) => (
-          <Card key={app.name} className="p-6 hover:shadow-lg transition-shadow">
-            <div className="space-y-4">
-              <div>
-                <h3 className="text-xl font-semibold mb-1">{app.name}</h3>
-                <p className="text-sm text-gray-500 dark:text-gray-400">
-                  {app.namespace}
-                </p>
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <span className="text-sm font-medium">Health:</span>
-                  <div className="flex items-center gap-2">
-                    {getHealthIcon(app.health)}
-                    <span className={`text-sm font-medium ${getHealthColor(app.health)}`}>
-                      {app.health}
-                    </span>
-                  </div>
-                </div>
-
-                <div className="flex items-center justify-between">
-                  <span className="text-sm font-medium">Sync:</span>
-                  <div className="flex items-center gap-2">
-                    {getSyncIcon(app.sync)}
-                    <span className={`text-sm font-medium ${getSyncColor(app.sync)}`}>
-                      {app.sync}
-                    </span>
-                  </div>
-                </div>
-              </div>
-
-              <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
-                <div className="space-y-1 text-xs text-gray-600 dark:text-gray-400">
-                  <div>
-                    <span className="font-medium">Repository:</span>{' '}
-                    <a
-                      href={app.repoURL}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="hover:underline"
-                    >
-                      {app.repoURL.split('/').pop()}
-                    </a>
-                  </div>
-                  <div>
-                    <span className="font-medium">Revision:</span> {app.targetRevision}
-                  </div>
-                  {app.path && (
-                    <div>
-                      <span className="font-medium">Path:</span> {app.path}
-                    </div>
-                  )}
-                  <div>
-                    <span className="font-medium">Destination:</span>{' '}
-                    {app.destination.namespace}
-                  </div>
-                  <div>
-                    <span className="font-medium">Resources:</span> {app.resources.length}
-                  </div>
-                </div>
-              </div>
-
-              {app.resources.length > 0 && (
-                <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
-                  <details className="cursor-pointer">
-                    <summary className="text-sm font-medium mb-2">
-                      Resources ({app.resources.length})
-                    </summary>
-                    <div className="mt-2 space-y-1 max-h-40 overflow-y-auto">
-                      {app.resources.map((resource, idx) => (
-                        <div
-                          key={idx}
-                          className="flex items-center justify-between text-xs p-2 bg-gray-50 dark:bg-gray-800 rounded"
-                        >
-                          <div>
-                            <span className="font-medium">{resource.kind}</span>
-                            <span className="text-gray-500 ml-2">{resource.name}</span>
-                          </div>
-                          <div className="flex items-center gap-1">
-                            {getHealthIcon(resource.health)}
-                            <span className={getHealthColor(resource.health)}>
-                              {resource.health}
-                            </span>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </details>
-                </div>
-              )}
-            </div>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}
-

services/nextjs/components/landing/about.tsx

@@ -0,0 +1,90 @@
+import SectionHeader from '@/components/landing/section-header';
+import { Card } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { User, Calendar, MapPin, Mail, GraduationCap, LucideIcon, Github } from 'lucide-react';
+
+interface InfoItemProps {
+  icon: LucideIcon;
+  label: string;
+  value: string;
+}
+
+function InfoItem({ icon: Icon, label, value }: InfoItemProps) {
+  return (
+    <div className="flex items-start gap-4">
+      <div className="flex items-center justify-center min-w-10 min-h-10 rounded-full theme-background">
+        <Icon className="w-5 h-5" />
+      </div>
+      <div className="flex flex-col">
+        <span className="font-semibold">{label}</span>
+        <span className="text-muted-foreground">{value}</span>
+      </div>
+    </div>
+  );
+}
+
+const PERSONAL_INFO = [
+  { icon: User, label: 'Name', value: 'MINJO KIM' },
+  { icon: GraduationCap, label: 'Education', value: 'Yonsei University (Computer Science)' },
+  { icon: Calendar, label: 'Birthday', value: '1997.01.17' },
+  { icon: MapPin, label: 'Location', value: 'Seoul, Korea' },
+  { icon: Github, label: 'Github', value: 'Mayne0213' },
+  { icon: Mail, label: 'Email', value: 'minjo.dev@gmail.com' },
+];
+
+export default function About() {
+  return (
+    <div className="bg-muted">
+      <main className="flex flex-col items-center justify-center gap-16 p-4 tablet:p-8 py-20">
+        <SectionHeader
+          title="About Me"
+          description="Passionate full-stack developer with expertise in building scalable web applications and cloud infrastructure"
+        />
+
+        <section className="grid grid-cols-1 tablet:grid-cols-2 gap-8 max-w-7xl w-full">
+          {/* Personal Info */}
+          <div className="flex flex-col gap-4 h-full">
+            <Card className="p-6 flex-1 gap-4">
+            <h3 className="text-2xl font-bold">Personal Info</h3>
+            <Separator/>
+              <div className="grid grid-cols-2 gap-6 items-center h-full">
+                {PERSONAL_INFO.map((info, index) => (
+                  <InfoItem
+                    key={index}
+                    icon={info.icon}
+                    label={info.label}
+                    value={info.value}
+                  />
+                ))}
+              </div>
+            </Card>
+          </div>
+
+          {/* Who I Am */}
+          <div className="flex flex-col gap-4 h-full">
+            <Card className="p-6 flex-1">
+              <div className="flex flex-col gap-4">
+                <h3 className="text-2xl font-bold">Who I Am</h3>
+                <Separator/>
+                <p className="text-muted-foreground tablet:text-justify">
+                  I&apos;m Minjo Kim, a Full-Stack Developer and Bachelor in Computer Science at Seoul National University, Korea.
+                  I have experience in web development and cloud infrastructure, passionate about building scalable and efficient systems.
+                </p>
+                <p className="text-muted-foreground tablet:text-justify">
+                  My academic background gave me solid knowledge in Algorithms, Data Structures, System Design, and Databases
+                  which I apply to create efficient and modern systems. I&apos;ve delivered impactful solutions using TypeScript,
+                  React, Next.js, and Tailwind CSS.
+                </p>
+                <p className="text-muted-foreground tablet:text-justify">
+                  I&apos;m responsible for building full-stack applications, setting up Kubernetes clusters with ArgoCD for GitOps workflows,
+                  and implementing monitoring systems with Prometheus and Grafana. I focus on creating maintainable code and
+                  improving system performance and scalability.
+                </p>
+              </div>
+            </Card>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}

services/nextjs/components/landing/contact.tsx

@@ -61,7 +61,7 @@ export default function Contact() {
   ];
 
   return (
-    <div className="bg-linear-to-b from-gray-50 to-gray-100 dark:from-neutral-900 dark:to-neutral-800">
+    <div className="">
       <main className="flex flex-col items-center justify-center gap-16 p-4 tablet:p-8 py-20">
           <SectionHeader
             title="Get In Touch"
@@ -82,9 +82,9 @@ export default function Contact() {
                   href={method.link}
                   target={method.link.startsWith('http') ? '_blank' : undefined}
                   rel={method.link.startsWith('http') ? 'noopener noreferrer' : undefined}
-                  className="flex items-center gap-4 p-4 rounded-lg hover:bg-gray-50 dark:hover:bg-neutral-800 transition-colors group"
+                  className="flex items-center gap-4 p-4 rounded-lg hover:bg-accent transition-colors group"
                 >
-                  <div className={`flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 dark:bg-neutral-800 group-hover:scale-110 transition-transform ${method.color}`}>
+                  <div className={`flex items-center justify-center w-12 h-12 rounded-full bg-muted group-hover:scale-110 transition-transform ${method.color}`}>
                     <method.icon className="w-6 h-6" />
                   </div>
                   <div className="flex-1 min-w-0">

services/nextjs/components/landing/grafana.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { useState } from "react";
+import SectionHeader from "@/components/landing/section-header";
+import { Button } from "@/components/ui/button";
+
+type Section = "overview" | "resources" | "kubernetes" | "network";
+
+const sections: { id: Section; label: string; panels: number }[] = [
+  { id: "overview", label: "Overview", panels: 8 },
+  { id: "resources", label: "Resources", panels: 8 },
+  { id: "kubernetes", label: "Kubernetes", panels: 4 },
+  { id: "network", label: "Network", panels: 6 },
+];
+
+export default function MonitoringPage() {
+  const [activeSection, setActiveSection] = useState<Section>("overview");
+
+  return (
+    <main className="page-container">
+      <SectionHeader
+        title="Monitoring"
+        description="Real-time Kubernetes cluster monitoring with Grafana dashboards"
+      />
+
+      {/* 섹션 선택 버튼 */}
+      <div className="flex gap-2 flex-wrap justify-center">
+        {sections.map((section) => (
+          <Button
+            key={section.id}
+            onClick={() => setActiveSection(section.id)}
+            variant={activeSection === section.id ? "default" : "outline"}
+            className="transition-all"
+          >
+            {section.label}
+            <span className="ml-2 text-sm opacity-60">
+              ({section.panels} panels)
+            </span>
+          </Button>
+        ))}
+      </div>
+
+      {/* Overview 섹션 */}
+      {activeSection === "overview" && (
+        <div className="flex gap-2 flex-wrap justify-center">
+          {/* 왼쪽 2개 열 (CPU, RAM) */}
+          <div className="flex gap-2">
+            {/* Global CPU Usage 열 */}
+            <div className="flex flex-col gap-2">
+              {/* Global CPU Usage (id:77) - w:6, h:8 */}
+              <div className="w-[400px] h-[320px] theme-background rounded-lg overflow-hidden">
+                {/* iframe: panelId=77 */}
+              </div>
+              {/* CPU Usage (id:37) - w:6, h:4 */}
+              <div className="w-[400px] h-[160px] theme-background rounded-lg overflow-hidden">
+                {/* iframe: panelId=37 */}
+              </div>
+            </div>
+
+            {/* Global RAM Usage 열 */}
+            <div className="flex flex-col gap-2">
+              {/* Global RAM Usage (id:78) - w:6, h:8 */}
+              <div className="w-[400px] h-[320px] theme-background rounded-lg overflow-hidden">
+                {/* iframe: panelId=78 */}
+              </div>
+              {/* RAM Usage (id:39) - w:6, h:4 */}
+              <div className="w-[400px] h-[160px] theme-background rounded-lg overflow-hidden">
+                {/* iframe: panelId=39 */}
+              </div>
+            </div>
+          </div>
+
+          {/* 가운데 좁은 열 (Nodes, Namespace, Running Pods) - w:2 */}
+          <div className="flex flex-col gap-2">
+            {/* Nodes (id:63) - w:2, h:4 */}
+            <div className="w-[133px] h-[160px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=63 */}
+            </div>
+            {/* Namespaces (id:59) - w:2, h:4 */}
+            <div className="w-[133px] h-[160px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=59 */}
+            </div>
+            {/* Running Pods (id:62) - w:2, h:4 */}
+            <div className="w-[133px] h-[160px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=62 */}
+            </div>
+          </div>
+
+          {/* 오른쪽 넓은 열 (Kubernetes Resource Count) */}
+          {/* Kubernetes Resource Count (id:52) - w:10, h:12 */}
+          <div className="w-[667px] h-[488px] theme-background rounded-lg overflow-hidden">
+            {/* iframe: panelId=52 */}
+          </div>
+        </div>
+      )}
+
+      {/* Resources 섹션 */}
+      {activeSection === "resources" && (
+        <div className="flex flex-col gap-2">
+          {/* Row 1 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* Cluster CPU Utilization (id:72) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=72 */}
+            </div>
+            {/* Cluster Memory Utilization (id:55) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=55 */}
+            </div>
+          </div>
+
+          {/* Row 2 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* CPU Utilization by namespace (id:46) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=46 */}
+            </div>
+            {/* Memory Utilization by namespace (id:50) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=50 */}
+            </div>
+          </div>
+
+          {/* Row 3 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* CPU Utilization by instance (id:54) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=54 */}
+            </div>
+            {/* Memory Utilization by instance (id:73) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=73 */}
+            </div>
+          </div>
+
+          {/* Row 4 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* CPU Throttled seconds by namespace (id:82) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=82 */}
+            </div>
+            {/* CPU Core Throttled by instance (id:83) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=83 */}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Kubernetes 섹션 */}
+      {activeSection === "kubernetes" && (
+        <div className="flex flex-col gap-2">
+          {/* Row 1 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* Kubernetes Pods QoS classes (id:84) - w:12, h:9 */}
+            <div className="w-[800px] h-[360px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=84 */}
+            </div>
+            {/* Kubernetes Pods Status Reason (id:85) - w:12, h:9 */}
+            <div className="w-[800px] h-[360px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=85 */}
+            </div>
+          </div>
+
+          {/* Row 2 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* OOM Events by namespace (id:87) - w:12, h:9 */}
+            <div className="w-[800px] h-[360px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=87 */}
+            </div>
+            {/* Container Restarts by namespace (id:88) - w:12, h:9 */}
+            <div className="w-[800px] h-[360px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=88 */}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Network 섹션 */}
+      {activeSection === "network" && (
+        <div className="flex flex-col gap-2">
+          {/* Row 1 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* Global Network Utilization by device (id:44) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=44 */}
+            </div>
+            {/* Network Saturation - Packets dropped (id:53) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=53 */}
+            </div>
+          </div>
+
+          {/* Row 2 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* Network Received by namespace (id:79) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=79 */}
+            </div>
+            {/* Total Network Received by instance (id:80) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=80 */}
+            </div>
+          </div>
+
+          {/* Row 3 */}
+          <div className="flex gap-2 flex-wrap justify-center">
+            {/* Network Received (without loopback) by instance (id:56) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=56 */}
+            </div>
+            {/* Network Received (loopback only) by instance (id:81) - w:12, h:8 */}
+            <div className="w-[800px] h-[320px] theme-background rounded-lg overflow-hidden">
+              {/* iframe: panelId=81 */}
+            </div>
+          </div>
+        </div>
+      )}
+    </main>
+  );
+}

services/nextjs/components/landing/hero.tsx

@@ -28,23 +28,6 @@ export default function Hero() {
               </p>
             </div>
           </div>
-
-          <div className="flex items-center gap-8">
-            <Button
-              type="button"
-              variant="outline"
-              className="flex items-center gap-2 cursor-pointer"
-            >
-              View Projects
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              className="flex items-center gap-2 cursor-pointer"
-            >
-              Contact Me
-            </Button>
-          </div>
         </div>
       </div>
     </div>

services/nextjs/components/landing/projects.tsx

@@ -1,9 +1,10 @@
 import { Card } from '@/components/ui/card';
 import Image, { StaticImageData } from 'next/image';
 import { Separator } from '../ui/separator';
-import { SquareArrowOutUpRight } from 'lucide-react';
+import { Github, BookOpen, ExternalLink, BarChart3, FileText } from 'lucide-react';
 import { Button } from '../ui/button';
 import SectionHeader from './section-header';
+import Link from 'next/link';
 import joossamHome from '@/public/joossam/home.png';
 import jotionHome from '@/public/jotion/home.png';
 import joossamMain from '@/public/joossam/main.png';
@@ -17,9 +18,14 @@ interface ProjectCardProps {
   description: string;
   tags: string[];
   imageSrc: StaticImageData;
+  githubUrl?: string;
+  liveUrl?: string;
+  docsUrl?: string;
+  docusaurusUrl?: string;
+  monitoringUrl?: string;
 }
 
-function ProjectCard({ title, description, tags, imageSrc }: ProjectCardProps) {
+function ProjectCard({ title, description, tags, imageSrc, githubUrl, liveUrl, docsUrl, docusaurusUrl, monitoringUrl }: ProjectCardProps) {
   return (
     <Card className="overflow-hidden w-full p-0">
       <div className="aspect-1440/770 relative bg-white">
@@ -28,6 +34,8 @@ function ProjectCard({ title, description, tags, imageSrc }: ProjectCardProps) {
           alt={title}
           fill
           className="object-cover border-b-2 border-gray-200"
+          placeholder="blur"
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
         />
       </div>
       <div className="px-6 pt-6 pb-4 flex flex-col gap-3">
@@ -44,8 +52,42 @@ function ProjectCard({ title, description, tags, imageSrc }: ProjectCardProps) {
       <div className="px-6">
         <Separator />
       </div>
-      <div className="px-6 py-4">
-          <SquareArrowOutUpRight className="w-6 h-6 cursor-pointer" />
+      <div className="px-6 py-4 flex gap-4 flex-wrap">
+        {liveUrl && (
+          <Link href={liveUrl} target="_blank" rel="noopener noreferrer" aria-label="Live Demo">
+            <div className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
+              <ExternalLink className="w-5 h-5" />
+            </div>
+          </Link>
+        )}
+        {githubUrl && (
+          <Link href={githubUrl} target="_blank" rel="noopener noreferrer" aria-label="GitHub">
+            <div className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
+              <Github className="w-5 h-5" />
+            </div>
+          </Link>
+        )}
+        {docsUrl && (
+          <Link href={docsUrl} target="_blank" rel="noopener noreferrer" aria-label="Documentation">
+            <div className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
+              <BookOpen className="w-5 h-5" />
+            </div>
+          </Link>
+        )}
+        {docusaurusUrl && (
+          <Link href={docusaurusUrl} target="_blank" rel="noopener noreferrer" aria-label="Docusaurus">
+            <div className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
+              <FileText className="w-5 h-5" />
+            </div>
+          </Link>
+        )}
+        {monitoringUrl && (
+          <Link href={monitoringUrl} target="_blank" rel="noopener noreferrer" aria-label="Monitoring">
+            <div className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors cursor-pointer">
+              <BarChart3 className="w-5 h-5" />
+            </div>
+          </Link>
+        )}
       </div>
     </Card>
   );
@@ -53,7 +95,7 @@ function ProjectCard({ title, description, tags, imageSrc }: ProjectCardProps) {
 
 export default function Projects() {
   return (
-    <main className="flex flex-col items-center justify-center gap-16 p-4 tablet:p-8 py-20">
+    <main className="flex bg-muted flex-col items-center justify-center gap-16 p-4 tablet:p-8 py-20">
       <SectionHeader
         title="Featured Projects"
         description="Some of my recent work and side projects"
@@ -62,45 +104,78 @@ export default function Projects() {
       <section className="grid grid-cols-1 pc:grid-cols-2 gap-6 pc:gap-8 max-w-[1440px] w-full">
         <ProjectCard
           title="Joossam English"
-          description="A full-featured online shopping platform with A full-featured online shopping platform with payment integratioA full-featured online shopping pntegration"
-          tags={['Next.js', 'Stripe', 'PostgreSQL']}
+          description="English learning platform for Korean students"
+          tags={['Next.js', 'TypeScript', 'Prisma', 'MySQL', 'NextAuth.js']}
           imageSrc={joossamHome}
+          githubUrl="https://github.com/minjo-on/joossam"
+          liveUrl="https://joossam.com"
+          docsUrl="#"
+          docusaurusUrl="#"
+          monitoringUrl="#"
         />
         <ProjectCard
           title="Jotion"
-          description="Collaborative task management tool with real-time updates"
-          tags={['React', 'WebSocket', 'MongoDB']}
+          description="Notion-like note-taking application"
+          tags={['Next.js', 'React', 'Convex', 'Clerk', 'BlockNote']}
           imageSrc={jotionHome}
+          githubUrl="https://github.com/minjo-on/jotion"
+          liveUrl="https://jotion.minjo.xyz"
+          docsUrl="#"
+          docusaurusUrl="#"
+          monitoringUrl="#"
         />
         <ProjectCard
           title="Youni Classic"
-          description="Analytics dashboard for social media metrics and insights"
-          tags={['Next.js', 'Chart.js', 'Redis']}
+          description="Church community management system"
+          tags={['Next.js', 'TypeScript', 'MySQL', 'Prisma']}
           imageSrc={joossamMain}
+          githubUrl="https://github.com/minjo-on/youniClassic"
+          docsUrl="#"
+          docusaurusUrl="#"
+          monitoringUrl="#"
         />
         <ProjectCard
           title="Jaejadle Church"
-          description="Beautiful weather forecasting application with location detection"
-          tags={['React', 'OpenWeather API', 'Geolocation']}
+          description="Church website with event management"
+          tags={['Next.js', 'TypeScript', 'Tailwind CSS', 'Shadcn/ui']}
           imageSrc={jaejadleHome}
+          githubUrl="https://github.com/minjo-on/jaejadle"
+          liveUrl="https://jaejadle.com"
+          docsUrl="#"
+          docusaurusUrl="#"
+          monitoringUrl="#"
         />
         <ProjectCard
           title="Portfolio"
-          description="Beautiful weather forecasting application with location detection"
-          tags={['React', 'OpenWeather API', 'Geolocation']}
+          description="Personal portfolio website with Kubernetes deployment"
+          tags={['Next.js', 'TypeScript', 'Docker', 'Kubernetes', 'ArgoCD']}
           imageSrc={portfolioHome}
+          githubUrl="https://github.com/minjo-on/portfolio"
+          liveUrl="https://minjo.xyz"
+          docsUrl="#"
+          docusaurusUrl="#"
+          monitoringUrl="#"
         />
         <ProjectCard
           title="[Seminar] Todo List"
-          description="Beautiful weather forecasting application with location detection"
-          tags={['React', 'OpenWeather API', 'Geolocation']}
+          description="Educational todo list application for teaching"
+          tags={['React', 'TypeScript', 'Vite', 'Tailwind CSS']}
           imageSrc={todoListHome}
+          githubUrl="https://github.com/minjo-on/todoList"
+          docsUrl="#"
+          docusaurusUrl="#"
+          monitoringUrl="#"
         />
         <ProjectCard
           title="Jovies"
-          description="Beautiful weather forecasting application with location detection"
-          tags={['React', 'OpenWeather API', 'Geolocation']}
+          description="Movie discovery and tracking application"
+          tags={['Next.js', 'TypeScript', 'TMDB API', 'Tailwind CSS']}
           imageSrc={joviesHome}
+          githubUrl="https://github.com/minjo-on/jovies"
+          liveUrl="https://jovies.minjo.xyz"
+          docsUrl="#"
+          docusaurusUrl="#"
+          monitoringUrl="#"
         />
       </section>
     </main>

services/nextjs/components/landing/skills.tsx

@@ -1,20 +1,39 @@
+'use client';
+
 import { Card, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
-import { Code, Server, Layout, Globe, Router, TestTube2, LucideIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Code, Server, Layout, Globe, Router, TestTube2, LucideIcon, ChevronDown } from 'lucide-react';
 import SectionHeader from './section-header';
+import { useState } from 'react';
 
 interface SkillCardProps {
   icon: LucideIcon;
   title: string;
   description: string;
-  skills: string[];
+  mainSkills: string[];
+  subSkills: string[];
 }
 
-function SkillCard({ icon: Icon, title, description, skills }: SkillCardProps) {
+function SkillCard({ icon: Icon, title, description, mainSkills, subSkills }: SkillCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
   return (
-    <Card className="p-5 max-w-[400px] h-full gap-4">
+    <Card className="p-5 w-full h-full gap-4 relative">
+      {/* Toggle Button - Top Right Corner */}
+      {subSkills.length > 0 && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="absolute top-6 right-6 p-2 h-8 w-8"
+        >
+          <ChevronDown className={`w-16 h-16 transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
+        </Button>
+      )}
+
       <div className="flex flex-col gap-4">
-        <div className="flex items-center justify-center min-w-12 min-h-12 rounded-full bg-gray-100 dark:bg-neutral-800 w-fit">
+        <div className="flex items-center justify-center min-w-12 min-h-12 rounded-full bg-muted w-fit">
           <Icon className="min-w-8 min-h-8" />
         </div>
         <CardTitle>
@@ -26,13 +45,27 @@ function SkillCard({ icon: Icon, title, description, skills }: SkillCardProps) {
         <p className="font-extralight">{description}</p>
         <div className="flex flex-col gap-4">
           <Separator />
-          <div className="flex gap-4 flex-wrap">
-            {skills.map((skill) => (
-              <p key={skill} className="text-sm text-gray-600 dark:text-gray-100 font-extralight">
+          {/* Main Skills */}
+          <div className="flex gap-3 flex-wrap">
+            {mainSkills.map((skill) => (
+              <span key={skill} className="text-sm font-medium text-gray-800 dark:text-gray-100">
                 {skill}
-              </p>
+              </span>
             ))}
           </div>
+          {/* Sub Skills - Toggleable */}
+          {subSkills.length > 0 && (
+            <div className={`overflow-hidden transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-96' : 'max-h-0'}`}>
+              <Separator className="opacity-50 mb-4" />
+              <div className="flex gap-3 flex-wrap">
+                {subSkills.map((skill) => (
+                  <span key={skill} className="text-sm font-extralight text-gray-600 dark:text-gray-300 opacity-80">
+                    {skill}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </Card>
@@ -41,8 +74,7 @@ function SkillCard({ icon: Icon, title, description, skills }: SkillCardProps) {
 
 export default function Skills() {
   return (
-    <div className="bg-gray-100 dark:bg-neutral-800">
-      <main className="flex flex-col items-center justify-center gap-16 p-4 tablet:p-8 py-20">
+    <main className="flex max-w-7xl mx-auto flex-col items-center justify-center gap-16 p-4 tablet:p-8 py-20">
       <SectionHeader
         title="Skills & Expertise"
         description="Technologies and tools I work with to build amazing web applications"
@@ -53,41 +85,46 @@ export default function Skills() {
           icon={Code}
           title="Frontend Development"
           description="Building responsive and interactive user interfaces with modern frameworks and libraries"
-            skills={['React', 'Next.js', 'TypeScript', 'Tailwind CSS']}
+          mainSkills={['HTML', 'CSS', 'JavaScript', 'TypeScript', 'React', 'Next.js']}
+          subSkills={['Tailwind', 'Zustand', 'FSD', 'Radix UI', 'Shadcn/ui', 'Chart.js', 'React-Query', 'React-Hook-Form', 'Zod']}
         />
         <SkillCard
           icon={Server}
           title="Backend Development"
           description="Developing robust server-side applications and RESTful APIs"
-            skills={['Node.js', 'Express', 'PostgreSQL', 'MongoDB']}
+          mainSkills={['Node.js', 'Prisma ORM', 'REST API', 'MySQL']}
+          subSkills={['NextAuth.js', 'JWT', 'bcrypt', 'MariaDB']}
         />
         <SkillCard
           icon={Layout}
           title="DevOps & Tools"
           description="Managing deployment pipelines and development workflows"
-            skills={['Git', 'Docker','K8s', 'ArgoCD', 'AWS', 'CI/CD']}
+          mainSkills={['Git', 'Docker', 'K8s', 'Github Actions', 'ArgoCD', 'Nginx ingress']}
+          subSkills={['Kustomize', 'Helm', 'App of Apps Pattern', 'EC2', 'Lightsail', 'Vercel']}
         />
         <SkillCard
           icon={TestTube2}
-            title=" Software Testing"
-            description="End to End & Unit Tests, building high rate requests scenarios (Stress Tests)."
-            skills={['Jest', 'Cypress', 'Puppeteer', 'Playwright']}
-          />
-          <SkillCard
-            icon={Globe}
-            title="Performance & Digital Presence"
-            description="Performance Testing, Digital Presence, SEO, Accessibility, and more."
-            skills={['Lighthouse', 'Google Search Console', 'Google Analytics', 'Google Tag Manager']}
+          title="Monitoring"
+          description="Implementing monitoring systems with Prometheus and Grafana"
+          mainSkills={['Prometheus', 'Grafana']}
+          subSkills={['Alertmanager', 'Node Exporter', 'kube-state-metrics']}
         />
         <SkillCard
           icon={Router}
+          title="Testing"
+          description="Implementing testing frameworks and tools"
+          mainSkills={['Jest', 'Cypress', 'Puppeteer', 'Playwright']}
+          subSkills={[]}
+        />
+        <SkillCard
+          icon={Globe}
           title="Web Hosting"
-            description="Web Hosting, Cloud Computing, and more."
-            skills={['AWS', 'DigitalOcean', 'Vercel', 'Netlify', 'Cloudflare']}
+          description="Deploying and managing web applications on various hosting platforms"
+          mainSkills={['AWS EC2', 'AWS Lightsail', 'Vercel', 'Nginx']}
+          subSkills={['SSL/TLS', 'Domain Management', 'Load Balancing', 'CDN']}
         />
       </div>
     </main>
-    </div>
   );
 }
 

services/nextjs/components/widgets/Header.tsx

@@ -1,16 +1,17 @@
 'use client';
 
 import { useState } from 'react';
-import { Menu, X } from 'lucide-react';
+import { Menu, X, Languages } from 'lucide-react';
 import Link from 'next/link';
 import { ModeToggle } from '@/components/ui/mode-toggle';
+import { Button } from '@/components/ui/button';
 
 const HEADER_MENU_ITEMS = [
-  { name: 'About', path: '#about' },
-  { name: 'Experience', path: '#experience' },
-  { name: 'Projects', path: '#projects' },
-  { name: 'Contact', path: '#contact' },
-  { name: 'ArgoCD', path: '/argocd' },
+  { name: 'About', path: '/#about', isScroll: true },
+  { name: 'Skills', path: '/#skills', isScroll: true },
+  { name: 'Projects', path: '/#projects', isScroll: true },
+  { name: 'Contact', path: '/#contact', isScroll: true },
+  { name: 'Grafana', path: '/monitoring', isScroll: false },
 ];
 
 interface HeaderProfileProps {
@@ -49,6 +50,24 @@ const HeaderProfile = ({
 
 
 const HeaderMenuItemsDesktop = () => {
+  const handleScrollClick = (e: React.MouseEvent<HTMLAnchorElement>, path: string, isScroll: boolean) => {
+    if (isScroll) {
+      e.preventDefault();
+      const sectionId = path.replace('/#', '');
+      const element = document.getElementById(sectionId);
+      if (element) {
+        const navbarHeight = 70;
+        const elementPosition = element.getBoundingClientRect().top + window.scrollY;
+        const offsetPosition = elementPosition - navbarHeight;
+
+        window.scrollTo({
+          top: offsetPosition,
+          behavior: 'smooth'
+        });
+      }
+    }
+  };
+
   return (
     <div className="flex justify-center items-center">
       {HEADER_MENU_ITEMS.map((item) => (
@@ -58,6 +77,7 @@ const HeaderMenuItemsDesktop = () => {
         >
           <Link
             href={item.path}
+            onClick={(e) => handleScrollClick(e, item.path, item.isScroll)}
             className="font-extralight text-sm pc:text-base duration-100 ease-in hover:border-b-2 hover:border-b-black hover:dark:border-b-white pb-1"
           >
             {item.name}
@@ -71,6 +91,25 @@ const HeaderMenuItemsDesktop = () => {
 const HeaderMenuItemsMobile = () => {
   const [isOpen, setIsOpen] = useState(false);
 
+  const handleScrollClick = (e: React.MouseEvent<HTMLAnchorElement>, path: string, isScroll: boolean) => {
+    if (isScroll) {
+      e.preventDefault();
+      const sectionId = path.replace('/#', '');
+      const element = document.getElementById(sectionId);
+      if (element) {
+        const navbarHeight = 70;
+        const elementPosition = element.getBoundingClientRect().top + window.scrollY;
+        const offsetPosition = elementPosition - navbarHeight;
+
+        window.scrollTo({
+          top: offsetPosition,
+          behavior: 'smooth'
+        });
+      }
+    }
+    setIsOpen(false);
+  };
+
   return (
     <>
       <button
@@ -107,7 +146,7 @@ const HeaderMenuItemsMobile = () => {
                     >
                       <Link
                         href={item.path}
-                        onClick={() => setIsOpen(false)}
+                        onClick={(e) => handleScrollClick(e, item.path, item.isScroll)}
                         className="text-xl duration-100 ease-in hover:border-b-2 hover:border-b-brand-primary hover:dark:border-b-white pb-1"
                       >
                         {item.name}