-
Contact Me
-
이메일 주소를 클릭하면 복사되고, 더블클릭하면 메일 앱이 열립니다.
-
- {emailContacts.map((ec) => (
-
-
{ec.label}
-
+
+
+
Contact Me
+
+ 이메일 주소를 클릭하면 복사되고, 더블클릭하면 메일 앱이 열립니다.
+
+
+ {
+ emailContacts.map((ec) => (
+
+
+ {ec.label}
+
+
+
+ ))
+ }
+
+
+
- ))}
-
-
-
-
diff --git a/src/components/ExperienceRow.astro b/src/components/ExperienceRow.astro
new file mode 100644
index 0000000..7cdfcd2
--- /dev/null
+++ b/src/components/ExperienceRow.astro
@@ -0,0 +1,29 @@
+---
+interface Props {
+ year: string;
+ connector: "wave" | "line";
+}
+
+const { year, connector } = Astro.props;
+const connectorClass =
+ connector === "wave"
+ ? "h-[0.17em] w-[0.52em] [filter:var(--mono-filter)]"
+ : "h-[0.1em] w-[0.55em] [filter:var(--mono-filter)]";
+---
+
+
+
+
+
+
+
+
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..8fdf729
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,117 @@
+---
+const navigationItems = [
+ { label: "Home", href: "#home", nodeId: "43:29" },
+ { label: "About", href: "#about", nodeId: "43:30" },
+ { label: "Projects", href: "#projects", nodeId: "43:32" },
+ { label: "Timeline", href: "#timeline", nodeId: "43:36" },
+] as const;
+
+const desktopLinkClass =
+ "text-foreground no-underline transition-opacity duration-150 hover:opacity-55 focus-visible:opacity-55";
+const mobileLinkClass =
+ "block rounded-xl px-3 py-2 text-sm font-semibold text-foreground no-underline transition-colors hover:bg-foreground/5";
+---
+
+
+
+
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
new file mode 100644
index 0000000..7e9cf08
--- /dev/null
+++ b/src/components/Hero.astro
@@ -0,0 +1,94 @@
+
+
+
+
+
+ 항상 꿈꾸던 것들을
+
+
+ 현실로 만들어나가는
암냥입니다.
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
diff --git a/src/globals.css b/src/globals.css
index c1215d8..507f9b8 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -1,7 +1,5 @@
-@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");
-@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');
+@import "@sun-typeface/suit/fonts/variable/woff2/SUIT-Variable.css";
@import "tailwindcss";
-@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@@ -12,81 +10,73 @@
--color-muted-foreground: var(--muted-foreground);
--color-border: var(--border);
--color-ring: var(--ring);
+ --font-sans: "SUIT Variable", "SUIT", system-ui, sans-serif;
--radius-sm: calc(var(--radius) * 0.6);
--radius-md: calc(var(--radius) * 0.8);
--radius-lg: var(--radius);
}
-@font-face {
- font-family: 'BonmyeongjoSourceHanSerif';
- src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
- font-weight: normal;
- font-display: swap;
-}
-
-.font-BonmyeongjoSourceHanSerif {
- font-family: "BonmyeongjoSourceHanSerif", sans-serif !important;
-}
-
-.font-galmuri {
- font-family: "Galmuri", sans-serif !important;
-}
-
:root {
- --background: hsl(340 40% 98%);
- --foreground: hsl(315 21% 8%);
- --muted: hsl(340 20% 95%);
- --muted-foreground: hsl(340 10% 60%);
- --border: hsl(340 25% 90%);
- --ring: hsl(315 21% 8%);
+ color-scheme: light;
+
+ --light-background: hsl(340 40% 98%);
+ --light-foreground: hsl(315 21% 8%);
+ --light-muted: hsl(340 20% 95%);
+ --light-muted-foreground: hsl(340 10% 60%);
+ --light-border: hsl(340 25% 90%);
+ --light-ring: hsl(315 21% 8%);
+
+ --dark-background: hsl(315 21% 8%);
+ --dark-foreground: hsl(0 0% 98%);
+ --dark-muted: hsl(296 18% 15%);
+ --dark-muted-foreground: hsl(240 5% 68%);
+ --dark-border: hsl(296 18% 15%);
+ --dark-ring: hsl(240 4.9% 83.9%);
+
+ --background: var(--light-background);
+ --foreground: var(--light-foreground);
+ --muted: var(--light-muted);
+ --muted-foreground: var(--light-muted-foreground);
+ --border: var(--light-border);
+ --ring: var(--light-ring);
--radius: 0.625rem;
--scrollbar: hsla(340 10% 60% / 0.5);
--scrollbar-hover: hsla(340 10% 60% / 0.8);
+ --mono-filter: none;
}
.dark {
- --background: hsl(315 21% 8%);
- --foreground: hsl(0 0% 98%);
- --muted: hsl(296, 18%, 15%);
- --muted-foreground: hsl(240 5% 68%);
- --border: hsl(296, 18%, 15%);
- --ring: hsl(240 4.9% 83.9%);
-
- --scrollbar: hsla(340 10% 60% / 0.5);
- --scrollbar-hover: hsla(340 10% 60% / 0.8);
+ color-scheme: dark;
+ --background: var(--dark-background);
+ --foreground: var(--dark-foreground);
+ --muted: var(--dark-muted);
+ --muted-foreground: var(--dark-muted-foreground);
+ --border: var(--dark-border);
+ --ring: var(--dark-ring);
+ --mono-filter: invert(1);
}
-@layer base {
- * {
- border-color: var(--border);
- outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
- }
+.light {
+ color-scheme: light;
+ --background: var(--light-background);
+ --foreground: var(--light-foreground);
+ --muted: var(--light-muted);
+ --muted-foreground: var(--light-muted-foreground);
+ --border: var(--light-border);
+ --ring: var(--light-ring);
+ --mono-filter: none;
+}
- body {
- background-color: var(--background);
- color: var(--foreground);
- font-family: "Wanted Sans Variable", "Wanted Sans", -apple-system,
- BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo",
- "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji",
- "Segoe UI Symbol", sans-serif;
+@media (prefers-color-scheme: dark) {
+ :root:not(.light) {
+ color-scheme: dark;
+ --background: var(--dark-background);
+ --foreground: var(--dark-foreground);
+ --muted: var(--dark-muted);
+ --muted-foreground: var(--dark-muted-foreground);
+ --border: var(--dark-border);
+ --ring: var(--dark-ring);
+ --mono-filter: invert(1);
}
}
-
-/* Fullscreen Scroll Snap */
-html {
- scroll-behavior: smooth;
-}
-
-body {
- scroll-snap-type: y mandatory;
-}
-
-.snap-section {
- scroll-snap-align: start;
- scroll-snap-stop: always;
-}
-
-strong {
- font-weight: 600;
-}
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a536424..8475458 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,70 +1,84 @@
---
-import DDay from "@/components/DDay.astro";
-import Projects from "@/components/Projects.astro";
-import Timeline from "@/components/Timeline.astro";
-import Contact from "@/components/Contact.astro";
+import About from "@/components/About.astro";
+import Header from "@/components/Header.astro";
+import Hero from "@/components/Hero.astro";
import "@/globals.css";
-import "@/scrollbar.css";
---
-
-
-
-
-
-
-
암냥 | imnya.ng
-
-
-
-
+
+
+
+
+
+
+
+ 암냥 | imnya.ng
+
+
+
-
-
-
-
-
-
항상 꿈에만 있던 것들을 현실로 만들어보는 암냥입니다.
-
언제나 새로운 것을 배우고, 도전하고 있습니다.
-
- 현재는 정보보안 분야쪽에 관심이 많으며 원래는 소프트웨어 개발에 관심
- 많았습니다.
-
-
-
-
-
-
-
-
-
-
© 2026 imnyang. All rights reserved.
-
-
-
-
+
+
+
+
+
+
+
+
+
diff --git a/src/scrollbar.css b/src/scrollbar.css
deleted file mode 100644
index 48c5624..0000000
--- a/src/scrollbar.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/* from reset */
-::-webkit-scrollbar-track {
- background: 0 0;
-}
-
-::-webkit-scrollbar-thumb {
- background: var(--scrollbar);
- border: 5px solid var(--background);
- border-radius: 16px;
-}
-
-::-webkit-scrollbar-thumb:hover {
- background: var(--scrollbar-hover);
-}
-
-/* ::-webkit-scrollbar:not(.highlighttable, .highlight table, .gist .highlight) {
- background: var(--theme);
-}
-*/
-/* reset */
-::-webkit-scrollbar {
- width: 19px;
- height: 11px;
-}
-
-/* from PaperMod https://github.com/adityatelange/hugo-PaperMod/blob/c98a924842fc7ee0c14212c316c69ede3ad76ca3/assets/css/includes/scroll-bar.css */
\ No newline at end of file
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
`,
- git: ``,
- instagram: `
`,
- x: `
+ 
- @imnya.ng
-