├── .DS_Store ├── .github └── workflows │ └── codeql-analysis.yml ├── .gitignore ├── LICENSE ├── README.md ├── SECURITY.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── Screenshot_Template.png ├── favicon.ico ├── index.html ├── manifest.json └── robots.txt ├── src ├── .DS_Store ├── App.tsx ├── assets │ ├── .DS_Store │ ├── icons │ │ ├── JSIcon.png │ │ └── TSIcon.png │ └── logos │ │ ├── DockerLogo.png │ │ ├── FirebaseLogo.png │ │ ├── GitLogo.png │ │ ├── JsLogo.png │ │ ├── KaggleLogo.png │ │ ├── LinkedinLogo.png │ │ ├── MailLogo.png │ │ ├── MongoDBLogo.png │ │ ├── NextLogo.png │ │ ├── NodeJSLogo.png │ │ ├── PythonLogo.png │ │ ├── ReactLogo.png │ │ ├── ReduxLogo.png │ │ ├── SqlLogo.png │ │ ├── TailwindLogo.png │ │ └── TypescriptLogo.png ├── components │ ├── Header.tsx │ ├── List.tsx │ ├── MobileMenu.tsx │ ├── NavBar.tsx │ └── SideBar.tsx ├── index.css ├── index.tsx └── pages │ ├── About.tsx │ ├── Contact.tsx │ ├── Home.tsx │ └── Resume.tsx ├── tailwind.config.js └── tsconfig.json /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/.DS_Store -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ master ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ master ] 20 | schedule: 21 | - cron: '40 0 * * 4' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] 37 | # Learn more about CodeQL language support at https://git.io/codeql-language-support 38 | 39 | steps: 40 | - name: Checkout repository 41 | uses: actions/checkout@v2 42 | 43 | # Initializes the CodeQL tools for scanning. 44 | - name: Initialize CodeQL 45 | uses: github/codeql-action/init@v1 46 | with: 47 | languages: ${{ matrix.language }} 48 | # If you wish to specify custom queries, you can do so here or in a config file. 49 | # By default, queries listed here will override any specified in a config file. 50 | # Prefix the list here with "+" to use these queries and those in the config file. 51 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 52 | 53 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 54 | # If this step fails, then you should remove it and run the build manually (see below) 55 | - name: Autobuild 56 | uses: github/codeql-action/autobuild@v1 57 | 58 | # ℹ️ Command-line programs to run using the OS shell. 59 | # 📚 https://git.io/JvXDl 60 | 61 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 62 | # and modify them (or add more) to build your code if your project 63 | # uses a compiled language 64 | 65 | #- run: | 66 | # make bootstrap 67 | # make release 68 | 69 | - name: Perform CodeQL Analysis 70 | uses: github/codeql-action/analyze@v1 71 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | 4 | build -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Youssef Kizou 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # A clean, beautiful and responsive portfolio template Based On VSCode Theme! 2 | 3 | ![Template Screenshot](/public/Screenshot_Template.png?raw=true "Screenshot-template") 4 | 5 | 6 | 7 | To view a live example, click here. 8 | 9 | Feel free to use it as-is or customize it as much as you want. 10 | 11 | If you want to contribute and make this much better for other developers, have a look at Issues. 12 | 13 | If you created something awesome and want to contribute, then feel free to open a pull request. 14 | 15 | 16 | ## Features 17 | 22 | 23 | ## Sections 24 | ✔️ Home ✔️ About ✔️ Resume ✔️ Contact 25 | 26 | ## How To Use 27 | From your command line, clone and run VSCode_Template: 28 | 29 | ``` 30 | # Clone this repository 31 | $ git clone https://github.com/YKizou/VSCode_Template 32 | 33 | # Go into the repository 34 | $ cd VSCode_Template 35 | 36 | # Install dependencies 37 | $ npm i 38 | 39 | # Run Project 40 | $ npm run start 41 | ``` 42 | 43 | 44 | ## Deployment 45 | When you are done with the setup, you should host your website online. We highly recommend to read through the Deploying on Github Pages docs for React. 46 | 47 | ## Technologies Used 48 | 52 | 53 | ## Thanks 54 | If you like this portfolio template, don't forget to give it a ⭐ and also share it with me here. 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | Tell them where to go, how often they can expect to get an update on a 20 | reported vulnerability, what to expect if the vulnerability is accepted or 21 | declined, etc. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kizou", 3 | "version": "0.1.0", 4 | "homepage": "http://kizou.org", 5 | "private": true, 6 | "dependencies": { 7 | "@headlessui/react": "^1.5.0", 8 | "@heroicons/react": "^1.0.5", 9 | "@types/node": "^20.11.25", 10 | "@types/react": "^18.2.64", 11 | "@types/react-dom": "^18.2.21", 12 | "@typescript-eslint/eslint-plugin": "^7.1.1", 13 | "@typescript-eslint/parser": "^7.1.1", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2", 16 | "react-router-dom": "^6.1.1", 17 | "react-scripts": "^5.0.1", 18 | "typescript": "^3.2.1" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "autoprefixer": "^10.4.0", 43 | "postcss": "^8.4.5", 44 | "tailwind-styled-components": "^2.2.0", 45 | "tailwindcss": "^3.0.6" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/Screenshot_Template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/public/Screenshot_Template.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 26 | Youssef KIZOU 27 | 28 | 29 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/.DS_Store -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, {useEffect} from 'react'; 2 | import { BrowserRouter,Route, Routes } from 'react-router-dom'; 3 | import Home from './pages/Home'; 4 | 5 | 6 | function App() { 7 | 8 | useEffect(() => { 9 | const existingWidth = localStorage.getItem("sideBarWidth"); 10 | 11 | if (!existingWidth) { 12 | localStorage.setItem("sideBarWidth", "270"); 13 | } 14 | 15 | }, []); 16 | 17 | return ( 18 | 19 | 20 | }> 21 | 22 | 23 | 24 | 25 | ); 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /src/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/.DS_Store -------------------------------------------------------------------------------- /src/assets/icons/JSIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/icons/JSIcon.png -------------------------------------------------------------------------------- /src/assets/icons/TSIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/icons/TSIcon.png -------------------------------------------------------------------------------- /src/assets/logos/DockerLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/DockerLogo.png -------------------------------------------------------------------------------- /src/assets/logos/FirebaseLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/FirebaseLogo.png -------------------------------------------------------------------------------- /src/assets/logos/GitLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/GitLogo.png -------------------------------------------------------------------------------- /src/assets/logos/JsLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/JsLogo.png -------------------------------------------------------------------------------- /src/assets/logos/KaggleLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/KaggleLogo.png -------------------------------------------------------------------------------- /src/assets/logos/LinkedinLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/LinkedinLogo.png -------------------------------------------------------------------------------- /src/assets/logos/MailLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/MailLogo.png -------------------------------------------------------------------------------- /src/assets/logos/MongoDBLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/MongoDBLogo.png -------------------------------------------------------------------------------- /src/assets/logos/NextLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/NextLogo.png -------------------------------------------------------------------------------- /src/assets/logos/NodeJSLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/NodeJSLogo.png -------------------------------------------------------------------------------- /src/assets/logos/PythonLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/PythonLogo.png -------------------------------------------------------------------------------- /src/assets/logos/ReactLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/ReactLogo.png -------------------------------------------------------------------------------- /src/assets/logos/ReduxLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/ReduxLogo.png -------------------------------------------------------------------------------- /src/assets/logos/SqlLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/SqlLogo.png -------------------------------------------------------------------------------- /src/assets/logos/TailwindLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/TailwindLogo.png -------------------------------------------------------------------------------- /src/assets/logos/TypescriptLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YKizou/VSCode_Template/10fe77b8619f2991bc38a691b7d2853c98253112/src/assets/logos/TypescriptLogo.png -------------------------------------------------------------------------------- /src/components/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Header() { 4 | return ( 5 | 16 | ); 17 | } 18 | 19 | export default Header; 20 | -------------------------------------------------------------------------------- /src/components/List.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const List = ({ list }) => { 4 | return ( 5 |
6 | {list && 7 | list.map((item, index) => ( 8 |
9 | {item.name} 14 | {item.name} 15 |
16 | ))} 17 |
18 | ); 19 | }; 20 | 21 | export default List; 22 | -------------------------------------------------------------------------------- /src/components/MobileMenu.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { 3 | MenuIcon, 4 | XIcon, 5 | ChevronDownIcon, 6 | ChevronRightIcon, 7 | } from "@heroicons/react/solid"; 8 | import { Disclosure, Transition } from "@headlessui/react"; 9 | 10 | const JSIcon = require("../assets/icons/JSIcon.png"); 11 | const TSIcon = require("../assets/icons/TSIcon.png"); 12 | 13 | const MobileMenu = () => { 14 | const projects = [ 15 | { 16 | name: "First Project", 17 | href: "#", 18 | icon: JS Icon, 23 | current: true, 24 | }, 25 | { 26 | name: "Second Project", 27 | href: "#", 28 | icon: TS Icon, 33 | current: false, 34 | }, 35 | { 36 | name: "Third Project", 37 | href: "#", 38 | icon: JS Icon, 43 | current: false, 44 | }, 45 | { 46 | name: "Fourth Project", 47 | href: "#", 48 | icon: JS Icon, 53 | current: false, 54 | }, 55 | ]; 56 | function classNames(...classes) { 57 | return classes.filter(Boolean).join(" "); 58 | } 59 | const [showProjectsList, SetShowProjectsList] = useState(true); 60 | 61 | return ( 62 | 63 | {({ open }) => ( 64 | <> 65 | 66 | {open ? ( 67 | 72 | 80 | 81 | 82 |
SetShowProjectsList(!showProjectsList)} 85 | > 86 | {showProjectsList ? ( 87 | 88 | ) : ( 89 | 90 | )} 91 | Projects : 92 |
93 | {showProjectsList 94 | ? projects.map((item) => ( 95 | 107 |
108 | {item.icon} 109 | {item.name} 110 |
111 | 112 | )) 113 | : null} 114 | 115 | 116 | 117 | 118 | )} 119 | 120 | ); 121 | }; 122 | 123 | export default MobileMenu; 124 | -------------------------------------------------------------------------------- /src/components/NavBar.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import tw from "tailwind-styled-components"; 3 | import { XIcon } from "@heroicons/react/solid"; 4 | 5 | const TSIcon = require("../assets/icons/TSIcon.png"); 6 | 7 | const Container = tw.div` 8 | h-full 9 | flex 10 | items-center 11 | justify-center 12 | px-4 13 | text-white 14 | hover:bg-[#1e1e1e] 15 | hover:text-yellow_vs 16 | cursor-pointer 17 | text-lg 18 | font-medium 19 | text-gray-300 20 | `; 21 | 22 | interface Props { 23 | activeTab: string; 24 | setActiveTab: React.Dispatch>; 25 | } 26 | 27 | const NavBar: React.FC = ({ activeTab, setActiveTab }) => { 28 | const [closedTabs, setClosedTabs] = useState([]); 29 | 30 | return ( 31 |
32 | { 39 | setActiveTab("home"); 40 | }} 41 | > 42 | JS Icon 43 | Home.ts 44 | 45 | 46 | {closedTabs.includes("about") ? null : ( 47 | 73 | )} 74 | 75 | {closedTabs.includes("resume") ? null : ( 76 | { 83 | setActiveTab("resume"); 84 | }} 85 | > 86 | JS Icon 91 | Resume.ts 92 | { 95 | e.stopPropagation(); 96 | setActiveTab("home"); 97 | setClosedTabs((prevState) => [...prevState, "resume"]); 98 | }} 99 | /> 100 | 101 | )} 102 | 103 | {closedTabs.includes("contact") ? null : ( 104 | { 111 | setActiveTab("contact"); 112 | }} 113 | > 114 | JS Icon 115 | Contact.ts 116 | { 119 | e.stopPropagation(); 120 | setActiveTab("home"); 121 | setClosedTabs((prevState) => [...prevState, "contact"]); 122 | }} 123 | /> 124 | 125 | )} 126 |
127 | ); 128 | }; 129 | export default NavBar; 130 | -------------------------------------------------------------------------------- /src/components/SideBar.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/solid"; 3 | 4 | const GitLogo = require("../assets/logos/GitLogo.png"); 5 | const LinkedinLogo = require("../assets/logos/LinkedinLogo.png"); 6 | const KaggleLogo = require("../assets/logos/KaggleLogo.png"); 7 | const MailLogo = require("../assets/logos/MailLogo.png"); 8 | 9 | const JSIcon = require("../assets/icons/JSIcon.png"); 10 | const TSIcon = require("../assets/icons/TSIcon.png"); 11 | 12 | const SideBar = ({ 13 | setWidth, 14 | width, 15 | }: { 16 | setWidth: React.Dispatch>; 17 | width: number; 18 | }) => { 19 | const [showWebList, SetShowWebList] = useState(true); 20 | const [showProjectsList, SetShowProjectsList] = useState(true); 21 | 22 | const startResizing = (mouseDownEvent: React.MouseEvent) => { 23 | const handleMouseMove = (mouseMoveEvent: MouseEvent) => { 24 | const delta = mouseMoveEvent.clientX - mouseDownEvent.clientX; 25 | const newWidth = Math.max(170, mouseDownEvent.clientX + delta); 26 | setWidth(newWidth); 27 | }; 28 | 29 | const handleMouseUp = () => { 30 | window.removeEventListener("mousemove", handleMouseMove); 31 | window.removeEventListener("mouseup", handleMouseUp); 32 | }; 33 | 34 | window.addEventListener("mousemove", handleMouseMove); 35 | window.addEventListener("mouseup", handleMouseUp); 36 | }; 37 | 38 | useEffect(() => { 39 | const savedWidth = localStorage.getItem("sideBarWidth"); 40 | if (savedWidth) { 41 | setWidth(parseInt(savedWidth)); 42 | } 43 | }, [setWidth]); 44 | 45 | return ( 46 |
47 |
48 |
49 |
SetShowProjectsList(!showProjectsList)} 52 | > 53 | {showProjectsList ? ( 54 | 55 | ) : ( 56 | 57 | )} 58 |

