✨ links added

yuancong-liu · Apr 28, 2024 · 8b917c1 · 8b917c1
1 parent 762aabb
commit 8b917c1
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 3 deletions.
diff --git 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
@@ -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">