[Add] hyper tictactoe 추가

nowaveosu · May 27, 2024 · 1577e8c · 1577e8c
1 parent d175cdc
commit 1577e8c
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 0 deletions.
diff --git a/images/chat.mp4 b/images/chat.mp4
diff --git a/images/game.mp4 b/images/game.mp4
diff --git a/images/matching.mp4 b/images/matching.mp4
diff --git a/index.html b/index.html
@@ -302,6 +302,38 @@ <h2>전남대 이노베이션 해커톤 특별상 수상</h2>
 
                     <div id="page-5" class="page five">
                         <h2 id="projects-section" class="heading">Projects</h2>
+                        <div class="resume-wrap d-flex ftco-animate">
+                            <div class="icon d-flex align-items-center justify-content-center">
+                                <span class="flaticon-ideas"></span>
+                            </div>
+                            <div class="text pl-3">
+                                <span class="date">2023.07</span>
+                                <div class="d-flex">
+                                    <h2>[hyper-tictactoe] 독특한 룰을 여러개 적용한 1인개발 온라인 매칭 틱택토게임</h2>
+                                    <div>&nbsp;<a class="btn btn-outline-secondary" target="_blank"
+                                            class="btn btn-outline-secondary"
+                                            href="https://github.com/nowaveosu/hyper-tictactoe">Github</a>&nbsp;<a
+                                            class="btn btn-outline-secondary" target="_blank"
+                                            href="https://www.hyper-tictactoe.com/">Link</a>
+                                    </div>
+                                </div>
+
+                                <div> <b class="text-dark">기술 스택 : </b>Next.js, TypeScript, Tailwind CSS, Socket.io, Node.js
+
+                                </div>
+                                <div> <b class="text-dark">담당 기능 : </b> 로고, 반응형 디자인, 게임 룰 개발, 실시간 채팅 및 게임의 프론트엔드, 백엔드 구현 <br />
+                                    디자인, 개발, 배포 모든 단계를 독자적으로 진행했음</div> <br>
+                                <span class="position">시연영상 📼</span> <br>
+                                <video width="800" controls src="./images/matching.mp4"></video width="800"> <br>
+                                <span class="position"> 사용자가 몇명있는지 확인할 수 있는 Room 구현, 대기화면 후 두명이 모두 접속하면 가위바위보로 선공을 정한 후 게임에 참가됨.</span> <br><br><br>
+
+                                <video width="800" controls src="./images/game.mp4"></video width="800"> <br>
+                                <span class="position"> Queue 자료구조를 사용한 가장 오래된 수가 사라지는 룰 + 시간제한을 둔 4x4 온라인 틱택토 게임 구현 </span> <br><br><br>
+
+                                <video width="800" controls src="./images/chat.mp4"></video width="800"> <br>
+                                <span class="position"> Socket.io를 사용한 같은 Room의 참가자끼리 채팅기능 구현</span> <br><br>
+                            </div>
+                        </div>
                         <div class="resume-wrap d-flex ftco-animate">
                             <div class="icon d-flex align-items-center justify-content-center">
                                 <span class="flaticon-ideas"></span>