diff --git a/src/components/Portfolio.js b/src/components/Portfolio.js
index d285065..303dff8 100644
--- a/src/components/Portfolio.js
+++ b/src/components/Portfolio.js
@@ -1,9 +1,30 @@
 import React from 'react';
 
 const Portfolio = () => {
-  return(
-    <div>
-      dd
+  return (
+    <div id="Portfolio" className="page">
+      <div className="top">
+        <div className="main_tit">PORTFOLIO</div>
+        <div className="tit_line"/>
+        <section className="year_info">
+          <div className="info">
+            <div className="year">2019</div>
+            <div className="year_text">
+              <div className="detail">3rd<br/>WELCOME to MAKERS WORLD<br/>SW/HW 통합 특별상 수상</div>
+              <div className="detail">3rd<br/>한국통신학 추계종합학술대회<br/>학부논문경진대 장려상 수상</div>
+              <div className="detail">OCF 개발자 경진대회<br/>대상 수상</div>
+            </div>
+          </div>
+          <div className="info">
+            <div className="year">2020</div>
+            <div className="year_text">
+              <div className="detail">NAVER AI BURNING DAY<br/>해커톤 본선 진출</div>
+            </div>
+          </div>
+        </section>
+      </div>
+
+
     </div>
   )
 }
diff --git a/src/components/style.css b/src/components/style.css
index df4ed04..218123e 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -281,6 +281,57 @@ header * {
     line-height: 30px;
 }
 
+/* Portfolio*/
+#Portfolio {
+    padding-left: 0;
+}
+
+#Portfolio .top {
+    background: linear-gradient(to bottom, rgba(0, 15, 16, 0.77), rgba(26, 82, 73, 0.6));
+    padding-bottom: 60px;
+}
+
+#Portfolio .top .year_info {
+    color: white;
+    display: flex;
+    flex-direction: column;
+    margin: 20px 0 40px 700px;
+
+}
+
+#Portfolio .top .year_info .info {
+    display: flex;
+}
+
+#Portfolio .top .year_info .info .year {
+    margin-right: 30px;
+}
+
+#Portfolio .top .year_info .info .year_text .detail {
+    margin-bottom: 20px;
+    border-left: 1px solid white;
+    padding-left: 10px;
+    font-weight: 300;
+}
+
+#Portfolio .top .main_tit {
+    color: white;
+    font-size: 40px;
+    font-weight: 200;
+    letter-spacing: 0.4px;
+    line-height: 45px;
+    padding-left: 70px;
+    padding-top: 40px;
+}
+
+#Portfolio .top .tit_line {
+    margin-top: 20px;
+    width: 200px;
+    border-bottom: 5px solid grey;
+    margin-bottom: 10px;
+}
+
+
 /* Recruiting*/
 #Recruiting {
     padding-left: 0;
@@ -298,7 +349,7 @@ header * {
 #Recruiting .tit_line {
     margin-top: 20px;
     width: 200px;
-    border-bottom: 5px solid #353535;
+    border-bottom: 5px solid #4E4D4D;
     margin-bottom: 10px;
 }
 
@@ -316,7 +367,7 @@ header * {
 
 #Recruiting .recruiting_info p {
     font-size: 20px;
-    letter-spacing: 2px;
+    letter-spacing: 1px;
 }
 
 /*footer*/