feat: add profile photo, enhance content and design

- Add cropped profile photo in hero section
- Expand About section with development philosophy and infrastructure details
- Enhance Experience descriptions with specific activities
- Improve project descriptions with roles and technical details
- Redesign section titles to uppercase label style with accent color
- Increase hero and section spacing for better visual rhythm

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

css/style.css

@@ -22,19 +22,24 @@ img { max-width: 100%; display: block; }
 .container { max-width: 960px; margin: 0 auto; padding: 0 40px; }
 
 .section {
-  padding: 72px 0;
+  padding: 80px 0;
   border-bottom: 1px solid #eee;
 }
 .section:last-child { border-bottom: none; }
 
 .section-title {
-  font-size: 1.35rem;
+  font-size: 0.8rem;
   font-weight: 700;
-  margin-bottom: 28px;
+  text-transform: uppercase;
-  color: #111;
+  letter-spacing: 1.5px;
-  letter-spacing: -0.02em;
+  margin-bottom: 32px;
+  color: #0055cc;
 }
 
+/* === About === */
+.about-content { display: flex; flex-direction: column; gap: 14px; }
+.about-content p { color: #444; font-size: 1rem; line-height: 1.8; }
+
 /* === Nav === */
 .nav {
   position: sticky;
@@ -75,10 +80,19 @@ img { max-width: 100%; display: block; }
 
 /* === Hero === */
 .hero {
-  padding: 100px 0 72px;
+  padding: 120px 0 80px;
   text-align: center;
 }
 
+.hero-photo {
+  width: 150px;
+  border-radius: 50%;
+  object-fit: cover;
+  aspect-ratio: 1;
+  object-position: center 20%;
+  margin: 0 auto 24px;
+}
+
 .hero-name {
   font-size: 3rem;
   font-weight: 800;
@@ -94,6 +108,14 @@ img { max-width: 100%; display: block; }
   font-weight: 400;
 }
 
+.hero-tagline {
+  font-size: 1.05rem;
+  color: #777;
+  margin-top: 16px;
+  font-weight: 400;
+  line-height: 1.6;
+}
+
 .hero-tags {
   display: flex;
   gap: 10px;
@@ -357,10 +379,10 @@ img { max-width: 100%; display: block; }
   .nav { padding: 0 20px; }
   .nav-inner { gap: 16px; }
   .nav-link { font-size: 0.8rem; }
-  .hero { padding: 60px 0 48px; }
+  .hero { padding: 80px 0 56px; }
   .hero-name { font-size: 2rem; }
   .hero-role { font-size: 1rem; }
-  .section { padding: 48px 0; }
+  .section { padding: 56px 0; }
   .card-grid { grid-template-columns: 1fr; }
   .infra-grid { grid-template-columns: 1fr 1fr; }
 }

data/projects.js

@@ -1,7 +1,7 @@
 const projects = [
   {
     name: "One of the Plans (A301)",
-    description: "Unity 기반 MMORPG 게임 프로젝트. 멀티플레이어 서버는 Go로 구현.",
+    description: "Unity 기반 MMORPG 게임 프로젝트. Go로 멀티플레이어 게임 서버를 설계·구현하고, Unity C#으로 클라이언트를 개발. 실시간 동기화, 전투 시스템, 캐릭터 관리 등 핵심 게임 로직을 담당.",
     tags: ["Unity", "C#", "Go"],
     links: [
       { label: "a301.tolelom.xyz", url: "https://a301.tolelom.xyz" },
@@ -11,7 +11,7 @@ const projects = [
   },
   {
     name: "No-Ill",
-    description: "노인 낙상 감지 및 외로움 방지를 위한 IoT 장치와 보호자 앱. 센서 기반 낙상 감지 시스템과 보호자용 모니터링 웹/앱을 개발.",
+    description: "노인 낙상 감지 및 외로움 방지를 위한 IoT 프로젝트. 센서 기반 낙상 감지 장치, 디스플레이 인터페이스, 보호자용 모니터링 웹과 앱을 개발. Go(Fiber) 백엔드와 React 프론트엔드로 구성.",
     tags: ["React", "Go", "IoT"],
     links: [
       { label: "no-ill.tolelom.xyz", url: "https://no-ill.tolelom.xyz" },
@@ -21,14 +21,14 @@ const projects = [
   },
   {
     name: "TOL",
-    description: "한글 프로그래밍 언어 개발 프로젝트. 3인 팀으로 진행하며 프로그래밍 언어 분야에 흥미를 가지게 된 계기. 순수 C++로 언어를 설계하고 구현.",
+    description: "한글 프로그래밍 언어 개발 프로젝트. 3인 팀으로 렉서, 파서, 인터프리터를 순수 C++로 설계·구현. 프로그래밍 언어론에 관심을 가지게 된 계기가 된 프로젝트. 웹 기반 온라인 에디터도 함께 개발.",
     tags: ["C++", "Express.js", "MongoDB"],
     links: [],
     category: "언어 개발"
   },
   {
     name: "SION",
-    description: "Jetson 키트를 활용한 자율주행 및 모니터링 웹 페이지.",
+    description: "Jetson 키트를 활용한 자율주행 RC카 프로젝트. Python으로 차선 인식 및 주행 제어를 구현하고, 실시간 카메라 피드와 주행 상태를 모니터링하는 웹 대시보드를 개발.",
     tags: ["Python", "Jetson", "Web"],
     links: [
       { label: "sion.tolelom.xyz", url: "https://sion.tolelom.xyz" }
@@ -37,7 +37,7 @@ const projects = [
   },
   {
     name: "Neo-Slasher",
-    description: "게임 개발 동아리 ExP에서 8인 팀으로 진행한 액션 게임. 프로그래밍 디렉터로 데이터 관리, 인터페이스 개발 및 전체 프로그래밍 과정을 담당.",
+    description: "게임 개발 동아리 ExP에서 8인 팀으로 제작한 3D 액션 게임. 프로그래밍 디렉터로서 데이터 관리 시스템, UI/인터페이스 설계, 전투 로직 등 전체 프로그래밍 아키텍처를 주도.",
     tags: ["Unity", "C#"],
     links: [],
     category: "게임"

index.html

@@ -28,8 +28,10 @@
 
   <main class="container">
     <section class="hero">
+      <img src="images/profile.jpg" alt="김성민" class="hero-photo">
       <h1 class="hero-name">김성민</h1>
       <p class="hero-role">풀스택 & 게임 개발자</p>
+      <p class="hero-tagline">게임 서버부터 프로그래밍 언어까지, 만들고 싶은 건 직접 만듭니다.</p>
       <div class="hero-tags">
         <span class="tag">C++</span>
         <span class="tag">Go</span>
@@ -44,8 +46,11 @@
 
     <section id="about" class="section">
       <h2 class="section-title">About</h2>
-      <p>새로운 기술을 배우는 것을 좋아하며, 특히 언어 개발과 게임 제작에 관심이 많습니다. 효율적인 코드 작성법, 읽기 쉬운 코드에 대해 고민하는 것을 좋아합니다.</p>
+      <div class="about-content">
-      <p style="margin-top: 12px;">홍익대학교 알고리즘 학회 HI-ARC 학회장을 역임했으며, ICPC 신촌 초급 강사와 멘토로 활동했습니다. 현재는 게임 서버 개발과 웹 풀스택 개발을 중심으로 다양한 프로젝트를 진행하고 있습니다.</p>
+        <p>프로그래밍 언어의 설계와 구현에 깊은 관심을 가지고 있으며, 순수 C++로 한글 프로그래밍 언어를 만든 경험이 있습니다. 게임 개발에서는 Unity와 C#으로 클라이언트를, Go로 멀티플레이어 서버를 구축합니다.</p>
+        <p>효율적이고 읽기 쉬운 코드를 지향하며, 알고리즘 문제 해결 능력을 기반으로 성능을 고려한 설계를 합니다. 홍익대학교 알고리즘 학회 HI-ARC 학회장을 역임하고, ICPC 신촌에서 초급 강사와 멘토로 활동하며 지식 공유에도 힘써왔습니다.</p>
+        <p>현재는 Mac Mini 서버에 Docker와 Caddy 기반의 셀프호스팅 인프라를 운영하며, 개인 프로젝트들을 직접 배포하고 관리하고 있습니다.</p>
+      </div>
     </section>
 
     <section id="skills" class="section">
@@ -103,35 +108,35 @@
             <span class="experience-title">HI-ARC 학회장</span>
             <span class="experience-period">2019</span>
           </div>
-          <p class="experience-desc">홍익대학교 알고리즘 학회 HI-ARC 학회장</p>
+          <p class="experience-desc">홍익대학교 알고리즘 학회 HI-ARC 학회장. 학회 운영 체계를 정비하고 정기 스터디·세미나를 기획하여 학회 활성화를 이끔.</p>
         </div>
         <div class="experience-item">
           <div class="experience-header">
             <span class="experience-title">HI-ARC 운영진</span>
             <span class="experience-period">2022.01 ~ 2024.02</span>
           </div>
-          <p class="experience-desc">학회 운영 및 스터디 관리</p>
+          <p class="experience-desc">학회 운영 및 스터디 관리. 신입 부원 교육 커리큘럼을 설계하고, 알고리즘 스터디 멘토링을 진행.</p>
         </div>
         <div class="experience-item">
           <div class="experience-header">
             <span class="experience-title">ICPC 신촌 초급 강사 / 멘토</span>
             <span class="experience-period">2020, 2022</span>
           </div>
-          <p class="experience-desc">ICPC 신촌 Winter 초급 강사(2020) 및 멘토(2022) 활동</p>
+          <p class="experience-desc">ICPC 신촌 연합 캠프에서 알고리즘 초급 강의(2020 Winter)와 멘토링(2022) 담당. 기초 자료구조부터 그래프 탐색까지 강의.</p>
         </div>
         <div class="experience-item">
           <div class="experience-header">
             <span class="experience-title">제 1회 하이콘 출제 및 총괄</span>
             <span class="experience-period">2019</span>
           </div>
-          <p class="experience-desc">프로그래밍 대회 문제 출제 및 대회 운영 총괄</p>
+          <p class="experience-desc">HI-ARC 주관 프로그래밍 대회의 첫 회를 기획. 문제 출제, 검수, 대회 운영 전반을 총괄.</p>
         </div>
         <div class="experience-item">
           <div class="experience-header">
             <span class="experience-title">SUAPC 2024 Winter</span>
             <span class="experience-period">2024</span>
           </div>
-          <p class="experience-desc">12등 (팀명: 하이아크 최고죠)</p>
+          <p class="experience-desc">신촌 연합 프로그래밍 대회 12등 (팀: 하이아크 최고죠). 3인 팀으로 참가.</p>
         </div>
       </div>
     </section>