├── UI.png ├── src ├── assets │ ├── p3.png │ ├── p4.png │ ├── p5.png │ ├── p6.png │ ├── fonts │ │ └── impact.ttf │ ├── icons │ │ ├── java.svg │ │ ├── chatgptapi.svg │ │ ├── vercel.svg │ │ ├── flutter.svg │ │ ├── css.svg │ │ ├── html.svg │ │ ├── firebase.svg │ │ ├── fcm.svg │ │ ├── googlebooksapi.svg │ │ ├── dart.svg │ │ ├── stripe.svg │ │ ├── tailwindcss.svg │ │ ├── unity.svg │ │ ├── cs.svg │ │ ├── bootstrap.svg │ │ ├── phpmyadmin.svg │ │ ├── js.svg │ │ ├── figma.svg │ │ ├── php.svg │ │ ├── blender.svg │ │ ├── typescript.svg │ │ ├── redux.svg │ │ ├── python.svg │ │ ├── mui.svg │ │ ├── nodejs.svg │ │ ├── adobexd.svg │ │ ├── bash.svg │ │ ├── xampp.svg │ │ ├── react.svg │ │ ├── androidstd.svg │ │ ├── snyk.svg │ │ ├── mysql.svg │ │ └── linux.svg │ ├── logo.svg │ ├── blob.svg │ └── mozn.svg ├── index.js ├── index.css ├── App.js ├── components │ ├── ui │ │ ├── SkillCard.jsx │ │ ├── MiniProjectCard.jsx │ │ ├── ExperienceCard.jsx │ │ └── ProjectCard.jsx │ ├── Skills.jsx │ ├── Experience.jsx │ ├── Footer.jsx │ ├── Hero.jsx │ ├── Navbar.jsx │ └── Projects.jsx └── data.js ├── public ├── favicon.ico ├── robots.txt └── index.html ├── .gitignore ├── tailwind.config.js ├── LICENSE ├── package.json └── README.md /UI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yomna-J/Portfolio/HEAD/UI.png -------------------------------------------------------------------------------- /src/assets/p3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yomna-J/Portfolio/HEAD/src/assets/p3.png -------------------------------------------------------------------------------- /src/assets/p4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yomna-J/Portfolio/HEAD/src/assets/p4.png -------------------------------------------------------------------------------- /src/assets/p5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yomna-J/Portfolio/HEAD/src/assets/p5.png -------------------------------------------------------------------------------- /src/assets/p6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yomna-J/Portfolio/HEAD/src/assets/p6.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yomna-J/Portfolio/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/assets/fonts/impact.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Yomna-J/Portfolio/HEAD/src/assets/fonts/impact.ttf -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById("root")); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | @import url("https://fonts.googleapis.com/css2?family=Anton&family=Inconsolata:wght@900&display=swap"); 5 | @import url("https://fonts.googleapis.com/css2?family=Anton&display=swap"); 6 | @font-face { 7 | font-family: "impact"; 8 | src: local("impact"), url(./assets/fonts/impact.ttf) format("ttf"); 9 | } 10 | html { 11 | scroll-behavior: smooth; 12 | } 13 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{js,jsx,ts,tsx}"], 4 | theme: { 5 | fontFamily: { 6 | Inconsolata: ["Inconsolata", "sans-serif"], 7 | impact: ["impact", "sans-serif"], 8 | }, 9 | colors: { 10 | transparent: "transparent", 11 | current: "currentColor", 12 | white: "#ffffff", 13 | primary: "#AD00FF", 14 | darkPrimary: "#6A36A5", 15 | secondary: "#F8EDFF", 16 | darkGray: "#161130", 17 | lightGray: "#262624", 18 | }, 19 | }, 20 | plugins: [], 21 | }; 22 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import Hero from "./components/Hero"; 2 | import Navbar from "./components/Navbar"; 3 | import Experience from "./components/Experience"; 4 | import Skills from "./components/Skills"; 5 | import Projects from "./components/Projects"; 6 | import Footer from "./components/Footer"; 7 | import { BrowserRouter } from "react-router-dom"; 8 | import { Analytics } from '@vercel/analytics/react'; 9 | 10 | function App() { 11 | return ( 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 |
22 | 23 | ); 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /src/assets/icons/java.svg: -------------------------------------------------------------------------------- 1 | JavaJava -------------------------------------------------------------------------------- /src/components/ui/SkillCard.jsx: -------------------------------------------------------------------------------- 1 | const SkillCard = ({ title, tools, children }) => { 2 | return ( 3 |
8 | {children} 9 |

{title}

10 | {/* */} 17 | {/* ICON */} 18 |
19 | {tools.map((tool) => { 20 | return {tool.alt}; 21 | })} 22 |
23 |
24 | ); 25 | }; 26 | 27 | export default SkillCard; 28 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 14 | 15 | 16 | 17 | Youmna Jaza 18 | 19 | 20 |
21 | 22 | 23 | 24 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/assets/icons/chatgptapi.svg: -------------------------------------------------------------------------------- 1 | ChatGPT APIChatGPT API -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Youmna Jaza 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 | -------------------------------------------------------------------------------- /src/assets/icons/vercel.svg: -------------------------------------------------------------------------------- 1 | VercelVercel -------------------------------------------------------------------------------- /src/assets/icons/flutter.svg: -------------------------------------------------------------------------------- 1 | FlutterFlutter -------------------------------------------------------------------------------- /src/components/ui/MiniProjectCard.jsx: -------------------------------------------------------------------------------- 1 | import { HiLink } from "react-icons/hi2"; 2 | import { GoMarkGithub } from "react-icons/go"; 3 | 4 | const MiniProjectCard = ({ 5 | picture, 6 | github, 7 | website, 8 | title, 9 | description, 10 | children, 11 | }) => { 12 | return ( 13 |
18 | 19 | hurairah 20 | 21 | 22 |

{title}

23 |

{description}

24 |
{children}
25 | 26 |
27 | {website && ( 28 | 29 | 30 | 31 | )} 32 | {github && ( 33 | 34 | 38 | 39 | )} 40 |
41 |
42 | ); 43 | }; 44 | 45 | export default MiniProjectCard; 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@vercel/analytics": "^1.0.2", 10 | "aos": "^3.0.0-beta.6", 11 | "react": "^18.2.0", 12 | "react-dom": "^18.2.0", 13 | "react-icons": "^4.7.1", 14 | "react-router-dom": "^6.8.0", 15 | "react-router-hash-link": "^2.4.3", 16 | "react-scripts": "5.0.1", 17 | "react-typing-effect": "^2.0.5", 18 | "web-vitals": "^2.1.4" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | }, 44 | "devDependencies": { 45 | "prettier": "^2.8.3", 46 | "prettier-plugin-tailwindcss": "^0.2.2", 47 | "tailwindcss": "^3.2.4" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/components/Skills.jsx: -------------------------------------------------------------------------------- 1 | import data from "../data"; 2 | import { HiOutlineDocument } from "react-icons/hi"; 3 | import { BiCodeAlt } from "react-icons/bi"; 4 | import { BiPaint } from "react-icons/bi"; 5 | import { FiTool } from "react-icons/fi"; 6 | import SkillCard from "./ui/SkillCard"; 7 | 8 | const Skills = () => { 9 | return ( 10 |
14 |

