From 8b917c12aca537ebaa501a1477f5c68a507c6e3e Mon Sep 17 00:00:00 2001
From: YUAN-TSUNG <satoshi.liu@icloud.com>
Date: Sun, 28 Apr 2024 23:43:18 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20links=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/portfolio/index.module.scss | 50 +++++++++++++++++++++++++++--
 src/app/portfolio/page.tsx          | 19 ++++++++++-
 2 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/src/app/portfolio/index.module.scss b/src/app/portfolio/index.module.scss
index de689ed..1e8556f 100644
--- a/src/app/portfolio/index.module.scss
+++ b/src/app/portfolio/index.module.scss
@@ -24,7 +24,7 @@
 
   @include sp {
     grid-template-columns: repeat(6, 1fr);
-    padding: 10px;
+    padding: 10px 10px 60px;
   }
 }
 
@@ -170,5 +170,51 @@
 }
 
 .designs-section {
-  height: 1000px;
+}
+
+.design-link {
+  @include rounded-wrapper(16px);
+
+  color: utils.$color-navy;
+
+  > .title {
+    font-family: utils.$font-serif;
+    font-size: 2.5rem;
+  }
+
+  &.aas {
+    grid-column: span 8;
+    background-color: utils.$color-pink;
+
+    @include sp {
+      grid-column: span 4;
+    }
+  }
+
+  &.shp {
+    grid-column: span 4;
+    background-color: utils.$color-pink-light;
+
+    @include sp {
+      grid-column: span 2;
+    }
+  }
+
+  &.ksk {
+    grid-column: span 4;
+    background-color: utils.$color-pink-light;
+
+    @include sp {
+      grid-column: span 2;
+    }
+  }
+
+  &.akb {
+    grid-column: span 8;
+    background-color: utils.$color-pink;
+
+    @include sp {
+      grid-column: span 4;
+    }
+  }
 }
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index c9d0000..3541d78 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -50,7 +50,24 @@ const PortfolioPage: NextPage = () => (
     </div>
 
     <h3 className={classNames(styles['section-title'])}>designs</h3>
-    <div className={classNames(styles['designs-section'], styles.section)} />
+    <div className={classNames(styles['designs-section'], styles.section)}>
+      <Link href="/#" className={classNames(styles['design-link'], styles.aas)}>
+        <span>#1</span>
+        <h4 className={styles.title}>Redesign of Academic Affair System</h4>
+      </Link>
+      <Link href="/#" className={classNames(styles['design-link'], styles.shp)}>
+        <span>#2</span>
+        <h4 className={styles.title}>SP App for Small Health Problems</h4>
+      </Link>
+      <Link href="/#" className={classNames(styles['design-link'], styles.ksk)}>
+        <span>#3</span>
+        <h4 className={styles.title}>Kuseki</h4>
+      </Link>
+      <Link href="/#" className={classNames(styles['design-link'], styles.akb)}>
+        <span>#4</span>
+        <h4 className={styles.title}>Redesign of AKB48 Official Website</h4>
+      </Link>
+    </div>
     {/* films */}
     {/* <section className={styles.block}>
       <Section title="FILMS">