Redesign: 雑記 by swallow - トップページ刷新、ナビバー整理

src/pages/index.module.css

@@ -1,23 +1,146 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
+.main {
+  min-height: calc(100vh - 60px);
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
+.hero {
+  padding: 4rem 2rem;
+  text-align: center;
+  background: linear-gradient(180deg, var(--ifm-background-surface-color) 0%, var(--ifm-background-color) 100%);
+}
+
+.heroInner {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.heroTitle {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.heroSubtitle {
+  font-size: 1.25rem;
+  color: var(--ifm-color-emphasis-600);
+  margin: 0;
+}
+
+.content {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.section {
+  margin-bottom: 3rem;
+}
+
+.sectionTitle {
+  font-size: 1.5rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+/* Posts */
+.posts {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.postCard {
+  display: block;
+  padding: 1.25rem;
+  border-radius: 8px;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+}
+
+.postCard:hover {
+  border-color: var(--ifm-color-primary);
+  transform: translateY(-2px);
+  text-decoration: none;
+  color: inherit;
+}
+
+.postTitle {
+  font-size: 1.1rem;
+  margin: 0 0 0.5rem 0;
+}
+
+.postMeta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.875rem;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.postDate {
+}
+
+.postTag {
+  background: var(--ifm-color-emphasis-100);
+  padding: 0.125rem 0.5rem;
+  border-radius: 4px;
+}
+
+/* Works */
+.works {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 1rem;
+}
+
+.workCard {
+  display: block;
+  padding: 1.25rem;
+  border-radius: 8px;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+}
+
+.workCard:hover {
+  border-color: var(--ifm-color-primary);
+  transform: translateY(-2px);
+  text-decoration: none;
+  color: inherit;
+}
+
+.workName {
+  font-size: 1.1rem;
+  margin: 0 0 0.5rem 0;
+}
+
+.workDescription {
+  font-size: 0.9rem;
+  color: var(--ifm-color-emphasis-600);
+  margin: 0;
+}
+
+.moreLink {
+  display: inline-block;
+  margin-top: 1rem;
+  font-size: 0.9rem;
+  color: var(--ifm-color-primary);
+}
+
+.moreLink:hover {
+  text-decoration: underline;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .heroTitle {
+    font-size: 2rem;
+  }
+  
+  .content {
+    padding: 1rem;
   }
 }
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

src/pages/index.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import styles from './index.module.css';
+
+function HomepageHeader() {
+  return (
+    <header className={styles.hero}>
+      <div className={styles.heroInner}>
+        <h1 className={styles.heroTitle}>👋 swallow</h1>
+        <p className={styles.heroSubtitle}>
+          AI・インフラ・開発が好きなエンジニア
+        </p>
+      </div>
+    </header>
+  );
+}
+
+function RecentPosts() {
+  const posts = [
+    {
+      title: 'DGX Spark デュアル構成ガイド',
+      date: '2026-02-19',
+      tag: 'DGX Spark',
+      url: '/blog/dgx-spark-dual',
+    },
+    {
+      title: 'DGX SparkでMiniMax-M2.5-REAP-172Bを動かす',
+      date: '2026-02-18',
+      tag: 'DGX Spark',
+      url: '/blog/dgx-spark-minimax',
+    },
+  ];
+
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>📝 最近書いたもの</h2>
+      <div className={styles.posts}>
+        {posts.map((post, idx) => (
+          <Link key={idx} to={post.url} className={styles.postCard}>
+            <h3 className={styles.postTitle}>{post.title}</h3>
+            <div className={styles.postMeta}>
+              <span className={styles.postDate}>{post.date}</span>
+              <span className={styles.postTag}>{post.tag}</span>
+            </div>
+          </Link>
+        ))}
+      </div>
+      <Link to="/blog" className={styles.moreLink}>
+        すべての記事を見る →
+      </Link>
+    </section>
+  );
+}
+
+function Works() {
+  const works = [
+    {
+      name: 'Tundoc',
+      description: 'ドキュメント管理ツール',
+      url: 'https://tundoc.techswan.online/',
+    },
+  ];
+
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>🛠 作ったもの</h2>
+      <div className={styles.works}>
+        {works.map((work, idx) => (
+          <a
+            key={idx}
+            href={work.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.workCard}
+          >
+            <h3 className={styles.workName}>{work.name}</h3>
+            <p className={styles.workDescription}>{work.description}</p>
+          </a>
+        ))}
+      </div>
+      <Link to="/works" className={styles.moreLink}>
+        もっと見る →
+      </Link>
+    </section>
+  );
+}
+
+export default function Home(): React.JSX.Element {
+  return (
+    <Layout
+      title="ホーム"
+      description="swallowの雑記。技術・思考・作ったもの。"
+    >
+      <main className={styles.main}>
+        <HomepageHeader />
+        <div className={styles.content}>
+          <RecentPosts />
+          <Works />
+        </div>
+      </main>
+    </Layout>
+  );
+}

src/pages/works.module.css

@@ -0,0 +1,70 @@
+.main {
+  min-height: calc(100vh - 60px);
+  padding: 2rem;
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.title {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+.subtitle {
+  color: var(--ifm-color-emphasis-600);
+  margin-bottom: 2rem;
+}
+
+.works {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.workCard {
+  display: block;
+  padding: 1.5rem;
+  border-radius: 12px;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+}
+
+.workCard:hover {
+  border-color: var(--ifm-color-primary);
+  transform: translateY(-4px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  text-decoration: none;
+  color: inherit;
+}
+
+.workName {
+  font-size: 1.25rem;
+  margin: 0 0 0.75rem 0;
+}
+
+.workDescription {
+  font-size: 0.95rem;
+  color: var(--ifm-color-emphasis-700);
+  margin: 0 0 1rem 0;
+  line-height: 1.5;
+}
+
+.workTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.workTag {
+  font-size: 0.75rem;
+  background: var(--ifm-color-emphasis-100);
+  color: var(--ifm-color-emphasis-700);
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+}

src/pages/works.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import styles from './works.module.css';
+
+const works = [
+  {
+    name: 'Tundoc',
+    description: 'ドキュメント管理ツール。Markdownでドキュメントを管理・公開できる。',
+    url: 'https://tundoc.techswan.online/',
+    tags: ['Web', 'Documentation'],
+  },
+  // 他のプロジェクトがあれば追加
+];
+
+export default function Works(): React.JSX.Element {
+  return (
+    <Layout
+      title="Works"
+      description="swallowが作ったもの"
+    >
+      <main className={styles.main}>
+        <div className={styles.container}>
+          <h1 className={styles.title}>🛠 Works</h1>
+          <p className={styles.subtitle}>作ったもの・関わったもの</p>
+          
+          <div className={styles.works}>
+            {works.map((work, idx) => (
+              <a
+                key={idx}
+                href={work.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles.workCard}
+              >
+                <h2 className={styles.workName}>{work.name}</h2>
+                <p className={styles.workDescription}>{work.description}</p>
+                <div className={styles.workTags}>
+                  {work.tags.map((tag, tagIdx) => (
+                    <span key={tagIdx} className={styles.workTag}>{tag}</span>
+                  ))}
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      </main>
+    </Layout>
+  );
+}