15 | Skills 16 |

17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
32 | ); 33 | }; 34 | 35 | export default Skills; 36 | -------------------------------------------------------------------------------- /src/assets/icons/css.svg: -------------------------------------------------------------------------------- 1 | CSS3CSS3 -------------------------------------------------------------------------------- /src/assets/icons/html.svg: -------------------------------------------------------------------------------- 1 | HTML5HTML5 -------------------------------------------------------------------------------- /src/assets/icons/firebase.svg: -------------------------------------------------------------------------------- 1 | FirebaseFirebase -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | logo 6 | 7 |

My Portfolio

8 |

9 | View Website 10 |

11 | 12 | 13 | [![Vercel Status](https://vercel-badge-ar363.vercel.app/?app=eleventy-stylus-blog-theme)](https://github.com/Yomna-J/Portfolio/deployments/activity_log?environment=Production) 14 | 15 |
16 | 17 | ![Desktop Preview](/UI.png) 18 | 19 | The design is inspired by [Ontalex](https://www.figma.com/community/file/1176098420505083930). 20 | 21 | ## Tools Used 22 | 23 | 24 | 25 | ## Project Run 26 | 1. Install dependencies 27 | 28 | ```sh 29 | npm install 30 | ``` 31 | 2. Run on localserver 32 | 33 | ```sh 34 | npm start 35 | ``` 36 | ## LICENSE 37 | This repository [UI design elements](https://www.figma.com/community/file/1176098420505083930) are licensed under CC-BY-4.0 and the code is licensed under the MIT License. Please be sure to comply with the terms of both licenses. 38 | -------------------------------------------------------------------------------- /src/assets/icons/fcm.svg: -------------------------------------------------------------------------------- 1 | Firebase Cloud MessagingFirebase Cloud Messaging -------------------------------------------------------------------------------- /src/components/ui/ExperienceCard.jsx: -------------------------------------------------------------------------------- 1 | import { default as blob } from "../../assets/blob.svg"; 2 | 3 | const ExperienceCard = ({ logo, name, job, duration, skills, bgColor }) => { 4 | return ( 5 |
6 |
7 | blob 8 | {name} 13 |
14 | {/*
15 |
16 | blob 17 |
18 |
19 | {name} 20 |
21 |
*/} 22 | 23 |
28 |

{job}

29 |

{duration}

30 |
31 | 36 |
37 |
38 | ); 39 | }; 40 | 41 | export default ExperienceCard; 42 | -------------------------------------------------------------------------------- /src/assets/icons/googlebooksapi.svg: -------------------------------------------------------------------------------- 1 | Google Books APIGoogle Books API -------------------------------------------------------------------------------- /src/assets/icons/dart.svg: -------------------------------------------------------------------------------- 1 | DartDart -------------------------------------------------------------------------------- /src/components/Experience.jsx: -------------------------------------------------------------------------------- 1 | import ExperienceCard from "./ui/ExperienceCard"; 2 | import { default as moznLogo } from "../assets/mozn.svg"; 3 | 4 | const Experience = () => { 5 | var mozn = [ 6 | "Collaborated with the development team to ensure secure software development practices.", 7 | "Developed and maintained secure coding standards and guidelines.", 8 | "Integrated security into CI/CD pipelines for enhanced software security.", 9 | "Conducted static security testing, promptly addressing vulnerabilities.", 10 | "Contributed to ISO27001 and SAMA cybersecurity policies, emphasizing secure software practices.", 11 | "Managed cybersecurity awareness and ensured third-party security compliance.", 12 | ]; 13 | 14 | var yu = [`Bachelor of science in Software Engineering`, `CGPA of: 4.0/4.0`]; 15 | 16 | return ( 17 |
21 |

22 | Experience & Education 23 |

24 | 25 | {/* Experience Cards */} 26 | 33 | 40 |
41 | ); 42 | }; 43 | 44 | export default Experience; 45 | -------------------------------------------------------------------------------- /src/assets/icons/stripe.svg: -------------------------------------------------------------------------------- 1 | StripeStripe -------------------------------------------------------------------------------- /src/assets/icons/tailwindcss.svg: -------------------------------------------------------------------------------- 1 | Tailwind CSSTailwind CSS -------------------------------------------------------------------------------- /src/assets/icons/unity.svg: -------------------------------------------------------------------------------- 1 | UnityUnity -------------------------------------------------------------------------------- /src/components/ui/ProjectCard.jsx: -------------------------------------------------------------------------------- 1 | import { HiLink } from "react-icons/hi2"; 2 | import { GoMarkGithub } from "react-icons/go"; 3 | 4 | const ProjectCard = ({ 5 | picture, 6 | github = null, 7 | website, 8 | title, 9 | subtitle, 10 | description, 11 | tools, 12 | isImageOnLeft = false, 13 | }) => { 14 | const orderClass = isImageOnLeft ? "" : "md:flex-row-reverse"; 15 | 16 | return ( 17 |
20 |
25 |
26 | {github && ( 27 | 28 | 32 | 33 | )} 34 | {website && ( 35 | 36 | 40 | 41 | )} 42 |
43 |

{title}

44 |

{subtitle}

45 |

{description}

46 |
47 | {tools.map((tool) => ( 48 | {tool.alt} 49 | ))} 50 |
51 |
52 | {title} 59 |
60 | ); 61 | }; 62 | 63 | export default ProjectCard; 64 | -------------------------------------------------------------------------------- /src/assets/icons/cs.svg: -------------------------------------------------------------------------------- 1 | C SharpC Sharp -------------------------------------------------------------------------------- /src/assets/icons/bootstrap.svg: -------------------------------------------------------------------------------- 1 | BootstrapBootstrap -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import { HiMail } from "react-icons/hi"; 2 | import { GoMarkGithub } from "react-icons/go"; 3 | import { BsLinkedin } from "react-icons/bs"; 4 | 5 | const Footer = () => { 6 | return ( 7 |
11 |

12 | Contact Me 13 |

14 |
15 | 16 |

17 | <Youmna 18 | /> 19 |

20 | 21 |
22 | 26 | Yomna-J 27 | 28 | 32 | Youmna Jaza 33 | 34 | 38 | youmnajaza@gmail.com 39 | 40 |
41 |
42 |

43 | Design Inspired by 44 | 48 | {" "} 49 | Ontalex 50 | {" "} 51 | & built by{" "} 52 | 56 | Youmna Jaza 57 | 58 |

59 |
60 | ); 61 | }; 62 | 63 | export default Footer; 64 | -------------------------------------------------------------------------------- /src/assets/icons/phpmyadmin.svg: -------------------------------------------------------------------------------- 1 | phpMyAdminphpMyAdmin -------------------------------------------------------------------------------- /src/assets/icons/js.svg: -------------------------------------------------------------------------------- 1 | JavaScriptJavaScript -------------------------------------------------------------------------------- /src/assets/icons/figma.svg: -------------------------------------------------------------------------------- 1 | FigmaFigma -------------------------------------------------------------------------------- /src/assets/icons/php.svg: -------------------------------------------------------------------------------- 1 | PHPPHP -------------------------------------------------------------------------------- /src/assets/icons/blender.svg: -------------------------------------------------------------------------------- 1 | BlenderBlender -------------------------------------------------------------------------------- /src/assets/icons/typescript.svg: -------------------------------------------------------------------------------- 1 | TypeScriptTypeScript -------------------------------------------------------------------------------- /src/assets/icons/redux.svg: -------------------------------------------------------------------------------- 1 | ReduxRedux -------------------------------------------------------------------------------- /src/assets/icons/python.svg: -------------------------------------------------------------------------------- 1 | PythonPython -------------------------------------------------------------------------------- /src/assets/icons/mui.svg: -------------------------------------------------------------------------------- 1 | MUIMUI -------------------------------------------------------------------------------- /src/assets/icons/nodejs.svg: -------------------------------------------------------------------------------- 1 | Node.jsNode.js -------------------------------------------------------------------------------- /src/components/Hero.jsx: -------------------------------------------------------------------------------- 1 | import { default as blob } from "../assets/blob.svg"; 2 | import ReactTypingEffect from "react-typing-effect"; 3 | import { GoMarkGithub } from "react-icons/go"; 4 | import { BsLinkedin } from "react-icons/bs"; 5 | 6 | const Hero = () => { 7 | var code = `let button_menu = document.querySelector(".header_button"); 8 | let float_menu = document.querySelector(".header_menu--float"); 9 | let line_top = document.querySelector(".header_button_line--top"); 10 | let line_under = document.querySelector(".header_button_line--bottom"); 11 | 12 | button_menu.isSelected = false; 13 | 14 | function addEffectWriting(element, time) { 15 | let element_array = element.innerText.split(""); 16 | 17 | element.count = 0; 18 | element.innerText = ""; 19 | 20 | function writeSymbols() { 21 | element.innerText += element_array[element.count]; 22 | element.count++; 23 | 24 | if (element.count <= element_array.length) { 25 | setTimeout(() => { 26 | writeSymbols(); 27 | }, time); 28 | } else if (element.count >= element_array.length) { 29 | element.count = 0; 30 | element.innerText = ""; 31 | 32 | writeSymbols(); 33 | } 34 | } 35 | writeSymbols(); 36 | } 37 | `; 38 | return ( 39 |
43 |
44 |

45 | Y 46 |

47 | 54 |

Software Engineer

55 |

56 | I'm a software engineering fresh graduate and a cybersecurity analyst 57 | with a passion for front-end development, mobile applications, and 58 | UI/UX design. I strive to create user-friendly and visually appealing 59 | software. 60 |

61 |
62 | 66 | 67 | 68 | 72 | 73 | 74 |
75 |
76 |
77 |
78 | {code} 79 | blob 84 |
85 |
86 |
87 | ); 88 | }; 89 | 90 | export default Hero; 91 | -------------------------------------------------------------------------------- /src/assets/icons/adobexd.svg: -------------------------------------------------------------------------------- 1 | Adobe XDAdobe XD -------------------------------------------------------------------------------- /src/assets/icons/bash.svg: -------------------------------------------------------------------------------- 1 | BashBash -------------------------------------------------------------------------------- /src/assets/icons/xampp.svg: -------------------------------------------------------------------------------- 1 | XamppXampp -------------------------------------------------------------------------------- /src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { HashLink as Link } from "react-router-hash-link"; 3 | 4 | const Navbar = () => { 5 | const [navbar, setNavbar] = useState(false); 6 | 7 | return ( 8 | // CODE BELOW: https://larainfo.com/blogs/react-responsive-navbar-menu-with-tailwind-css-example 9 | 109 | ); 110 | }; 111 | export default Navbar; 112 | -------------------------------------------------------------------------------- /src/assets/icons/react.svg: -------------------------------------------------------------------------------- 1 | React JsReact Js -------------------------------------------------------------------------------- /src/assets/icons/androidstd.svg: -------------------------------------------------------------------------------- 1 | Android StudioAndroid Studio -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icons/snyk.svg: -------------------------------------------------------------------------------- 1 | SnykSnyk -------------------------------------------------------------------------------- /src/components/Projects.jsx: -------------------------------------------------------------------------------- 1 | import { default as Hurairah } from "../assets/hurairah.svg"; 2 | import p4 from "../assets/p4.png"; 3 | import p3 from "../assets/p3.png"; 4 | import p5 from "../assets/p5.png"; 5 | import p6 from "../assets/p6.png"; 6 | import MiniProjectCard from "./ui/MiniProjectCard"; 7 | import { default as blob } from "../assets/blob.svg"; 8 | import data from "../data"; 9 | import ProjectCard from "./ui/ProjectCard"; 10 | 11 | const Projects = () => { 12 | return ( 13 |
17 |

18 | Projects 19 |

20 | {/* RECENT PROJECTS */} 21 | 30 | 40 | 48 | 56 | {/* OTHER PROJECTS */} 57 |
58 | {/* PROJECT CARD */} 59 | 66 | {data.card1.map((tool) => { 67 | return {tool.alt}; 68 | })} 69 | 70 | 76 | {data.card2.map((tool) => { 77 | return {tool.alt}; 78 | })} 79 | 80 | 87 | {data.card3.map((tool) => { 88 | return {tool.alt}; 89 | })} 90 | 91 | 97 | {data.card4.map((tool) => { 98 | return {tool.alt}; 99 | })} 100 | 101 |
102 | blob 103 |
104 | ); 105 | }; 106 | 107 | export default Projects; 108 | -------------------------------------------------------------------------------- /src/assets/icons/mysql.svg: -------------------------------------------------------------------------------- 1 | MySQLMySQL -------------------------------------------------------------------------------- /src/data.js: -------------------------------------------------------------------------------- 1 | import { default as java } from "./assets/icons/java.svg"; 2 | import { default as python } from "./assets/icons/python.svg"; 3 | import { default as js } from "./assets/icons/js.svg"; 4 | import { default as html } from "./assets/icons/html.svg"; 5 | import { default as css } from "./assets/icons/css.svg"; 6 | import { default as dart } from "./assets/icons/dart.svg"; 7 | import { default as cs } from "./assets/icons/cs.svg"; 8 | import { default as php } from "./assets/icons/php.svg"; 9 | import { default as flutter } from "./assets/icons/flutter.svg"; 10 | import { default as react } from "./assets/icons/react.svg"; 11 | import { default as redux } from "./assets/icons/redux.svg"; 12 | import { default as mui } from "./assets/icons/mui.svg"; 13 | import { default as bootstrap } from "./assets/icons/bootstrap.svg"; 14 | import { default as blender } from "./assets/icons/blender.svg"; 15 | import { default as adobexd } from "./assets/icons/adobexd.svg"; 16 | import { default as figma } from "./assets/icons/figma.svg"; 17 | import { default as fcm } from "./assets/icons/fcm.svg"; 18 | import { default as bash } from "./assets/icons/bash.svg"; 19 | import { default as mysql } from "./assets/icons/mysql.svg"; 20 | import { default as phpmyadmin } from "./assets/icons/phpmyadmin.svg"; 21 | import { default as snyk } from "./assets/icons/snyk.svg"; 22 | import { default as linux } from "./assets/icons/linux.svg"; 23 | import { default as unity } from "./assets/icons/unity.svg"; 24 | import { default as androidstd } from "./assets/icons/androidstd.svg"; 25 | import { default as vercel } from "./assets/icons/vercel.svg"; 26 | import { default as xampp } from "./assets/icons/xampp.svg"; 27 | import { default as tailwindcss } from "./assets/icons/tailwindcss.svg"; 28 | import { default as typescript } from "./assets/icons/typescript.svg"; 29 | import { default as nodejs } from "./assets/icons/nodejs.svg"; 30 | import { default as googlebooksapi } from "./assets/icons/googlebooksapi.svg"; 31 | import { default as firebase } from "./assets/icons/firebase.svg"; 32 | import { default as stripe } from "./assets/icons/stripe.svg"; 33 | import { default as chatgptapi } from "./assets/icons/chatgptapi.svg"; 34 | 35 | const data = { 36 | languages: [ 37 | { id: 1, alt: "Java", img: java }, 38 | { id: 2, alt: "Python", img: python }, 39 | { id: 3, alt: "JavaScript", img: js }, 40 | { id: 28, alt: "TypeScript", img: typescript }, 41 | { id: 4, alt: "HTML5", img: html }, 42 | { id: 5, alt: "CSS3", img: css }, 43 | { id: 6, alt: "Dart", img: dart }, 44 | { id: 7, alt: "C Sharp", img: cs }, 45 | { id: 8, alt: "PHP", img: php }, 46 | ], 47 | lib: [ 48 | { id: 9, alt: "Flutter", img: flutter }, 49 | { id: 10, alt: "React JS", img: react }, 50 | { id: 11, alt: "Redux", img: redux }, 51 | { id: 29, alt: "Tailwind CSS", img: tailwindcss }, 52 | { id: 30, alt: "Node.js", img: nodejs }, 53 | { id: 12, alt: "MUI", img: mui }, 54 | { id: 13, alt: "Bootstrap", img: bootstrap }, 55 | ], 56 | design: [ 57 | { id: 14, alt: "Blender", img: blender }, 58 | { id: 15, alt: "Adobe XD", img: adobexd }, 59 | { id: 16, alt: "Figma", img: figma }, 60 | ], 61 | tools: [ 62 | { id: 17, alt: "Firebase Cloud Messaging", img: fcm }, 63 | { id: 31, alt: "Firebase", img: firebase }, 64 | { id: 18, alt: "Bash", img: bash }, 65 | { id: 19, alt: "MySQL", img: mysql }, 66 | { id: 20, alt: "phpMyAdmin", img: phpmyadmin }, 67 | { id: 21, alt: "Snyk", img: snyk }, 68 | { id: 22, alt: "Linux", img: linux }, 69 | { id: 23, alt: "Unity", img: unity }, 70 | { id: 24, alt: "Android Studio", img: androidstd }, 71 | { id: 26, alt: "Vercel", img: vercel }, 72 | { id: 27, alt: "Xampp", img: xampp }, 73 | ], 74 | project1: [ 75 | { id: 9, alt: "Flutter", img: flutter }, 76 | { id: 6, alt: "Dart", img: dart }, 77 | { id: 8, alt: "PHP", img: php }, 78 | { id: 27, alt: "Xampp", img: xampp }, 79 | { id: 20, alt: "phpMyAdmin", img: phpmyadmin }, 80 | { id: 17, alt: "Firebase Cloud Messaging", img: fcm }, 81 | { id: 24, alt: "Android Studio", img: androidstd }, 82 | { id: 19, alt: "MySQL", img: mysql }, 83 | { id: 15, alt: "Adobe XD", img: adobexd }, 84 | ], 85 | project2: [ 86 | { id: 10, alt: "React JS", img: react }, 87 | { id: 12, alt: "MUI", img: mui }, 88 | { id: 16, alt: "Figma", img: figma }, 89 | { id: 26, alt: "Vercel", img: vercel }, 90 | ], //bookish 91 | project3: [ 92 | { id: 10, alt: "React JS", img: react }, 93 | { id: 29, alt: "Tailwind CSS", img: tailwindcss }, 94 | { id: 28, alt: "TypeScript", img: typescript }, 95 | { id: 30, alt: "Node.js", img: nodejs }, 96 | { id: 32, alt: "Google Books API", img: googlebooksapi }, 97 | { id: 31, alt: "Firebase", img: firebase }, 98 | { id: 33, alt: "Stripe", img: stripe }, 99 | { id: 16, alt: "Figma", img: figma }, 100 | { id: 26, alt: "Vercel", img: vercel }, 101 | ], //landgpt 102 | project4: [ 103 | { id: 10, alt: "React JS", img: react }, 104 | { id: 29, alt: "Tailwind CSS", img: tailwindcss }, 105 | { id: 30, alt: "Node.js", img: nodejs }, 106 | { id: 34, alt: "ChatGPT API", img: chatgptapi }, 107 | ], 108 | card1: [ 109 | { id: 9, alt: "Flutter", img: flutter }, 110 | { id: 6, alt: "Dart", img: dart }, 111 | ], 112 | card2: [ 113 | { id: 9, alt: "Flutter", img: flutter }, 114 | { id: 6, alt: "Dart", img: dart }, 115 | ], 116 | card3: [ 117 | { id: 3, alt: "JavaScript", img: js }, 118 | { id: 4, alt: "HTML5", img: html }, 119 | { id: 13, alt: "Bootstrap", img: bootstrap }, 120 | ], 121 | card4: [ 122 | { id: 3, alt: "JavaScript", img: js }, 123 | { id: 8, alt: "PHP", img: php }, 124 | { id: 4, alt: "HTML5", img: html }, 125 | { id: 19, alt: "MySQL", img: mysql }, 126 | { id: 13, alt: "Bootstrap", img: bootstrap }, 127 | ], 128 | }; 129 | 130 | export default data; 131 | -------------------------------------------------------------------------------- /src/assets/blob.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/icons/linux.svg: -------------------------------------------------------------------------------- 1 | LinuxLinux -------------------------------------------------------------------------------- /src/assets/mozn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | --------------------------------------------------------------------------------