Version 2.0.2

Author: ollehmichael

.github/instructions/app-router.instructions.md

@@ -1,13 +1,24 @@
-import { Github, Linkedin, Mail, Twitter } from "lucide-react"
-import { SocialIcon } from "@/components/atoms/social-icon"
+import { SocialIcon } from '@/components/atoms/social-icon';
+import { Github, Linkedin, Mail } from 'lucide-react';
 
 export function SocialLinks() {
   return (
     <div className="flex items-center gap-4">
-      <SocialIcon href="https://github.com" icon={Github} label="GitHub" />
-      <SocialIcon href="https://linkedin.com" icon={Linkedin} label="LinkedIn" />
-      <SocialIcon href="https://twitter.com" icon={Twitter} label="Twitter" />
-      <SocialIcon href="mailto:contact@example.com" icon={Mail} label="Email" />
+      <SocialIcon
+        href="https://github.com/ollehmichael"
+        icon={Github}
+        label="GitHub"
+      />
+      <SocialIcon
+        href="https://www.linkedin.com/in/byong-cheol-han-60127b1b7/"
+        icon={Linkedin}
+        label="LinkedIn"
+      />
+      <SocialIcon
+        href="mailto:byongcheolhan@gmail.com"
+        icon={Mail}
+        label="Email"
+      />
     </div>
-  )
+  );
 }

.github/instructions/atomic-components.instructions.md

@@ -1,18 +1,12 @@
 'use client';
 
+import { CareerItem } from '@/lib/careerTimeline';
+import { Projects } from '@/lib/projects';
 import { Building2, Calendar, ChevronDown, ExternalLink } from 'lucide-react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 
-interface CareerItem {
-  startDate: string;
-  endDate: string | null;
-  position: string;
-  company: string;
-  description: string;
-  projectIds?: string[];
-}
-
 interface CareerProgressionProps {
   items: CareerItem[];
 }
