refactor: update website

jsparkdev · jsparkdev · commit 11a52dda2959 · 2025-06-14T20:56:28.000+09:00
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -10,16 +10,16 @@
   },
   "dependencies": {
     "@astrojs/sitemap": "^3.4.1",
-    "@tailwindcss/vite": "^4.1.8",
-    "astro": "^5.9.1",
-    "tailwindcss": "^4.1.8"
+    "@tailwindcss/vite": "^4.1.10",
+    "astro": "^5.9.3",
+    "tailwindcss": "^4.1.10"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.14.1",
     "astro-eslint-parser": "^1.2.2",
-    "eslint": "^9.28.0",
+    "eslint": "^9.29.0",
     "eslint-plugin-astro": "^1.3.1",
     "lefthook": "^1.11.13",
-    "wrangler": "^4.19.1"
+    "wrangler": "^4.20.0"
   }
 }
diff --git a/src/assets/icon-bluesky.svg b/src/assets/icon-bluesky.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 226" {...Astro.props}><path fill="#1185FE" d="M55.491 15.172c29.35 22.035 60.917 66.712 72.509 90.686 11.592-23.974 43.159-68.651 72.509-90.686C221.686-.727 256-13.028 256 26.116c0 7.818-4.482 65.674-7.111 75.068-9.138 32.654-42.436 40.983-72.057 35.942 51.775 8.812 64.946 38 36.501 67.187-54.021 55.433-77.644-13.908-83.696-31.676-1.11-3.257-1.63-4.78-1.637-3.485-.008-1.296-.527.228-1.637 3.485-6.052 17.768-29.675 87.11-83.696 31.676-28.445-29.187-15.274-58.375 36.5-67.187-29.62 5.041-62.918-3.288-72.056-35.942C4.482 91.79 0 33.934 0 26.116 0-13.028 34.314-.727 55.491 15.172Z"/></svg>
diff --git a/src/assets/icon-github.svg b/src/assets/icon-github.svg
@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg" {...Astro.props}>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#ffff"/>
+</svg>
diff --git a/src/assets/icon-linkedin.svg b/src/assets/icon-linkedin.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" {...Astro.props}><path d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453" fill="#0A66C2"/></svg>
diff --git a/src/assets/icon-x.svg b/src/assets/icon-x.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1200 1227" {...Astro.props}><path fill="#fff" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/></svg>
diff --git a/src/components/About.astro b/src/components/About.astro
@@ -1,3 +1,3 @@
-<p class="text-sm py-8 antialiased">
-  My focus is on developing fast, intuitive, and minimalist web experiences, designed for seamless user interaction and optimal performance. I am committed to building and delivering the best possible solutions.
-</p>
+<section class="text-sm pt-2.5 pb-6 antialiased">
+  Hello! I'm Junseong Park, a Product Engineer passionate about elevating UX & DX.
+</section>
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -4,8 +4,8 @@ import SocialLinks from '~/components/SocialLinks.astro'
 import { TITLE } from '~/const'
 ---
 
-<div class="min-w-[320px] max-w-3xl mx-auto px-6 pb-20 text-white font-mono">
-  <h1 class="text-3xl font-bold">{TITLE}</h1>
+<div class="min-w-[320px] max-w-3xl mx-auto px-6 pb-10 text-white font-mono">
+  <h1 class="text-4xl font-bold">{TITLE}</h1>
   <About />
   <SocialLinks />
 </div>
diff --git a/src/components/SocialLink.astro b/src/components/SocialLink.astro
@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<'a'>
+
+const { href, title } = Astro.props;
+---
+
+<a
+  {href}
+  aria-label={title}
+  title={`Go to my ${title}`}
+  target="_blank"
+  rel="noopener noreferrer"
+  class="hover:opacity-50 transition-opacity bg-slate-800 rounded-xl p-3.5"
+>
+  <slot />
+</a>
diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro
@@ -1,23 +1,22 @@
 ---
-import { SOCIAL_LINKS } from '~/const'
+import IconBlueSky from '../assets/icon-bluesky.svg'
+import IconGithub from '../assets/icon-github.svg'
+import IconLinkedIn from '../assets/icon-linkedin.svg'
+import IconX from '../assets/icon-x.svg'
+import SocialLink from './SocialLink.astro';
 ---
 
-<nav aria-label="social-media-links">
-  <ul class="flex gap-4 text-sm font-semibold">
-    {
-      SOCIAL_LINKS.map(link => (
-        <li>
-          <a
-            href={link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label={`${link.title} Profile`}
-            class="hover:underline underline-offset-4"
-          >
-            {link.title}
-          </a>
-        </li>
-      ))
-    }
-  </ul>
+<nav title="social-media-links" class="flex gap-3">
+  <SocialLink href="https://github.com/jsparkdev" title="Github">
+    <IconGithub width={28} height={28} />
+  </SocialLink>
+  <SocialLink href="https://linkedin.com/in/jsparkdev" title="LinkedIn">
+    <IconLinkedIn width={28} height={28} />
+  </SocialLink>
+  <SocialLink href="https://x.com/jsparkdev" title="X">
+    <IconX width={28} height={28} />
+  </SocialLink>
+  <SocialLink href="https://bsky.app/profile/jspark.dev" title="BlueSky">
+    <IconBlueSky width={28} height={28} />
+  </SocialLink>
 </nav>
diff --git a/src/const.ts b/src/const.ts
@@ -1,22 +1,3 @@
 export const TITLE = 'Junseong Park'
-export const DESCRIPTION = 'I\'m Junseong Park, a full-stack web developer aiming to create and deliver the best experience possible.'
+export const DESCRIPTION = 'Junseong Park\'s Website'
 export const SOCIAL_IMAGE_URL = 'https://jspark.dev/social.jpg'
-
-export const SOCIAL_LINKS = [
-  {
-    title: 'Github',
-    url: 'https://github.com/jsparkdev',
-  },
-  {
-    title: 'X',
-    url: 'https://x.com/jsparkdev',
-  },
-  {
-    title: 'BlueSky',
-    url: 'https://bsky.app/profile/jspark.dev',
-  },
-  {
-    title: 'LinkedIn',
-    url: 'https://linkedin.com/in/jsparkdev',
-  },
-]
diff --git a/wrangler.jsonc b/wrangler.jsonc
@@ -1,7 +1,7 @@
 {
   "$schema": "node_modules/wrangler/config-schema.json",
   "name": "www",
-  "compatibility_date": "2025-06-09",
+  "compatibility_date": "2025-06-14",
   "assets": {
     "directory": "./dist"
   }
