Claude/gallant ardinghelli 264b24

.github/workflows/deploy.yml

@@ -0,0 +1,41 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ master ] # 정윤 님 저장소의 기본 브랜치가 master인 경우
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Build Astro
+        run: npm run build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

AGENTS.md

@@ -0,0 +1,64 @@
+# AGENTS.md
+
+This file provides guidance to Codex (Codex.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a modern, minimalist portfolio template built with Astro and Tailwind CSS v4. It's designed to be easily customizable through a single configuration file while maintaining a clean, professional appearance.
+
+## Tech Stack
+
+- **Astro**: Static site generator
+- **Tailwind CSS v4**: Utility-first CSS framework using the new @tailwindcss/vite plugin
+- **TypeScript**: For type-safe configuration
+- **Tabler Icons**: Icon library
+
+## Development Commands
+
+```bash
+npm run dev       # Start development server
+npm run build     # Build for production
+npm run preview   # Preview production build
+```
+
+## Architecture
+
+The project follows a component-based architecture with all customization centralized in `src/config.ts`:
+
+- **Components** (`src/components/`): Individual Astro components for each section (Hero, About, Projects, Experience, Education, Header, Footer)
+- **Main Layout** (`src/pages/index.astro`): Single-page layout that imports all components
+- **Configuration** (`src/config.ts`): Single source of truth for all content and customization
+
+### Key Architectural Decisions
+
+1. **Single Configuration File**: All content is managed through `src/config.ts` to make customization simple
+2. **Conditional Rendering**: Sections automatically hide if their data is removed from the config
+3. **Component Independence**: Each section is a self-contained component that reads from the config
+4. **Accent Color System**: Single `accentColor` in config propagates throughout the site via CSS custom properties
+
+## Important Implementation Details
+
+- The site uses Tailwind CSS v4 with the Vite plugin configuration
+- No linting or testing framework is currently configured
+- All components are in `.astro` format (not React/Vue/etc)
+- The project uses IBM Plex Mono font loaded from Google Fonts
+- Social links in the config are all optional and will conditionally render
+
+## Working with Components
+
+When modifying components:
+1. Components read directly from the imported `siteConfig` object
+2. Use Tailwind utility classes for styling
+3. Maintain the existing monospace font aesthetic
+4. Use Tabler Icons for consistency with existing icons
+
+## Configuration Structure
+
+The `src/config.ts` exports a `siteConfig` object with these sections:
+- Basic info: name, title, description, accentColor
+- Social links: email, linkedin, twitter, github (all optional)
+- aboutMe: string
+- skills: string[]
+- projects: array of {name, description, link, skills}
+- experience: array of {company, title, dateRange, bullets}
+- education: array of {school, degree, dateRange, achievements}

src/components/Footer.astro

@@ -1,194 +1,51 @@
 ---
 import { siteConfig } from "../config";
 
-const hasProjects = siteConfig.projects && siteConfig.projects.length > 0;
-const hasExperience = siteConfig.experience && siteConfig.experience.length > 0;
-const hasEducation = siteConfig.education && siteConfig.education.length > 0;
+const socialEntries = [
+  { label: "Email", href: siteConfig.social.email ? `mailto:${siteConfig.social.email}` : undefined },
+  { label: "LinkedIn", href: siteConfig.social.linkedin },
+  { label: "GitHub", href: siteConfig.social.github },
+].filter((entry) => entry.href);
 ---
 
-<footer class="relative bg-gray-50 border-t border-gray-200">
-  <div class="mx-auto max-w-6xl px-6 py-12 lg:px-8">
-    <div
-      class="flex flex-col md:flex-row md:items-center md:justify-between gap-8"
-    >
-      <div class="flex flex-col gap-4">
-        <h3 class="text-2xl font-bold text-gray-800">
-          {siteConfig.name}
-        </h3>
-        <p class="text-base text-gray-600">
-          {siteConfig.title}
-        </p>
-        <div class="flex gap-x-6">
-          <a
-            href={`mailto:${siteConfig.social.email}`}
-            aria-label="Email"
-            class="text-gray-600 transition-colors duration-300 hover:text-[var(--accent-color)]"
-            style={`--accent-color: ${siteConfig.accentColor}`}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="h-6 w-6"
-            >
-              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-              <path
-                d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"
-              ></path>
-              <path d="M3 7l9 6l9 -6"></path>
-            </svg>
-          </a>
-          <a
-            href={siteConfig.social.linkedin}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="LinkedIn"
-            class="text-gray-600 transition-colors duration-300 hover:text-[var(--accent-color)]"
-            style={`--accent-color: ${siteConfig.accentColor}`}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="h-6 w-6"
-              ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
-                d="M8 11v5"></path><path d="M8 8v.01"></path><path d="M12 16v-5"
-              ></path><path d="M16 16v-3a2 2 0 1 0 -4 0"></path><path
-                d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4z"
-              ></path></svg
-            >
-          </a>
-          <a
-            href={siteConfig.social.twitter}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="Twitter"
-            class="text-gray-600 transition-colors duration-300 hover:text-[var(--accent-color)]"
-            style={`--accent-color: ${siteConfig.accentColor}`}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="h-6 w-6"
-              ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
-                d="M4 4l11.733 16h4.267l-11.733 -16z"></path><path
-                d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path></svg
-            >
-          </a>
-          <a
-            href={siteConfig.social.github}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="GitHub"
-            class="text-gray-600 transition-colors duration-300 hover:text-[var(--accent-color)]"
-            style={`--accent-color: ${siteConfig.accentColor}`}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="h-6 w-6"
-              ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
-                d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
-              ></path></svg
+<footer class="relative overflow-hidden border-t border-white/70 bg-[var(--navy)] px-6 py-16 text-white">
+  <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(245,168,200,0.3),_transparent_30%),radial-gradient(circle_at_bottom_right,_rgba(255,255,255,0.14),_transparent_28%)]"></div>
+
+  <div class="relative mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1.4fr_1fr]">
+    <div class="space-y-4">
+      <p class="text-xs font-semibold uppercase tracking-[0.34em] text-white/60">Closing Frame</p>
+      <h2 class="max-w-2xl text-3xl font-semibold tracking-tight md:text-5xl">
+        Human-centered AI systems need both logic and taste.
+      </h2>
+      <p class="max-w-2xl text-sm leading-7 text-white/74 md:text-base">
+        {siteConfig.name}는 기술 설계와 콘텐츠 실행 사이의 간극을 줄이는 방식으로 AI 경험을 기획합니다.
+      </p>
+    </div>
+
+    <div class="grid gap-6 rounded-[2rem] border border-white/15 bg-white/8 p-6 backdrop-blur-sm">
+      <div>
+        <p class="text-sm font-semibold text-[var(--pink-soft)]">{siteConfig.name} / {siteConfig.englishName}</p>
+        <p class="mt-2 text-sm text-white/70">{siteConfig.title}</p>
+      </div>
+
+      <div class="flex flex-wrap gap-3">
+        {
+          socialEntries.map((entry) => (
+            <a
+              href={entry.href}
+              target={entry.label === "Email" ? undefined : "_blank"}
+              rel={entry.label === "Email" ? undefined : "noreferrer"}
+              class="rounded-full border border-white/15 px-4 py-2 text-xs font-medium uppercase tracking-[0.18em] text-white transition hover:border-[var(--pink-strong)] hover:bg-white hover:text-[var(--navy)]"
             >
-          </a>
-        </div>
+              {entry.label}
+            </a>
+          ))
+        }
       </div>
 
