add Topbar construct

src/App.jsx

@@ -2,6 +2,7 @@ import Intro from "./Intro/Intro";
 import Topbar from "./Topbar/Topbar";
 import "./App.scss"
 import Skill from "./Skill/Skill";
+import Portfolio from "./Portfolio/Portfolio";
 
 function App() {
   return (
@@ -10,6 +11,7 @@ function App() {
       <div className="sections">
         <Intro />
         <Skill />
+        <Portfolio />
       </div>
     </div>
   );

src/App.scss

@@ -2,19 +2,22 @@
 
 .app {
     height: 100vh;
+    background-color: $mainColor;
 
     .sections {
         width: 100%;
         height: calc(100vh - 70px);
-        background-color: $mainColor;
         position: relative;
         top: 70px;
+        // scroll effect type
+        scroll-behavior: smooth;
         scroll-snap-type: y mandatory;
-
+        // scroll bar hidden
         scrollbar-width: 0;
         &::-webkit-scrollbar{
             display: none;
         }
+        // each section width, height size
         > *{
             width: 100vw;
             height: calc(100vh - 70px);

src/Portfolio/Portfolio.jsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import "./Portfolio.scss";
 
 export default function Portfolio() {
     return (
         <div className="portfolio" id="portfolio">
-
+            adf
         </div>
     )
 }

src/Portfolio/Portfolio.scss

@@ -0,0 +1,5 @@
+@import "../global.scss";
+
+.portfolio {
+    background-color: $subColor4;
+}

src/Topbar/Topbar.jsx

@@ -5,10 +5,11 @@ export default function Topbar() {
         <div className="topBar">
             <div className="warpper">
                 <div className="left">
-                    <a href="#intro">adf</a>
+                    <a href="#intro" className="logo">kyulee</a>
                 </div>
+                <h1>hel1o</h1>
                 <div className="right">
-
+                    <h2>this is right</h2>
                 </div>
             </div>
         </div>

src/Topbar/Topbar.scss

@@ -3,8 +3,26 @@
 .topBar {
     width: 100%;
     height: 70px;
-    background-color: $subColor1;
+    background-color: transparent;
+    color:  $subColor5;
     position:fixed;
     top: 0;
     z-index: 2;
+
+    .warpper {
+        padding: 10px 30px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .left{
+            .logo{
+                font-size: 40px;
+                font-weight: 700;
+                // delete hypertext style, color : same parent
+                text-decoration: none;
+                color: inherit;
+            }
+        }
+    }
 }