@@ -36,31 +30,62 @@ export default function CareerProgression({ items }: CareerProgressionProps) {
     <div className="mx-auto">
       <div className="relative ml-3">
         {/* Timeline line */}
-        <div className="absolute left-0 top-7 bottom-0 border-l-2" />
+        <div className="absolute top-7 bottom-0 left-0 border-l-2" />
 
         {items.map(
           (
-            { company, position, description, startDate, endDate, projectIds },
+            {
+              company,
+              companyLink,
+              highlightLinks,
+              logo,
+              position,
+              description,
+              startDate,
+              endDate,
+              projectIds,
+            },
             index
           ) => {
             const isExpanded = expandedItems.has(index);
             const truncatedDescription = description.slice(0, 90) + '...';
 
             return (
-              <div key={index} className="relative pl-8 mb-12 last:mb-0">
+              <div key={index} className="relative mb-12 pl-8 last:mb-0">
                 {/* Timeline dot */}
-                <div className="absolute h-3 w-3 -translate-x-1/2 left-px top-7 rounded-full border-2 border-primary bg-background" />
+                <div className="border-primary bg-background absolute top-7 left-px h-3 w-3 -translate-x-1/2 rounded-full border-2" />
 
                 {/* Content - Clickable Card */}
                 <div
                   onClick={() => toggleItem(index)}
-                  className="space-y-3 cursor-pointer rounded-lg p-4 -ml-4 border border-transparent hover:border-primary/20 hover:bg-accent/30 transition-all duration-200"
+                  className="hover:border-primary/20 hover:bg-accent/30 -ml-4 cursor-pointer space-y-3 rounded-lg border border-transparent p-4 transition-all duration-200"
                 >
                   <div className="flex items-center gap-2.5">
-                    <div className="shrink-0 h-9 w-9 bg-accent rounded-full flex items-center justify-center">
-                      <Building2 className="h-5 w-5 text-muted" />
+                    <div
+                      className={`${logo ? 'bg-accent-foreground' : 'bg-accent'} flex h-9 w-9 shrink-0 items-center justify-center rounded-full`}
+                    >
+                      {logo ? (
+                        <Image
+                          src={logo}
+                          alt={`${company} logo`}
+                          className="text-muted h-8 w-8 object-contain"
+                        />
+                      ) : (
+                        <Building2 className="text-muted h-5 w-5" />
+                      )}
                     </div>
                     <span className="text-base font-medium">{company}</span>
+                    {companyLink && (
+                      <Link
+                        href={companyLink}
+                        onClick={(e) => e.stopPropagation()}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="hover:text-primary h-5 w-5 text-base"
+                      >
+                        <ExternalLink size={16} />
+                      </Link>
+                    )}
                     <ChevronDown
                       className={`ml-auto h-5 w-5 transition-transform duration-200 ${
                         isExpanded ? 'rotate-180' : ''
@@ -69,13 +94,20 @@ export default function CareerProgression({ items }: CareerProgressionProps) {
                   </div>
                   <div>
                     <h3 className="text-lg font-semibold">{position}</h3>
-                    <div className="flex items-center gap-2 mt-2 text-sm">
+                    <div className="mt-2 flex items-center gap-2 text-sm">
                       <Calendar className="h-4 w-4" />
-                      <span>{`${startDate} - ${endDate || 'PRESENT'}`}</span>
+                      <span>
+                        <span>{`${startDate} - `}</span>
+                        {endDate ? (
+                          <span>{endDate}</span>
+                        ) : (
+                          <span className="text-primary">{'PRESENT'}</span>
+                        )}
+                      </span>
                     </div>
                   </div>
                   <div className="overflow-hidden">
-                    <p className="text-sm sm:text-base text-muted-foreground text-pretty transition-all duration-700 ease-in-out">
+                    <p className="text-muted-foreground text-sm text-pretty transition-all duration-700 ease-in-out sm:text-base">
                       {isExpanded ? description : truncatedDescription}
                     </p>
                   </div>
@@ -92,9 +124,16 @@ export default function CareerProgression({ items }: CareerProgressionProps) {
                             key={projectId}
                             href={`/projects/${projectId}`}
                             onClick={(e) => e.stopPropagation()}
-                            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-primary/10 text-primary border border-primary/20 rounded-md hover:bg-primary/20 transition-colors"
+                            className="bg-primary/10 text-primary border-primary/20 hover:bg-primary/20 inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors"
                           >
-                            <span> {projectId.replace(/-/g, ' ')}</span>
+                            <span>
+                              {' '}
+                              {
+                                Projects.find(
+                                  (project) => project.id === projectId
+                                )?.title
+                              }
+                            </span>
                             <ExternalLink size={12} />
                           </Link>
                         ))}

.github/instructions/frontend-workflow.instructions.md

@@ -1,18 +1,87 @@
+'use client';
+
 import CareerProgression from '@/components/organisms/career-timeline';
 import { CareerTimeline } from '@/lib/careerTimeline';
+import { useEffect, useState } from 'react';
 
 export default function CareerView() {
+  const [experience, setExperience] = useState({
+    years: 0,
+    months: 0,
+    days: 0,
+  });
+
+  useEffect(() => {
+    const calculateExperience = () => {
+      const startDate = new Date('2020-06-01');
+      const now = new Date();
+
+      let years = now.getFullYear() - startDate.getFullYear();
+      let months = now.getMonth() - startDate.getMonth();
+      let days = now.getDate() - startDate.getDate();
+
+      // Adjust for negative days
+      if (days < 0) {
+        months--;
+        const prevMonth = new Date(now.getFullYear(), now.getMonth(), 0);
+        days += prevMonth.getDate();
+      }
+
+      // Adjust for negative months
+      if (months < 0) {
+        years--;
+        months += 12;
+      }
+
+      setExperience({ years, months, days });
+    };
+
+    calculateExperience();
+
+    // Update daily at midnight
+    const now = new Date();
+    const tomorrow = new Date(
+      now.getFullYear(),
+      now.getMonth(),
+      now.getDate() + 1
+    );
+    const timeUntilMidnight = tomorrow.getTime() - now.getTime();
+
+    const midnightTimeout = setTimeout(() => {
+      calculateExperience();
+      // Then update every 24 hours
+      const dailyInterval = setInterval(
+        calculateExperience,
+        24 * 60 * 60 * 1000
+      );
+      return () => clearInterval(dailyInterval);
+    }, timeUntilMidnight);
+
+    return () => clearTimeout(midnightTimeout);
+  }, []);
+
   return (
     <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6 md:py-24 lg:px-8">
       <div className="space-y-12 md:space-y-16">
         {/* Header */}
         <div className="animate-fade-in space-y-4">
           <h1 className="text-4xl font-bold sm:text-5xl md:text-6xl">
-            Career <span className="text-primary">Journey</span>
+            {"Mike's "}
+            <span className="text-primary">{'Journey'}</span>
+          </h1>
+          <h1 className="text-muted-foreground text-lg md:text-xl">
+            <span className="text-foreground font-bold">
+              {`${experience.years}${experience.years === 1 ? 'year' : 'years'}
+              ${experience.months}${experience.months === 1 ? 'month' : 'months'}
+              ${experience.days}${experience.days === 1 ? 'day' : 'days'}`}
+            </span>
+            {' and '}
+            <span className="text-foreground font-bold">{'counting...'}</span>
           </h1>
           <p className="text-muted-foreground max-w-3xl text-lg md:text-xl">
-            A timeline of my professional experience, from military service to
-            software engineering leadership.
+            {
+              'A timeline of my professional experience, from military service to where I am now.'
+            }
           </p>
         </div>
 

components/molecules/social-links.tsx

@@ -10,6 +10,95 @@ export default async function ProjectDetailsView({
 }: {
   project: Project;
 }) {
+  // Helper function to detect paragraph type and render appropriately
+  function renderFormattedParagraph(paragraph: string, index: number) {
+    // Empty string - render as line break
+    if (paragraph.trim() === '') {
+      return <br key={index} />;
+    }
+
+    // Heading with # markdown syntax (## Heading)
+    if (paragraph.startsWith('#')) {
+      const level = paragraph.match(/^#+/)?.[0].length || 1;
+      const text = paragraph.replace(/^#+\s*/, '');
+
+      if (level === 1) {
+        return (
+          <h2 key={index} className="mt-8 text-2xl font-bold first:mt-0">
+            {text}
+          </h2>
+        );
+      } else {
+        return (
+          <h3 key={index} className="mt-6 text-xl font-semibold first:mt-0">
+            {text}
+          </h3>
+        );
+      }
+    }
+
+    // ALL CAPS heading with colon (OVERVIEW:)
+    if (/^[A-Z\s]+:/.test(paragraph)) {
+      const text = paragraph.replace(':', '');
+      return (
+        <h3
+          key={index}
+          className="mt-6 text-lg font-bold tracking-wide uppercase first:mt-0"
+        >
+          {text}
+        </h3>
+      );
+    }
+
+    // List item (starts with •, -, or *)
+    if (/^[•\-*]\s/.test(paragraph)) {
+      const text = paragraph.replace(/^[•\-*]\s*/, '');
+      return (
+        <li
+          key={index}
+          className="text-muted-foreground ml-6 text-base leading-relaxed"
+        >
+          {renderInlineFormatting(text)}
+        </li>
+      );
+    }
+
+    // Regular paragraph with inline formatting
+    return (
+      <p
+        key={index}
+        className="text-muted-foreground text-base leading-relaxed"
+      >
+        {renderInlineFormatting(paragraph)}
+      </p>
+    );
+  }
+
+  // Helper function to render inline formatting (bold, italic, etc.)
+  function renderInlineFormatting(text: string) {
+    // Split by ** for bold text
+    const parts = text.split(/(\*\*.*?\*\*)/g);
+
+    return parts.map((part, i) => {
+      // Bold text wrapped in **
+      if (part.startsWith('**') && part.endsWith('**')) {
+        const content = part.slice(2, -2);
+        return (
+          <strong key={i} className="text-foreground font-semibold">
+            {content}
+          </strong>
+        );
+      }
+
+      // Check for HTML strong tags
+      if (part.includes('<strong>') || part.includes('<em>')) {
+        return <span key={i} dangerouslySetInnerHTML={{ __html: part }} />;
+      }
+
+      return part;
+    });
+  }
+
   return (
     <div className="mx-auto max-w-5xl px-4 pb-12 sm:px-6 md:pb-20 lg:px-8">
       {/* Back Button and Title */}
@@ -77,14 +166,9 @@ export default async function ProjectDetailsView({
 
           {/* Full Description */}
           <div className="space-y-4">
-            {project.fullDescription.map((paragraph, index) => (
-              <p
-                key={index}
-                className="text-muted-foreground text-base leading-relaxed"
-              >
-                {paragraph}
-              </p>
-            ))}
+            {project.fullDescription.map((paragraph, index) =>
+              renderFormattedParagraph(paragraph, index)
+            )}
           </div>
 
           {/* Tech Stack */}