-      <div class="hidden md:block flex flex-col md:items-end gap-4">
-        <nav class="flex gap-x-8">
-          <a
-            href="#about"
-            class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
-            >About</a
-          >
-          {
-            hasProjects && (
-              <a
-                href="#projects"
-                class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
-              >
-                Projects
-              </a>
-            )
-          }
-          {
-            hasExperience && (
-              <a
-                href="#experience"
-                class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
-              >
-                Experience
-              </a>
-            )
-          }
-          {
-            hasEducation && (
-              <a
-                href="#education"
-                class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
-              >
-                Education
-              </a>
-            )
-          }
-        </nav>
-        <p class="text-sm text-gray-500">
-          © {new Date().getFullYear()}
-          {siteConfig.name}. All rights reserved.
-        </p>
+      <div class="text-xs uppercase tracking-[0.22em] text-white/50">
+        © {new Date().getFullYear()} Seo Jungyoun. Workflow crafted for SM Entertainment.
       </div>
     </div>
   </div>
-
-  <!-- Decorative pattern -->
-  <div class="absolute inset-0 -z-10 overflow-hidden">
-    <svg
-      aria-hidden="true"
-      class="absolute bottom-0 left-0 w-full h-24 text-gray-100"
-    >
-      <pattern
-        id="footer-pattern"
-        x="0"
-        y="0"
-        width="100"
-        height="100"
-        patternUnits="userSpaceOnUse"
-      >
-        <path
-          d="M0 50 Q 25 40, 50 50 T 100 50"
-          stroke="currentColor"
-          stroke-width="0.5"
-          fill="none"
-          opacity="0.4"></path>
-      </pattern>
-      <rect width="100%" height="100%" fill="url(#footer-pattern)"></rect>
-    </svg>
-  </div>
 </footer>