Projects

59 |
60 | {showProjectsList ? ( 61 | <> 62 |
SetShowWebList(!showWebList)} 65 | > 66 | {showWebList ? ( 67 | 68 | ) : ( 69 | 70 | )} 71 | 72 |

Web

73 |
74 | {showWebList ? : null} 75 | 76 | ) : null} 77 |
78 | 108 |
109 |
110 |
111 |
115 |
116 | ); 117 | }; 118 | 119 | export default SideBar; 120 | 121 | const WebList = () => ( 122 |
123 | 124 |
125 | JS Icon 130 |

First Project

131 |
132 | 133 | 134 |
135 | TS Icon 140 |

Second Project

141 |
142 | 143 | 144 |
145 | JS Icon 150 |

Third Project

151 |
152 | 153 | 154 |
155 | JS Icon 160 |

Fourth Project

161 |
162 | 163 |
164 | ); 165 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | body { 6 | background-color: #1e1e1e; 7 | } -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /src/pages/About.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IdentificationIcon } from "@heroicons/react/solid"; 3 | import List from "../components/List"; 4 | 5 | const PythonLogo = require("../assets/logos/PythonLogo.png"); 6 | const ReactLogo = require("../assets/logos/ReactLogo.png"); 7 | const TypescriptLogo = require("../assets/logos/TypescriptLogo.png"); 8 | const JsLogo = require("../assets/logos/JsLogo.png"); 9 | const NextLogo = require("../assets/logos/NextLogo.png"); 10 | const TailwindLogo = require("../assets/logos/TailwindLogo.png"); 11 | const SqlLogo = require("../assets/logos/SqlLogo.png"); 12 | const ReduxLogo = require("../assets/logos/ReduxLogo.png"); 13 | const FirebaseLogo = require("../assets/logos/FirebaseLogo.png"); 14 | const MongoDBLogo = require("../assets/logos/MongoDBLogo.png"); 15 | const NodeJSLogo = require("../assets/logos/NodeJSLogo.png"); 16 | const DockerLogo = require("../assets/logos/DockerLogo.png"); 17 | 18 | const skills = [ 19 | { name: "JavaScript (ES6+)", logo: JsLogo }, 20 | { name: "Next.js", logo: NextLogo }, 21 | { name: "React", logo: ReactLogo }, 22 | { name: "TypeScript", logo: TypescriptLogo }, 23 | { name: "Tailwind CSS", logo: TailwindLogo }, 24 | { name: "Redux", logo: ReduxLogo }, 25 | { name: "Python", logo: PythonLogo }, 26 | { name: "Firebase", logo: FirebaseLogo }, 27 | { name: "Nodejs", logo: NodeJSLogo }, 28 | { name: "SQL", logo: SqlLogo }, 29 | { name: "MongoDB", logo: MongoDBLogo }, 30 | { name: "Docker", logo: DockerLogo }, 31 | ]; 32 | 33 | const About = () => { 34 | return ( 35 |
39 |
40 |
41 | {" "} 42 | 43 | About Me 44 | 45 |
46 |
47 |
48 | 49 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id eros 50 | non nisi vulputate eleifend. Vestibulum erat ipsum, lacinia ut nibh 51 | ut, pulvinar interdum lorem. Aliquam et nisi eu risus ultrices 52 | suscipit nec nec quam. Suspendisse pretium fermentum luctus. 53 | Maecenas vitae vestibulum ipsum, ut varius diam. Phasellus mattis 54 | nunc vel purus maximus, sit amet congue ligula tincidunt. Nulla 55 | tristique luctus lacinia. Nullam ut tortor arcu. 56 | 57 |
58 |
59 | Aenean in mi non leo placerat suscipit a eget odio: 60 | 61 |
62 |
63 |
64 | ); 65 | }; 66 | 67 | export default About; 68 | -------------------------------------------------------------------------------- /src/pages/Contact.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MailIcon } from "@heroicons/react/solid"; 3 | 4 | const Contact = () => { 5 | return ( 6 |
7 |
8 | 9 | 10 | Get In Touch 11 | 12 |
13 |
14 |
15 | 16 | Currently looking for a new opportunity, you can contact me by 17 | clicking on the button below.
18 | Whether you have a question or just want to say hi, feel free to 19 | contact me and I’ll try my best to get back to you! 20 | 21 | 26 |
27 |
28 | ); 29 | }; 30 | 31 | export default Contact; 32 | -------------------------------------------------------------------------------- /src/pages/Home.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import About from "./About"; 3 | import Contact from "./Contact"; 4 | import SideBar from "../components/SideBar"; 5 | import Resume from "./Resume"; 6 | import MobileMenu from "../components/MobileMenu"; 7 | import Header from "../components/Header"; 8 | import NavBar from "../components/NavBar"; 9 | 10 | const Home = () => { 11 | const [activeTab, setActiveTab] = useState("home"); 12 | const [sidebarWidth, setSidebarWidth] = useState(270); // Default width 13 | 14 | useEffect(() => { 15 | const savedWidth = localStorage.getItem("sideBarWidth"); 16 | if (savedWidth) { 17 | setSidebarWidth(parseInt(savedWidth)); 18 | } 19 | }, []); 20 | 21 | useEffect(() => { 22 | localStorage.setItem("sideBarWidth", sidebarWidth.toString()); 23 | }, [sidebarWidth]); 24 | 25 | return ( 26 |
27 |
31 | 32 |
33 |
34 |
35 | 36 |
37 |
41 | 42 |
43 | {activeTab === "home" && ( 44 |
45 |
46 | 47 | 48 | 49 |
50 | )} 51 | {activeTab === "about" &&
} 52 | {activeTab === "resume" &&
} 53 | {activeTab === "contact" &&
} 54 |
55 |
56 | ); 57 | }; 58 | 59 | export default Home; 60 | -------------------------------------------------------------------------------- /src/pages/Resume.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ClipboardListIcon } from "@heroicons/react/solid"; 3 | 4 | const Resume = () => { 5 | return ( 6 |
10 |
11 |
12 | {" "} 13 | 14 | Resume 15 | 16 |
17 |
18 |
19 |
20 |
21 |
22 | Education 23 |
24 |
25 | Lorem Ipsum 26 |
27 | 28 | Masters in Information technology 29 | 30 |
31 | 32 | • Sept 2014 - July 2017 33 | 34 |
35 |
36 |
37 |
38 | Work 39 |
40 |
41 | Lorem Ipsum 42 |
43 | 44 | Lorem - Paris, France{" "} 45 | 46 |
47 | • July 2017 - Present 48 |
49 | 50 |
• Lorem ipsum dolor sit amet, consectetur adipiscing elit. 51 |
• Sed id eros non nisi vulputate eleifend. Vestibulum erat 52 | ipsum, lacinia ut nibh ut, pulvinar interdum lorem. 53 |
• Aliquam et nisi eu risus ultrices suscipit nec nec quam. 54 |
• Suspendisse pretium fermentum luctus. 55 |
• Maecenas vitae vestibulum ipsum, ut varius diam. 56 |
• Phasellus mattis nunc vel purus maximus. 57 | 58 |
59 |
60 |
61 |
62 | Skills 63 |
64 |
65 | 66 |
• Nulla tristique luctus lacinia. Nullam ut tortor arcu. 67 |
• Aenean in mi non leo placerat suscipit a eget odio. 68 |
• Vivamus et dolor odio. 69 |
• Suspendisse tempus interdum eros, et bibendum massa tempus 70 | vitae. 71 |
• Sed in aliquam ligula. Sed eget orci tortor. 72 |
• Pellentesque laoreet laoreet justo, sed efficitur sapien 73 | tincidunt eu. 74 |
• Nulla tempor nunc eu molestie volutpat. Nunc a accumsan 75 | dolor. 76 |
• Duis ut congue dui. 77 | 78 |
79 |
80 |
81 |
82 | ); 83 | }; 84 | 85 | export default Resume; 86 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | "./src/**/*.{js,jsx,ts,tsx}", 4 | ], 5 | theme: { 6 | extend: { 7 | colors: { 8 | yellow_vs:"#D9E577", 9 | blue_vs:"#389fdc", 10 | lightblue_vs:"#85d8fb", 11 | brown_vs:"#d98e73", 12 | 13 | }, 14 | }, 15 | screens: { 16 | sm: "640px", 17 | // => @media (min-width: 640px) { ... } 18 | 19 | md: "768px", 20 | // => @media (min-width: 768px) { ... } 21 | 22 | lg: "1024px", 23 | // => @media (min-width: 1024px) { ... } 24 | 25 | xl: "1280px", 26 | // => @media (min-width: 1280px) { ... } 27 | }, 28 | }, 29 | plugins: [], 30 | } 31 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./built", 4 | "allowJs": true, 5 | "target": "es5", 6 | "lib": ["ES2016", "dom"], 7 | "jsx": "react", 8 | "esModuleInterop": true, 9 | }, 10 | "include": ["./src/**/*"] 11 | } 12 | --------------------------------------------------------------------------------