├── .gitignore ├── test.md ├── .vscode └── settings.json ├── Images ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 3a.png ├── RR.png ├── api.png ├── doc.png ├── mvc.png ├── Book.png ├── Footer.png ├── GitHub.png ├── Logo.png ├── Rails.png ├── Resume.pdf ├── Vector.png ├── blue.png ├── deploy.png ├── header.png ├── jquery.png ├── kanban.png ├── manage.png ├── psql.png ├── remote.png ├── ruby.png ├── sdlc.png ├── self.png ├── shapes.png ├── time.png ├── vite.png ├── Linkedin.png ├── Tailwind.png ├── Twitter.png ├── git_icon.png ├── header-d.png ├── header-m.png ├── postman.png ├── response.png ├── shapes-m.png ├── teamwork.png ├── webpack.png ├── Bootstrap.png ├── Ellipse 1.png ├── WellFound.png ├── arrow-down.png ├── arrow-right.png ├── budgetapp.png ├── implement.png ├── leadership.png ├── review (2).png ├── Ellipse 1 (1).png ├── Ellipse 1 (2).png ├── Globe Weather.png ├── Today Weather.png ├── self-desktop1.png ├── Footer_Desktop.png ├── Header_Desktop.png ├── Snapshoot Portfolio.png ├── Zufta Tours & Travels.png ├── Snapshoot Portfolio (1).png ├── Snapshoot Portfolio (2).png ├── Snapshoot Portfolio (3).png ├── Snapshoot Portfolio-Desktop.png ├── Snapshoot Portfolio-Desktop-2.png ├── Snapshoot Portfolio-Desktop-3.png ├── Snapshoot Portfolio-Desktop-4.png ├── rainbow-icon-emoji-removebg-preview.ico ├── livelink.svg └── 68747470733a2f2f766974656a732e6465762f6c6f676f2e737667.svg ├── app_screenshot.png ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── MIT.md ├── .github └── workflows │ └── linters.yml ├── README.md ├── index.js ├── index.html ├── package.json └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | test.md/ 2 | node_modules/ -------------------------------------------------------------------------------- /test.md: -------------------------------------------------------------------------------- 1 | "This file is ignored by git". -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /Images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/1.png -------------------------------------------------------------------------------- /Images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/2.png -------------------------------------------------------------------------------- /Images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/3.png -------------------------------------------------------------------------------- /Images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/4.png -------------------------------------------------------------------------------- /Images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/5.png -------------------------------------------------------------------------------- /Images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/6.png -------------------------------------------------------------------------------- /Images/3a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/3a.png -------------------------------------------------------------------------------- /Images/RR.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/RR.png -------------------------------------------------------------------------------- /Images/api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/api.png -------------------------------------------------------------------------------- /Images/doc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/doc.png -------------------------------------------------------------------------------- /Images/mvc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/mvc.png -------------------------------------------------------------------------------- /Images/Book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Book.png -------------------------------------------------------------------------------- /Images/Footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Footer.png -------------------------------------------------------------------------------- /Images/GitHub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/GitHub.png -------------------------------------------------------------------------------- /Images/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Logo.png -------------------------------------------------------------------------------- /Images/Rails.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Rails.png -------------------------------------------------------------------------------- /Images/Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Resume.pdf -------------------------------------------------------------------------------- /Images/Vector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Vector.png -------------------------------------------------------------------------------- /Images/blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/blue.png -------------------------------------------------------------------------------- /Images/deploy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/deploy.png -------------------------------------------------------------------------------- /Images/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/header.png -------------------------------------------------------------------------------- /Images/jquery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/jquery.png -------------------------------------------------------------------------------- /Images/kanban.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/kanban.png -------------------------------------------------------------------------------- /Images/manage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/manage.png -------------------------------------------------------------------------------- /Images/psql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/psql.png -------------------------------------------------------------------------------- /Images/remote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/remote.png -------------------------------------------------------------------------------- /Images/ruby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/ruby.png -------------------------------------------------------------------------------- /Images/sdlc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/sdlc.png -------------------------------------------------------------------------------- /Images/self.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/self.png -------------------------------------------------------------------------------- /Images/shapes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/shapes.png -------------------------------------------------------------------------------- /Images/time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/time.png -------------------------------------------------------------------------------- /Images/vite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/vite.png -------------------------------------------------------------------------------- /Images/Linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Linkedin.png -------------------------------------------------------------------------------- /Images/Tailwind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Tailwind.png -------------------------------------------------------------------------------- /Images/Twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Twitter.png -------------------------------------------------------------------------------- /Images/git_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/git_icon.png -------------------------------------------------------------------------------- /Images/header-d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/header-d.png -------------------------------------------------------------------------------- /Images/header-m.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/header-m.png -------------------------------------------------------------------------------- /Images/postman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/postman.png -------------------------------------------------------------------------------- /Images/response.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/response.png -------------------------------------------------------------------------------- /Images/shapes-m.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/shapes-m.png -------------------------------------------------------------------------------- /Images/teamwork.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/teamwork.png -------------------------------------------------------------------------------- /Images/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/webpack.png -------------------------------------------------------------------------------- /app_screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/app_screenshot.png -------------------------------------------------------------------------------- /Images/Bootstrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Bootstrap.png -------------------------------------------------------------------------------- /Images/Ellipse 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Ellipse 1.png -------------------------------------------------------------------------------- /Images/WellFound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/WellFound.png -------------------------------------------------------------------------------- /Images/arrow-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/arrow-down.png -------------------------------------------------------------------------------- /Images/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/arrow-right.png -------------------------------------------------------------------------------- /Images/budgetapp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/budgetapp.png -------------------------------------------------------------------------------- /Images/implement.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/implement.png -------------------------------------------------------------------------------- /Images/leadership.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/leadership.png -------------------------------------------------------------------------------- /Images/review (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/review (2).png -------------------------------------------------------------------------------- /Images/Ellipse 1 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Ellipse 1 (1).png -------------------------------------------------------------------------------- /Images/Ellipse 1 (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Ellipse 1 (2).png -------------------------------------------------------------------------------- /Images/Globe Weather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Globe Weather.png -------------------------------------------------------------------------------- /Images/Today Weather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Today Weather.png -------------------------------------------------------------------------------- /Images/self-desktop1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/self-desktop1.png -------------------------------------------------------------------------------- /Images/Footer_Desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Footer_Desktop.png -------------------------------------------------------------------------------- /Images/Header_Desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Header_Desktop.png -------------------------------------------------------------------------------- /Images/Snapshoot Portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Snapshoot Portfolio.png -------------------------------------------------------------------------------- /Images/Zufta Tours & Travels.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Zufta Tours & Travels.png -------------------------------------------------------------------------------- /Images/Snapshoot Portfolio (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Snapshoot Portfolio (1).png -------------------------------------------------------------------------------- /Images/Snapshoot Portfolio (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Snapshoot Portfolio (2).png -------------------------------------------------------------------------------- /Images/Snapshoot Portfolio (3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Snapshoot Portfolio (3).png -------------------------------------------------------------------------------- /Images/Snapshoot Portfolio-Desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Snapshoot Portfolio-Desktop.png -------------------------------------------------------------------------------- /Images/Snapshoot Portfolio-Desktop-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Snapshoot Portfolio-Desktop-2.png -------------------------------------------------------------------------------- /Images/Snapshoot Portfolio-Desktop-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Snapshoot Portfolio-Desktop-3.png -------------------------------------------------------------------------------- /Images/Snapshoot Portfolio-Desktop-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/Snapshoot Portfolio-Desktop-4.png -------------------------------------------------------------------------------- /Images/rainbow-icon-emoji-removebg-preview.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasumaJaffery/Portfolio/HEAD/Images/rainbow-icon-emoji-removebg-preview.ico -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "extends": ["airbnb-base"], 13 | "rules": { 14 | "no-shadow": "off", 15 | "no-param-reassign": "off", 16 | "eol-last": "off", 17 | "import/extensions": [ 1, { 18 | "js": "always", "json": "always" 19 | }] 20 | }, 21 | "ignorePatterns": [ 22 | "dist/", 23 | "build/" 24 | ] 25 | } -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": [ 7 | true, 8 | { 9 | "ignoreAtRules": [ 10 | "tailwind", 11 | "apply", 12 | "variants", 13 | "responsive", 14 | "screen" 15 | ] 16 | } 17 | ] 18 | }, 19 | "csstree/validator": true, 20 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"] 21 | } 22 | -------------------------------------------------------------------------------- /Images/livelink.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /MIT.md: -------------------------------------------------------------------------------- 1 | ## Copyright 2023, [Masuma Jaffery] 2 | Permission is hereby granted, free of charge, to any person obtaining a copy of this [APP TYPE] and associated documentation files, to deal in the [APP TYPE] without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the [APP TYPE], and to permit persons to whom the [APP TYPE] is furnished to do so, subject to the following conditions: 3 | 4 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the [APP TYPE]. 5 | 6 | THE [APP TYPE] IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE [APP TYPE] OR THE USE OR OTHER DEALINGS IN THE [APP TYPE]. 7 | -------------------------------------------------------------------------------- /Images/68747470733a2f2f766974656a732e6465762f6c6f676f2e737667.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "16.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.7.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-22.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "18.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@7.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-22.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "18.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-22.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - uses: actions/setup-node@v1 55 | with: 56 | node-version: "18.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | nodechecker: 64 | name: node_modules checker 65 | runs-on: ubuntu-22.04 66 | steps: 67 | - uses: actions/checkout@v2 68 | - name: Check node_modules existence 69 | run: | 70 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 27 | 28 |
29 | 30 | logo 31 |
32 | 33 |

Portfolio

34 | 35 |
36 | 37 | 38 | 39 | # 📗 Table of Contents 40 | 41 | - [📖 About the Project](#about-project) 42 | - [🛠 Built With](#built-with) 43 | - [Tech Stack](#tech-stack) 44 | - [Key Features](#key-features) 45 | - [🚀 Live Demo](#live-demo) 46 | - [💻 Getting Started](#getting-started) 47 | - [Setup](#setup) 48 | - [Prerequisites](#prerequisites) 49 | - [Install](#install) 50 | - [👥 Authors](#authors) 51 | - [🔭 Future Features](#future-features) 52 | - [🤝 Contributing](#contributing) 53 | - [⭐️ Show your support](#support) 54 | - [🙏 Acknowledgements](#acknowledgements) 55 | - [❓ FAQ (OPTIONAL)](#faq) 56 | - [📝 License](#license) 57 | 58 | 59 | 60 | # 📖 [Portfolio] 61 | 62 | **[My-Portfolio]** is the Project where my projects landed in future! 63 | 64 | ## 🛠 Built With 65 | 66 | ### Tech Stack 67 | 68 | > HTML,CSS,GITHUB 69 | 70 |
71 | Client 72 | 76 |
77 | 78 | 79 | 80 | ### Key Features 81 | 82 | - **[Repository Setup!]** 83 | - **[Add Html & CSS, Javascript Files]** 84 | - **[Linters Configurations]** 85 | 86 |

(back to top)

87 | 88 | 89 | 90 | ## 🚀 Live Demo 91 | 92 | > https://masumajaffery.github.io/Portfolio/ 93 | 94 |

(back to top)

95 | 96 | 97 | ## 💻 Getting Started 98 | 99 | To get a local copy up and running, follow these steps. 100 | 101 | ### Prerequisites 102 | 103 | In order to run this project you need the following tools: 104 | - Node installed in your computer 105 | - IDE(e.g.: Vscode,...) 106 | - HTML-CSS-JS-GitHub 107 | - etc. 108 | 109 | ### Setup 110 | 111 | Clone this repository to your desired folder: 112 | 113 | ```sh 114 | cd your-prefered-folder 115 | 116 | git clone https://github.com/MasumaJaffery/Portfolio.git 117 | ``` 118 | 119 | ### Install 120 | 121 | - Install project's packages with: 122 | 123 | ```sh 124 | cd Portfolio 125 | 126 | npm install or npm i 127 | ``` 128 | 129 | ### Usage 130 | 131 | To run the project, execute the following command: 132 | 133 | Open index.html using live server extention. 134 | 135 | ## Run Tests 136 | 137 | To run tests, run the following command: 138 | 139 | Track HTML linter errors run: 140 | npx hint . 141 | Track CSS linter errors run: 142 | npx stylelint "**/*.{css,scss}" 143 | Track JavaScript linter errors run: 144 | npx eslint . 145 | 146 | 147 | ## Deployment 148 | 149 | You can deploy this project using: GitHub Pages, 150 | - I used GitHub Pages to deploy my website. 151 | - For more information about publishing sources, see "About GitHub pages". 152 | 153 | 154 | 155 | ## 👥 Authors 156 | 157 | 👤 **Syeda Masuma Fatima** 158 | 159 | - GitHub: [@MasumaJaffery](https://github.com/MasumaJaffery) 160 | - Twitter: [@MasumaJaffery](https://twitter.com/MasumaJaffery) 161 | - LinkedIn: [Masuma Jaffery](https://www.linkedin.com/in/masuma-jaffery-797a29256/) 162 | 163 | 👤 **Nitcelis Bravo** 164 | 165 | - GitHub: [Nitcelis Bravo](https://github.com/NitBravoA92) 166 | - Twitter: [@softwareDevOne](https://twitter.com/softwareDevOne) 167 | - LinkedIn: [LinkedIn](https://www.linkedin.com/in/nitcelis-bravo-alcala-b65340158) 168 | 169 | 👤 **Alibaba2023** 170 | - GitHub: [@Alibaba2023](https://github.com/Alibaba2023) 171 | - Twitter: [@AliBabaHu2023](https://twitter.com/AliBabaHu2023) 172 | - LinkedIn: [LinkedIn](https://www.linkedin.com/in/ali-baba-hussaini-630607267/) 173 | 174 | 175 | 176 | ## 🔭 Future Features 177 | 178 | - [ ] **[Styling]** 179 | - [ ] **[Responsiveness]** 180 | - [ ] **[Relaibility]** 181 | 182 |

(back to top)

183 | 184 | 185 | 186 | ## 🤝 Contributing 187 | 188 | Contributions, issues, and feature requests are welcome! 189 | 190 | 191 | 192 | ## ⭐️ Show your support 193 | 194 | If you like this project..! Ask me Detials on 195 | 196 |

(back to top)

197 | 198 | 199 | 200 | ## 🙏 Acknowledgments 201 | 202 | I would like to thank you Microverse! 203 | 204 | 205 | 206 | ## 📝 License 207 | 208 | This project is [MIT](./MIT.md) licensed. 209 | 210 |

(back to top)

211 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const toggleMenu = document.getElementById('Togglebtn'); 2 | toggleMenu.addEventListener('click', () => { 3 | const toggleMenu = document.getElementById('navigation'); 4 | toggleMenu.classList.toggle('container'); 5 | }); 6 | const CloseMenu = document.getElementById('Closebtn'); 7 | CloseMenu.addEventListener('click', () => { 8 | const CloseMenu = document.getElementById('navigation'); 9 | CloseMenu.classList.remove('container'); 10 | }); 11 | const Navitems = document.querySelectorAll('.Navitem'); 12 | Navitems.forEach((Navitem) => { 13 | Navitem.addEventListener('click', () => { 14 | const navigation = document.getElementById('navigation'); 15 | navigation.classList.remove('container'); 16 | }); 17 | }); 18 | 19 | const toggleLanguages = document.querySelector('#toggle_languages'); 20 | const showLanguages = document.querySelector('#show_languages'); 21 | const toggleLanguagesImg = document.querySelector('#toggle_languages'); 22 | toggleLanguages.addEventListener('click', () => { 23 | showLanguages.classList.toggle('visible'); 24 | toggleLanguagesImg.classList.toggle('arrow-down'); 25 | }); 26 | 27 | const toggleTools = document.querySelector('#toggle_tools'); 28 | const showTools = document.querySelector('#show_tools'); 29 | const toggleToolsImg = document.querySelector('#toggle_tools'); 30 | toggleTools.addEventListener('click', () => { 31 | showTools.classList.toggle('visible'); 32 | toggleToolsImg.classList.toggle('arrow-down'); 33 | }); 34 | 35 | const toggleSkills = document.querySelector('#toggle_skills'); 36 | const showSkills = document.querySelector('#show_skills'); 37 | const toggleSkillsImg = document.querySelector('#toggle_skills'); 38 | toggleSkills.addEventListener('click', () => { 39 | showSkills.classList.toggle('visible'); 40 | toggleSkillsImg.classList.toggle('arrow-down'); 41 | }); 42 | 43 | 44 | //const toggleButton = document.querySelector('#toggle_down'); 45 | // const targetElement = document.querySelector('#show'); 46 | // toggleButton.addEventListener('click', () => { 47 | //targetElement.classList.toggle('visible'); 48 | //}); 49 | 50 | // JS Pop Functionality<---->(JS Objects) 51 | const Projects = [ 52 | { 53 | img: 'Images/Globe Weather.png', 54 | title: 'Globe Weather', 55 | skill: ['Weather', 'SheCodes', '2025'], 56 | para: 'Globe Weather is a weather application that provides real-time weather information and forecasts for locations around the world.', 57 | parapop: 'Globe Weather is a weather application that provides real-time weather information and forecasts for locations around the world. It allows users to search for specific cities, view current conditions, and access detailed forecasts, making it a valuable tool for planning daily activities based on weather conditions.', 58 | tech: ['CSS', 'JavaScript', 'API'], 59 | source: 'https://github.com/MasumaJaffery/Globe-Weather-App', 60 | livelink: 'https://globeweather14.netlify.app/', 61 | }, 62 | { 63 | img: 'Images/Book.png', 64 | title: 'Nehjal Balagha', 65 | skill: ['3D', 'Front End Dev', '2025'], 66 | para: '3D Interactive Nehjul Balagha is a web application that allows users to explore the book in a 3D interactive format, enhancing the reading experience with immersive visuals and interactive features.', 67 | parapop: '3D Interactive Nehjul Balagha is a web application that allows users to explore the book in a 3D interactive format, enhancing the reading experience with immersive visuals and interactive features. Users can navigate through the book, view its content according to their mood, and interact with various elements to gain a deeper understanding of the text.', 68 | tech: ['Three.js', 'Typescript', 'TailwindCSS'], 69 | source: 'https://nahjalbalagha110.vercel.app/', 70 | livelink: 'https://nahjalbalagha110.vercel.app/', 71 | }, 72 | { 73 | img: 'Images/1.png', 74 | title: 'Zufta Tours & Travels', 75 | skill: ['Travel', 'Full-Stack Dev', '2023'], 76 | para: 'Zufta Travel and Tours is the Largest and most reliable tourism company in Pakistan with lots of satisfied clients and we have arranged almost over 500 tours successfully..', 77 | parapop: 'Zufta Travel and Tours is the Largest and most reliable tourism company in Pakistan with lots of satisfied clients and we have arranged almost over 500 tours successfully. We offer tour to Hunza Valley, Naltar Valley Swat, Naran Kaghan, Khunjrab Pass, Fairy Meadows, and many more incredible places around Pakistan. We arrange Family tours, Co-oporate tours, Group tours and Honeymoon tours for our valuable clients. With large numbers of fans, we became the largest tourism company in Pakistan. We also arrange tours for foreigners who came to Pakistan and Explore nature’s beauty at it’s best. So, pack your bags and visit your dream places in Pakistan.', 78 | tech: ['HTML', 'CSS', 'JavaScript'], 79 | source: 'https://github.com/MasumaJaffery/Module-Capstone--1', 80 | livelink: 'https://masumajaffery.github.io/Zufta-Tours-Travels/', 81 | }, 82 | { 83 | img: 'Images/3a.png', 84 | title: 'Splendor Homes', 85 | skill: ['USA', 'Vite', '2024'], 86 | para: 'Splendor Homes LLC is a real estate platform developed using React, offering a modern and user-friendly interface for exploring properties, managing listings, and streamlining real estate transactions.', 87 | parapop: 'Splendor Homes LLC is a React-based real estate platform designed to provide a seamless experience for property exploration, listings management, and facilitating real estate transactions with ease.', 88 | tech: ['React', 'TailwindCSS', 'Vite'], 89 | source: 'https://github.com/MasumaJaffery/', 90 | livelink: 'https://splendorhomesllc.com/', 91 | }, 92 | { 93 | img: 'Images/4.png', 94 | title: 'Code Courses', 95 | skill: ['Level Up', 'Front End Dev', '2022'], 96 | para: 'Embark on a coding journey with our code courses! Learn the fundamentals of web development as you craft stunning, responsive websites using these foundational languages.', 97 | parapop: 'Embark on a coding journey with our code courses! Learn the fundamentals of web development as you craft stunning, responsive websites using these foundational languages. Dive into hands-on projects and master the art of designing captivating web experiences', 98 | tech: ['HTML5', 'CSS3', 'JavaScript'], 99 | source: 'https://github.com/MasumaJaffery/StaticSite', 100 | livelink: 'https://masumajaffery.github.io/StaticSite/', 101 | }, 102 | { 103 | img: 'Images/5.png', 104 | title: 'Space Travelers Hub', 105 | skill: ['Microverse', 'Front End Dev', '2023'], 106 | para: 'Space Travelers Hub displays a list of Rockets and Space Missions and allows you to book rockets and join selected space missions.', 107 | parapop: 'Space Travelers Hub displays a list of Rockets and Space Missions and allows you to book rockets and join selected space missions.This is a React and Redux website that displays a list of Rockets and Space Missions and allows you to book rockets and join selected space missions.', 108 | tech: ['React', 'Redux', 'Bootstrap'], 109 | source: 'https://github.com/MasumaJaffery/space-travelers-hub', 110 | livelink: 'https://frolicking-cobbler-f01e96.netlify.app/', 111 | }, 112 | { 113 | img: 'Images/6.png', 114 | title: 'Brunswick Builders', 115 | skill: ['React', 'Front End Dev', '2024'], 116 | para: 'Brunswick Builders, LLC is a construction management and project development firm whose owners and members have an over 60 years of combined experience committed to superior quality services to its clients', 117 | parapop: 'Brunswick Builders, LLC is a construction management and project development firm whose owners and members have an over 60 years of combined experience committed to superior quality services to its clients', 118 | tech: ['React', 'Redux', 'TailwindCSS'], 119 | source: 'https://github.com/MasumaJaffery/', 120 | livelink: 'https://www.brunswickbuildersllc.com/', 121 | } 122 | ]; 123 | 124 | // Use this Objects in Function Below 125 | const ProjectsCard = document.getElementById('work'); 126 | function show(index) { 127 | ProjectsCard.innerHTML 128 | += `
129 |
130 | 131 |
132 |
133 |

${Projects[index].title}

134 |
135 |
    136 | ${Projects[index].skill[0]} 137 |
  • ${Projects[index].skill[1]}
    • 138 |
  • ${Projects[index].skill[2]}
    • 139 |
140 |
141 |

${Projects[index].para}

142 |
143 |
    144 |
  • ${Projects[index].tech[0]}
    • 145 |
  • ${Projects[index].tech[1]}
    • 146 |
  • ${Projects[index].tech[2]}
    • 147 |
148 |
149 |
150 | 151 |
152 |
153 |
`; 154 | } 155 | // For Loop to Deal with Array of Objects; 156 | for (let i = 0; i < Projects.length; i += 1) { 157 | show(i); 158 | } 159 | // Pop Up Configurations; 160 | const PopUpWindow = document.getElementById('PopupDetials'); 161 | function PopUp(index) { 162 | const project = Projects[index]; 163 | PopUpWindow.innerHTML = ` 164 |
165 |
166 |
167 |

${project.title}

168 | 173 |
174 |
175 |
    176 | ${project.skill[0]} 177 |
  • ${project.skill[1]}
    • 178 |
  • ${project.skill[2]}
    • 179 |
180 |
181 |
182 | 183 |
184 |
185 |

${project.parapop}

186 |
187 |
188 |
    189 |
  • ${project.tech[0]}
    • 190 |
  • ${project.tech[1]}
    • 191 |
  • ${project.tech[2]}
    • 192 |
193 |
194 |
195 |
196 | 197 | 198 |
199 |
200 |
201 |
202 |
`; 203 | // Add event listener to close button 204 | const closeButton = PopUpWindow.querySelector('.close-btn'); 205 | closeButton.addEventListener('click', () => { 206 | PopUpWindow.innerHTML = ''; // Clear the popup window content 207 | }); 208 | } 209 | 210 | // Get all the buttons that trigger the popups 211 | const popupButtons = document.querySelectorAll('.popup-button'); 212 | 213 | // Add click event listeners to the popup buttons 214 | popupButtons.forEach((btn, index) => { 215 | btn.addEventListener('click', () => { 216 | PopUp(index); 217 | }); 218 | }); 219 | 220 | // Form Validation by JS 221 | const form = document.getElementById('form'); 222 | const email = document.getElementById('email'); 223 | const error = document.getElementById('error'); 224 | form.addEventListener('submit', (e) => { 225 | if (email.value.toLowerCase() !== email.value) { 226 | e.preventDefault(); 227 | error.innerHTML = 'Email must be in Lower Case, The form is not sent .'; 228 | } 229 | }); 230 | 231 | // Form Data Preservation in Browser 232 | const name1 = document.getElementById('name'); 233 | const email1 = document.getElementById('email'); 234 | const textarea = document.getElementById('textarea'); 235 | function setData() { 236 | const userData = { 237 | Name: name1.value, 238 | Email: email1.value, 239 | TextArea: textarea.value, 240 | }; 241 | 242 | localStorage.setItem('userData', JSON.stringify(userData)); 243 | } 244 | 245 | form.addEventListener('input', setData); 246 | 247 | function getData() { 248 | const getInfo = JSON.parse(localStorage.getItem('userData')); 249 | name1.value = getInfo.Name; 250 | email1.value = getInfo.Email; 251 | textarea.value = getInfo.TextArea; 252 | } 253 | 254 | getData(); 255 | 256 | document.addEventListener('DOMContentLoaded', function() { 257 | document.getElementById("resumeBtn").addEventListener("click", function() { 258 | window.location.href = "https://docs.google.com/document/d/1WLvNzezDX5oJRl8l1gqf_gZzK31S3z4WEVk-fUEin9s/edit?usp=sharing"; 259 | }); 260 | }); 261 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Masuma Jaffery's Portfolio 10 | 11 | 12 |
13 |
14 | 39 | 49 |
50 | 51 |
52 |
53 |
54 |

55 | I’m Masuma Jaffery. Glad to see you! 56 |

57 |

58 | As a Full Stack Engineer driven by a passion for development and arhitect innovative tech solutions, I am currently open to new job opportunities, I'm eager to dive into projects that demand fresh thinking and foster continuous learning. If you're intrigued, I'm ready to explore and contribute to something remarkable. 59 |

60 | LET’S CONNECT 61 |
62 |
    63 |
  • 64 | 67 |
    • 68 |
  • 69 | 73 |
    • 74 |
  • 75 | 78 |
    • 79 |
  • 80 | 83 |
    • 84 |
  • 85 | 86 |
    • 87 |
88 |
89 |
90 |
91 |
92 |
93 | 94 |
95 |
96 | 97 |
98 |

About Myself

99 |

100 | Hi there! I am Masuma Jaffery, An Software Engineer Graduate & American School Certified Full-Stack Developer, 101 | I've poured over 2500+ hours into the captivating world of development, exploring a vast space of technologies and frameworks of frontend and backend. 102 | But here’s a unique twist—I thrive in the dynamic realm of time zones. The UTC+5 and UTC-6 are more 103 | than just numbers to me; It’s about syncing up with diverse teams, understanding that the sun never sets on innovation. The Each Snippet of code is just like a 104 | part of dreams that makes a Project come true! I can help you build a product, feature or website, Look through some of my work and experience! 105 |
106 | If you like what you see and have a project you need coded, don’t 107 | hesitate to contact me. 108 |

109 | LET’S CONNECT 110 |
111 |
    112 |
  • 113 | 116 |
    • 117 |
  • 118 | 122 |
    • 123 |
  • 124 | 125 |
    • 126 |
  • 127 | 130 |
    • 131 |
  • 132 | 135 |
    • 136 |
137 |
138 | 139 |
140 |
141 |
142 |
Languages
143 | 144 |
145 |
146 | 176 |
177 |
178 |
Frameworks & Libraries
179 | 180 | 181 |
182 | 215 |
216 |
217 | 218 |
Methodologies & Tools
219 | 220 |
221 | 259 |
260 |
261 | 262 | 263 |
Skills
264 | 265 |
266 | 297 |
298 |
299 | 300 |
301 |
302 |
303 |
304 | 355 |
356 | 357 | 358 | 359 | 360 | 361 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel-eslint": "^10.1.0", 14 | "eslint": "^7.32.0", 15 | "eslint-config-airbnb-base": "^14.2.1", 16 | "eslint-plugin-import": "^2.27.5", 17 | "hint": "^7.1.8", 18 | "stylelint": "^13.13.1", 19 | "stylelint-config-standard": "^21.0.0", 20 | "stylelint-csstree-validator": "^1.9.0", 21 | "stylelint-scss": "^3.21.0" 22 | }, 23 | "dependencies": { 24 | "abab": "^2.0.6", 25 | "abbrev": "^1.1.1", 26 | "acorn": "^8.8.2", 27 | "acorn-globals": "^7.0.1", 28 | "acorn-jsx": "^5.3.2", 29 | "acorn-jsx-walk": "^2.0.0", 30 | "acorn-walk": "^8.2.0", 31 | "agent-base": "^6.0.2", 32 | "agentkeepalive": "^4.3.0", 33 | "aggregate-error": "^3.1.0", 34 | "ajv": "^8.12.0", 35 | "ajv-formats": "^2.1.1", 36 | "ansi-align": "^3.0.1", 37 | "ansi-colors": "^4.1.3", 38 | "ansi-regex": "^5.0.1", 39 | "ansi-styles": "^4.3.0", 40 | "anymatch": "^3.1.3", 41 | "aproba": "^2.0.0", 42 | "are-we-there-yet": "^2.0.0", 43 | "argparse": "^1.0.10", 44 | "array-buffer-byte-length": "^1.0.0", 45 | "array-includes": "^3.1.6", 46 | "array-union": "^2.1.0", 47 | "array.prototype.flat": "^1.3.1", 48 | "array.prototype.flatmap": "^1.3.1", 49 | "arrify": "^1.0.1", 50 | "ast-types": "^0.13.4", 51 | "astral-regex": "^2.0.0", 52 | "async": "^3.2.4", 53 | "asynckit": "^0.4.0", 54 | "autoprefixer": "^9.8.8", 55 | "available-typed-arrays": "^1.0.5", 56 | "axe-core": "^4.7.0", 57 | "bail": "^1.0.5", 58 | "balanced-match": "^1.0.2", 59 | "base64-js": "^1.5.1", 60 | "bcp47": "^1.1.2", 61 | "binary-extensions": "^2.2.0", 62 | "bl": "^4.1.0", 63 | "boolbase": "^1.0.0", 64 | "boxen": "^5.1.2", 65 | "brace-expansion": "^1.1.11", 66 | "braces": "^3.0.2", 67 | "browserslist": "^4.21.5", 68 | "buffer": "^5.7.1", 69 | "buffer-crc32": "^0.2.13", 70 | "builtins": "^5.0.1", 71 | "bytes": "^3.1.2", 72 | "cacache": "^17.0.5", 73 | "cacheable-lookup": "^5.0.4", 74 | "cacheable-request": "^7.0.2", 75 | "call-bind": "^1.0.2", 76 | "callsites": "^3.1.0", 77 | "camelcase": "^6.3.0", 78 | "camelcase-keys": "^6.2.2", 79 | "caniuse-lite": "^1.0.30001481", 80 | "canvas": "^2.11.2", 81 | "chalk": "^4.1.2", 82 | "character-entities": "^1.2.4", 83 | "character-entities-legacy": "^1.1.4", 84 | "character-reference-invalid": "^1.1.4", 85 | "chokidar": "^3.5.3", 86 | "chownr": "^2.0.0", 87 | "ci-info": "^3.8.0", 88 | "clean-stack": "^2.2.0", 89 | "cli-boxes": "^2.2.1", 90 | "cli-cursor": "^3.1.0", 91 | "cli-spinners": "^2.8.0", 92 | "clone": "^1.0.4", 93 | "clone-regexp": "^2.2.0", 94 | "clone-response": "^1.0.3", 95 | "cloudinary": "^1.36.2", 96 | "cloudinary-core": "^2.13.0", 97 | "color-convert": "^2.0.1", 98 | "color-name": "^1.1.4", 99 | "color-string": "^1.9.1", 100 | "color-support": "^1.1.3", 101 | "combined-stream": "^1.0.8", 102 | "concat-map": "^0.0.1", 103 | "configstore": "^5.0.1", 104 | "confusing-browser-globals": "^1.0.11", 105 | "console-control-strings": "^1.1.0", 106 | "content-type": "^1.0.5", 107 | "convert-source-map": "^1.9.0", 108 | "core-js": "^3.30.1", 109 | "core-util-is": "^1.0.3", 110 | "cosmiconfig": "^7.1.0", 111 | "cross-fetch": "^3.1.5", 112 | "cross-spawn": "^7.0.3", 113 | "crypto-random-string": "^2.0.0", 114 | "css-select": "^4.3.0", 115 | "css-tree": "^1.1.3", 116 | "css-what": "^6.1.0", 117 | "cssesc": "^3.0.0", 118 | "cssstyle": "^3.0.0", 119 | "data-uri-to-buffer": "^3.0.1", 120 | "data-urls": "^3.0.2", 121 | "debug": "^4.3.4", 122 | "decamelize": "^1.2.0", 123 | "decamelize-keys": "^1.1.1", 124 | "decimal.js": "^10.4.3", 125 | "decompress-response": "^6.0.0", 126 | "deep-extend": "^0.6.0", 127 | "deep-is": "^0.1.4", 128 | "defaults": "^1.0.4", 129 | "defer-to-connect": "^2.0.1", 130 | "define-properties": "^1.2.0", 131 | "degenerator": "^3.0.4", 132 | "delayed-stream": "^1.0.0", 133 | "delegates": "^1.0.0", 134 | "depd": "^2.0.0", 135 | "detect-libc": "^2.0.1", 136 | "devtools-protocol": "^0.0.981744", 137 | "dir-glob": "^3.0.1", 138 | "doctrine": "^3.0.0", 139 | "dom-serializer": "^1.4.1", 140 | "domelementtype": "^2.3.0", 141 | "domexception": "^4.0.0", 142 | "domhandler": "^4.3.1", 143 | "domutils": "^2.8.0", 144 | "dot-prop": "^5.3.0", 145 | "duplexer3": "^0.1.5", 146 | "ejs": "^3.1.9", 147 | "electron-to-chromium": "^1.4.372", 148 | "emoji-regex": "^8.0.0", 149 | "encoding": "^0.1.13", 150 | "end-of-stream": "^1.4.4", 151 | "enquirer": "^2.3.6", 152 | "entities": "^2.2.0", 153 | "err-code": "^2.0.3", 154 | "error-ex": "^1.3.2", 155 | "es-abstract": "^1.21.2", 156 | "es-set-tostringtag": "^2.0.1", 157 | "es-shim-unscopables": "^1.0.0", 158 | "es-to-primitive": "^1.2.1", 159 | "escalade": "^3.1.1", 160 | "escape-goat": "^2.1.1", 161 | "escape-string-regexp": "^1.0.5", 162 | "escodegen": "^2.0.0", 163 | "eslint-import-resolver-node": "^0.3.7", 164 | "eslint-module-utils": "^2.8.0", 165 | "eslint-scope": "^5.1.1", 166 | "eslint-utils": "^2.1.0", 167 | "eslint-visitor-keys": "^3.4.0", 168 | "espree": "^7.3.1", 169 | "esprima": "^4.0.1", 170 | "esquery": "^1.5.0", 171 | "esrecurse": "^4.3.0", 172 | "estraverse": "^5.3.0", 173 | "esutils": "^2.0.3", 174 | "eventemitter2": "^6.4.9", 175 | "execa": "^4.1.0", 176 | "execall": "^2.0.0", 177 | "extend": "^3.0.2", 178 | "extract-zip": "^2.0.1", 179 | "fast-deep-equal": "^3.1.3", 180 | "fast-glob": "^3.2.12", 181 | "fast-json-stable-stringify": "^2.1.0", 182 | "fast-levenshtein": "^2.0.6", 183 | "fast-xml-parser": "^4.2.2", 184 | "fastest-levenshtein": "^1.0.16", 185 | "fastq": "^1.15.0", 186 | "fd-slicer": "^1.1.0", 187 | "file-entry-cache": "^6.0.1", 188 | "file-type": "^16.5.4", 189 | "file-uri-to-path": "^2.0.0", 190 | "filelist": "^1.0.4", 191 | "fill-range": "^7.0.1", 192 | "find-up": "^4.1.0", 193 | "flat-cache": "^3.0.4", 194 | "flatted": "^3.2.7", 195 | "for-each": "^0.3.3", 196 | "form-data": "^4.0.0", 197 | "fs-constants": "^1.0.0", 198 | "fs-extra": "^11.1.1", 199 | "fs-minipass": "^3.0.1", 200 | "fs.realpath": "^1.0.0", 201 | "ftp": "^0.3.10", 202 | "function-bind": "^1.1.1", 203 | "function.prototype.name": "^1.1.5", 204 | "functional-red-black-tree": "^1.0.1", 205 | "functions-have-names": "^1.2.3", 206 | "gauge": "^3.0.2", 207 | "gensync": "^1.0.0-beta.2", 208 | "get-intrinsic": "^1.2.1", 209 | "get-stdin": "^8.0.0", 210 | "get-stream": "^5.2.0", 211 | "get-symbol-description": "^1.0.0", 212 | "get-uri": "^3.0.2", 213 | "glob": "^9.3.5", 214 | "glob-parent": "^5.1.2", 215 | "global-dirs": "^3.0.1", 216 | "global-modules": "^2.0.0", 217 | "global-prefix": "^3.0.0", 218 | "globals": "^11.12.0", 219 | "globalthis": "^1.0.3", 220 | "globby": "^11.1.0", 221 | "globjoin": "^0.1.4", 222 | "gonzales-pe": "^4.3.0", 223 | "gopd": "^1.0.1", 224 | "got": "^11.8.6", 225 | "graceful-fs": "^4.2.11", 226 | "hard-rejection": "^2.1.0", 227 | "has": "^1.0.3", 228 | "has-bigints": "^1.0.2", 229 | "has-flag": "^4.0.0", 230 | "has-property-descriptors": "^1.0.0", 231 | "has-proto": "^1.0.1", 232 | "has-symbols": "^1.0.3", 233 | "has-tostringtag": "^1.0.0", 234 | "has-unicode": "^2.0.1", 235 | "has-yarn": "^2.1.0", 236 | "hosted-git-info": "^6.1.1", 237 | "html-encoding-sniffer": "^3.0.0", 238 | "html-tags": "^3.3.1", 239 | "htmlparser2": "^3.10.1", 240 | "http-cache-semantics": "^4.1.1", 241 | "http-errors": "^2.0.0", 242 | "http-proxy-agent": "^5.0.0", 243 | "http2-wrapper": "^1.0.3", 244 | "https": "^1.0.0", 245 | "https-proxy-agent": "^5.0.1", 246 | "human-signals": "^1.1.1", 247 | "humanize-ms": "^1.2.1", 248 | "iconv-lite": "^0.6.3", 249 | "ieee754": "^1.2.1", 250 | "ignore": "^5.2.4", 251 | "image-size": "^1.0.2", 252 | "import-fresh": "^3.3.0", 253 | "import-lazy": "^2.1.0", 254 | "imurmurhash": "^0.1.4", 255 | "indent-string": "^4.0.0", 256 | "inflight": "^1.0.6", 257 | "inherits": "^2.0.4", 258 | "ini": "^2.0.0", 259 | "internal-slot": "^1.0.5", 260 | "invert-kv": "^3.0.1", 261 | "ip": "^1.1.8", 262 | "is-alphabetical": "^1.0.4", 263 | "is-alphanumerical": "^1.0.4", 264 | "is-array-buffer": "^3.0.2", 265 | "is-arrayish": "^0.3.2", 266 | "is-bigint": "^1.0.4", 267 | "is-binary-path": "^2.1.0", 268 | "is-boolean-object": "^1.1.2", 269 | "is-buffer": "^2.0.5", 270 | "is-callable": "^1.2.7", 271 | "is-ci": "^3.0.1", 272 | "is-core-module": "^2.12.0", 273 | "is-date-object": "^1.0.5", 274 | "is-decimal": "^1.0.4", 275 | "is-docker": "^2.2.1", 276 | "is-extglob": "^2.1.1", 277 | "is-fullwidth-code-point": "^3.0.0", 278 | "is-glob": "^4.0.3", 279 | "is-hexadecimal": "^1.0.4", 280 | "is-installed-globally": "^0.4.0", 281 | "is-interactive": "^1.0.0", 282 | "is-lambda": "^1.0.1", 283 | "is-negative-zero": "^2.0.2", 284 | "is-npm": "^5.0.0", 285 | "is-number": "^7.0.0", 286 | "is-number-object": "^1.0.7", 287 | "is-obj": "^2.0.0", 288 | "is-path-inside": "^3.0.3", 289 | "is-plain-obj": "^1.1.0", 290 | "is-potential-custom-element-name": "^1.0.1", 291 | "is-regex": "^1.1.4", 292 | "is-regexp": "^2.1.0", 293 | "is-shared-array-buffer": "^1.0.2", 294 | "is-stream": "^2.0.1", 295 | "is-string": "^1.0.7", 296 | "is-svg": "^4.4.0", 297 | "is-symbol": "^1.0.4", 298 | "is-typed-array": "^1.1.10", 299 | "is-typedarray": "^1.0.0", 300 | "is-unicode-supported": "^0.1.0", 301 | "is-weakref": "^1.0.2", 302 | "is-wsl": "^2.2.0", 303 | "is-yarn-global": "^0.3.0", 304 | "isarray": "^0.0.1", 305 | "isexe": "^2.0.0", 306 | "jake": "^10.8.5", 307 | "js-library-detector": "^6.6.0", 308 | "js-tokens": "^4.0.0", 309 | "js-yaml": "^3.14.1", 310 | "jsdom": "^21.1.1", 311 | "jsesc": "^2.5.2", 312 | "json-buffer": "^3.0.1", 313 | "json-parse-even-better-errors": "^2.3.1", 314 | "json-schema-traverse": "^1.0.0", 315 | "json-stable-stringify-without-jsonify": "^1.0.1", 316 | "json5": "^2.2.3", 317 | "jsonc-parser": "^3.2.0", 318 | "jsonfile": "^6.1.0", 319 | "jsonparse": "^1.3.1", 320 | "keyv": "^4.5.2", 321 | "kind-of": "^6.0.3", 322 | "known-css-properties": "^0.21.0", 323 | "latest-version": "^5.1.0", 324 | "lcid": "^3.1.1", 325 | "levn": "^0.4.1", 326 | "lines-and-columns": "^1.2.4", 327 | "locate-path": "^5.0.0", 328 | "lockfile": "^1.0.4", 329 | "lodash": "^4.17.21", 330 | "lodash.merge": "^4.6.2", 331 | "lodash.truncate": "^4.4.2", 332 | "log-symbols": "^4.1.0", 333 | "longest-streak": "^2.0.4", 334 | "lowercase-keys": "^2.0.0", 335 | "lru-cache": "^7.18.3", 336 | "make-dir": "^3.1.0", 337 | "make-fetch-happen": "^11.1.0", 338 | "map-age-cleaner": "^0.1.3", 339 | "map-obj": "^4.3.0", 340 | "mathml-tag-names": "^2.1.3", 341 | "mdast-util-from-markdown": "^0.8.5", 342 | "mdast-util-to-markdown": "^0.6.5", 343 | "mdast-util-to-string": "^2.0.0", 344 | "mdn-data": "^2.0.31", 345 | "mem": "^5.1.1", 346 | "meow": "^9.0.0", 347 | "merge-stream": "^2.0.0", 348 | "merge2": "^1.4.1", 349 | "metaviewport-parser": "^0.3.0", 350 | "micromark": "^2.11.4", 351 | "micromatch": "^4.0.5", 352 | "mime-db": "^1.52.0", 353 | "mime-types": "^2.1.35", 354 | "mimic-fn": "^2.1.0", 355 | "mimic-response": "^1.0.1", 356 | "min-indent": "^1.0.1", 357 | "minimatch": "^3.1.2", 358 | "minimist": "^1.2.8", 359 | "minimist-options": "^4.1.0", 360 | "minipass": "^4.2.8", 361 | "minipass-collect": "^1.0.2", 362 | "minipass-fetch": "^3.0.2", 363 | "minipass-flush": "^1.0.5", 364 | "minipass-json-stream": "^1.0.1", 365 | "minipass-pipeline": "^1.2.4", 366 | "minipass-sized": "^1.0.3", 367 | "minizlib": "^2.1.2", 368 | "mkdirp": "^1.0.4", 369 | "mkdirp-classic": "^0.5.3", 370 | "ms": "^2.1.2", 371 | "mutationobserver-shim": "^0.3.7", 372 | "nan": "^2.17.0", 373 | "nanoid": "^3.3.6", 374 | "natural-compare": "^1.4.0", 375 | "negotiator": "^0.6.3", 376 | "netmask": "^2.0.2", 377 | "node-fetch": "^2.6.9", 378 | "node-releases": "^2.0.10", 379 | "nopt": "^5.0.0", 380 | "normalize-package-data": "^3.0.3", 381 | "normalize-path": "^3.0.0", 382 | "normalize-range": "^0.1.2", 383 | "normalize-selector": "^0.2.0", 384 | "normalize-url": "^6.1.0", 385 | "npm-package-arg": "^10.1.0", 386 | "npm-registry-fetch": "^14.0.4", 387 | "npm-run-path": "^4.0.1", 388 | "npmlog": "^5.0.1", 389 | "nth-check": "^2.1.1", 390 | "num2fraction": "^1.2.2", 391 | "nwsapi": "^2.2.4", 392 | "object-assign": "^4.1.1", 393 | "object-inspect": "^1.12.3", 394 | "object-keys": "^1.1.1", 395 | "object.assign": "^4.1.4", 396 | "object.entries": "^1.1.6", 397 | "object.values": "^1.1.6", 398 | "once": "^1.4.0", 399 | "onetime": "^5.1.2", 400 | "optionator": "^0.9.1", 401 | "ora": "^5.4.1", 402 | "os-locale": "^5.0.0", 403 | "p-cancelable": "^2.1.1", 404 | "p-defer": "^1.0.0", 405 | "p-is-promise": "^2.1.0", 406 | "p-limit": "^2.3.0", 407 | "p-locate": "^4.1.0", 408 | "p-map": "^4.0.0", 409 | "p-try": "^2.2.0", 410 | "pac-proxy-agent": "^5.0.0", 411 | "pac-resolver": "^5.0.1", 412 | "package-json": "^6.5.0", 413 | "parent-module": "^1.0.1", 414 | "parse-entities": "^2.0.0", 415 | "parse-json": "^5.2.0", 416 | "parse5": "^6.0.1", 417 | "parse5-htmlparser2-tree-adapter": "^6.0.1", 418 | "path-exists": "^4.0.0", 419 | "path-is-absolute": "^1.0.1", 420 | "path-key": "^3.1.1", 421 | "path-parse": "^1.0.7", 422 | "path-scurry": "^1.7.0", 423 | "path-type": "^4.0.0", 424 | "peek-readable": "^4.1.0", 425 | "pend": "^1.2.0", 426 | "picocolors": "^1.0.0", 427 | "picomatch": "^2.3.1", 428 | "pkg-dir": "^4.2.0", 429 | "postcss": "^8.4.23", 430 | "postcss-html": "^0.36.0", 431 | "postcss-less": "^5.0.0", 432 | "postcss-media-query-parser": "^0.2.3", 433 | "postcss-resolve-nested-selector": "^0.1.1", 434 | "postcss-safe-parser": "^6.0.0", 435 | "postcss-sass": "^0.5.0", 436 | "postcss-scss": "^4.0.6", 437 | "postcss-selector-parser": "^6.0.11", 438 | "postcss-syntax": "^0.36.2", 439 | "postcss-value-parser": "^4.2.0", 440 | "prelude-ls": "^1.2.1", 441 | "prepend-http": "^2.0.0", 442 | "proc-log": "^3.0.0", 443 | "progress": "^2.0.3", 444 | "promise-inflight": "^1.0.1", 445 | "promise-retry": "^2.0.1", 446 | "proxy-agent": "^5.0.0", 447 | "proxy-from-env": "^1.1.0", 448 | "psl": "^1.9.0", 449 | "pump": "^3.0.0", 450 | "punycode": "^2.3.0", 451 | "pupa": "^2.1.1", 452 | "puppeteer-core": "^13.7.0", 453 | "q": "^1.5.1", 454 | "querystringify": "^2.2.0", 455 | "queue": "^6.0.2", 456 | "queue-microtask": "^1.2.3", 457 | "quick-lru": "^5.1.1", 458 | "raw-body": "^2.5.2", 459 | "rc": "^1.2.8", 460 | "read-pkg": "^5.2.0", 461 | "read-pkg-up": "^7.0.1", 462 | "readable-stream": "^3.6.2", 463 | "readable-web-to-node-stream": "^3.0.2", 464 | "readdirp": "^3.6.0", 465 | "redent": "^3.0.0", 466 | "regexp.prototype.flags": "^1.5.0", 467 | "regexpp": "^3.2.0", 468 | "registry-auth-token": "^4.2.2", 469 | "registry-url": "^5.1.0", 470 | "remark": "^13.0.0", 471 | "remark-parse": "^9.0.0", 472 | "remark-stringify": "^9.0.1", 473 | "repeat-string": "^1.6.1", 474 | "require-from-string": "^2.0.2", 475 | "requires-port": "^1.0.0", 476 | "resolve": "^1.22.2", 477 | "resolve-alpn": "^1.2.1", 478 | "resolve-from": "^5.0.0", 479 | "responselike": "^2.0.1", 480 | "restore-cursor": "^3.1.0", 481 | "retry": "^0.12.0", 482 | "reusify": "^1.0.4", 483 | "rimraf": "^3.0.2", 484 | "rrweb-cssom": "^0.6.0", 485 | "run-parallel": "^1.2.0", 486 | "safe-buffer": "^5.2.1", 487 | "safe-regex-test": "^1.0.0", 488 | "safer-buffer": "^2.1.2", 489 | "saxes": "^6.0.0", 490 | "semver": "^7.5.0", 491 | "semver-diff": "^3.1.1", 492 | "set-blocking": "^2.0.0", 493 | "setimmediate": "^1.0.5", 494 | "setprototypeof": "^1.2.0", 495 | "shebang-command": "^2.0.0", 496 | "shebang-regex": "^3.0.0", 497 | "side-channel": "^1.0.4", 498 | "signal-exit": "^3.0.7", 499 | "simple-concat": "^1.0.1", 500 | "simple-get": "^3.1.1", 501 | "simple-swizzle": "^0.2.2", 502 | "slash": "^3.0.0", 503 | "slice-ansi": "^4.0.0", 504 | "smart-buffer": "^4.2.0", 505 | "socks": "^2.7.1", 506 | "socks-proxy-agent": "^7.0.0", 507 | "source-map": "^0.6.1", 508 | "source-map-js": "^1.0.2", 509 | "spdx-correct": "^3.2.0", 510 | "spdx-exceptions": "^2.3.0", 511 | "spdx-expression-parse": "^3.0.1", 512 | "spdx-license-ids": "^3.0.13", 513 | "specificity": "^0.4.1", 514 | "sprintf-js": "^1.0.3", 515 | "ssri": "^10.0.3", 516 | "statuses": "^2.0.1", 517 | "string_decoder": "^1.3.0", 518 | "string-width": "^4.2.3", 519 | "string.prototype.trim": "^1.2.7", 520 | "string.prototype.trimend": "^1.0.6", 521 | "string.prototype.trimstart": "^1.0.6", 522 | "strip-ansi": "^6.0.1", 523 | "strip-bom": "^3.0.0", 524 | "strip-final-newline": "^2.0.0", 525 | "strip-indent": "^3.0.0", 526 | "strip-json-comments": "^2.0.1", 527 | "strnum": "^1.0.5", 528 | "strtok3": "^6.3.0", 529 | "style-search": "^0.1.0", 530 | "stylelint-config-recommended": "^4.0.0", 531 | "sugarss": "^2.0.0", 532 | "supports-color": "^7.2.0", 533 | "supports-preserve-symlinks-flag": "^1.0.0", 534 | "svg-tags": "^1.0.0", 535 | "symbol-tree": "^3.2.4", 536 | "table": "^6.8.1", 537 | "tar": "^6.1.13", 538 | "tar-fs": "^2.1.1", 539 | "tar-stream": "^2.2.0", 540 | "text-table": "^0.2.0", 541 | "through": "^2.3.8", 542 | "to-fast-properties": "^2.0.0", 543 | "to-readable-stream": "^1.0.0", 544 | "to-regex-range": "^5.0.1", 545 | "toidentifier": "^1.0.1", 546 | "token-types": "^4.2.1", 547 | "tough-cookie": "^4.1.2", 548 | "tr46": "^3.0.0", 549 | "trim-newlines": "^3.0.1", 550 | "trough": "^1.0.5", 551 | "tsconfig-paths": "^3.14.2", 552 | "tslib": "^2.5.0", 553 | "tsutils": "^3.21.0", 554 | "type-check": "^0.4.0", 555 | "type-fest": "^0.20.2", 556 | "typed-array-length": "^1.0.4", 557 | "typedarray-to-buffer": "^3.1.5", 558 | "typescript": "^5.0.4", 559 | "unbox-primitive": "^1.0.2", 560 | "unbzip2-stream": "^1.4.3", 561 | "unified": "^9.2.2", 562 | "unique-filename": "^3.0.0", 563 | "unique-slug": "^4.0.0", 564 | "unique-string": "^2.0.0", 565 | "unist-util-find-all-after": "^3.0.2", 566 | "unist-util-is": "^4.1.0", 567 | "unist-util-stringify-position": "^2.0.3", 568 | "universalify": "^2.0.0", 569 | "unpipe": "^1.0.0", 570 | "update-browserslist-db": "^1.0.11", 571 | "update-notifier": "^5.1.0", 572 | "uri-js": "^4.4.1", 573 | "url-parse": "^1.5.10", 574 | "url-parse-lax": "^3.0.0", 575 | "util-deprecate": "^1.0.2", 576 | "v8-compile-cache": "^2.3.0", 577 | "validate-npm-package-license": "^3.0.4", 578 | "validate-npm-package-name": "^5.0.0", 579 | "vfile": "^4.2.1", 580 | "vfile-message": "^2.0.4", 581 | "vm2": "^3.9.17", 582 | "w3c-xmlserializer": "^4.0.0", 583 | "wcwidth": "^1.0.1", 584 | "webidl-conversions": "^7.0.0", 585 | "whatwg-encoding": "^2.0.0", 586 | "whatwg-mimetype": "^3.0.0", 587 | "whatwg-url": "^11.0.0", 588 | "which": "^2.0.2", 589 | "which-boxed-primitive": "^1.0.2", 590 | "which-typed-array": "^1.1.9", 591 | "wide-align": "^1.1.5", 592 | "widest-line": "^3.1.0", 593 | "word-wrap": "^1.2.3", 594 | "wrap-ansi": "^7.0.0", 595 | "wrappy": "^1.0.2", 596 | "write-file-atomic": "^3.0.3", 597 | "ws": "^8.13.0", 598 | "xdg-basedir": "^4.0.0", 599 | "xml-name-validator": "^4.0.0", 600 | "xmlchars": "^2.2.0", 601 | "xregexp": "^2.0.0", 602 | "yallist": "^4.0.0", 603 | "yaml": "^1.10.2", 604 | "yargs-parser": "^20.2.9", 605 | "yauzl": "^2.10.0", 606 | "zwitch": "^1.0.5" 607 | } 608 | } 609 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #e5e5e5; 11 | font-family: 'Poppins', sans-serif; 12 | } 13 | 14 | main { 15 | width: 100%; 16 | height: auto; 17 | overflow-x: hidden; 18 | } 19 | 20 | header .mobile-nav, 21 | h4, 22 | #headline { 23 | display: flex; 24 | } 25 | 26 | header .mobile-nav { 27 | background-color: #fff; 28 | justify-content: space-between; 29 | } 30 | 31 | header .mobile-nav .toggle { 32 | background-color: #fff; 33 | border: none; 34 | cursor: pointer; 35 | } 36 | 37 | header .mobile-nav .container { 38 | background-color: #6070ff; 39 | backdrop-filter: blur(1rem); 40 | opacity: 96%; 41 | color: #fff; 42 | position: fixed; 43 | width: -webkit-fill-available; 44 | height: 100vh; 45 | font-weight: 600; 46 | line-height: 40px; 47 | font-size: 32px; 48 | display: flex; 49 | z-index: 1; 50 | transition: 0.5s ease-in-out; 51 | } 52 | 53 | .container ul { 54 | list-style: none; 55 | margin: 5rem 3rem; 56 | } 57 | 58 | .container ul li { 59 | height: 4rem; 60 | } 61 | 62 | .container ul li .link { 63 | color: #fff; 64 | } 65 | 66 | .container ul li .link:hover, 67 | .container ul li .link:active { 68 | color: rgb(216, 236, 255); 69 | } 70 | 71 | .container .close { 72 | background-color: #6070ff; 73 | color: #fff; 74 | border: none; 75 | position: absolute; 76 | left: 87%; 77 | top: 5%; 78 | cursor: pointer; 79 | font-size: 1.5rem; 80 | } 81 | 82 | h4 { 83 | width: 100%; 84 | height: 125%; 85 | font-weight: 700; 86 | font-size: 1.125rem; 87 | line-height: 1.25rem; 88 | color: #6070ff; 89 | margin: 0.625rem; 90 | padding-left: 0.5rem; 91 | animation: rotato 5s alternate ease-in-out 1s; 92 | } 93 | 94 | @keyframes rotato { 95 | from { 96 | transform: rotate(0deg); 97 | } 98 | 99 | to { 100 | transform: rotate(360deg); 101 | } 102 | } 103 | 104 | .mobile-nav a { 105 | text-decoration: none; 106 | text-align: center; 107 | justify-content: center; 108 | } 109 | 110 | .fa-bars { 111 | color: #6070ff; 112 | position: absolute; 113 | left: 94%; 114 | font-size: 1.2rem; 115 | bottom: 96%; 116 | } 117 | 118 | header .desktop-nav { 119 | display: none; 120 | } 121 | 122 | #headline { 123 | background-image: url("Images/header-m.png"); 124 | background-size: 100% 100%; 125 | background-position: top left; 126 | height: 718px; 127 | background-repeat: no-repeat; 128 | flex-direction: column; 129 | } 130 | 131 | .shapes { 132 | background-image: url("Images/shapes-m.png"); 133 | background-repeat: no-repeat; 134 | background-size: cover; 135 | } 136 | 137 | .content { 138 | display: flex; 139 | flex-direction: column; 140 | gap: 1rem; 141 | width: 100%; 142 | height: auto; 143 | margin-top: 25%; 144 | padding: 0 5%; 145 | } 146 | 147 | .content h1 { 148 | width: 100%; 149 | font-style: normal; 150 | font-weight: 1000; 151 | font-size: 40px; 152 | line-height: 52px; 153 | flex-wrap: wrap; 154 | color: #172b4d; 155 | flex: none; 156 | order: 0; 157 | animation: Slide 2s infinite ease-out 1s; 158 | } 159 | 160 | @keyframes Slide { 161 | from { 162 | transform: translateY(0); 163 | } 164 | 165 | to { 166 | transform: translateY(15px); 167 | } 168 | } 169 | 170 | .content p { 171 | display: flex; 172 | width: 100%; 173 | flex-wrap: wrap; 174 | font-style: normal; 175 | font-weight: 400; 176 | font-size: 16px; 177 | line-height: 24px; 178 | color: #344563; 179 | flex: none; 180 | order: 1; 181 | flex-grow: 0; 182 | } 183 | 184 | .modal-buttons a { 185 | text-decoration: none; 186 | font-weight: 500; 187 | line-height: 20px; 188 | } 189 | 190 | .content a { 191 | text-decoration: none; 192 | width: 100%; 193 | font-style: normal; 194 | font-weight: 500; 195 | font-size: 1rem; 196 | line-height: 1.5rem; 197 | color: #7f8cff; 198 | flex: none; 199 | order: 3; 200 | flex-grow: 0; 201 | } 202 | 203 | .icons { 204 | order: 4; 205 | margin-left: -1rem; 206 | } 207 | 208 | .icons ul { 209 | list-style: none; 210 | display: flex; 211 | } 212 | 213 | .icons ul li { 214 | transition: all 1s ease-out; 215 | } 216 | 217 | .align ul li { 218 | width: fit-content; 219 | height: auto; 220 | font-style: normal; 221 | font-weight: 600; 222 | font-size: 13px; 223 | line-height: 1rem; 224 | color: #7a869a; 225 | margin-left: 1.2rem; 226 | } 227 | 228 | .icons ul li:hover { 229 | transform: scale(1.3); 230 | } 231 | 232 | .icons a { 233 | padding-left: 1.2rem; 234 | } 235 | 236 | .content a:hover { 237 | color: #384bee; 238 | cursor: pointer; 239 | } 240 | 241 | #work { 242 | display: grid; 243 | grid-template-columns: repeat(auto-fit, 1fr); 244 | margin: 20px; 245 | justify-content: center; 246 | gap: 2%; 247 | padding-top: 20%; 248 | } 249 | 250 | #work .work-card { 251 | display: flex; 252 | flex-direction: column; 253 | align-items: center; 254 | padding: 1rem; 255 | grid-gap: 10px; 256 | width: 100%; 257 | background: #fff; 258 | border: 1px solid #def1e6; 259 | box-shadow: 5px 5px 10px 5px rgb(217, 213, 213, 0.5); 260 | border-radius: 1rem; 261 | } 262 | 263 | .work-card .work-img { 264 | width: 100%; 265 | } 266 | 267 | .work-card .img1 { 268 | width: 100%; 269 | height: 220px; 270 | object-fit: cover; 271 | object-position: center; 272 | border-radius: 0.5rem; 273 | transition: all 0.8s ease-in-out; 274 | } 275 | 276 | .Modal .img1 { 277 | width: -webkit-fill-available; 278 | } 279 | 280 | .work-card .img1:hover { 281 | transform: scale(1.05); 282 | } 283 | 284 | .work-card .work-detials { 285 | margin-bottom: 0 !important; 286 | } 287 | 288 | .work-card h2 { 289 | width: 100%; 290 | font-style: normal; 291 | font-weight: 700; 292 | font-size: 2rem; 293 | line-height: 44px; 294 | color: #172b4d; 295 | margin-left: 0.2rem; 296 | } 297 | 298 | .align { 299 | width: 100%; 300 | } 301 | 302 | .align ul { 303 | color: #c1c7d0; 304 | display: flex; 305 | margin-top: 0.5rem; 306 | } 307 | 308 | .align span { 309 | width: fit-content; 310 | height: 1rem; 311 | font-style: normal; 312 | font-weight: 600; 313 | font-size: 13px; 314 | line-height: 1rem; 315 | color: #344563; 316 | margin-left: 0.4rem; 317 | } 318 | 319 | .work-card p { 320 | width: 100%; 321 | font-style: normal; 322 | font-weight: 400; 323 | font-size: 15px; 324 | line-height: 24px; 325 | color: #344563; 326 | margin-left: 0.5rem; 327 | margin-top: 0.5rem; 328 | margin-bottom: 0.8rem; 329 | } 330 | 331 | .tags { 332 | width: 100%; 333 | margin-bottom: 1rem; 334 | } 335 | 336 | .tags .hash { 337 | display: flex; 338 | list-style: none; 339 | padding-right: 4.5rem; 340 | gap: 0.5rem; 341 | margin-left: 0.2rem; 342 | } 343 | 344 | .tags .hash .HTML { 345 | padding: 4px 12px; 346 | width: fit-content; 347 | height: 1.5rem; 348 | background: #ebebff; 349 | border-radius: 0.5rem; 350 | font-style: normal; 351 | font-weight: 500; 352 | font-size: 12px; 353 | line-height: 1rem; 354 | letter-spacing: 0.03em; 355 | color: #6070ff; 356 | } 357 | 358 | .tags .hash .CSS { 359 | padding: 4px 12px; 360 | width: fit-content; 361 | height: 1.5rem; 362 | background: #ebebff; 363 | border-radius: 8px; 364 | order: 1; 365 | font-style: normal; 366 | font-weight: 500; 367 | font-size: 12px; 368 | line-height: 1rem; 369 | letter-spacing: 0.03em; 370 | color: #6070ff; 371 | } 372 | 373 | .tags .hash .JavaScript { 374 | padding: 4px 12px; 375 | width: fit-content; 376 | height: 1.5rem; 377 | background: #ebebff; 378 | border-radius: 0.5rem; 379 | order: 2; 380 | font-style: normal; 381 | font-weight: 500; 382 | font-size: 12px; 383 | line-height: 1rem; 384 | letter-spacing: 0.03em; 385 | color: #6070ff; 386 | } 387 | 388 | .submit { 389 | width: 100%; 390 | } 391 | 392 | .submit button { 393 | box-sizing: border-box; 394 | padding: 12px; 395 | gap: 10px; 396 | width: 126px; 397 | border: 1px solid #6070ff; 398 | border-radius: 0.5rem; 399 | background-color: #fff; 400 | font-style: normal; 401 | font-weight: 500; 402 | font-size: 17px; 403 | line-height: 25px; 404 | display: grid; 405 | text-align: center; 406 | letter-spacing: 0.03em; 407 | color: #396df2; 408 | margin-right: 10rem; 409 | margin-top: 0.6rem; 410 | } 411 | 412 | .resume { 413 | box-sizing: border-box; 414 | padding: 12px; 415 | border: 1px solid #6070ff; 416 | border-radius: 8px; 417 | background-color: #fff; 418 | font-style: normal; 419 | margin-top: 1.5rem; 420 | font-weight: 500; 421 | font-size: 16px; 422 | line-height: 1.5rem; 423 | text-align: center; 424 | letter-spacing: 0.03em; 425 | color: #396df2; 426 | } 427 | 428 | .someter button { 429 | width: 142px; 430 | box-sizing: border-box; 431 | border: 5px solid #6070ff; 432 | border-radius: 8px; 433 | background-color: #fff; 434 | font-style: normal; 435 | font-weight: 500; 436 | font-size: 1.1rem; 437 | line-height: 1.5rem; 438 | text-align: center; 439 | letter-spacing: 0.03em; 440 | color: #396df2; 441 | margin-top: 1.5rem; 442 | display: flex; 443 | align-items: center; 444 | padding-left: 15px; 445 | } 446 | 447 | .submit button:hover { 448 | background-color: #396df2; 449 | color: #fff; 450 | } 451 | 452 | .submit button:active { 453 | background-color: #1b50d4; 454 | color: #fff; 455 | } 456 | 457 | .submit button:disabled { 458 | background-color: #fff; 459 | color: gray; 460 | } 461 | 462 | #PopupDetials { 463 | background-color: transparent; 464 | } 465 | 466 | .Modal-bg { 467 | background-color: rgba(193, 199, 208, 0.8); 468 | padding: 2rem; 469 | overflow-y: scroll; 470 | width: 100%; 471 | height: 100vh; 472 | position: fixed; 473 | top: 0; 474 | z-index: 998; 475 | } 476 | 477 | .Modal { 478 | background-color: #fff; 479 | height: fit-content; 480 | width: 100%; 481 | border-radius: 1rem; 482 | position: relative; 483 | right: 0; 484 | top: 0; 485 | left: 0; 486 | align-items: center; 487 | padding: 1.5rem; 488 | margin: 0 auto; 489 | z-index: 999; 490 | display: flex; 491 | flex-direction: column; 492 | gap: 1rem; 493 | transition: all 0.5s ease-in-out; 494 | } 495 | 496 | .Modal-Title { 497 | display: flex; 498 | flex-direction: row; 499 | gap: 8em; 500 | width: inherit; 501 | } 502 | 503 | .Modal-Title .heading { 504 | width: 100%; 505 | font-style: normal; 506 | font-weight: 700; 507 | color: #172b4d; 508 | } 509 | 510 | .Modal-Title .close-btn { 511 | background-color: #fff; 512 | border: none; 513 | } 514 | 515 | .Modal .work-img { 516 | width: -webkit-fill-available; 517 | } 518 | 519 | .Modal p { 520 | width: 100%; 521 | font-style: normal; 522 | font-weight: 400; 523 | font-size: 1rem; 524 | line-height: 1.5rem; 525 | color: #344563; 526 | } 527 | 528 | .Modal hr { 529 | width: 100%; 530 | color: rgba(193, 199, 208, 0.8); 531 | } 532 | 533 | .modal-buttons { 534 | display: flex; 535 | gap: 1rem; 536 | justify-content: center; 537 | } 538 | 539 | .modal-buttons .see-live, 540 | .see-source { 541 | box-sizing: border-box; 542 | padding: 12px; 543 | gap: 10px; 544 | width: max-content; 545 | border: 1px solid #6070ff; 546 | border-radius: 0.5rem; 547 | background-color: #fff; 548 | font-style: normal; 549 | font-weight: 500; 550 | font-size: 15px; 551 | display: flex; 552 | text-decoration: none; 553 | text-align: center; 554 | letter-spacing: 0.03em; 555 | color: #396df2; 556 | margin-top: 0.6rem; 557 | } 558 | 559 | .modal-buttons .see-live:hover, 560 | .modal-buttons .see-source:hover { 561 | background-color: #396df2; 562 | color: #fff; 563 | } 564 | 565 | .modal-buttons .see-live:active, 566 | .modal-buttons .see-source:active { 567 | background-color: #1b50d4; 568 | color: #fff; 569 | } 570 | 571 | .modal-buttons .see-live:disabled, 572 | .modal-buttons .see-source:disabled { 573 | background-color: #fff; 574 | color: gray; 575 | } 576 | 577 | #About, 578 | #About .info, 579 | #About .languages ul { 580 | display: grid; 581 | } 582 | 583 | #About { 584 | margin-top: 120%; 585 | background-image: url("Images/self.png"); 586 | background-size: cover; 587 | width: 100%; 588 | height: fit-content; 589 | } 590 | 591 | #About .Aboutcontent { 592 | padding-top: 5rem; 593 | margin: 2rem; 594 | } 595 | 596 | #About .Aboutcontent h3, 597 | #About .iconsAbout ul { 598 | display: flex; 599 | } 600 | 601 | #About .Aboutcontent h3 { 602 | width: 100%; 603 | font-style: normal; 604 | font-weight: 700; 605 | font-size: 2.5rem; 606 | line-height: 3.25rem; 607 | align-items: center; 608 | color: #172b4d; 609 | order: 0; 610 | } 611 | 612 | #About .Aboutcontent p { 613 | width: 100%; 614 | font-style: normal; 615 | font-weight: 400; 616 | font-size: 1rem; 617 | line-height: 1.5rem; 618 | color: #344563; 619 | padding-top: 1.2rem; 620 | order: 1; 621 | } 622 | 623 | #About .Aboutcontent a { 624 | display: grid; 625 | height: 1.5rem; 626 | font-style: normal; 627 | font-weight: 500; 628 | font-size: 1rem; 629 | color: #7f8cff; 630 | text-decoration: none; 631 | margin-top: 0.8rem; 632 | order: 2; 633 | } 634 | 635 | #About .iconsAbout { 636 | order: 3; 637 | } 638 | 639 | #About .iconsAbout ul { 640 | list-style: none; 641 | margin-left: -1.2rem; 642 | margin-top: 0.5rem; 643 | } 644 | 645 | #About .iconsAbout ul li { 646 | margin-left: 0.1rem; 647 | transition: all 1s ease-out; 648 | } 649 | 650 | #About .iconsAbout ul li:hover { 651 | transform: scale(1.2); 652 | } 653 | 654 | #About .iconsAbout a { 655 | padding-left: 1.5rem; 656 | } 657 | 658 | .resume:hover { 659 | background-color: #396df2; 660 | color: #fff; 661 | } 662 | 663 | .resume:active { 664 | background-color: #1b50d4; 665 | color: #fff; 666 | } 667 | 668 | .resume:disabled { 669 | background-color: #fff; 670 | color: grey; 671 | } 672 | 673 | #About .other h5 { 674 | height: 1.5rem; 675 | margin-left: 1.8rem; 676 | font-style: normal; 677 | font-weight: 600; 678 | font-size: 1.25rem; 679 | line-height: 1.5rem; 680 | color: #000; 681 | padding-top: 2.5rem; 682 | padding-bottom: 2.5rem; 683 | } 684 | 685 | #About .info .inline h5 { 686 | height: 1.5rem; 687 | margin-left: 1.8rem; 688 | font-style: normal; 689 | font-weight: 650; 690 | font-size: 1.25rem; 691 | line-height: 1.5rem; 692 | color: #000; 693 | width: 100%; 694 | } 695 | 696 | #About .info .inline .arrow { 697 | margin-top: 0.4rem; 698 | margin-right: 2.3rem; 699 | position: relative; 700 | left: 87%; 701 | bottom: 25px; 702 | } 703 | 704 | #About .languages ul { 705 | grid-template-rows: repeat(3, 1fr); 706 | list-style: none; 707 | } 708 | 709 | #About .languages .background { 710 | width: 90%; 711 | height: 4.17rem; 712 | background: #f7f7f9; 713 | border-radius: 0.5rem; 714 | margin-top: 1rem; 715 | margin-left: 1rem; 716 | } 717 | 718 | #About .languages .background .e { 719 | padding: 0.5rem; 720 | } 721 | 722 | #About .background a { 723 | position: relative; 724 | left: 2%; 725 | text-decoration: none; 726 | bottom: 34%; 727 | font-style: normal; 728 | font-weight: 700; 729 | font-size: 1rem; 730 | line-height: 1.25rem; 731 | color: hsl(218, 41%, 25%); 732 | } 733 | 734 | #About .other { 735 | margin-bottom: 14rem; 736 | } 737 | 738 | #About .other hr { 739 | width: 87%; 740 | margin-left: 1.8rem; 741 | margin-right: 1.8rem; 742 | background: #dfe1e6; 743 | } 744 | 745 | #About .other img { 746 | position: relative; 747 | } 748 | 749 | #About .other .f { 750 | padding: 0.60rem; 751 | } 752 | 753 | #About .other #toggle_down { 754 | margin-top: 0.4rem; 755 | margin-right: 2.3rem; 756 | position: relative; 757 | left: 87%; 758 | bottom: 40px; 759 | } 760 | 761 | footer #contact-form { 762 | margin-top: -3rem; 763 | display: grid; 764 | background-image: url("Images/Footer.png"); 765 | background-size: cover; 766 | width: 100%; 767 | overflow-x: hidden; 768 | padding-bottom: 8rem; 769 | } 770 | 771 | footer #contact-form .contact-details { 772 | margin-top: 4rem; 773 | display: flex; 774 | flex-direction: column; 775 | align-items: center; 776 | justify-content: center; 777 | } 778 | 779 | footer #contact-form .contact-details h2 { 780 | font-family: 'Poppins', sans-serif; 781 | font-style: normal; 782 | font-weight: 700; 783 | font-size: 40px; 784 | margin-bottom: 1rem; 785 | padding-bottom: 1rem; 786 | line-height: 52px; 787 | display: flex; 788 | align-items: center; 789 | text-align: center; 790 | color: #fff; 791 | } 792 | 793 | footer #contact-form .contact-details p { 794 | width: 80%; 795 | margin-bottom: 1.5rem; 796 | font-family: 'Poppins', sans-serif; 797 | font-style: normal; 798 | font-weight: 400; 799 | font-size: 20px; 800 | line-height: 28px; 801 | text-align: center; 802 | color: #ebebff; 803 | display: flex; 804 | align-items: center; 805 | } 806 | 807 | #contact-form .form form { 808 | display: flex; 809 | flex-direction: column; 810 | align-items: center; 811 | } 812 | 813 | #contact-form .form input { 814 | margin-bottom: 15px; 815 | height: 48px; 816 | width: 90%; 817 | background: #fff; 818 | border: 1px solid #cdd8dc; 819 | border-radius: 8px; 820 | outline: none; 821 | font-family: 'Poppins', sans-serif; 822 | font-style: normal; 823 | font-weight: 400; 824 | font-size: 17px; 825 | line-height: 20px; 826 | display: flex; 827 | align-items: center; 828 | color: #172b4d; 829 | padding-left: 5%; 830 | transition: all 0.5s ease-in-out; 831 | } 832 | 833 | #contact-form .form input:hover, 834 | #contact-form .form input:active { 835 | transform: translateY(5px); 836 | } 837 | 838 | #contact-form .form textarea { 839 | font-family: 'Poppins', sans-serif; 840 | font-style: normal; 841 | border-radius: 2%; 842 | font-weight: 400; 843 | font-size: 1rem; 844 | outline: none; 845 | line-height: 24px; 846 | border: none; 847 | width: 90%; 848 | padding: 1rem; 849 | height: -webkit-fill-available; 850 | transition: all 0.5s ease-in-out; 851 | } 852 | 853 | #contact-form .form textarea:hover, 854 | #contact-form .form textarea:active { 855 | transform: translateY(5px); 856 | } 857 | 858 | .someter button:hover { 859 | background-color: #396df2; 860 | color: #fff; 861 | } 862 | 863 | .someter button:active { 864 | background-color: #1b50d4; 865 | color: #fff; 866 | } 867 | 868 | .someter button:disabled { 869 | background-color: #fff; 870 | color: rgb(134, 134, 134); 871 | } 872 | 873 | #error { 874 | color: red; 875 | -webkit-text-stroke: 10px solid #fff; 876 | display: flex; 877 | flex-wrap: wrap; 878 | margin: 0 auto; 879 | padding-top: 1rem; 880 | } 881 | 882 | hr { 883 | margin: 1rem; 884 | } 885 | 886 | .arrow-left { 887 | position: relative; 888 | left: 88%; 889 | bottom: 39px; 890 | } 891 | 892 | .arrow-down { 893 | transform: rotate(90deg); 894 | } 895 | 896 | #About .languages .visible{ 897 | display: none; 898 | } 899 | 900 | @media only screen and (min-width: 768px) { 901 | header .mobile-nav { 902 | display: none; 903 | } 904 | 905 | header .desktop-nav { 906 | display: flex; 907 | justify-content: space-between; 908 | background-color: #fff; 909 | position: absolute; 910 | width: 100%; 911 | height: 72px; 912 | } 913 | 914 | .content h1 { 915 | width: 82%; 916 | font-weight: 700; 917 | font-size: 48px; 918 | line-height: 60px; 919 | letter-spacing: 0.37px; 920 | color: #091e42; 921 | display: inline-flex; 922 | } 923 | 924 | .content p { 925 | width: 100%; 926 | font-weight: 400; 927 | font-size: 20px; 928 | line-height: 28px; 929 | color: #344563; 930 | } 931 | 932 | .content a { 933 | font-style: normal; 934 | font-weight: 500; 935 | font-size: 16px; 936 | width: auto; 937 | text-decoration: none; 938 | color: #7f8cff; 939 | } 940 | 941 | .content .icons { 942 | margin-left: -10rem; 943 | } 944 | 945 | header .desktop-nav a { 946 | text-decoration: none; 947 | } 948 | 949 | header .desktop-nav h4 { 950 | width: 100%; 951 | font-family: 'Poppins', sans-serif; 952 | font-style: normal; 953 | font-weight: 700; 954 | font-size: 18px; 955 | line-height: 20px; 956 | display: flex; 957 | align-items: center; 958 | text-align: center; 959 | color: #6070ff; 960 | margin-left: 4rem; 961 | padding-bottom: 2.8rem; 962 | flex: none; 963 | order: 0; 964 | flex-grow: 0; 965 | } 966 | 967 | .icons ul { 968 | margin: 0 9rem; 969 | display: flex; 970 | list-style: none; 971 | } 972 | 973 | .align span, 974 | .align li { 975 | font-size: 15px; 976 | } 977 | 978 | header .desktop-nav ul { 979 | display: flex; 980 | list-style: none; 981 | margin-right: 4rem; 982 | } 983 | 984 | header .desktop-nav li { 985 | width: 62px; 986 | height: 20px; 987 | font-family: 'Poppins', sans-serif; 988 | font-style: normal; 989 | font-weight: 800; 990 | font-size: 15px; 991 | line-height: 20px; 992 | align-items: center; 993 | text-align: center; 994 | color: #344563; 995 | justify-content: space-between; 996 | margin: 1.5rem; 997 | } 998 | 999 | header .desktop-nav a:hover, 1000 | header .desktop-nav a:active { 1001 | color: #1b50d4; 1002 | } 1003 | 1004 | #headline { 1005 | background-image: url("Images/header-d.png"); 1006 | background-size: 100% 100%; 1007 | background-position: top left; 1008 | background-repeat: no-repeat; 1009 | display: flex; 1010 | flex-direction: column; 1011 | margin-bottom: 3rem; 1012 | } 1013 | 1014 | .shapes { 1015 | background-size: inherit; 1016 | background-image: url(Images/shapes.png); 1017 | margin: auto; 1018 | height: 90vh; 1019 | } 1020 | 1021 | .content { 1022 | width: 80%; 1023 | margin-left: 10%; 1024 | margin-top: 7%; 1025 | padding-top: 2.5%; 1026 | } 1027 | 1028 | #work { 1029 | display: flex; 1030 | align-items: center; 1031 | justify-content: center; 1032 | flex-direction: column; 1033 | padding: 1rem; 1034 | } 1035 | 1036 | #work .work-card { 1037 | padding-top: 4.5rem; 1038 | max-width: 1156px; 1039 | background-color: #fff; 1040 | border-radius: 24px; 1041 | display: flex; 1042 | align-items: center; 1043 | justify-content: center; 1044 | margin-bottom: 5rem; 1045 | border: 1px solid rgb(217, 213, 213); 1046 | box-shadow: 5px 5px 10px 5px rgb(217, 213, 213, 0.5); 1047 | column-gap: 2rem; 1048 | } 1049 | 1050 | #work .work-card:nth-child(odd) { 1051 | flex-direction: row; 1052 | } 1053 | 1054 | #work .work-card:nth-child(even) { 1055 | flex-direction: row-reverse; 1056 | } 1057 | 1058 | .work-card .work-detials { 1059 | margin-bottom: 3.5rem !important; 1060 | width: 100%; 1061 | } 1062 | 1063 | .work-card .img1 { 1064 | width: 100%; 1065 | height: auto; 1066 | object-fit: cover; 1067 | margin-top: -4.6rem; 1068 | display: flex; 1069 | } 1070 | 1071 | .work-card .img1:hover { 1072 | transform: scale(1.04); 1073 | } 1074 | 1075 | .work-card .work-detials h2 { 1076 | font-family: 'Poppins', sans-serif; 1077 | font-style: normal; 1078 | font-weight: 700; 1079 | font-size: 40px; 1080 | line-height: 52px; 1081 | color: #091e42; 1082 | flex: none; 1083 | order: 0; 1084 | flex-grow: 0; 1085 | } 1086 | 1087 | .align ul li { 1088 | margin-left: 1.8rem; 1089 | } 1090 | 1091 | .work-card .work-detials .align ul { 1092 | display: flex; 1093 | padding-top: 1rem; 1094 | padding-bottom: 1rem; 1095 | } 1096 | 1097 | .work-card .work-detials .align ul span { 1098 | width: fit-content; 1099 | height: 24px; 1100 | font-family: 'Poppins', sans-serif; 1101 | font-style: normal; 1102 | font-weight: 700; 1103 | font-size: 18px; 1104 | line-height: 24px; 1105 | color: #344563; 1106 | } 1107 | 1108 | .work-card .work-detials .align ul li { 1109 | font-family: 'Poppins', sans-serif; 1110 | font-style: normal; 1111 | font-weight: 400; 1112 | font-size: 18px; 1113 | line-height: 24px; 1114 | color: #6b778c; 1115 | margin-left: 2rem; 1116 | } 1117 | 1118 | .desktop-pop p { 1119 | font-weight: 400; 1120 | font-size: 16px; 1121 | line-height: 30px; 1122 | display: flex; 1123 | width: -webkit-fill-available; 1124 | flex-wrap: wrap; 1125 | } 1126 | 1127 | .work-card .work-detials p { 1128 | width: 90%; 1129 | display: flex; 1130 | flex-wrap: wrap; 1131 | font-family: 'Poppins', sans-serif; 1132 | font-style: normal; 1133 | font-weight: 400; 1134 | font-size: 16px; 1135 | line-height: 24px; 1136 | color: #344563; 1137 | flex: none; 1138 | order: 1; 1139 | flex-grow: 0; 1140 | } 1141 | 1142 | .work-card .work-detials .tags .hash { 1143 | display: flex; 1144 | list-style: none; 1145 | flex-direction: row; 1146 | align-items: center; 1147 | font-family: 'Poppins', sans-serif; 1148 | gap: 1rem; 1149 | } 1150 | 1151 | .work-card .work-detials .tags .hash .HTML { 1152 | display: flex; 1153 | flex-direction: row; 1154 | align-items: center; 1155 | padding: 4px 10px; 1156 | width: fit-content; 1157 | height: 24px; 1158 | background: #ebebff; 1159 | color: #6070ff; 1160 | font-weight: 500; 1161 | font-size: 12px; 1162 | letter-spacing: 0.03em; 1163 | border-radius: 8px; 1164 | order: 0; 1165 | flex-grow: 0; 1166 | } 1167 | 1168 | .work-card .work-detials .tags .hash .CSS { 1169 | display: flex; 1170 | flex-direction: row; 1171 | align-items: center; 1172 | padding: 4px 10px; 1173 | width: fit-content; 1174 | height: 24px; 1175 | background: #ebebff; 1176 | color: #6070ff; 1177 | font-weight: 500; 1178 | font-size: 12px; 1179 | letter-spacing: 0.03em; 1180 | border-radius: 8px; 1181 | order: 1; 1182 | flex-grow: 0; 1183 | } 1184 | 1185 | .work-card .work-detials .tags .hash .JavaScript { 1186 | display: flex; 1187 | flex-direction: row; 1188 | align-items: center; 1189 | padding: 4px 14px; 1190 | width: fit-content; 1191 | height: 24px; 1192 | background: #ebebff; 1193 | color: #6070ff; 1194 | font-weight: 500; 1195 | font-size: 12px; 1196 | letter-spacing: 0.03em; 1197 | border-radius: 8px; 1198 | order: 2; 1199 | flex-grow: 0; 1200 | } 1201 | 1202 | .resume { 1203 | box-sizing: border-box; 1204 | width: 30%; 1205 | padding: 12px; 1206 | margin-top: 1.5rem; 1207 | border: 1px solid #6070ff; 1208 | border-radius: 8px; 1209 | background-color: #fff; 1210 | font-family: 'Poppins', sans-serif; 1211 | font-style: normal; 1212 | font-weight: 500; 1213 | font-size: 17px; 1214 | line-height: 1.5rem; 1215 | text-align: center; 1216 | letter-spacing: 0.03em; 1217 | color: #396df2; 1218 | margin-right: 10rem; 1219 | } 1220 | 1221 | .someter button { 1222 | width: 135px; 1223 | box-sizing: border-box; 1224 | height: 48px; 1225 | border: 5px solid #6070ff; 1226 | border-radius: 8px; 1227 | background-color: #fff; 1228 | font-family: 'Poppins', sans-serif; 1229 | font-style: normal; 1230 | font-weight: 500; 1231 | font-size: 17px; 1232 | line-height: 1.5rem; 1233 | text-align: center; 1234 | letter-spacing: 0.03em; 1235 | color: #396df2; 1236 | display: flex; 1237 | align-items: center; 1238 | } 1239 | 1240 | .resume:hover { 1241 | background-color: #396df2; 1242 | color: #fff; 1243 | } 1244 | 1245 | .resume:active { 1246 | background-color: #1b50d4; 1247 | color: #fff; 1248 | } 1249 | 1250 | .resume:disabled { 1251 | background-color: #fff; 1252 | color: grey; 1253 | } 1254 | 1255 | .Modal { 1256 | background-color: #fff; 1257 | height: fit-content; 1258 | width: 80%; 1259 | border-radius: 1rem; 1260 | position: relative; 1261 | right: 0; 1262 | top: 0; 1263 | left: 0; 1264 | align-items: center; 1265 | padding: 2rem; 1266 | margin: 0 auto; 1267 | z-index: 999; 1268 | display: flex; 1269 | flex-direction: column; 1270 | gap: 1rem; 1271 | } 1272 | 1273 | .Modal-Title { 1274 | width: 100%; 1275 | } 1276 | 1277 | .Modal-Title .heading { 1278 | font-size: 40px; 1279 | } 1280 | 1281 | .Modal .desktop-pop { 1282 | display: flex; 1283 | flex-direction: row; 1284 | gap: 2rem; 1285 | } 1286 | 1287 | .desktop-pop .deskpop { 1288 | display: flex; 1289 | flex-direction: column; 1290 | flex-wrap: wrap; 1291 | gap: 1rem; 1292 | } 1293 | 1294 | .tags { 1295 | margin-bottom: 1rem; 1296 | } 1297 | 1298 | #About .Aboutcontent .resume { 1299 | margin-top: 1rem; 1300 | width: max-content; 1301 | order: 5; 1302 | } 1303 | 1304 | #work .work-card-2 { 1305 | height: 496px; 1306 | width: 90%; 1307 | flex-direction: row-reverse; 1308 | background-color: #fff; 1309 | border-radius: 24px; 1310 | display: flex; 1311 | align-items: center; 1312 | justify-content: center; 1313 | border: 1px solid rgb(217, 213, 213); 1314 | box-shadow: 5px 5px 10px 5px rgb(217, 213, 213, 0.5); 1315 | } 1316 | 1317 | #About { 1318 | display: flex; 1319 | flex-wrap: wrap; 1320 | margin-top: 5rem; 1321 | background-image: url("Images/self-desktop1.png"); 1322 | background-size: cover; 1323 | width: 100%; 1324 | height: auto; 1325 | } 1326 | 1327 | #About .center { 1328 | display: flex; 1329 | flex-direction: row; 1330 | margin: 0 auto; 1331 | } 1332 | 1333 | #About .Aboutcontent { 1334 | display: flex; 1335 | flex-wrap: wrap; 1336 | flex-direction: column; 1337 | width: 50%; 1338 | padding-left: 3rem; 1339 | } 1340 | 1341 | #About .Aboutcontent h3 { 1342 | font-family: 'Poppins', sans-serif; 1343 | font-style: normal; 1344 | font-weight: 700; 1345 | font-size: 2.5rem; 1346 | line-height: 3.25rem; 1347 | align-items: center; 1348 | color: #172b4d; 1349 | order: 0; 1350 | } 1351 | 1352 | #About .Aboutcontent p { 1353 | font-family: 'Poppins', sans-serif; 1354 | font-style: normal; 1355 | font-weight: 400; 1356 | font-size: 1rem; 1357 | line-height: 1.5rem; 1358 | color: #344563; 1359 | padding-top: 1.2rem; 1360 | padding-bottom: 1rem; 1361 | order: 1; 1362 | } 1363 | 1364 | #About .Aboutcontent a { 1365 | font-family: 'Poppins', sans-serif; 1366 | font-style: normal; 1367 | font-weight: 500; 1368 | font-size: 1rem; 1369 | color: #7f8cff; 1370 | text-decoration: none; 1371 | margin-top: -0.2rem; 1372 | order: 2; 1373 | } 1374 | 1375 | #About .iconsAbout ul { 1376 | display: flex; 1377 | list-style: none; 1378 | order: 3; 1379 | margin-top: 1.5rem; 1380 | margin-bottom: 0.5rem; 1381 | } 1382 | 1383 | #About .iconsAbout a { 1384 | padding-left: 1.5rem; 1385 | } 1386 | 1387 | #About .info { 1388 | display: flex; 1389 | flex-direction: column; 1390 | margin-top: 7rem; 1391 | width: 50%; 1392 | flex-wrap: wrap; 1393 | padding-right: 3rem; 1394 | } 1395 | 1396 | #About .other h5 { 1397 | height: 1.5rem; 1398 | font-family: 'Poppins', sans-serif; 1399 | font-style: normal; 1400 | font-weight: 600; 1401 | font-size: 1.25rem; 1402 | color: #344563; 1403 | } 1404 | 1405 | #About .inline h5 { 1406 | color: #344563; 1407 | font-weight: 650; 1408 | font-size: 1.25rem; 1409 | } 1410 | 1411 | #About .info .inline .arrow { 1412 | margin-top: 0.4rem; 1413 | margin-right: 2.3rem; 1414 | position: relative; 1415 | bottom: 25px; 1416 | } 1417 | 1418 | #About .languages ul { 1419 | display: flex; 1420 | flex-direction: row; 1421 | list-style: none; 1422 | margin-left: 0.8rem; 1423 | flex-wrap: wrap; 1424 | } 1425 | 1426 | #About .languages .background { 1427 | width: 110px; 1428 | height: 7rem; 1429 | background: #f7f7f9; 1430 | border-radius: 0.5rem; 1431 | margin-top: 1rem; 1432 | } 1433 | 1434 | #About .languages .background .e { 1435 | padding: 0.5rem; 1436 | } 1437 | 1438 | #About .background a { 1439 | font-family: 'Poppins', sans-serif; 1440 | text-decoration: none; 1441 | font-style: normal; 1442 | font-weight: 700; 1443 | font-size: 1rem; 1444 | line-height: 1.25rem; 1445 | color: hsl(218, 41%, 25%); 1446 | } 1447 | 1448 | #About .info .languages .js { 1449 | margin: 0.7rem; 1450 | position: inherit; 1451 | } 1452 | 1453 | #About .info .languages .background .html, 1454 | #About .info .languages .background .css { 1455 | display: block; 1456 | position: inherit; 1457 | margin-left: 0.9rem; 1458 | } 1459 | 1460 | #About .other { 1461 | position: relative; 1462 | top: 2rem; 1463 | } 1464 | 1465 | #About .other img { 1466 | margin-top: 0.4rem; 1467 | margin-right: 2.5rem; 1468 | position: relative; 1469 | bottom: 37px; 1470 | } 1471 | 1472 | footer #contact-form { 1473 | margin-top: -5rem; 1474 | padding: 2rem; 1475 | display: grid; 1476 | background-image: url("Images/Footer_Desktop.png"); 1477 | background-size: cover; 1478 | width: 100%; 1479 | height: auto; 1480 | } 1481 | 1482 | footer #contact-form .form-information { 1483 | margin-top: 5rem; 1484 | display: flex; 1485 | flex-direction: column; 1486 | align-items: center; 1487 | justify-content: center; 1488 | } 1489 | 1490 | footer #contact-form .form-information h2 { 1491 | height: 56px; 1492 | font-family: 'Poppins', sans-serif; 1493 | font-style: normal; 1494 | font-weight: 700; 1495 | font-size: 40px; 1496 | line-height: 52px; 1497 | display: flex; 1498 | align-items: center; 1499 | text-align: center; 1500 | color: #fff; 1501 | } 1502 | 1503 | footer #contact-form .contact-details p { 1504 | width: 569px; 1505 | font-family: 'Poppins', sans-serif; 1506 | font-style: normal; 1507 | font-weight: 400; 1508 | font-size: 20px; 1509 | line-height: 28px; 1510 | text-align: center; 1511 | color: #ebebff; 1512 | display: flex; 1513 | align-items: center; 1514 | margin-top: -1.1rem; 1515 | margin-bottom: 3rem; 1516 | } 1517 | 1518 | #contact-form .form { 1519 | display: flex; 1520 | flex-direction: column; 1521 | align-items: center; 1522 | margin-top: -1rem; 1523 | } 1524 | 1525 | #contact-form .form input { 1526 | margin-bottom: 15px; 1527 | height: 48px; 1528 | width: 456px; 1529 | background: #fff; 1530 | border: 1px solid #cdd8dc; 1531 | border-radius: 8px; 1532 | font-family: 'Poppins', sans-serif; 1533 | font-style: normal; 1534 | font-weight: 400; 1535 | font-size: 17px; 1536 | line-height: 20px; 1537 | display: flex; 1538 | align-items: center; 1539 | color: #172b4d; 1540 | padding-left: 5%; 1541 | } 1542 | 1543 | #contact-form .form textarea { 1544 | padding-left: 4%; 1545 | padding-top: 4%; 1546 | height: 200px; 1547 | width: 456px; 1548 | border-radius: 2%; 1549 | border: 1px solid #cdd8dc; 1550 | font-family: 'Poppins', sans-serif; 1551 | font-style: normal; 1552 | font-weight: 400; 1553 | font-size: 15px; 1554 | line-height: 24px; 1555 | } 1556 | 1557 | #contact-form .form .someter button { 1558 | padding-left: 8px; 1559 | } 1560 | 1561 | #About .languages .background .f { 1562 | position: static; 1563 | padding: 0.5rem; 1564 | } 1565 | 1566 | .Modal .work-img { 1567 | display: contents; 1568 | } 1569 | .Modal .img1 { 1570 | width: 50%; 1571 | } 1572 | } 1573 | 1574 | --------------------------------------------------------------------------------