MinchoLover · MinchoLover · Jul 1, 2024 · Jul 1, 2024 · Jul 1, 2024 · Jul 1, 2024
diff --git a/Icon b/Icon
diff --git a/README.md b/README.md
@@ -1,34 +1,12 @@
-# 포트폴리오 사이트 만들기 프로젝트
+# 포트폴리오
 
-이 튜토리얼은 하나의 웹사이트를 여러 가지 프레임워크를 사용하여 만드는 방법에 대해 소개합니다. 
-웹 개발자들은 종종 다양한 프레임워크를 이용하여 작업하게 됩니다. 
-이 과정에서 여러 가지 프레임워크들을 어떻게 적용하는지 알아보고, 
-각 프레임워크들의 장단점을 비교 분석하며 학습하게 됩니다.
-
-1. [vite](https://github.com/webstoryboy/port2023-vite)를 이용하여 사이트를 제작합니다. 
-2. [react.js](https://github.com/webstoryboy/port2023-react)를 이용하여 사이트를 제작합니다. 
-3. [vue.js](https://github.com/webstoryboy/port2023-vue)를 이용하여 사이트를 제작합니다.
-4. [next.js](https://github.com/webstoryboy/port2023-next)를 이용하여 사이트를 제작합니다.
-
-이 튜토리얼은 포트폴리오 컨셉의 사이트를 4가지 버전으로 반복하여 만들어 보면서, 프론트앤드 개발의 시발점이 될 수 있는 튜토리업입니다.
-자바스크립트 프레임워크를 통해 사이트를 효율적으로 만들어 보는 방법을 익힙니다. 
-깊이 배우기 보다는 다양한 방법을 사용하여 흐름과 감각을 익히기 위한 튜토리얼입니다. 
-
-## 완성작 보기 
-미리보기 : 
+1. [react.js](https://github.com/mincholover/portpolio-react)를 이용하여 사이트를 제작합니다.
 
 ## 사용 스택
-- react(https://ko.legacy.reactjs.org/) 를 사용하여 사이트를 번들링하고 관리합니다.
-- gsap(https://greensock.com/gsap) 를 이용하여 패럴랙스 효과를 줍니다.
-- lenis(https://lenis.studiofreight.com/) 를 이용하여 스므스 효과를 구현합니다.
-- netlify(https://www.netlify.com/) 를 통해 사이트를 배포합니다.
-- git(https://github.com/) 을 사용하여 파일을 관리합니다.
-- HTML, CSS 기반으로 웹사이트의 기본 레이아웃 설계하고, 웹 표준 및 웹 접근성을 준수하여 작업합니다. [ARIA(Accessible Rich Internet Applications)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)
 
-## 프로젝트 실행
-- react를 설치합니다. `npx create-react-app 타이틀`
-- react-router-dom을 설치합니다. `npm install react-router-dom`
-- sass를 설치합니다. `npm install sass`
-- gsap를 설치합니다. `npm install gsap`
-- lenis를 설치합니다. `npm install @studio-freight/lenis`
-출처: https://webstoryboy.co.kr/1934 [WEBSTORYBOY:티스토리]
+- react
+- gsap
+- lenis
+- netlify
+- git
+- HTML, CSS
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,10 +7,13 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "gsap": "^3.12.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.24.0",
     "react-scripts": "5.0.1",
     "sass": "^1.77.6",
+    "styled-components": "^6.1.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/portpolio/Icon b/portpolio/Icon
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/index.html b/public/index.html
@@ -4,12 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="한가지 사이트를 다양한 프레임워크를 통해 만들어 보는 포트폴리오 사이트입니다."/>
-    <meta name="keyword" content="포트폴리오, 리액트, 뷰, 넥스트, 웹스토리보이, portfolio, react.js, vue.js, next.js, webstoryboy" />
-    <title>포트폴리오 사이트 만들기 😜 React-Site</title>
+    <meta name="keyword" content="포트폴리오, 리액트, 민초러버, portfolio, react.js MinchoLover" />
+    <title>포트폴리오 사이트 만들기 😇 React-Site</title>
 
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
 </head>
 <body>
     <div id="root"></div>
 </body>
-</html> 
+</html> 
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,22 @@
-import React from "react";
+import React, { useEffect } from "react";
+import {BrowserRouter, Route, Routes} from "react-router-dom";
+import HomeView from "./views/HomeView";
+import smooth from "./utils/smooth";
+import link from "./utils/link";
 
 const App = () => {
-    return <div>App</div>;
+    useEffect(() => {
+        smooth();
+        link();
+    }, []);
+
+    return (
+        <BrowserRouter>
+            <Routes>
+                <Route path="/" element={<HomeView />} />
+            </Routes>
+        </BrowserRouter>
+    );
 };
 
-export default App;
+export default App;
diff --git a/src/assets/img/HomePage.png b/src/assets/img/HomePage.png
diff --git a/src/assets/img/about.jpg b/src/assets/img/about.jpg
diff --git a/src/assets/img/arrow.svg b/src/assets/img/arrow.svg
diff --git a/src/assets/img/favicon.svg b/src/assets/img/favicon.svg
diff --git a/src/assets/img/port01.jpg b/src/assets/img/port01.jpg
diff --git a/src/assets/img/port02.jpg b/src/assets/img/port02.jpg
diff --git a/src/assets/img/port03.jpg b/src/assets/img/port03.jpg
diff --git a/src/assets/img/port04.jpg b/src/assets/img/port04.jpg
diff --git a/src/assets/img/port05.jpg b/src/assets/img/port05.jpg
diff --git a/src/assets/img/port06.jpg b/src/assets/img/port06.jpg
diff --git a/src/assets/img/port07.jpg b/src/assets/img/port07.jpg
diff --git a/src/assets/img/port08.jpg b/src/assets/img/port08.jpg
diff --git a/src/assets/img/port09.jpg b/src/assets/img/port09.jpg
diff --git a/src/assets/img/port10.jpg b/src/assets/img/port10.jpg