diff --git a/.github/workflows/github-actions.yml b/.github/workflows/github-actions.yml
new file mode 100644
index 0000000..afcc403
--- /dev/null
+++ b/.github/workflows/github-actions.yml
@@ -0,0 +1,56 @@
+name: Check NextJs build
+
+on:
+  push:
+    branches: ["main"]
+
+  pull_request:
+    types: [opened, reopened]
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: .pnpm-store
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm install
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build with Next.js
+        run: pnpm run build
diff --git a/src/components/portfolio/Navbar.tsx b/src/components/portfolio/Navbar.tsx
index a5043b5..e3548a8 100644
--- a/src/components/portfolio/Navbar.tsx
+++ b/src/components/portfolio/Navbar.tsx
@@ -117,7 +117,7 @@ export const PortfolioNavbar = () => {
   return (
     <>
       <div className="pointer-events-none fixed top-0 z-20 flex w-full justify-center bg-gradient-to-b from-white"></div>
-      <h1 className="portfolio-menu-cover fixed top-0 z-50 mt-12 flex w-full justify-center font-bold max-lg:mt-2 max-lg:scale-[.4]">
+      <h1 className="portfolio-menu-cover fixed top-0 z-20 mt-12 flex w-full justify-center font-bold max-lg:mt-2 max-lg:scale-[.4]">
         <button
           className="portfolio-menu-button flex items-center outline-none"
           onClick={togglePortfolioMenu}
diff --git a/src/components/portfolio/index.tsx b/src/components/portfolio/index.tsx
index 0edbae2..6457bb4 100644
--- a/src/components/portfolio/index.tsx
+++ b/src/components/portfolio/index.tsx
@@ -81,9 +81,12 @@ export const Portfolio = () => {
               {({ isActive }) => (
                 <button
                   onClick={() => showDetail(index)}
-                  className={cn("text-7xl uppercase", {
-                    "text-gray-400": !isActive,
-                  })}
+                  className={cn(
+                    "py-1 text-left text-7xl uppercase leading-none",
+                    {
+                      "text-gray-400": !isActive,
+                    }
+                  )}
                 >
                   <h2>{item.TITLE}</h2>
                 </button>
diff --git a/src/constants/portfolio/portfolio.ko.ts b/src/constants/portfolio/portfolio.ko.ts
index 454b463..2f1d0e8 100644
--- a/src/constants/portfolio/portfolio.ko.ts
+++ b/src/constants/portfolio/portfolio.ko.ts
@@ -1,6 +1,326 @@
 const PORTFOLIO = {
   TITLE: "portfolio",
   DATA: [
+    {
+      TITLE: "전대위키",
+      SUBTITLE: "",
+      TEAM_NAME: "팀쿠키",
+      PEOPLE: "김지민, 김가연, 박영규, 조배경",
+      IDEA: "전대위키는 전남대 학생을 대상으로 한 경험 기반의 위키 서비스입니다. 지도 기반의 서비스를 통해 직관적인 위치 및 정보를 한눈에 파악 할 수 있습니다.\n전대위키를 통해 전남대의 다양한 정보를 빠르고 쉽게 검색하고 작성해 보세요!",
+      SKILLS:
+        "React, Redux, axios, Java, Spring, Spring Security, Spring Data JPA, MySQL",
+      BG_IMAGE:
+        require("/public/dev/2023_summer_dev/portfolio/jnuwiki-main.png")
+          .default,
+      YEAR: "2023-1",
+      LINKS: null,
+      INTRODUCTION: [
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/jnuwiki-panel.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/jnuwiki-ppt.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/jnuwiki-web.png")
+            .default,
+        },
+      ],
+    },
+    {
+      TITLE: "To infinity and beyond",
+      SUBTITLE: "",
+      TEAM_NAME: "도참없",
+      PEOPLE: "이규민",
+      IDEA: "Front-End 개발자로서의 기본을 다지며, 앞으로의 방향성을 제시합니다.\n또한, 주된 목표 중 하나인 ‘성능평가’에 대해 고민합니다.",
+      SKILLS: " HTML, CSS, JavaScript, TypeScript",
+      BG_IMAGE:
+        require("/public/dev/2023_summer_dev/portfolio/dochamup-main.png")
+          .default,
+      YEAR: "2023-1",
+      LINKS: null,
+      INTRODUCTION: [
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/dochamup-panel.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/dochamup-ppt-1.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/dochamup-ppt-2.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/dochamup-ppt-3.png")
+            .default,
+        },
+      ],
+    },
+    {
+      TITLE: "Coupon API Service",
+      SUBTITLE: "",
+      TEAM_NAME: "Surplus",
+      PEOPLE: "이도연, 탁민경",
+      IDEA: "본 서비스는 자바와 스프링부트를 기반으로 구축된 쿠폰 발급, 등록 및 사용 기능을 제공합니다. 도커와 AWS를 활용하여 안정적인 운영 환경을 제공하며, 사용자들에게 편리한 쿠폰 관리를 지원합니다.",
+      SKILLS: " Java, Spring Boot, Docker, AWS",
+      BG_IMAGE:
+        require("/public/dev/2023_summer_dev/portfolio/couponapi-main.png")
+          .default,
+      YEAR: "2023-1",
+      LINKS: null,
+      INTRODUCTION: [
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/couponapi-panel.png")
+            .default,
+        },
+      ],
+    },
+    {
+      TITLE: "PCB",
+      SUBTITLE: "",
+      TEAM_NAME: "노인과 바다",
+      PEOPLE: "강바다, 이진혁",
+      IDEA: "PCB는 포스트잇 기능을 활용한 회의, 토론을 위한 웹 사이트입니다. 회의 및 토론 주제에 대한 의견을 포스트잇 형식으로 공유하고, 포스트잇 위치를 자유롭게 조정하여 회의를 유연하게 진행할 수 있도록 도와드리겠습니다!",
+      SKILLS: "React, Spring, Mysql, SpringJPA",
+      BG_IMAGE: require("/public/dev/2023_summer_dev/portfolio/pcb-main.png")
+        .default,
+      YEAR: "2023-1",
+      LINKS: null,
+      INTRODUCTION: [
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/pcb-panel.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/pcb-ppt-1.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/pcb-ppt-2.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/pcb-ppt-3.png")
+            .default,
+        },
+      ],
+    },
+    {
+      TITLE: "Econo Shop",
+      SUBTITLE: "",
+      TEAM_NAME: "임무완수",
+      PEOPLE: "김동완, 정수인",
+      IDEA: "Econo Shop은 에코노베이션 내에서 사용할 수 있는 상품 판매 웹사이트입니다.",
+      SKILLS: "HTML, CSS, JavaScript, Node.js, Mongo DB",
+      BG_IMAGE:
+        require("/public/dev/2023_summer_dev/portfolio/econoshop-main.png")
+          .default,
+      YEAR: "2023-1",
+      LINKS: null,
+      INTRODUCTION: [
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/econoshop-panel.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/econoshop-ppt-1.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/econoshop-ppt-2.png")
+            .default,
+        },
+      ],
+    },
+    {
+      TITLE: "DUNDUN",
+      SUBTITLE: "",
+      TEAM_NAME: "981 Projects",
+      PEOPLE: "김근성, 김민지, 박준수, 장홍준",
+      IDEA: "공연장 스피커의 둔둔소리처럼 인디시장의 확장을 추구합니다. 하나의 어플리케이션을 통해서, 아티스트와 팬을 연결하고 나아가 건강한 문화를 만들어 나갑니다.",
+      SKILLS: "#Android #Firebase #Kakao_map",
+      BG_IMAGE: require("/public/dev/2023_summer_dev/portfolio/dundun-main.png")
+        .default,
+      YEAR: "2023-1",
+      LINKS: null,
+      INTRODUCTION: [
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/dundun-panel.jpg")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/dundun-ppt-1.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/dundun-ppt-2.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/dundun-ppt-3.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/dundun-ppt-4.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/dundun-ppt-5.png")
+            .default,
+        },
+      ],
+    },
+    {
+      TITLE: "도토링",
+      SUBTITLE: "",
+      TEAM_NAME: "the 地",
+      PEOPLE: "이승건, 이시현, 임수미, 장현지, 황대선",
+      IDEA: "전남대학교 선배와 후배를 멘토-멘티로 연결해주는 공간, 안드로이드 앱",
+      SKILLS:
+        "Git, GitHub, Kotlin, Android OS, Jetpack Compose, Retrofit2, Android Studio, Java 17, Spring boot 2.7.6, Spring Data JPA, H2, MySQL",
+      BG_IMAGE:
+        require("/public/dev/2023_summer_dev/portfolio/dotoring-main.jpg")
+          .default,
+      YEAR: "2023-1",
+      LINKS: null,
+      INTRODUCTION: [
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/dotoring-panel.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/dotoring-ppt-1.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/dotoring-ppt-2.png")
+            .default,
+        },
+      ],
+    },
+    {
+      TITLE: "Clothink",
+      SUBTITLE: "",
+      TEAM_NAME: "KIPI",
+      PEOPLE: "김건형, 박수현",
+      IDEA: "clothink는 날씨에 따라 그 날 입을 옷을 추천해주는 WEB 서비스입니다.\n클라우드에서 자신만의 옷장을 만들고 관리할 수 있고 AI를 통해 날씨에 맞는 옷을 예측해줍니다.",
+      SKILLS: "PyTorch, Python, C#, Blazor",
+      BG_IMAGE:
+        require("/public/dev/2023_summer_dev/portfolio/clothink-main.png")
+          .default,
+      YEAR: "2023-1",
+      LINKS: null,
+      INTRODUCTION: [
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/clothink-panel.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/clothink-ppt.png")
+            .default,
+        },
+      ],
+    },
+    {
+      TITLE: "AI Competition",
+      SUBTITLE: "",
+      TEAM_NAME: "HTG",
+      PEOPLE: "박경준, 박지유",
+      IDEA: "Dacon에서 주최한 항공편 지연 예측 AI 및 위성 영상 건물 영역 추출을 주제로 한 SW 중심대학 공동 경진대회 2023을 진행",
+      SKILLS:
+        " #PyTorch #TensorFlow(Keras) #Computer Vision #AI, HTG팀은 이번 Summer Dev에서 2개의 경진대회를 진행하였습니다. 각각의 대회에서 TensorFlow(Keras), PyTorch 라이브러리를 활용하였습니다.\n첫 번째 경진대회는 월간 데이콘 항공편 지연 예측 AI 경진대회입니다. DNN을 사용하여 평가 지표인 LogLoss에서 0.66772 값을 얻어 최종 10등의 성과를 얻었습니다.\n두 번째 경진대회는 SW 중심대학 공동 AI 경진대회 2023입니다.\n위성 영상 건물 영역 추출을 주제로 하여, Image Segmentation 모델인 U-Net을 사용하였습니다. PyTorch의 albumentation 라이브러리를 활용해 기존의 방식보다 빠른 Image Augmentaion을 수행하였고, 성능을 높였습니다.",
+      BG_IMAGE: require("/public/dev/2023_summer_dev/portfolio/htg-main.png")
+        .default,
+      YEAR: "2023-1",
+      LINKS: null,
+      INTRODUCTION: [
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/htg-panel.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/htg-ppt-1.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/htg-ppt-2.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/htg-ppt-3.png")
+            .default,
+        },
+      ],
+    },
+    {
+      TITLE: "흔한 일반인인 내가 AI 세계에서는 SSS급 연예인?",
+      SUBTITLE: "",
+      TEAM_NAME: "채다치즈",
+      PEOPLE: "김다영, 김채원",
+      IDEA: "Convolutional Neural Network 기반 이미지 분류를 활용하여 나와 닮은 연예인을 찾아볼 수 있는 프로젝트입니다.",
+      SKILLS: "Pytorch, Python",
+      BG_IMAGE:
+        require("/public/dev/2023_summer_dev/portfolio/chaedacheese-main.png")
+          .default,
+      YEAR: "2023-1",
+      LINKS: null,
+      INTRODUCTION: [
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/chaedacheese-panel.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/chaedacheese-ppt-1.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/chaedacheese-ppt-2.png")
+            .default,
+        },
+        {
+          TYPE: "image",
+          LINK: require("/public/dev/2023_summer_dev/portfolio/chaedacheese-ppt-3.png")
+            .default,
+        },
+      ],
+    },
     {
       TITLE: "AI COMPETITION",
       SUBTITLE: