update

2024-09-06 04:25:35 +07:00 · 2024-09-06 04:25:35 +07:00 · b3a9700bc7
commit b3a9700bc7
parent 85fdaf4a1d
78 changed files with 20133 additions and 9 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+# /build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/README.md
+++ b/README.md
@ -1,2 +1,115 @@
-# portfolio
+# Build a Stunning Portfolio with React JS using Styled-Components and framer-motion for awesome Animations

+![GitHub stars](https://img.shields.io/github/stars/codebucks27/react-portfolio-final?style=social&logo=ApacheSpark&label=Stars&maxAge=2592000)&nbsp;&nbsp;
+![GitHub forks](https://img.shields.io/github/forks/codebucks27/react-portfolio-final?style=social&logo=KashFlow)&nbsp;&nbsp;
+![Github Followers](https://img.shields.io/github/followers/codebucks27.svg?style=social&label=Follow&maxAge=2592000)&nbsp;&nbsp;<br />
+
+This repository contains Final code for The Portfolio Website in ReactJS. <br />
+
+For the **Demo** and **Final Code** checkout this link👇: <br />
+<a href="https://devdreaming.com/videos/build-stunning-portfolio-website-react-js-framer-motion#overview" target="_blank">Checkout this Responsive Portfolio in ReactJS</a> <br />
+
+If you want to learn how to create it please follow below tutorial👇: <br />
+https://youtu.be/jcohAIaSy2M <br />
+[![YouTube Video Views](https://img.shields.io/youtube/views/jcohAIaSy2M?style=social)](https://youtu.be/jcohAIaSy2M)<br />
+
+[⚠⚠⚠ If you want full code of this website then you can get it from here👇: <br />]::
+
+You'll get code files which contans code for responsive portfolio website with
+all the animations showed in the demo.
+Also, I have used React Lazy loading to increase loading speed.
+
+I have recently updated all the required dependencies for React Portfolio Website.
+You might see some differences in implementation such as,
+
+- In implementing react-router
+
+- I have removed react-particles-js since it has been deprecated and used react-tsparticles instead, you can see it's implementation in ParticlesComponent.js file.
+
+- In the index.js file we are no longer using ReactDOM since we can use createRoot in React 18.
+
+### Images of The Portfolio Website:
+
+![HOME](https://github.com/codebucks27/React-Portfolio-starter-code-files/blob/main/Portfolio%20Images/Home.png)
+![Intro](https://github.com/codebucks27/React-Portfolio-starter-code-files/blob/main/Portfolio%20Images/Intro.png)
+![Blog](https://github.com/codebucks27/React-Portfolio-starter-code-files/blob/main/Portfolio%20Images/Blog.png)
+![Home Mobile](https://github.com/codebucks27/React-Portfolio-starter-code-files/blob/main/Portfolio%20Images/Home-Mobile.png)
+![Intro Mobile](https://github.com/codebucks27/React-Portfolio-starter-code-files/blob/main/Portfolio%20Images/Intro-Mobile.png)
+![Intro Blog](https://github.com/codebucks27/React-Portfolio-starter-code-files/blob/main/Portfolio%20Images/Blog-Mobile.png)
+
+### Resources Used in This Project
+
+Design in : https://www.figma.com/ <br />
+Svg Icons from :https://fontawesome.com/ <br />
+Spaceman 3D Image from : https://www.figma.com/community/plugin/769588393361258724/Vectary-3D-Elements <br />
+Audio: Music by <a href="https://pixabay.com/users/itswatr-12344345/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=music&amp;utm_content=1167">Jonas</a> from <a href="https://pixabay.com/music//?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=music&amp;utm_content=1167">Pixabay</a> <br />
+Background Photo by <a href="https://unsplash.com/@impatrickt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Patrick Tomasso</a> on <a href="https://unsplash.com/s/photos/news-paper?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
--- a/build/asset-manifest.json
+++ b/build/asset-manifest.json
@ -1,17 +1,17 @@
 {
  "files": {
    "main.css": "/static/css/main.58462fbc.css",
-    "main.js": "/static/js/main.07676de3.js",
+    "main.js": "/static/js/main.01b097bd.js",
    "static/media/u-said-it-v13-1167.mp3": "/static/media/u-said-it-v13-1167.becd66496be9c81ddf9d.mp3",
    "static/media/patrick-tomasso-Oaqk7qqNh_c-unsplash.jpg": "/static/media/patrick-tomasso-Oaqk7qqNh_c-unsplash.8ca90014fb6ce5980110.jpg",
    "static/media/spaceman.png": "/static/media/spaceman.5ec7fcfa9a803ead726c.png",
    "static/media/profile-img.png": "/static/media/profile-img.5d5f6af9aa98aaa4efc6.png",
    "index.html": "/index.html",
    "main.58462fbc.css.map": "/static/css/main.58462fbc.css.map",
-    "main.07676de3.js.map": "/static/js/main.07676de3.js.map"
+    "main.01b097bd.js.map": "/static/js/main.01b097bd.js.map"
  },
  "entrypoints": [
    "static/css/main.58462fbc.css",
-    "static/js/main.07676de3.js"
+    "static/js/main.01b097bd.js"
  ]
 }
--- a/build/favicon.ico
+++ b/build/favicon.ico
--- a/build/index.html
+++ b/build/index.html
@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link href="https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600&family=Pacifico&family=Source+Sans+Pro:wght@400;600;700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"/><title>CodeBucks | Awesome portfolio built with React JS</title><script defer="defer" src="/static/js/main.07676de3.js"></script><link href="/static/css/main.58462fbc.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link href="https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600&family=Pacifico&family=Source+Sans+Pro:wght@400;600;700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"/><title>Thanapat Portfolio DevSecOps</title><script defer="defer" src="/static/js/main.01b097bd.js"></script><link href="/static/css/main.58462fbc.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
--- a/build/logo192.png
+++ b/build/logo192.png
--- a/build/logo512.png
+++ b/build/logo512.png
--- a/build/manifest.json
+++ b/build/manifest.json
--- a/build/robots.txt
+++ b/build/robots.txt
--- a/build/static/css/main.58462fbc.css
+++ b/build/static/css/main.58462fbc.css
--- a/build/static/css/main.58462fbc.css.map
+++ b/build/static/css/main.58462fbc.css.map
--- a/build/static/js/main.01b097bd.js
+++ b/build/static/js/main.01b097bd.js
--- a/build/static/js/main.01b097bd.js.LICENSE.txt
+++ b/build/static/js/main.01b097bd.js.LICENSE.txt
--- a/build/static/js/main.01b097bd.js.map
+++ b/build/static/js/main.01b097bd.js.map
--- a/build/static/media/patrick-tomasso-Oaqk7qqNh_c-unsplash.8ca90014fb6ce5980110.jpg
+++ b/build/static/media/patrick-tomasso-Oaqk7qqNh_c-unsplash.8ca90014fb6ce5980110.jpg
--- a/build/static/media/profile-img.5d5f6af9aa98aaa4efc6.png
+++ b/build/static/media/profile-img.5d5f6af9aa98aaa4efc6.png
--- a/build/static/media/spaceman.5ec7fcfa9a803ead726c.png
+++ b/build/static/media/spaceman.5ec7fcfa9a803ead726c.png
--- a/build/static/media/u-said-it-v13-1167.becd66496be9c81ddf9d.mp3
+++ b/build/static/media/u-said-it-v13-1167.becd66496be9c81ddf9d.mp3
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,14 @@
+version: "3"
+services:
+# apk add python3 make build-base
+    portfolio:
+        image: node:20.14.0 # node:18.16.0-alpine3.17
+        container_name: portfolio
+        restart: always
+        working_dir: /app
+        ports:
+        - 4200:3000
+        volumes:
+        - ./:/app
+        stdin_open: true # docker run -i
+        tty: true        # docker run -t
--- a/favicon.ico
+++ b/favicon.ico
--- a/logo192.png
+++ b/logo192.png
--- a/logo512.png
+++ b/logo512.png
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,45 @@
+{
+  "name": "react-portfolio",
+  "version": "2.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "framer-motion": "^7.6.19",
+    "locomotive-scroll": "^4.1.4",
+    "normalize.css": "^8.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.4",
+    "react-scripts": "5.0.1",
+    "react-tsparticles": "^2.6.0",
+    "styled-components": "^5.3.6",
+    "tsparticles": "^2.6.0",
+    "web-vitals": "^3.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start --host=0.0.0.0",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600&family=Pacifico&family=Source+Sans+Pro:wght@400;600;700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400&display=swap"
+      rel="stylesheet"
+    />
+
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Thanapat Portfolio DevSecOps</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
--- a/src/App.js
+++ b/src/App.js
@ -0,0 +1,51 @@
+import { Routes, Route, useLocation } from "react-router-dom";
+import { ThemeProvider } from "styled-components";
+import { lightTheme } from "./components/Themes";
+import { AnimatePresence } from "framer-motion";
+import GlobalStyle from "./globalStyles";
+
+//Components
+import Main from "./components/Main";
+import AboutPage from "./components/AboutPage";
+import BlogPage from "./components/BlogPage";
+import WorkPage from "./components/WorkPage";
+import MySkillsPage from "./components/MySkillsPage";
+import SoundBar from "./subComponents/SoundBar";
+
+function App() {
+  const location = useLocation();
+  return (
+    <>
+      <GlobalStyle />
+
+      <ThemeProvider theme={lightTheme}>
+        <SoundBar />
+
+        {/* For framer-motion animation on page change! */}
+        {/* Changed prop from exitBefore to mode */}
+        <AnimatePresence mode='wait'>
+          {/* Changed Switch to Routes */}
+
+          <Routes key={location.pathname} location={location} >
+            {/* Changed component to element */}
+
+            <Route path="/" element={<Main />} />
+
+            <Route path="/about" element={<AboutPage />} />
+
+            <Route path="/blog" element={<BlogPage />} />
+
+            <Route path="/work" element={<WorkPage />} />
+
+            <Route path="/skills" element={<MySkillsPage />} />
+            {/* Below is to catch all the other routes and send the user to main component,
+you can add custom 404 component or message instead of Main component*/}
+            <Route path="*" element={<Main />} />
+          </Routes>
+        </AnimatePresence>
+      </ThemeProvider>
+    </>
+  );
+}
+
+export default App;
--- a/src/App.test.js
+++ b/src/App.test.js
@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
--- a/src/assets/Images/patrick-tomasso-Oaqk7qqNh_c-unsplash.jpg
+++ b/src/assets/Images/patrick-tomasso-Oaqk7qqNh_c-unsplash.jpg
--- a/src/assets/Images/profile-img.png
+++ b/src/assets/Images/profile-img.png
--- a/src/assets/Images/spaceman.png
+++ b/src/assets/Images/spaceman.png
--- a/src/assets/audio/u-said-it-v13-1167(high
+++ b/src/assets/audio/u-said-it-v13-1167(high
--- a/src/assets/audio/u-said-it-v13-1167.mp3
+++ b/src/assets/audio/u-said-it-v13-1167.mp3
--- a/src/assets/svg/anchor-solid.svg
+++ b/src/assets/svg/anchor-solid.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="anchor" class="svg-inline--fa fa-anchor fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M12.971 352h32.394C67.172 454.735 181.944 512 288 512c106.229 0 220.853-57.38 242.635-160h32.394c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0l-67.029 67.029c-7.56 7.56-2.206 20.485 8.485 20.485h35.146c-20.29 54.317-84.963 86.588-144.117 94.015V256h52c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-52v-5.47c37.281-13.178 63.995-48.725 64-90.518C384.005 43.772 341.605.738 289.37.01 235.723-.739 192 42.525 192 96c0 41.798 26.716 77.35 64 90.53V192h-52c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h52v190.015c-58.936-7.399-123.82-39.679-144.117-94.015h35.146c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0L4.485 331.515C-3.074 339.074 2.28 352 12.971 352zM288 64c17.645 0 32 14.355 32 32s-14.355 32-32 32-32-14.355-32-32 14.355-32 32-32z"></path></svg>
--- a/src/assets/svg/facebook-brands.svg
+++ b/src/assets/svg/facebook-brands.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook" class="svg-inline--fa fa-facebook fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg>
--- a/src/assets/svg/github-brands.svg
+++ b/src/assets/svg/github-brands.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
--- a/src/assets/svg/laptop-code-solid.svg
+++ b/src/assets/svg/laptop-code-solid.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="laptop-code" class="svg-inline--fa fa-laptop-code fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M255.03 261.65c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L253.25 192l35.71-35.72c6.25-6.25 6.25-16.38 0-22.63l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0l-58.34 58.34c-6.25 6.25-6.25 16.38 0 22.63l58.35 58.34zm96.01-11.3l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0l58.34-58.34c6.25-6.25 6.25-16.38 0-22.63l-58.34-58.34c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L386.75 192l-35.71 35.72c-6.25 6.25-6.25 16.38 0 22.63zM624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"></path></svg>
--- a/src/assets/svg/link-solid.svg
+++ b/src/assets/svg/link-solid.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="link" class="svg-inline--fa fa-link fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>
--- a/src/assets/svg/palette-solid.svg
+++ b/src/assets/svg/palette-solid.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="palette" class="svg-inline--fa fa-palette fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg>
--- a/src/assets/svg/power-off-solid.svg
+++ b/src/assets/svg/power-off-solid.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="power-off" class="svg-inline--fa fa-power-off fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z"></path></svg>
--- a/src/assets/svg/twitter-brands.svg
+++ b/src/assets/svg/twitter-brands.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
--- a/src/assets/svg/yin-yang-solid.svg
+++ b/src/assets/svg/yin-yang-solid.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="yin-yang" class="svg-inline--fa fa-yin-yang fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 376c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-128c-53.02 0-96 42.98-96 96s42.98 96 96 96c-106.04 0-192-85.96-192-192S141.96 64 248 64c53.02 0 96 42.98 96 96s-42.98 96-96 96zm0-128c-17.67 0-32 14.33-32 32s14.33 32 32 32 32-14.33 32-32-14.33-32-32-32z"></path></svg>
--- a/src/assets/svg/youtube-brands.svg
+++ b/src/assets/svg/youtube-brands.svg
@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg>
--- a/src/components/AboutPage.js
+++ b/src/components/AboutPage.js
@ -0,0 +1,92 @@
+import React from 'react'
+import styled, { keyframes, ThemeProvider } from 'styled-components'
+import {DarkTheme} from './Themes';
+
+
+import LogoComponent from '../subComponents/LogoComponent';
+import SocialIcons from '../subComponents/SocialIcons';
+import PowerButton from '../subComponents/PowerButton';
+import ParticleComponent from '../subComponents/ParticleComponent';
+import BigTitle from '../subComponents/BigTitlte'
+import astronaut from '../assets/Images/spaceman.png'
+
+const Box = styled.div`
+background-color: ${props => props.theme.body};
+width: 100vw;
+height:100vh;
+position: relative;
+overflow: hidden;
+`
+const float = keyframes`
+0% { transform: translateY(-10px) }
+50% { transform: translateY(15px) translateX(15px) }
+100% { transform: translateY(-10px) }
+
+`
+const Spaceman = styled.div`
+position: absolute;
+top: 10%;
+right: 5%;
+width: 20vw;
+animation: ${float} 4s ease infinite;
+img{
+    width: 100%;
+    height: auto;
+}
+`
+const Main =  styled.div`
+  border: 2px solid ${(props) => props.theme.text};
+  color: ${(props) => props.theme.text};
+  padding: 2rem;
+  width: 50vw;
+  height: 60vh;
+  z-index: 3;
+  line-height: 1.5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: calc(0.6rem + 1vw);
+ backdrop-filter: blur(4px);
+  
+  position: absolute;
+  left: calc(5rem + 5vw);
+  top: 10rem;
+  font-family: 'Ubuntu Mono', monospace;
+  font-style: italic;
+`
+
+
+
+
+const AboutPage = () => {
+    return (
+        <ThemeProvider theme={DarkTheme}>
+<Box>
+
+<LogoComponent theme='dark'/>
+<SocialIcons theme='dark'/>
+<PowerButton />
+<ParticleComponent theme='dark' />
+
+        <Spaceman>
+            <img src={astronaut} alt="spaceman" />
+        </Spaceman>    
+        <Main>
+        I'm a DevSecOps Engineer in Thailand. I love to learn and explore any opensource can help me or organize great opertation.
+<br /> <br/>
+I have extensive experience in designing and implementing secure CI/CD pipelines using tools like Jenkins and GitLab CI/CD. My expertise in Kubernetes and container security has enabled me to build highly resilient and scalable applications. I'm particularly interested in exploring how we can leverage machine learning to improve our threat detection capabilities.
+<br/> <br/>
+I'm interested in the whole opensource Like trying new things and building great solution for optimize projects. I'm an outsource and find more freelance job. I love to read manga and play MOBA sometime.
+        </Main>
+
+        <BigTitle text="ABOUT" top="10%" left="5%" />
+
+
+        </Box>
+
+        </ThemeProvider>
+        
+    )
+}
+
+export default AboutPage
--- a/src/components/AllSvgs.js
+++ b/src/components/AllSvgs.js
@ -0,0 +1,197 @@
+export const PowerBtn = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      data-prefix="fas"
+      data-icon="power-off"
+      className="prefix__svg-inline--fa prefix__fa-power-off prefix__fa-w-16"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      {...props}
+    >
+      <path
+        fill={props.fill}
+        d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z"
+      />
+    </svg>
+  )
+}
+
+export const Github = (props) => {
+    return (
+        <svg
+          aria-hidden="true"
+          data-prefix="fab"
+          data-icon="github"
+          className="prefix__svg-inline--fa prefix__fa-github prefix__fa-w-16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 496 512"
+          {...props}
+        >
+          <path
+            fill={props.fill}
+            d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+          />
+        </svg>
+      )
+}
+
+export const Twitter = (props) => {
+    return (
+        <svg
+          aria-hidden="true"
+          data-prefix="fab"
+          data-icon="twitter"
+          className="prefix__svg-inline--fa prefix__fa-twitter prefix__fa-w-16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          {...props}
+        >
+          <path
+            fill={props.fill}
+            d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+          />
+        </svg>
+      )
+}
+
+export const Facebook = (props) => {
+    return (
+        <svg
+          aria-hidden="true"
+          data-prefix="fab"
+          data-icon="facebook"
+          className="prefix__svg-inline--fa prefix__fa-facebook prefix__fa-w-16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          {...props}
+        >
+          <path
+            fill={props.fill}
+            d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
+          />
+        </svg>
+      )
+}
+
+export const YouTube = (props) => {
+    return (
+        <svg
+          aria-hidden="true"
+          data-prefix="fab"
+          data-icon="youtube"
+          className="prefix__svg-inline--fa prefix__fa-youtube prefix__fa-w-18"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 576 512"
+          {...props}
+        >
+          <path
+            fill={props.fill}
+            d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
+          />
+        </svg>
+      )
+}
+
+export const YinYang = (props) => {
+    return (
+        <svg
+          aria-hidden="true"
+          data-prefix="fas"
+          data-icon="yin-yang"
+          className="prefix__svg-inline--fa prefix__fa-yin-yang prefix__fa-w-16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 496 512"
+          {...props}
+        >
+          <path
+            fill={props.fill}
+            d="M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 376c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-128c-53.02 0-96 42.98-96 96s42.98 96 96 96c-106.04 0-192-85.96-192-192S141.96 64 248 64c53.02 0 96 42.98 96 96s-42.98 96-96 96zm0-128c-17.67 0-32 14.33-32 32s14.33 32 32 32 32-14.33 32-32-14.33-32-32-32z"
+          />
+        </svg>
+      )
+}
+
+export const Anchor = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      data-prefix="fas"
+      data-icon="anchor"
+      className="prefix__svg-inline--fa prefix__fa-anchor prefix__fa-w-18"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 576 512"
+      {...props}
+    >
+      <path
+        fill={props.fill}
+        d="M12.971 352h32.394C67.172 454.735 181.944 512 288 512c106.229 0 220.853-57.38 242.635-160h32.394c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0l-67.029 67.029c-7.56 7.56-2.206 20.485 8.485 20.485h35.146c-20.29 54.317-84.963 86.588-144.117 94.015V256h52c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-52v-5.47c37.281-13.178 63.995-48.725 64-90.518C384.005 43.772 341.605.738 289.37.01 235.723-.739 192 42.525 192 96c0 41.798 26.716 77.35 64 90.53V192h-52c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h52v190.015c-58.936-7.399-123.82-39.679-144.117-94.015h35.146c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0L4.485 331.515C-3.074 339.074 2.28 352 12.971 352zM288 64c17.645 0 32 14.355 32 32s-14.355 32-32 32-32-14.355-32-32 14.355-32 32-32z"
+      />
+    </svg>
+  )
+}
+
+
+
+export const Link = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      data-prefix="fas"
+      data-icon="link"
+      className="prefix__svg-inline--fa prefix__fa-link prefix__fa-w-16"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      {...props}
+      
+    >
+      <path
+        fill={props.fill}
+        
+        d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 01-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0120.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0020.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 00-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"
+      />
+    </svg>
+  )
+}
+
+
+
+export const Design = (props) => { 
+  return (
+    <svg
+      aria-hidden="true"
+      data-prefix="fas"
+      data-icon="palette"
+      className="prefix__svg-inline--fa prefix__fa-palette prefix__fa-w-16"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      {...props}
+    >
+      <path
+        fill={props.fill}
+        d="M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"
+      />
+    </svg>
+  )
+
+}
+
+export const Develope = (props) => { 
+  return (
+    <svg
+      aria-hidden="true"
+      data-prefix="fas"
+      data-icon="laptop-code"
+      className="prefix__svg-inline--fa prefix__fa-laptop-code prefix__fa-w-20"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 640 512"
+      {...props}
+    >
+      <path
+         fill={props.fill}
+        d="M255.03 261.65c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L253.25 192l35.71-35.72c6.25-6.25 6.25-16.38 0-22.63l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0l-58.34 58.34c-6.25 6.25-6.25 16.38 0 22.63l58.35 58.34zm96.01-11.3l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0l58.34-58.34c6.25-6.25 6.25-16.38 0-22.63l-58.34-58.34c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L386.75 192l-35.71 35.72c-6.25 6.25-6.25 16.38 0 22.63zM624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"
+      />
+    </svg>
+  )
+
+}
--- a/src/components/BlogComponent.js
+++ b/src/components/BlogComponent.js
@ -0,0 +1,96 @@
+import { motion } from "framer-motion";
+import React from "react";
+// import { NavLink } from 'react-router-dom'
+import styled from "styled-components";
+
+const Box = styled(motion.a)`
+  width: calc(10rem + 15vw);
+  text-decoration: none;
+  height: 20rem;
+  padding: 1rem;
+  color: ${(props) => props.theme.text};
+  border: 2px solid ${(props) => props.theme.text};
+  backdrop-filter: blur(2px);
+  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+
+  display: flex;
+  flex-direction: column;
+  z-index: 5;
+
+  &:hover {
+    color: ${(props) => props.theme.body};
+    background-color: ${(props) => props.theme.text};
+    transition: all 0.3s ease;
+  }
+`;
+
+const Image = styled.div`
+  background-image: ${(props) => `url(${props.img})`};
+  width: 100%;
+  height: 60%;
+  background-size: cover;
+  border: 1px solid transparent;
+  background-position: center center;
+
+  ${Box}:hover & {
+    border: 1px solid ${(props) => props.theme.body};
+  }
+`;
+const Title = styled.h3`
+  color: inherit;
+  padding: 0.5rem 0;
+  padding-top: 1rem;
+  font-family: "Karla", sans-serif;
+  font-weight: 700;
+  border-bottom: 1px solid ${(props) => props.theme.text};
+
+  ${Box}:hover & {
+    border-bottom: 1px solid ${(props) => props.theme.body};
+  }
+`;
+const HashTags = styled.div`
+  padding: 0.5rem 0;
+`;
+const Tag = styled.span`
+  padding-right: 0.5rem;
+`;
+const Date = styled.span`
+  padding: 0.5rem 0;
+`;
+
+const Container = styled(motion.div)``;
+
+// Framer motion configuration
+const Item = {
+  hidden: {
+    scale: 0,
+  },
+  show: {
+    scale: 1,
+    transition: {
+      type: "spring",
+      duration: 0.5,
+    },
+  },
+};
+
+const BlogComponent = (props) => {
+  const { name, tags, date, imgSrc, link } = props.blog;
+  return (
+    <Container variants={Item}>
+      <Box target="_blank" href={`${link}`}>
+        <Image img={imgSrc} />
+        <Title>{name}</Title>
+        <HashTags>
+          {tags.map((t, id) => {
+            return <Tag key={id}>#{t}</Tag>;
+          })}
+        </HashTags>
+        <Date>{date}</Date>
+      </Box>
+    </Container>
+  );
+};
+
+export default BlogComponent;
--- a/src/components/BlogPage.js
+++ b/src/components/BlogPage.js
@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import img from "../assets/Images/patrick-tomasso-Oaqk7qqNh_c-unsplash.jpg"
+import LogoComponent from '../subComponents/LogoComponent'
+import SocialIcons  from '../subComponents/SocialIcons'
+import PowerButton  from '../subComponents/PowerButton'
+
+import {Blogs} from '../data/BlogData';
+import BlogComponent from './BlogComponent'
+import AnchorComponent from '../subComponents/Anchor'
+import BigTitle from "../subComponents/BigTitlte"
+import { motion } from 'framer-motion'
+
+
+const MainContainer = styled(motion.div)`
+background-image: url(${img});
+background-size: cover;
+background-repeat: no-repeat;
+background-attachment: fixed;
+background-position: center;
+`
+const Container = styled.div`
+background-color: ${props => `rgba(${props.theme.bodyRgba},0.8)`};
+width: 100%;
+height:auto;
+
+position: relative;
+padding-bottom: 5rem;
+`
+
+const Center = styled.div`
+display: flex;
+justify-content: center;
+align-items: center;
+padding-top: 10rem;
+`
+
+const Grid = styled.div`
+display: grid;
+grid-template-columns: repeat(2, minmax(calc(10rem + 15vw), 1fr));
+grid-gap: calc(1rem + 2vw);
+`
+
+// Framer-motion config
+const container = {
+
+    hidden: {opacity:0},
+    show: {
+      opacity:1,
+  
+      transition:{
+        staggerChildren: 0.5,
+        duration: 0.5,
+      }
+    }
+  
+  }
+
+const BlogPage = () => {
+
+    const [numbers, setNumbers] = useState(0);
+
+    useEffect(() => {
+        let num = (window.innerHeight - 70)/30;
+        setNumbers(parseInt(num));
+    }, [])
+
+
+    return (
+        <MainContainer
+        variants={container}
+        initial='hidden'
+        animate='show'
+        exit={{
+            opacity:0, transition:{duration: 0.5}
+        }}
+        >
+            <Container>
+                <LogoComponent />
+                <PowerButton />
+                <SocialIcons />
+                <AnchorComponent number={numbers}/>
+<Center>
+<Grid>
+
+{
+    Blogs.map(blog => {
+        return <BlogComponent key={blog.id} blog={blog} />
+    })
+}
+</Grid>
+
+</Center>
+<BigTitle text="BLOG" top="5rem" left="5rem" />
+            </Container>
+        </MainContainer>
+    )
+}
+
+export default BlogPage
--- a/src/components/Intro.js
+++ b/src/components/Intro.js
@ -0,0 +1,100 @@
+import React from 'react'
+import styled from 'styled-components'
+import {motion} from 'framer-motion'
+import Me from '../assets/Images/profile-img.png'
+
+
+const Box = styled(motion.div)`
+
+position: absolute;
+left: 50%;
+top: 50%;
+transform: translate(-50%, -50%);
+
+
+width: 65vw;
+height:55vh;
+display: flex;
+
+
+background: linear-gradient(
+    to right,
+    ${props => props.theme.body} 50%,
+    ${props => props.theme.text} 50%) bottom,
+    linear-gradient(
+    to right,
+    ${props => props.theme.body} 50%,
+    ${props => props.theme.text} 50%) top;
+    background-repeat: no-repeat;
+background-size: 100% 2px;
+    border-left: 2px solid ${props => props.theme.body};
+    border-right: 2px solid ${props => props.theme.text};
+
+
+    z-index:1;
+
+`
+const SubBox = styled.div`
+width: 50%;
+position: relative;
+display: flex;
+
+.pic{
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%,0%);
+    width: 100%;
+    height: auto;
+}
+`
+
+const Text = styled.div`
+font-size: calc(1em + 1.5vw);
+color: ${props => props.theme.body};
+padding: 2rem;
+cursor: pointer;
+
+display: flex;
+flex-direction: column;
+justify-content: space-evenly;
+
+&>*:last-child{
+    color: ${props => `rgba(${props.theme.bodyRgba},0.6)` };
+    font-size: calc(0.5rem + 1.5vw);
+    font-weight:300;
+
+}
+
+
+
+`
+
+const Intro = () => {
+    return (
+        <Box
+        initial={{height:0}}
+        animate={{height: '55vh'}}
+        transition={{ type: 'spring', duration:2, delay:1 }}
+        >
+            <SubBox>
+                <Text>
+                    <h1>Hi,</h1>
+                    <h3>I'm DevSecOps.</h3>
+                    <h6>I Implement and Design strong Infrastructure.</h6>
+                </Text>
+            </SubBox>
+            <SubBox>
+                <motion.div
+                initial={{opacity:0}}
+        animate={{opacity: 1}}
+        transition={{ duration:1, delay:2 }}
+                >
+                    <img className="pic" src={Me} alt="Profile Pic" />
+                </motion.div>
+            </SubBox>
+        </Box>
+    )
+}
+
+export default Intro
--- a/src/components/Main.js
+++ b/src/components/Main.js
@ -0,0 +1,239 @@
+import { motion } from 'framer-motion'
+import React, { useState } from 'react'
+import { NavLink } from 'react-router-dom'
+import styled, { keyframes } from 'styled-components'
+import LogoComponent from '../subComponents/LogoComponent'
+import PowerButton from '../subComponents/PowerButton'
+import SocialIcons from '../subComponents/SocialIcons'
+import { YinYang } from './AllSvgs'
+import Intro from './Intro'
+;
+
+
+const MainContainer = styled.div`
+background: ${props => props.theme.body};
+width: 100vw;
+height: 100vh;
+overflow:hidden;
+
+position: relative;
+
+h2,h3,h4,h5,h6{
+  font-family:'Karla', sans-serif ;
+  font-weight:500;
+}
+`
+
+const Container = styled.div`
+padding: 2rem;
+`
+
+const Contact = styled.a`
+color: ${props => props.theme.text};
+position: absolute;
+top: 2rem;
+right: calc(1rem + 2vw);
+text-decoration: none;
+z-index:1;
+`
+const BLOG = styled(NavLink)`
+color: ${props => props.theme.text};
+position: absolute;
+top: 50%;
+right: calc(1rem + 2vw);
+transform: rotate(90deg) translate(-50%, -50%);
+text-decoration: none;
+z-index:1;
+`
+const WORK = styled(NavLink)`
+color: ${props => props.click ? props.theme.body : props.theme.text};
+
+position: absolute;
+top: 50%;
+left: calc(1rem + 2vw);
+transform: translate(-50%, -50%) rotate(-90deg) ;
+text-decoration: none;
+z-index:1;
+`
+
+const BottomBar = styled.div`
+position: absolute;
+bottom: 1rem;
+left: 0;
+right: 0;
+width: 100%;
+
+display: flex;
+justify-content: space-evenly;
+`
+
+const ABOUT = styled(NavLink)`
+color: ${props => props.click ? props.theme.body : props.theme.text};
+text-decoration: none;
+z-index:1;
+`
+const SKILLS = styled(NavLink)`
+color: ${props => props.theme.text};
+text-decoration: none;
+z-index:1;
+`
+
+const rotate = keyframes`
+from{
+    transform: rotate(0);
+}
+to{
+    transform: rotate(360deg);
+}
+`
+
+const Center = styled.button`
+position: absolute;
+top: ${props => props.click ? '85%' :'50%'  };
+left: ${props => props.click ? '92%' :'50%'  };
+transform: translate(-50%,-50%);
+border: none;
+outline: none;
+background-color: transparent;
+cursor: pointer;
+
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+transition: all 1s ease;
+
+&>:first-child{
+    animation: ${rotate} infinite 1.5s linear;
+}
+
+&>:last-child{
+    display: ${props => props.click ? 'none' :'inline-block'  };
+    padding-top: 1rem;
+}
+`
+
+const DarkDiv = styled.div`
+position: absolute;
+top: 0;
+background-color: #000;
+bottom: 0;
+right: 50%;
+width: ${props => props.click ? '50%' : '0%'};
+height: ${props => props.click ? '100%' : '0%'};
+z-index:1;
+transition: height 0.5s ease, width 1s ease 0.5s;
+`
+
+
+const Main = () => {
+
+    const [click, setClick] = useState(false);
+
+    const handleClick = () => setClick(!click);
+
+    return (
+        <MainContainer>
+         <DarkDiv   click={click}/>
+            <Container>
+            <PowerButton />
+            <LogoComponent theme={click ? 'dark' :'light'}/>
+            <SocialIcons theme={click ? 'dark' :'light'} />
+           
+            <Center click={click}>
+                <YinYang  onClick={()=> handleClick()} width={click ? 120 : 200} height={click ? 120 : 200} fill='currentColor' />
+                <span>click here</span>
+            </Center>
+
+            <Contact target="_blank" href="mailto:thanapat@klxhub.com">
+                <motion.h2
+                initial={{
+                    y:-200,
+                    transition: { type:'spring', duration: 1.5, delay:1}
+                }}
+                animate={{
+                    y:0,
+                    transition: { type:'spring', duration: 1.5, delay:1}
+                }}
+                whileHover={{scale: 1.1}}
+                whileTap={{scale: 0.9}}
+                
+                >
+                    KLxWorld
+                </motion.h2>
+            </Contact>
+            <BLOG to="/blog">
+                <motion.h2
+                initial={{
+                    y:-200,
+                    transition: { type:'spring', duration: 1.5, delay:1}
+                }}
+                animate={{
+                    y:0,
+                    transition: { type:'spring', duration: 1.5, delay:1}
+                }}
+                whileHover={{scale: 1.1}}
+                whileTap={{scale: 0.9}}
+                >
+                    Blog
+                </motion.h2>
+            </BLOG>
+            <WORK to="/work" click={+click}>
+                <motion.h2
+                initial={{
+                    y:-200,
+                    transition: { type:'spring', duration: 1.5, delay:1}
+                }}
+                animate={{
+                    y:0,
+                    transition: { type:'spring', duration: 1.5, delay:1}
+                }}
+                 whileHover={{scale: 1.1}}
+                whileTap={{scale: 0.9}}
+                >
+                    Work
+                </motion.h2>
+            </WORK>
+            <BottomBar>
+            <ABOUT to="/about" click={+click}>
+                <motion.h2
+                initial={{
+                    y:200,
+                    transition: { type:'spring', duration: 1.5, delay:1}
+                }}
+                animate={{
+                    y:0,
+                    transition: { type:'spring', duration: 1.5, delay:1}
+                }}
+                 whileHover={{scale: 1.1}}
+                whileTap={{scale: 0.9}}
+                >
+                    About.
+                </motion.h2>
+            </ABOUT>
+            <SKILLS to="/skills">
+                <motion.h2
+                initial={{
+                    y:200,
+                    transition: { type:'spring', duration: 1.5, delay:1}
+                }}
+                animate={{
+                    y:0,
+                    transition: { type:'spring', duration: 1.5, delay:1}
+                }}
+                 whileHover={{scale: 1.1}}
+                whileTap={{scale: 0.9}}
+                >
+                    My Skills.
+                </motion.h2>
+            </SKILLS>
+
+            </BottomBar>
+
+            </Container>
+            {click ? <Intro click={click} /> : null }
+        </MainContainer>
+    )
+}
+
+export default Main
--- a/src/components/MySkillsPage.js
+++ b/src/components/MySkillsPage.js
@ -0,0 +1,146 @@
+import React from 'react'
+import styled, { ThemeProvider } from 'styled-components'
+import {lightTheme} from './Themes';
+import { Design, Develope} from './AllSvgs';
+
+
+import LogoComponent from '../subComponents/LogoComponent';
+import SocialIcons from '../subComponents/SocialIcons';
+import PowerButton from '../subComponents/PowerButton';
+import ParticleComponent from '../subComponents/ParticleComponent';
+import BigTitle from '../subComponents/BigTitlte'
+
+const Box = styled.div`
+background-color: ${props => props.theme.body};
+width: 100vw;
+height:100vh;
+position: relative;
+display: flex;
+justify-content: space-evenly;
+align-items: center;
+
+
+`
+
+const Main = styled.div`
+border: 2px solid ${props => props.theme.text};
+color: ${props => props.theme.text};
+background-color: ${props => props.theme.body};
+padding: 2rem;
+width: 30vw;
+height: 60vh;
+z-index:3;
+line-height: 1.5;
+cursor: pointer;
+
+font-family: 'Ubuntu Mono',monospace;
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+
+&:hover{
+    color: ${props => props.theme.body};
+    background-color: ${props => props.theme.text};
+}
+`
+
+const Title = styled.h2`
+display: flex;
+justify-content: center;
+align-items: center;
+font-size: calc(1em + 1vw);
+
+${Main}:hover &{
+    &>*{
+        fill:${props => props.theme.body};
+    }
+}
+
+&>*:first-child{
+margin-right: 1rem;
+}
+`
+
+const Description = styled.div`
+color: ${props => props.theme.text};
+font-size: calc(0.6em + 1vw);
+padding: 0.5rem 0;
+
+
+${Main}:hover &{
+   
+        color:${props => props.theme.body};
+    
+}
+
+strong{
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+}
+ul,p{
+    margin-left: 2rem;
+}
+`
+
+const MySkillsPage = () => {
+    return (
+        <ThemeProvider theme={lightTheme}>
+<Box>
+
+<LogoComponent theme='light'/>
+<SocialIcons theme='light'/>
+<PowerButton />
+<ParticleComponent theme='light' />
+            <Main>
+<Title>
+    <Develope width={40} height={40} /> DevSecOps
+</Title>
+<Description>
+Responsible for automating security testing and vulnerability scanning.
+</Description>
+<Description>
+<strong>Skills</strong>
+<p>
+    K8s, Docker, Bash, CICD, Iptables, Git, LDAP, Monitoring, Observability, Security, Network, Loadbalancer
+</p>
+</Description>
+<Description>
+<strong>Tools</strong>
+<p>
+K3s, Kustomize/Helm, K8s provider AWS DO, Nginx, Treafik, Kong, Openresty, ELK, Terraform, Ansible, Rancher, Proxmox, Fail2ban, DroneCI, RabbitMQ, Pihole, FreeIPA, PFsense, Vaultwarden, Hashicorp Vault, Mailcow, OpenVPN Server, ArgoCD, Sentry, Grafana/Prometheus
+</p>
+</Description>
+
+            </Main>
+            <Main>
+<Title>
+    <Develope width={40} height={40} /> Fullstack Developer
+</Title>
+<Description>
+I value business or brand for which i'm creating, thus i enjoy bringing new ideas to life.
+</Description>
+<Description>
+<strong>Skills</strong>
+<p>
+Html, Css, Js, Bootstrap, ExpressJS, Jquery, Php, Laravel, S3, Database etc.
+</p>
+</Description>
+<Description>
+<strong>Tools</strong>
+<p>
+VScode, Github, Gitlab, Gitea, Bitbucket, MySQL, MariaDB, PostgreSQL, MSSQL, MongoDB, Redis etc.
+</p>
+</Description>
+
+            </Main>
+
+            <BigTitle text="SKILLS" top="80%" right="30%" />
+
+        </Box>
+
+        </ThemeProvider>
+        
+    )
+}
+
+export default MySkillsPage
--- a/src/components/Themes.js
+++ b/src/components/Themes.js
@ -0,0 +1,19 @@
+// Here we will create dark and light theme variables
+
+export const lightTheme = {
+
+    body:"#FCF6F4",
+    text:"#000000",
+    fontFamily:"'Source Sans Pro', sans-serif",
+    bodyRgba : "190, 187, 214",
+    textRgba:"0,0,0",
+}
+
+export const DarkTheme = {
+
+    body:"#000000",
+    text:"#FCF6F4",
+    fontFamily:"'Source Sans Pro', sans-serif",
+    textRgba : "252, 246, 244",
+    bodyRgba:"0,0,0",
+}
--- a/src/components/WorkPage.js
+++ b/src/components/WorkPage.js
@ -0,0 +1,98 @@
+import React, { useEffect, useRef } from "react";
+import styled, { ThemeProvider } from "styled-components";
+import { DarkTheme } from "./Themes";
+import { motion } from "framer-motion";
+
+import LogoComponent from "../subComponents/LogoComponent";
+import SocialIcons from "../subComponents/SocialIcons";
+import PowerButton from "../subComponents/PowerButton";
+
+import { Work } from "../data/WorkData";
+import Card from "../subComponents/Card";
+import { YinYang } from "./AllSvgs";
+import BigTitlte from "../subComponents/BigTitlte";
+
+const Box = styled.div`
+  background-color: ${(props) => props.theme.body};
+
+  height: 400vh;
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+
+const Main = styled(motion.ul)`
+  position: fixed;
+  top: 12rem;
+  left: calc(10rem + 15vw);
+  height: 40vh;
+  display: flex;
+
+  color: white;
+`;
+const Rotate = styled.span`
+  display: block;
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  width: 80px;
+  height: 80px;
+  z-index: 1;
+`;
+
+// Framer-motion Configuration
+const container = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+
+    transition: {
+      staggerChildren: 0.5,
+      duration: 0.5,
+    },
+  },
+};
+
+const WorkPage = () => {
+  const ref = useRef(null);
+  const yinyang = useRef(null);
+
+  useEffect(() => {
+    let element = ref.current;
+
+    const rotate = () => {
+      element.style.transform = `translateX(${-window.pageYOffset}px)`;
+
+      return (yinyang.current.style.transform =
+        "rotate(" + -window.pageYOffset + "deg)");
+    };
+
+    window.addEventListener("scroll", rotate);
+    return () => {
+      window.removeEventListener("scroll", rotate);
+    };
+  }, []);
+
+  return (
+    <ThemeProvider theme={DarkTheme}>
+      <Box>
+        <LogoComponent theme="dark" />
+        <SocialIcons theme="dark" />
+        <PowerButton />
+
+        <Main ref={ref} variants={container} initial="hidden" animate="show">
+          {Work.map((d) => (
+            <Card key={d.id} data={d} />
+          ))}
+        </Main>
+        <Rotate ref={yinyang}>
+          <YinYang width={80} height={80} fill={DarkTheme.text} />
+        </Rotate>
+
+        <BigTitlte text="WORK" top="10%" right="20%" />
+      </Box>
+    </ThemeProvider>
+  );
+};
+
+export default WorkPage;
--- a/src/config/particlesjs-config-light.json
+++ b/src/config/particlesjs-config-light.json
@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 80,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#000000"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 0.5,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 3,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 40,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 150,
+      "color": "#000000",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 6,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": true,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": true,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}
--- a/src/config/particlesjs-config.json
+++ b/src/config/particlesjs-config.json
@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 100,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#fcf6f4"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 1,
+      "random": true,
+      "anim": {
+        "enable": true,
+        "speed": 1,
+        "opacity_min": 0,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 3,
+      "random": true,
+      "anim": {
+        "enable": true,
+        "speed": 3,
+        "size_min": 0.4,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": false,
+      "distance": 150,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 3,
+      "direction": "none",
+      "random": true,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 600
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": false,
+        "mode": "bubble"
+      },
+      "onclick": {
+        "enable": true,
+        "mode": "repulse"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 250,
+        "size": 0,
+        "duration": 2,
+        "opacity": 0,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 400,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}
--- a/src/data/AllSvg.txt
+++ b/src/data/AllSvg.txt
@ -0,0 +1,197 @@
+export const PowerBtn = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      data-prefix="fas"
+      data-icon="power-off"
+      className="prefix__svg-inline--fa prefix__fa-power-off prefix__fa-w-16"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      {...props}
+    >
+      <path
+        fill={props.fill}
+        d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z"
+      />
+    </svg>
+  )
+}
+
+export const Github = (props) => {
+    return (
+        <svg
+          aria-hidden="true"
+          data-prefix="fab"
+          data-icon="github"
+          className="prefix__svg-inline--fa prefix__fa-github prefix__fa-w-16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 496 512"
+          {...props}
+        >
+          <path
+            fill={props.fill}
+            d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+          />
+        </svg>
+      )
+}
+
+export const Twitter = (props) => {
+    return (
+        <svg
+          aria-hidden="true"
+          data-prefix="fab"
+          data-icon="twitter"
+          className="prefix__svg-inline--fa prefix__fa-twitter prefix__fa-w-16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          {...props}
+        >
+          <path
+            fill={props.fill}
+            d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+          />
+        </svg>
+      )
+}
+
+export const Facebook = (props) => {
+    return (
+        <svg
+          aria-hidden="true"
+          data-prefix="fab"
+          data-icon="facebook"
+          className="prefix__svg-inline--fa prefix__fa-facebook prefix__fa-w-16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          {...props}
+        >
+          <path
+            fill={props.fill}
+            d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"
+          />
+        </svg>
+      )
+}
+
+export const YouTube = (props) => {
+    return (
+        <svg
+          aria-hidden="true"
+          data-prefix="fab"
+          data-icon="youtube"
+          className="prefix__svg-inline--fa prefix__fa-youtube prefix__fa-w-18"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 576 512"
+          {...props}
+        >
+          <path
+            fill={props.fill}
+            d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
+          />
+        </svg>
+      )
+}
+
+export const YinYang = (props) => {
+    return (
+        <svg
+          aria-hidden="true"
+          data-prefix="fas"
+          data-icon="yin-yang"
+          className="prefix__svg-inline--fa prefix__fa-yin-yang prefix__fa-w-16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 496 512"
+          {...props}
+        >
+          <path
+            fill={props.fill}
+            d="M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 376c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-128c-53.02 0-96 42.98-96 96s42.98 96 96 96c-106.04 0-192-85.96-192-192S141.96 64 248 64c53.02 0 96 42.98 96 96s-42.98 96-96 96zm0-128c-17.67 0-32 14.33-32 32s14.33 32 32 32 32-14.33 32-32-14.33-32-32-32z"
+          />
+        </svg>
+      )
+}
+
+export const Anchor = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      data-prefix="fas"
+      data-icon="anchor"
+      className="prefix__svg-inline--fa prefix__fa-anchor prefix__fa-w-18"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 576 512"
+      {...props}
+    >
+      <path
+        fill={props.fill}
+        d="M12.971 352h32.394C67.172 454.735 181.944 512 288 512c106.229 0 220.853-57.38 242.635-160h32.394c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0l-67.029 67.029c-7.56 7.56-2.206 20.485 8.485 20.485h35.146c-20.29 54.317-84.963 86.588-144.117 94.015V256h52c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-52v-5.47c37.281-13.178 63.995-48.725 64-90.518C384.005 43.772 341.605.738 289.37.01 235.723-.739 192 42.525 192 96c0 41.798 26.716 77.35 64 90.53V192h-52c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h52v190.015c-58.936-7.399-123.82-39.679-144.117-94.015h35.146c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0L4.485 331.515C-3.074 339.074 2.28 352 12.971 352zM288 64c17.645 0 32 14.355 32 32s-14.355 32-32 32-32-14.355-32-32 14.355-32 32-32z"
+      />
+    </svg>
+  )
+}
+
+
+
+export const Link = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      data-prefix="fas"
+      data-icon="link"
+      className="prefix__svg-inline--fa prefix__fa-link prefix__fa-w-16"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      {...props}
+      
+    >
+      <path
+        fill={props.fill}
+        
+        d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 01-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0120.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0020.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 00-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"
+      />
+    </svg>
+  )
+}
+
+
+
+export const Design = (props) => { 
+  return (
+    <svg
+      aria-hidden="true"
+      data-prefix="fas"
+      data-icon="palette"
+      className="prefix__svg-inline--fa prefix__fa-palette prefix__fa-w-16"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      {...props}
+    >
+      <path
+        fill={props.fill}
+        d="M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"
+      />
+    </svg>
+  )
+
+}
+
+export const Develope = (props) => { 
+  return (
+    <svg
+      aria-hidden="true"
+      data-prefix="fas"
+      data-icon="laptop-code"
+      className="prefix__svg-inline--fa prefix__fa-laptop-code prefix__fa-w-20"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 640 512"
+      {...props}
+    >
+      <path
+         fill={props.fill}
+        d="M255.03 261.65c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L253.25 192l35.71-35.72c6.25-6.25 6.25-16.38 0-22.63l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0l-58.34 58.34c-6.25 6.25-6.25 16.38 0 22.63l58.35 58.34zm96.01-11.3l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0l58.34-58.34c6.25-6.25 6.25-16.38 0-22.63l-58.34-58.34c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L386.75 192l-35.71 35.72c-6.25 6.25-6.25 16.38 0 22.63zM624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"
+      />
+    </svg>
+  )
+
+}
--- a/src/data/BlogData.js
+++ b/src/data/BlogData.js
@ -0,0 +1,71 @@
+// blog data
+
+export const Blogs = [
+    {
+        id:1,
+        name:"Build Website with ReactJS, Styled-components and GSAP for Scrolling Animations",
+        tags:["react","gsap","styled-components"],
+        date:"13 May, 2021",
+        imgSrc:"https://res.cloudinary.com/practicaldev/image/fetch/s--sBeV06Xc--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yrzy75q4dzibqz6rf82.png",
+        link:"https://dev.to/codebucks/build-website-with-reactjs-styled-components-and-gsap-for-scrolling-animations-2f10"
+    },
+    {
+        id:2,
+        name:"How to create React Hamburger Menu using Styled-Components",
+        tags:["react","styled-components"],
+        date:"5 July, 2021",
+        imgSrc:"https://codebucks.hashnode.dev/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1625479747640%2F7KzwP9nmj.png%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=1920&q=75",
+        link:"https://codebucks.hashnode.dev/react-hamburger-menu"
+    },
+    {
+        id:3,
+        name:"React Loading Screen: Try these 3 cool loading screens for your app",
+        tags:["react","react-lottie","styled-components"],
+        date:"6 July, 2021",
+        imgSrc:"https://codebucks.hashnode.dev/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1625552344293%2Fegwis0UIX.png%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=1920&q=75",
+        link:"https://codebucks.hashnode.dev/react-loading-screens"
+    },
+    {
+        id:4,
+        name:"How to build a Fabulous Todo App using React, Redux and Framer-Motion",
+        tags:["react","redux","framer-motion"],
+        date:"26 May, 2021",
+        imgSrc:"https://res.cloudinary.com/practicaldev/image/fetch/s--r5oUDhhT--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/036s7j5b73up7455rdth.png",
+        link:"https://dev.to/codebucks/build-redux-react-todo-list-app-with-animations-using-framer-motion-1mp1"
+    },
+    {
+        id:5,
+        name:"What is Higher Order Component (HOC) in React JS?",
+        tags:["react","reactJS","web-development"],
+        date:"3 Feb, 2021",
+        imgSrc:"https://codebucks.hashnode.dev/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1625295480148%2FlyKj8bpHK.jpeg%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=1920&q=75",
+        link:"https://codebucks.hashnode.dev/what-is-higher-order-component"
+    },
+    {
+        id:6,
+        name:"How to implement Pagination Component in React from scratch",
+        tags:["react","css"],
+        date:"5 Jan, 2021",
+        imgSrc:"https://codebucks.hashnode.dev/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1625240050668%2FGAya9b0XK.png%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=1920&q=75",
+        link:"https://codebucks.hashnode.dev/pagination-in-react"
+
+    },
+   
+    {
+        id:7,
+        name:"What is Redux ? Simply Explained!",
+        tags:["react","redux","javascript"],
+        date:"16 May, 2021",
+        imgSrc:"https://res.cloudinary.com/practicaldev/image/fetch/s--ZY1EK-Eo--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcz1u90oq3prr5fga3fs.png",
+        link:"https://dev.to/codebucks/what-is-redux-simply-explained-2ch7"
+    },
+    {
+        id:8,
+        name:"How to create Sidebar navigation menu in ReactJS with react router and framer-motion",
+        tags:["react","framer-motion","styled-components"],
+        date:"26 May, 2021",
+        imgSrc:"https://res.cloudinary.com/practicaldev/image/fetch/s--rv4I8UwE--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a9h50milhlf1us6mn4a.png",
+        link:"https://dev.to/codebucks/build-sidebar-navigation-menu-in-reactjs-with-react-router-and-framer-motion-for-cool-page-transition-effects-4bc3"
+    },
+  
+] 
--- a/src/data/Text.txt
+++ b/src/data/Text.txt
@ -0,0 +1,58 @@
+
+All the required Text for this portfolio
+Fonts
+
+----------------------------------------------
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600&family=Pacifico&family=Source+Sans+Pro:wght@400;600;700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
+
+----------------------------------------------
+
+
+Skills
+----------------------------------------------
+I love to create design which speaks, Keep it clean, minimal and simple.
+I LIKE TO DESIGN
+Web Design
+Mobile Apps
+TOOLS
+Figma
+
+I value business or brand for which i'm creating, thus i enjoy bringing new ideas to life.
+SKILLS
+Html, Css, Js, React, Redux, Sass, Bootstrap, Tailwind, Firebase etc.
+
+TOOLS
+VScode, Github, Codepen etc.
+
+----------------------------------------------
+
+About Text
+
+----------------------------------------------
+I'm a front-end developer located in India. I love to create simple yet beautiful websites with great user experience.
+
+I'm interested in the whole frontend stack Like trying new things and building great projects. I'm an independent freelancer and blogger. I love to write blogs and read books.
+
+I believe everything is an Art when you put your consciousness in it. You can connect with me via social links.
+----------------------------------------------
+
+
+Theme
+----------------------------------------------
+    body:"#FCF6F4",
+    text:"#000000",
+    fontFamily:"'Source Sans Pro', sans-serif",
+    bodyRgba : "252, 246, 244",
+    textRgba:"0,0,0",
+
+
+----------------------------------------------
+
+
+
+
+
+
--- a/src/data/WorkData.js
+++ b/src/data/WorkData.js
@ -0,0 +1,63 @@
+// work data
+
+export const Work = [
+    {
+        id:1,
+        name:"Agency Landing Page",
+        description:"It is build on top of the React JS, with styledComponents and GSAP for smooth scrolling animations.",
+        tags:["react","gsap","styledComponents"],
+        
+        demo:"https://agency-website-eta.vercel.app/",
+        github:"https://github.com/codebucks27/Agency-website"
+    },
+    {
+        id:2,
+        name:"Job listing website",
+        description:"A Job listing website build in ReactJS. With searching and filtering functionalities.",
+        tags:["react","sass"],
+        
+        demo:"http://react-job-listing-website.codebucks27.vercel.app/",
+        github:"https://github.com/codebucks27/react-job-listing-website"
+        
+    },
+    {
+        id:3,
+        name:"Dev.to Clone",
+        description:"A clone of Dev.to build using ReactJS. With realtime fetching of articles from dev.to using API.",
+        tags:["react","api","sass"],
+        
+        demo:"http://devto-clone-codebucks27.vercel.app/",
+        github:"https://github.com/codebucks27/devto-clone"
+    },
+    {
+        id:4,
+        name:"Sidebar Menu",
+        description:"A cool looking sidebar menu build using ReactJS and styledComponents.It has really smooth animations.",
+        tags:["react","styledComponents","react-router"],
+        
+        demo:"https://react-sidebar.vercel.app/",
+        github:"https://github.com/codebucks27/react-sidebar"
+       
+    },{
+        id:5,
+        name:"Todo App(React + Redux)",
+        description:"A todo app build using Redux-toolkit and framer-motion for smooth animations.",
+        tags:["react","redux","framer-motion"],
+        
+        demo:"http://react-redux-todo-app-git-main-codebucks27.vercel.app/",
+        github:"https://github.com/codebucks27/React-Redux-Todo-App"
+        
+    },
+    {
+        id:6,
+        name:"Responsive Navigation Menu",
+        description:"A reponsive navbar menu component in ReactJS with react-router functionalities. Built from scratch.",
+        tags:["react","react-router","css"],
+        
+        demo:"http://react-responsive-navbar-codebucks27.vercel.app/",
+        github:"https://github.com/codebucks27/React-responsive-navbar"
+        
+    },
+    
+  
+] 
--- a/src/globalStyles.js
+++ b/src/globalStyles.js
@ -0,0 +1,26 @@
+import { createGlobalStyle } from "styled-components";
+
+
+
+
+const GlobalStyle = createGlobalStyle`
+
+*,*::before,*::after,h1,h2,h3,h4,h5,h6{
+    margin: 0;
+    padding: 0;
+}
+h1,h2,h3,h4,h5,h6{
+    display: inline-block;
+}
+
+
+body{
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+    font-family: 'Source Sans Pro',sans-serif;
+}
+
+`
+
+export default GlobalStyle;
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,30 @@
+import React from 'react'
+import App from './App'
+// import reportWebVitals from './reportWebVitals';
+// import '../node_modules/normalize.css'
+import "normalize.css"
+import { createRoot } from 'react-dom/client';
+
+import { BrowserRouter } from 'react-router-dom'
+
+
+// From react 18 we should use createRoot instead of ReactDOM
+const container = document.getElementById('root');
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(<BrowserRouter>
+  <App />
+</BrowserRouter>);
+
+// ReactDOM.render(
+//   <React.StrictMode>
+//     <BrowserRouter>
+//       <App />
+//     </BrowserRouter>
+//   </React.StrictMode>,
+//   document.getElementById('root')
+// )
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+// reportWebVitals();
--- a/src/logo.svg
+++ b/src/logo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
--- a/src/setupTests.js
+++ b/src/setupTests.js
@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
--- a/src/subComponents/Anchor.js
+++ b/src/subComponents/Anchor.js
@ -0,0 +1,86 @@
+import React, { useEffect, useRef } from 'react'
+import styled from 'styled-components'
+import { Anchor, Link } from '../components/AllSvgs'
+
+const Container = styled.div`
+position: relative;
+`
+const Slider = styled.div`
+position: fixed;
+top: 0;
+right: 2rem;
+display: flex;
+justify-content: center;
+align-items: center;
+flex-direction: column;
+transform: translateY(-100%);
+
+.chain{
+transform: rotate(135deg);
+
+}
+
+`
+
+const PreDisplay = styled.div`
+position: absolute;
+top:0;
+right: 2rem;
+`
+
+
+const AnchorComponent = (props) => {
+
+    const ref = useRef(null);
+    const hiddenRef = useRef(null);
+
+    useEffect(() => {
+        
+        const handleScroll = () => {
+
+            let scrollPosition = window.pageYOffset;
+            let windowSize = window.innerHeight;
+            let bodyHeight = document.body.offsetHeight;
+            
+            let diff = Math.max(bodyHeight - (scrollPosition + windowSize) )
+            //diff*100/scrollposition
+            let diffP = (diff * 100) / (bodyHeight - windowSize);
+
+            ref.current.style.transform = `translateY(${-diffP}%)`
+
+            if(window.pageYOffset > 5){
+                hiddenRef.current.style.display = 'none'
+            }else{
+                hiddenRef.current.style.display = 'block'
+
+            }
+        }
+
+        window.addEventListener('scroll', handleScroll)
+
+        return () =>  window.removeEventListener('scroll', handleScroll)
+
+
+    }, [])
+
+
+
+    return (
+        <Container>
+        <PreDisplay ref={hiddenRef} className='hidden'>
+    
+        <Anchor width={70} height={70} fill='currentColor'/>
+    </PreDisplay>
+            <Slider ref={ref}>
+                {
+                    [...Array(props.number)].map((x,id) => {
+                        return <Link key={id} width={25} height={25} fill='currentColor' className="chain" />
+                    })
+                }
+                <Anchor width={70} height={70} fill='currentColor'/>
+            </Slider>
+        </Container>
+    )
+}
+
+export default AnchorComponent
--- a/src/subComponents/BigTitlte.js
+++ b/src/subComponents/BigTitlte.js
@ -0,0 +1,25 @@
+import React from 'react'
+import styled from 'styled-components'
+
+
+const Text = styled.h1`
+position: fixed;
+top: ${props => props.top};
+left: ${props => props.left};
+right: ${props => props.right};
+color:${props => `rgba(${props.theme.textRgba},0.1)`};
+font-size: calc(5rem + 5vw);
+z-index:0;
+
+`
+
+
+const BigTitlte = (props) => {
+    return (
+        <Text  top={props.top}  left={props.left}  right={props.right}>
+            {props.text}
+        </Text>
+    )
+}
+
+export default BigTitlte
--- a/src/subComponents/Card.js
+++ b/src/subComponents/Card.js
@ -0,0 +1,127 @@
+import { motion } from 'framer-motion';
+import React from 'react'
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+import { Github } from '../components/AllSvgs';
+
+
+
+const Box = styled(motion.li)`
+width: 16rem;
+height: 40vh;
+background-color: ${props => props.theme.text};
+color:${props => props.theme.body};
+padding: 1.5rem 2rem;
+margin-right: 8rem;
+border-radius: 0 50px 0 50px;
+display: flex;
+flex-direction: column;
+justify-content: space-between;
+border: 1px solid ${props => props.theme.body};
+transition: all 0.2s ease;
+
+&:hover{
+background-color: ${props => props.theme.body};
+color:${props => props.theme.text};
+border: 1px solid ${props => props.theme.text};
+
+}
+`
+const Title = styled.h2`
+font-size: calc(1em + 0.5vw);
+`
+
+const Description = styled.h2`
+font-size: calc(0.8em + 0.3vw);
+font-family: 'Karla',sans-serif;
+font-weight: 500;
+`
+const Tags = styled.div`
+border-top: 2px solid ${props =>props.theme.body};
+padding-top: 0.5rem;
+display:flex;
+flex-wrap:wrap;
+${Box}:hover &{
+border-top: 2px solid ${props =>props.theme.text};
+}
+`
+const Tag = styled.span`
+margin-right:1rem;
+font-size:calc(0.8em + 0.3vw);
+`
+
+const Footer = styled.footer`
+display: flex;
+justify-content: space-between;
+`
+
+const Link = styled.a`
+background-color: ${props =>props.theme.body};
+color: ${props =>props.theme.text};
+text-decoration: none;
+padding:0.5rem calc(2rem + 2vw);
+border-radius: 0 0 0 50px;
+font-size:calc(1em + 0.5vw);
+
+${Box}:hover &{
+    background-color: ${props =>props.theme.text};
+    color: ${props =>props.theme.body};
+
+}
+`
+
+const Git = styled.a`
+color: inherit;
+text-decoration: none;
+${Box}:hover &{
+    &>*{
+        fill:${props =>props.theme.text};
+    }
+}
+
+`
+
+// Framer motion configuration
+const Item = {
+    hidden:{
+        scale:0
+    },
+    show:{
+        scale:1,
+        transition: {
+            type: 'spring',
+            duration: 0.5
+        }
+    }
+}
+
+const Card = (props) => {
+
+    const {id, name, description, tags, demo, github} = props.data;
+
+    return (
+        <Box key={id} variants={Item}>
+            <Title>{name}</Title>
+            <Description>
+                {description}
+            </Description>
+            <Tags>
+            {
+                    tags.map((t,id) => {
+                        return <Tag key={id}>#{t}</Tag>
+                    })
+                }
+            </Tags>
+            <Footer>
+                <Link href={demo} target="_blank">
+                    Visit
+                </Link>
+                <Git  href={github}  target="_blank">
+                    <Github width={30} height={30} />
+                </Git>
+            </Footer>
+        </Box>
+    )
+}
+
+export default Card
--- a/src/subComponents/LogoComponent.js
+++ b/src/subComponents/LogoComponent.js
@ -0,0 +1,27 @@
+import React from 'react'
+import styled from 'styled-components'
+import { DarkTheme } from '../components/Themes'
+
+
+
+
+const Logo = styled.h1`
+display: inline-block;
+color: ${props => props.color === 'dark' ? DarkTheme.text : DarkTheme.body};
+font-family: 'Pacifico',cursive;
+
+position: fixed;
+left: 2rem;
+top: 2rem;
+z-index:3;
+`
+
+const LogoComponent = (props) => {
+    return (
+        <Logo color={props.theme}>
+          DSO
+        </Logo>
+    )
+}
+
+export default LogoComponent
--- a/src/subComponents/ParticleComponent.js
+++ b/src/subComponents/ParticleComponent.js
@ -0,0 +1,37 @@
+import styled from "styled-components";
+import ConfigDark from "../config/particlesjs-config.json";
+import ConfigLight from "../config/particlesjs-config-light.json";
+
+// import Particles from "react-particles-js"
+import Particles from "react-tsparticles";
+import { loadFull } from "tsparticles";
+
+const Box = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 0;
+`;
+
+const ParticlesComponent = (props) => {
+// This is new implementation where I have used react-tsparticles instead of react-particles-js
+  const particlesInit = async (main) => {
+    await loadFull(main);
+  };
+
+
+  return (
+    <Box>
+      <Particles
+        id="tsparticles"
+        style={{ position: "absolute", top: 0 }}
+        params={props.theme === "light" ? ConfigLight : ConfigDark}
+        init={particlesInit} 
+      />
+    </Box>
+  );
+};
+
+export default ParticlesComponent;
--- a/src/subComponents/PowerButton.js
+++ b/src/subComponents/PowerButton.js
@ -0,0 +1,50 @@
+// Home button
+
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+import styled from 'styled-components'
+import { PowerBtn } from '../components/AllSvgs'
+
+
+const Power = styled.button`
+position: fixed;
+top: 2rem;
+left: 50%;
+transform: translate(-50%, 0);
+
+background-color: #FCF6F4;
+padding: 0.3rem;
+border-radius: 50%;
+border: 1px solid #000;
+width: 2.5rem;
+height: 2.5rem;
+
+display: flex;
+justify-content: center;
+align-items:center;
+z-index:3;
+
+cursor: pointer;
+
+&:hover{
+    background-color: rgba(0,255,0,0.4);
+    box-shadow: 0 0 8px 6px rgba(0,255,0,0.2);
+}
+
+&>*:first-child{
+    text-decoration: none;
+    color: inherit;
+}
+`
+
+const PowerButton = () => {
+    return (
+        <Power>
+        <NavLink to="/">
+        <PowerBtn width={30} height={30} fill='currentColor' />
+        </NavLink>
+        </Power>
+    )
+}
+
+export default PowerButton
--- a/src/subComponents/SocialIcons.js
+++ b/src/subComponents/SocialIcons.js
@ -0,0 +1,121 @@
+import { motion } from "framer-motion";
+import React from "react";
+// import { NavLink } from 'react-router-dom'
+import styled from "styled-components";
+import { Facebook, Github, Twitter, YouTube } from "../components/AllSvgs";
+import { DarkTheme } from "../components/Themes";
+
+const Icons = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  position: fixed;
+  bottom: 0;
+  left: 2rem;
+
+  z-index: 3;
+
+  & > *:not(:last-child) {
+    margin: 0.5rem 0;
+  }
+`;
+
+const Line = styled(motion.span)`
+  width: 2px;
+  height: 8rem;
+  background-color: ${(props) =>
+    props.color === "dark" ? DarkTheme.text : DarkTheme.body};
+`;
+
+const SocialIcons = (props) => {
+  return (
+    <Icons>
+      <motion.div
+        initial={{scale:0 }}
+        animate={{ scale: [0, 1, 1.5, 1] }}
+        transition={{ type: "spring", duration: 1, delay: 1 }}
+      >
+        <a
+          style={{ color: "inherit" }}
+          target="_blank"
+          href={"https://git.klxhub.com/thanapat.t"}
+        >
+          <Github
+            width={25}
+            height={25}
+            fill={props.theme === "dark" ? DarkTheme.text : DarkTheme.body}
+          />
+        </a>
+      </motion.div>
+      <motion.div
+        initial={{scale:0 }}
+        animate={{ scale: [0, 1, 1.5, 1] }}
+        transition={{ type: "spring", duration: 1, delay: 1.2 }}
+      >
+        <a
+          style={{ color: "inherit" }}
+          target="_blank"
+          href={"https://x.com/NarukCatty"}
+        >
+          <Twitter
+            width={25}
+            height={25}
+            fill={props.theme === "dark" ? DarkTheme.text : DarkTheme.body}
+          />
+        </a>
+      </motion.div>
+      <motion.div
+        initial={{scale:0 }}
+        animate={{ scale: [0, 1, 1.5, 1] }}
+        transition={{ type: "spring", duration: 1, delay: 1.4 }}
+      >
+        <a
+          style={{ color: "inherit" }}
+          target="_blank"
+          href={"https://www.facebook.com/thanapat.taweerat"}
+        >
+          <Facebook
+            width={25}
+            height={25}
+            fill={props.theme === "dark" ? DarkTheme.text : DarkTheme.body}
+          />
+        </a>
+      </motion.div>
+      <motion.div
+        initial={{scale:0 }}
+        animate={{ scale: [0, 1, 1.5, 1] }}
+        transition={{ type: "spring", duration: 1, delay: 1.6 }}
+      >
+        <a
+          style={{ color: "inherit" }}
+          target="_blank"
+          href={"https://www.youtube.com/@klxhuntz"}
+        >
+          <YouTube
+            width={25}
+            height={25}
+            fill={props.theme === "dark" ? DarkTheme.text : DarkTheme.body}
+          />
+        </a>
+      </motion.div>
+
+      <Line
+        color={props.theme}
+        initial={{
+          height: 0,
+        }}
+        animate={{
+          height: "8rem",
+        }}
+        transition={{
+          type: "spring",
+          duration: 1,
+          delay: 0.8,
+        }}
+      />
+    </Icons>
+  );
+};
+
+export default SocialIcons;
--- a/src/subComponents/SoundBar.js
+++ b/src/subComponents/SoundBar.js
@ -0,0 +1,81 @@
+import React, { useRef, useState } from 'react'
+import styled, { keyframes } from 'styled-components'
+
+import music from "../assets/audio/u-said-it-v13-1167.mp3"
+
+const Box = styled.div`
+display:flex;
+cursor:pointer;
+position:fixed;
+left:8rem;
+top:3rem;
+z-index:10;
+
+&>*:nth-child(1){
+    animation-delay: 0.2s;
+}
+&>*:nth-child(2){
+    animation-delay: 0.3s;
+}
+&>*:nth-child(3){
+    animation-delay: 0.4s;
+}
+&>*:nth-child(4){
+    animation-delay: 0.5s;
+}
+&>*:nth-child(5){
+    animation-delay: 0.8s;
+}
+`
+
+const play = keyframes`
+0%{
+    transform:scaleY(1);
+}
+50%{
+    transform:scaleY(2);
+}
+100%{
+    transform:scaleY(1);
+}
+`
+const Line = styled.span`
+background: ${props => props.theme.text};
+border: 1px solid ${props => props.theme.body};
+
+animation:${play} 1s ease infinite;
+animation-play-state: ${props => props.click ? "running" : "paused"};
+height: 1rem;
+width: 2px;
+margin:0 0.1rem
+`
+
+const SoundBar = () => {
+
+    const ref = useRef(null);
+    const [click, setClick] = useState(false);
+
+    const handleClick = () => {
+        setClick(!click);
+
+        if(!click){
+            ref.current.play();
+        }else{
+            ref.current.pause();
+        }
+    }
+    return (
+        <Box onClick={() => handleClick()}>
+            <Line click={click}/>
+            <Line click={click}/>
+            <Line click={click}/>
+            <Line click={click}/>
+            <Line click={click}/>
+
+
+            <audio src={music} ref={ref}  loop />
+        </Box>
+    )
+}
+
+export default SoundBar
--- a/static/js/main.07676de3.js.map
+++ b/static/js/main.07676de3.js.map
				`@ -0,0 +1 @@`
				<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="anchor" class="svg-inline--fa fa-anchor fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M12.971 352h32.394C67.172 454.735 181.944 512 288 512c106.229 0 220.853-57.38 242.635-160h32.394c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0l-67.029 67.029c-7.56 7.56-2.206 20.485 8.485 20.485h35.146c-20.29 54.317-84.963 86.588-144.117 94.015V256h52c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-52v-5.47c37.281-13.178 63.995-48.725 64-90.518C384.005 43.772 341.605.738 289.37.01 235.723-.739 192 42.525 192 96c0 41.798 26.716 77.35 64 90.53V192h-52c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h52v190.015c-58.936-7.399-123.82-39.679-144.117-94.015h35.146c10.691 0 16.045-12.926 8.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971 0L4.485 331.515C-3.074 339.074 2.28 352 12.971 352zM288 64c17.645 0 32 14.355 32 32s-14.355 32-32 32-32-14.355-32-32 14.355-32 32-32z"></path></svg>
				`@ -0,0 +1 @@`
				`<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook" class="svg-inline--fa fa-facebook fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg>`
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>