├── .gitignore ├── images ├── p1.png ├── p2.png ├── p3.png ├── p4.png ├── p5.png ├── p6.png ├── desktop-shot.PNG ├── mobile-shot1.PNG ├── mobile-shot2.PNG ├── desktop-popup-image.png ├── header-illsutration-mobile.png ├── Icons │ ├── Icon-Arrow-button.svg │ ├── Icon-Medium.svg │ ├── Icon-Menu.svg │ ├── Icon-see-live.svg │ ├── Icom-popup-close.svg │ ├── Icom-popup-close-desktop.svg │ ├── Icon-close.svg │ ├── Icon-see-source.svg │ ├── Icon-Twitter.svg │ ├── Icon-Linkedin.svg │ ├── Icon-GitHub.svg │ ├── icon-skills.svg │ ├── Group.svg │ ├── Icon-Angelist.svg │ ├── icon-languages.svg │ └── icon-frameworks.svg ├── aboutme-bottomleft.svg ├── contact-illustration-desktop-left.svg ├── contact-form-illustration.svg ├── contact-illustration-desktop-left-2.svg ├── contact-illustratoin-desktop-right.svg ├── aboutme-topright.svg ├── aboutme-bottomleft-desktop.svg ├── aboutme-topright-desktop.svg ├── header-illsutration-mobile.svg └── Header-llustration-desktop.svg ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── localStorage.js ├── LICENSE ├── modal-styles.css ├── .github └── workflows │ └── linters.yml ├── desktop-styles.css ├── README.md ├── Script.js ├── index.html ├── styles.css └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /images/p1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/Portfolio/HEAD/images/p1.png -------------------------------------------------------------------------------- /images/p2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/Portfolio/HEAD/images/p2.png -------------------------------------------------------------------------------- /images/p3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/Portfolio/HEAD/images/p3.png -------------------------------------------------------------------------------- /images/p4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/Portfolio/HEAD/images/p4.png -------------------------------------------------------------------------------- /images/p5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/Portfolio/HEAD/images/p5.png -------------------------------------------------------------------------------- /images/p6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/Portfolio/HEAD/images/p6.png -------------------------------------------------------------------------------- /images/desktop-shot.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/Portfolio/HEAD/images/desktop-shot.PNG -------------------------------------------------------------------------------- /images/mobile-shot1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/Portfolio/HEAD/images/mobile-shot1.PNG -------------------------------------------------------------------------------- /images/mobile-shot2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/Portfolio/HEAD/images/mobile-shot2.PNG -------------------------------------------------------------------------------- /images/desktop-popup-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/Portfolio/HEAD/images/desktop-popup-image.png -------------------------------------------------------------------------------- /images/header-illsutration-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ab-noori/Portfolio/HEAD/images/header-illsutration-mobile.png -------------------------------------------------------------------------------- /.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 | } 26 | -------------------------------------------------------------------------------- /images/Icons/Icon-Arrow-button.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 9 | } 10 | ], 11 | "scss/at-rule-no-unknown": [ 12 | true, 13 | { 14 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 15 | } 16 | ], 17 | "csstree/validator": true 18 | }, 19 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 20 | } 21 | -------------------------------------------------------------------------------- /localStorage.js: -------------------------------------------------------------------------------- 1 | const formString = document.querySelector('.form-itself'); 2 | formString.addEventListener('input', () => { 3 | const information = { 4 | name: document.getElementById('name').value, 5 | email: document.getElementById('email').value, 6 | message: document.getElementById('textarea').value, 7 | }; 8 | 9 | localStorage.setItem('formString', JSON.stringify(information)); 10 | }); 11 | 12 | const formObj = JSON.parse(localStorage.getItem('formString')); 13 | document.getElementById('name').value = formObj.name; 14 | document.getElementById('email').value = formObj.email; 15 | document.getElementById('textarea').value = formObj.message; 16 | -------------------------------------------------------------------------------- /images/Icons/Icon-Medium.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/Icons/Icon-Menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/Icons/Icon-see-live.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/Icons/Icom-popup-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/Icons/Icom-popup-close-desktop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /images/Icons/Icon-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/Icons/Icon-see-source.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Abdul Ali Noori 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /images/Icons/Icon-Twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /images/Icons/Icon-Linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /images/Icons/Icon-GitHub.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /images/Icons/icon-skills.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /modal-styles.css: -------------------------------------------------------------------------------- 1 | .modal { 2 | width: 313px; 3 | top: 50%; 4 | left: 50%; 5 | z-index: 50; 6 | position: fixed; 7 | border-radius: 15px; 8 | padding: 15px; 9 | display: grid; 10 | gap: 10px; 11 | background-color: white; 12 | transform: translate(-50%, -50%) scale(0); 13 | transition: 200ms ease-in-out; 14 | overflow-y: auto; 15 | } 16 | 17 | .popup-snapshoot { 18 | display: flex; 19 | justify-content: center; 20 | } 21 | 22 | #popup-snapshoot-desktop { 23 | display: none; 24 | } 25 | 26 | .modal.active { 27 | transform: translate(-50%, -50%) scale(1); 28 | } 29 | 30 | .modal-header { 31 | display: flex; 32 | gap: 10px; 33 | flex-direction: column; 34 | } 35 | 36 | .modal-header-content { 37 | display: flex; 38 | } 39 | 40 | .modal-header ul li { 41 | display: flex; 42 | align-items: center; 43 | padding: 8px 12px; 44 | background: #ebf0ee; 45 | border-radius: 4px; 46 | color: #3a4a42; 47 | font-size: 12px; 48 | font-weight: 600; 49 | line-height: 16px; 50 | } 51 | 52 | .modal-header-title { 53 | font-size: 1.25rem; 54 | font-weight: bold; 55 | } 56 | 57 | .modal-header-close-button { 58 | border: none; 59 | outline: none; 60 | background: none; 61 | cursor: pointer; 62 | position: fixed; 63 | top: 34px; 64 | right: 31px; 65 | } 66 | 67 | .modal-header-close-button-desktop { 68 | display: none; 69 | } 70 | 71 | .modal-body { 72 | padding: 0; 73 | } 74 | 75 | .modal-bottom-links { 76 | display: flex; 77 | gap: 20px; 78 | justify-content: center; 79 | } 80 | 81 | .modal-bottom-links .btn { 82 | min-width: 100px; 83 | text-align: center; 84 | padding: 10px; 85 | font-weight: 600; 86 | font-size: 15px; 87 | line-height: 20px; 88 | } 89 | 90 | .modal-bottom-links .btn a { 91 | display: flex; 92 | align-items: center; 93 | flex-wrap: nowrap; 94 | text-align: center; 95 | gap: 8px; 96 | font-weight: 500; 97 | font-size: 17px; 98 | line-height: 24px; 99 | } 100 | 101 | .modal-top-links { 102 | display: none; 103 | } 104 | 105 | #overlay { 106 | position: fixed; 107 | top: 0; 108 | left: 0; 109 | right: 0; 110 | bottom: 0; 111 | opacity: 0; 112 | transition: 200ms ease-in-out; 113 | pointer-events: none; 114 | background-color: rgba(0, 0, 0, 0.5); 115 | } 116 | 117 | #overlay.active { 118 | opacity: 1; 119 | pointer-events: all; 120 | } 121 | -------------------------------------------------------------------------------- /images/Icons/Group.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /images/aboutme-bottomleft.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /images/Icons/Icon-Angelist.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /.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: "12.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: "12.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: "12.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: "12.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 -------------------------------------------------------------------------------- /images/Icons/icon-languages.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /images/contact-illustration-desktop-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /images/contact-form-illustration.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /images/contact-illustration-desktop-left-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /images/contact-illustratoin-desktop-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /images/aboutme-topright.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /images/aboutme-bottomleft-desktop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /images/Icons/icon-frameworks.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /images/aboutme-topright-desktop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /desktop-styles.css: -------------------------------------------------------------------------------- 1 | @media only screen and (min-width: 768px) { 2 | .wrapper { 3 | width: 1440px; 4 | margin: 0 auto; 5 | gap: 60px; 6 | background: url("images/Header-llustration-desktop.svg"); 7 | background-position: top; 8 | background-repeat: no-repeat; 9 | } 10 | 11 | header { 12 | font-weight: 600; 13 | font-size: 1.1rem; 14 | justify-content: center; 15 | } 16 | 17 | .navbar { 18 | justify-content: center; 19 | } 20 | 21 | .navbar ul li a { 22 | color: #344563; 23 | font-size: 15px; 24 | font-weight: 600; 25 | } 26 | 27 | .humburger { 28 | display: none; 29 | } 30 | 31 | .nav-branding { 32 | display: none; 33 | } 34 | 35 | .nav-menu { 36 | height: 40px; 37 | position: static; 38 | width: unset; 39 | flex-direction: row; 40 | background-color: unset; 41 | justify-content: space-between; 42 | align-items: center; 43 | gap: 50px; 44 | } 45 | 46 | /* ----------------------------------Headline Section------------------------------------ */ 47 | 48 | .headline { 49 | height: 100vh; 50 | margin: 0; 51 | padding: 8% 30%; 52 | background-image: none; 53 | } 54 | 55 | .headline h1 br { 56 | display: none; 57 | } 58 | 59 | .headline .social-media { 60 | width: 50%; 61 | } 62 | 63 | /* ----------------------------------Project Section------------------------------------ */ 64 | 65 | .recent-work-container { 66 | width: 1171px; 67 | grid-template-columns: 1fr 1fr 1fr; 68 | } 69 | 70 | /* ----------------------------------about-me Section------------------------------------ */ 71 | 72 | .about-me-carts-container { 73 | width: 1171px; 74 | grid-template-columns: 1fr 1fr 1fr; 75 | } 76 | 77 | .about-me-header { 78 | justify-content: center; 79 | background: url("images/aboutme-topright-desktop.svg"), url("images/aboutme-bottomleft-desktop.svg"); 80 | background-position: right top, left bottom; 81 | background-repeat: no-repeat; 82 | } 83 | 84 | .about-me-header p { 85 | width: 50%; 86 | } 87 | 88 | /* ----------------------------------form Section------------------------------------ */ 89 | 90 | .from-section { 91 | justify-items: center; 92 | padding-bottom: 30vh; 93 | background: 94 | url("images/contact-illustratoin-desktop-right.svg"), 95 | url("images/contact-illustration-desktop-left.svg"), 96 | url("images/contact-illustration-desktop-left-2.svg"); 97 | background-position: right bottom, left bottom, left 25% bottom; 98 | background-repeat: no-repeat; 99 | } 100 | 101 | .form-section-container { 102 | width: 1171px; 103 | display: flex; 104 | flex-direction: row; 105 | justify-content: center; 106 | align-items: flex-start; 107 | gap: 2%; 108 | } 109 | 110 | .form-header { 111 | width: 33%; 112 | padding: 5% 0; 113 | font-size: 1.5rem; 114 | font-weight: 600; 115 | line-height: 2rem; 116 | text-align: justify; 117 | } 118 | 119 | .form-itself { 120 | width: 65%; 121 | display: flex; 122 | flex-direction: column; 123 | gap: 20px; 124 | } 125 | 126 | .form-itself .btn { 127 | align-self: flex-start; 128 | } 129 | 130 | /* ----------------------------------fotter Section------------------------------------ */ 131 | 132 | footer { 133 | border-top: 1px solid #dfe1e6; 134 | padding: 1%; 135 | } 136 | 137 | footer span { 138 | display: none; 139 | } 140 | 141 | /* ---------------------------------------Modal Styles---------------------------------- */ 142 | 143 | .modal { 144 | width: 600px; 145 | height: 85vh; 146 | padding: 20px; 147 | overflow-y: auto; 148 | overflow-x: hidden; 149 | } 150 | 151 | #popup-snapshoot-mobile { 152 | display: none; 153 | } 154 | 155 | .popup-snapshoot #popup-snapshoot-desktop { 156 | display: unset; 157 | width: 580px; 158 | } 159 | 160 | .modal-header-content { 161 | justify-content: space-between; 162 | } 163 | 164 | .modal-top-links { 165 | width: 45%; 166 | display: flex; 167 | justify-content: flex-end; 168 | gap: 5px; 169 | } 170 | 171 | .modal-top-links .btn { 172 | min-width: 100px; 173 | text-align: center; 174 | padding: 10px; 175 | font-weight: 600; 176 | font-size: 15px; 177 | line-height: 20px; 178 | } 179 | 180 | .modal-top-links .btn a { 181 | display: flex; 182 | align-items: center; 183 | flex-wrap: nowrap; 184 | gap: 4px; 185 | justify-content: space-between; 186 | text-align: center; 187 | } 188 | 189 | .modal-bottom-links { 190 | display: none; 191 | } 192 | 193 | .modal-header-close-button-desktop { 194 | display: unset; 195 | position: unset; 196 | padding: 0; 197 | width: 40px; 198 | border-radius: 5px; 199 | cursor: pointer; 200 | border: none; 201 | } 202 | 203 | .modal-header-close-button { 204 | display: none; 205 | } 206 | 207 | .modal-body { 208 | font-weight: 400; 209 | font-size: 16px; 210 | line-height: 30px; 211 | color: #344563; 212 | } 213 | } 214 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ![](https://img.shields.io/badge/Microverse-blueviolet) 4 | 5 |
6 | 7 |
8 | 9 | > # Portfolio 10 | 11 | | Project Veiw Screenshots| 12 | |---------------------------------------| 13 | |
screenshot
| 14 | |
screenshotscreenshot
| 15 | 16 | # 📗 Table of Contents 17 | 18 | - [📖 About the Project](#about-project) 19 | - [🛠 Built With](#built-with) 20 | - [Tech Stack](#tech-stack) 21 | - [Key Features](#key-features) 22 | - [🚀 Live Demo](#live-demo) 23 | - [💻 Getting Started](#getting-started) 24 | - [Setup](#setup) 25 | - [Prerequisites](#prerequisites) 26 | - [Install](#install) 27 | - [Usage](#usage) 28 | - [Run tests](#run-tests) 29 | - [Deployment](#triangular_flag_on_post-deployment) 30 | - [👥 Authors](#authors) 31 | - [🔭 Future Features](#future-features) 32 | - [🤝 Contributing](#contributing) 33 | - [⭐️ Show your support](#support) 34 | - [🙏 Acknowledgements](#acknowledgements) 35 | - [❓ FAQ (OPTIONAL)](#faq) 36 | - [📝 License](#license) 37 | 38 | 39 | # 📖 [My-Portfolio] 40 | 41 | > **[My-Portfolio]** is a project to showcase all of my recent work. It will maitain the information and history of my recent projects, 42 | the brave informatin about me, and the link to my resume. it will also provide the context to be in contact with the clients. 43 | 44 | ## 🛠 Built With 45 | 46 | ### Tech Stack 47 | 48 |
49 | Client 50 | 55 |
56 | 57 |
58 | Server 59 | 62 |
63 | 64 |
65 | Database 66 | 69 |
70 | 71 | 72 | ### Key Features 73 | - **[Represent most recent projcts]** 74 | - **[Represnt skills and technogies]** 75 | - **[Create contact context for visitors]** 76 | - **[Responsive with the view of desktop and mobile]** 77 | 78 |

(back to top)

79 | 80 | 81 | ## 🚀 Live Demo 82 | 83 | > - [Live Demo On Gh-pages](https://ab-noori.github.io/Portfolio) 84 | > - [Live Demo On Render](https://portfolio-ab.onrender.com) 85 | 86 |

(back to top)

87 | 88 | 89 | ## 💻 Getting Started 90 | 91 | 92 | To get a local copy up and running, follow these steps. 93 | 94 | ### Prerequisites 95 | 96 | In order to run this project you need: 97 | - A Nude.js installed on your local system. 98 | - A browser of you choice. 99 | - A text editor of your choice. 100 | 101 | 102 | ### Setup 103 | 104 | Clone this repository to your desired folder: 105 | 106 | - Use the following Commands: 107 | 108 | cd your-desired-folder 109 | git clone git@github.com:ab-noori/Portfolio.git 110 | 111 | 112 | 113 | 114 | ### Install 115 | 116 | Install this project with: 117 | - You can deploy it with your hosting provider of your choise. 118 | 119 | 120 | ### Usage 121 | 122 | - To demonstrate your skills & knowlege of technoly. 123 | - To represent the most recent project. 124 | - to maitain connection with visitors. 125 | 126 | ### Run tests 127 | - Run the following script and style test: 128 | 129 | npx hint . 130 | npx hint . --fix 131 | 132 | npx eslint . 133 | npx eslint . --fix 134 | 135 | npx stylelint "**/*.{css,scss}" 136 | npx stylelint "**/*.{css,scss}" --fix 137 | 138 | ### Deployment 139 | 140 | You can deploy this project using: 141 | - Free deployment services like GitHub pages. 142 | - Any deployment services of your choice. 143 | 144 |

(back to top)

145 | 146 | 147 | ## 👥 Authors 148 | 149 | 150 | 👤 **Abdul Ali Noori** 151 | 152 | - GitHub: [@ab-noori](https://github.com/ab-noori) 153 | - Twitter: [@AbdulAliNoori4](https://twitter.com/AbdulAliNoori4) 154 | - LinkedIn: [abdul-ali-noori](https://www.linkedin.com/in/abdul-ali-noori-384b85195/) 155 | 156 | 157 |

(back to top)

158 | 159 | 160 | ## 🔭 Future Features 161 | - [ ] **[Responsiveness with the all kind of laptop and handheld devices viewport]** 162 | 163 |

(back to top)

164 | 165 | 166 | ## 🤝 Contributing 167 | 168 | Contributions, issues, and feature requests are welcome! 169 | 170 | Feel free to check the [issues page](../../issues/). 171 | 172 |

(back to top)

173 | 174 | 175 | ## ⭐️ Show your support 176 | 177 | If you like this project, you are most welcome to Contribute. 178 | 179 |

(back to top)

180 | 181 | 182 | ## 🙏 Acknowledgments 183 | 184 | 185 | I would like to thank all of My colleagues and supporters. 186 | 187 |

(back to top)

188 | 189 |

(back to top)

190 | 191 | 192 | ## 📝 License 193 | 194 | This project is [MIT](./LICENSE) licensed. 195 | 196 |

(back to top)

197 | -------------------------------------------------------------------------------- /Script.js: -------------------------------------------------------------------------------- 1 | const projectCarts = document.getElementById('project-carts'); 2 | 3 | const cartsData = [ 4 | { 5 | id: '1', 6 | title: 'Salsal Development Group Website', 7 | desc: 'SalsalDevGroup Website is a platform to showcase the Salsal Developers group recent projects, maintain the information and history of the group recent projects, the short biography of each developer, and the link to recent projects. it will also provide the context for receiving proposals and contacting the clients in its future features.', 8 | technogies: ['Ruby on rails', 'CSS', 'HTML', 'JavScript'], 9 | img: 'images/p1.png', 10 | demoLink: 'https://ab-noori.github.io/SalsalDevGroup', 11 | sourceLink: 'https://github.com/ab-noori/SalsalDevGroup', 12 | }, 13 | { 14 | id: '2', 15 | title: 'Awesom Books Project with ES6', 16 | desc: 'Awesome Books ES6 is a simple website that is created using ES6 syntax and modules to displays a list of books and allows you to add and remove books from that list.', 17 | technogies: ['Ruby on rails', 'CSS', 'HTML', 'JavScript'], 18 | img: 'images/p2.png', 19 | demoLink: 'https://ab-noori.github.io/AwesomeBooksES6', 20 | sourceLink: 'https://github.com/ab-noori/AwesomeBooksES6', 21 | }, 22 | { 23 | id: '3', 24 | title: 'To Do List Project with Webpack', 25 | desc: 'In this project, we will build a simple HTML list of To Do tasks. The list will be styled according to the specifications listed later in this lesson. This simple web page will be built using webpack and served by a webpack dev server.', 26 | technogies: ['Ruby on rails', 'CSS', 'HTML', 'JavScript'], 27 | img: 'images/p3.png', 28 | demoLink: 'https://ab-noori.github.io/To-Do-List/dist', 29 | sourceLink: 'https://github.com/ab-noori/To-Do-List', 30 | }, 31 | { 32 | id: '4', 33 | title: 'Online Book Store Project with ES6', 34 | desc: 'A simple book store with vanilla JavaScript. You can select multiple numbers of books. Adding them to cart, removing them from cart, decreasing and increasing the cart amount and calculating the total cost of the cart.', 35 | technogies: ['Ruby on rails', 'CSS', 'HTML', 'JavScript'], 36 | img: 'images/p4.png', 37 | demoLink: 'https://ab-noori.github.io/OnlineBookStore', 38 | sourceLink: 'https://github.com/ab-noori/OnlineBookStore', 39 | }, 40 | { 41 | id: '5', 42 | title: 'Simple Webpack Joke Application', 43 | desc: ' A simple webpack joke application. but actually it is a frontend webpack environment boilerplate for building JavaScript applications, which I can later use as a starting point in my projects.', 44 | technogies: ['Ruby on rails', 'CSS', 'HTML', 'JavScript'], 45 | img: 'images/p5.png', 46 | demoLink: 'https://ab-noori.github.io/Webpack-Joke-App/dist', 47 | sourceLink: 'https://github.com/ab-noori/Webpack-Joke-App', 48 | }, 49 | { 50 | id: '6', 51 | title: 'Awesom Books Project No Modules', 52 | desc: 'Awesome Books is a simple website that displays a list of books and allows you to add and remove books from that list.', 53 | technogies: ['Ruby on rails', 'CSS', 'HTML', 'JavScript'], 54 | img: 'images/p6.png', 55 | demoLink: 'https://ab-noori.github.io/Awesome-Books', 56 | sourceLink: 'https://github.com/ab-noori/Awesome-Books', 57 | }, 58 | ]; 59 | 60 | function generatProjectCarts() { 61 | projectCarts.innerHTML = cartsData.map((x) => { 62 | const { 63 | id, title, desc, technogies, img, demoLink, sourceLink, 64 | } = x; 65 | return ` 66 |
67 |
68 | desktop popup snapshoot 69 |
70 |
71 |

${title}

72 | 78 | 79 |
80 |
81 | 82 | 110 |
111 | `; 112 | }).join(''); 113 | } 114 | 115 | generatProjectCarts(); 116 | 117 | const humburger = document.querySelector('.humburger'); 118 | const navMenu = document.querySelector('.nav-menu'); 119 | const navBranding = document.querySelector('.nav-branding'); 120 | 121 | humburger.addEventListener('click', () => { 122 | humburger.classList.toggle('active'); 123 | navMenu.classList.toggle('active'); 124 | navBranding.classList.toggle('active'); 125 | }); 126 | 127 | document.querySelectorAll('.nav-link') 128 | .forEach((links) => links.addEventListener('click', () => { 129 | humburger.classList.remove('active'); 130 | navMenu.classList.remove('active'); 131 | })); 132 | 133 | // -----------------------------Modal Scripts--------------------------------------- 134 | 135 | const openModalButton = document.querySelectorAll('[data-modal-target]'); 136 | const closeModalButton = document.querySelectorAll('[data-modal-close-button'); 137 | const overlay = document.getElementById('overlay'); 138 | 139 | function openModal(modal) { 140 | if (modal == null) return; 141 | modal.classList.add('active'); 142 | overlay.classList.add('active'); 143 | } 144 | 145 | function closeModal(modal) { 146 | if (modal == null) return; 147 | modal.classList.remove('active'); 148 | overlay.classList.remove('active'); 149 | } 150 | 151 | openModalButton.forEach((button) => { 152 | button.addEventListener('click', () => { 153 | const modal = document.querySelector(button.dataset.modalTarget); 154 | openModal(modal); 155 | }); 156 | }); 157 | 158 | overlay.addEventListener('click', () => { 159 | const modals = document.querySelectorAll('.modal.active'); 160 | modals.forEach((modal) => { 161 | closeModal(modal); 162 | }); 163 | }); 164 | 165 | closeModalButton.forEach((button) => { 166 | button.addEventListener('click', () => { 167 | const modal = button.closest('.modal'); 168 | closeModal(modal); 169 | }); 170 | }); 171 | 172 | // -------------------------Form Validations----------------------- 173 | 174 | const form = document.getElementById('contact-form'); 175 | const email = document.getElementById('email'); 176 | form.addEventListener('submit', (event) => { 177 | const emailRegex = /^[a-z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; 178 | if (emailRegex.test(email.value)) { 179 | form.submit(); 180 | } else { 181 | event.preventDefault(); 182 | const msg = document.querySelector('small'); 183 | msg.innerText = 'The email should be in lowercase'; 184 | } 185 | }); 186 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Portfolio 12 | 13 | 14 |
15 |
16 | 43 | 44 |
45 | 46 |
47 | 48 |
49 |

Hey there. I’m
Abdul Ali.

50 |

I’m a software developer

51 |

52 | I can help you build a product, 53 | feature or website Look through some of my work and experience! 54 | If you like what you see and have a project you need coded, 55 | don’t hestiate to contact me. 56 |

57 | 58 | 87 |
88 | 89 | action button arrow down 90 | 91 |
92 |
93 | 94 | 95 | 96 |
97 | 98 |
99 |

My Recent Works

100 |
101 |
102 | 103 |
104 |
105 | 106 | 107 | 108 |
109 |
110 |

Abdout Me

111 |

I can help you build a product , 112 | feature or website Look through some of my work and experience! 113 | If you like what you see and have a project you need coded, 114 | don’t hestiate to contact me. 115 |

116 | Git My Resume 117 |
118 | 119 |
120 |
121 |
122 | icon-languages 123 |
124 |
125 |

Languages

126 |
    127 |
  • JavScript
    • 128 |
  • Ruby
    • 129 |
  • Html
    • 130 |
  • CSS
    • 131 |
132 |
133 |
134 | 135 |
136 |
137 | icon-frameworks 138 |
139 |
140 |

Frameworks

141 |
    142 |
  • Bootstrap
    • 143 |
  • Ruby on rails
    • 144 |
  • RSpec
    • 145 |
  • Capybara
    • 146 |
  • Selenium
    • 147 |
148 |
149 |
150 | 151 |
152 |
153 | icon-skills 154 |
155 |
156 |

Skills

157 |
    158 |
  • Codekit
    • 159 |
  • GitHub
    • 160 |
  • Codepen
    • 161 |
  • Gitlab
    • 162 |
  • Terminal
    • 163 |
164 |
165 |
166 |
167 |
168 | 169 | 170 | 171 |
172 |
173 | 174 | I'm always interested in hearing about new projects, 175 | so if you'd like to chat please get in touch. 176 | 177 |
178 | 179 | 180 | 181 | 182 | 183 |
184 |
185 |
186 |
187 | 188 | 189 | 223 |
224 | 225 | 226 | 227 | 228 | 229 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | *, 8 | *::before, 9 | *::after { 10 | box-sizing: inherit; 11 | } 12 | 13 | .btn { 14 | padding: 12px; 15 | color: white; 16 | height: 24px; 17 | text-decoration: none; 18 | background-color: #36b37f; 19 | border-radius: 4px; 20 | font-weight: 600; 21 | font-size: 16px; 22 | line-height: 20px; 23 | display: flex; 24 | align-items: center; 25 | text-align: center; 26 | flex-wrap: nowrap; 27 | border: none; 28 | } 29 | 30 | .btn a { 31 | text-decoration: none; 32 | color: white; 33 | } 34 | 35 | body { 36 | margin: 0; 37 | padding: 0; 38 | font-family: "Inter", "Open Sans", "Helvetica Neue", Helvetica, sans-serif; 39 | overflow-x: hidden; 40 | } 41 | 42 | .wrapper { 43 | width: 375px; 44 | margin: 0 auto; 45 | display: flex; 46 | flex-direction: column; 47 | justify-content: center; 48 | background-color: #fff; 49 | overflow-x: hidden; 50 | gap: 40px; 51 | } 52 | 53 | header { 54 | width: calc(100% - 6px); 55 | font-weight: 600; 56 | font-size: 1.3rem; 57 | display: flex; 58 | align-items: center; 59 | justify-content: space-between; 60 | } 61 | 62 | .nav-branding { 63 | color: black; 64 | text-decoration: none; 65 | } 66 | 67 | .nav-branding.active { 68 | color: white; 69 | } 70 | 71 | .navbar ul li { 72 | list-style: none; 73 | } 74 | 75 | .navbar ul li a { 76 | color: #4a3a3b; 77 | font-size: 2rem; 78 | font-weight: 600; 79 | text-decoration: none; 80 | } 81 | 82 | .navbar { 83 | width: 100%; 84 | min-height: 60px; 85 | padding: 0 24px; 86 | display: flex; 87 | justify-content: space-between; 88 | align-items: center; 89 | } 90 | 91 | .nav-menu { 92 | width: 100%; 93 | height: 90vh; 94 | position: fixed; 95 | top: 50px; 96 | right: -120%; 97 | display: flex; 98 | flex-direction: column; 99 | background-color: white; 100 | justify-content: flex-start; 101 | align-items: flex-start; 102 | transition: 0.5s ease; 103 | z-index: 10; 104 | } 105 | 106 | .nav-link { 107 | transition: 0.7s ease; 108 | } 109 | 110 | .nav-link:hover { 111 | color: green; 112 | } 113 | 114 | .bar { 115 | display: block; 116 | width: 25px; 117 | height: 3px; 118 | margin: 5px auto; 119 | -webkit-transition: all 0.3s ease-in-out; 120 | transition: all 0.3s ease-in-out; 121 | background-color: black; 122 | } 123 | 124 | .humburger { 125 | cursor: pointer; 126 | } 127 | 128 | .humburger.active .bar:nth-child(2) { 129 | opacity: 0; 130 | } 131 | 132 | .humburger.active .bar:nth-child(1) { 133 | width: 22px; 134 | height: 2px; 135 | margin: 5px auto; 136 | background-color: #67798e; 137 | transform: translateY(8px) rotate(45deg); 138 | } 139 | 140 | .humburger.active .bar:nth-child(3) { 141 | width: 22px; 142 | height: 2px; 143 | margin: 5px auto; 144 | background-color: #67798e; 145 | transform: translateY(-8px) rotate(-45deg); 146 | } 147 | 148 | .nav-item { 149 | margin: 16px 0; 150 | } 151 | 152 | .nav-menu.active { 153 | right: 0; 154 | left: 1%; 155 | } 156 | 157 | .main { 158 | display: flex; 159 | flex-direction: column; 160 | justify-content: center; 161 | gap: 60px; 162 | } 163 | 164 | /* ----------------------------------Headline Section------------------------------------ */ 165 | 166 | .headline { 167 | height: 80vh; 168 | display: flex; 169 | padding: 20% 10% 0; 170 | flex-direction: column; 171 | align-items: center; 172 | background: url("images/header-illsutration-mobile.svg"); 173 | background-position: top; 174 | background-repeat: no-repeat; 175 | } 176 | 177 | .greeting-text, 178 | .profission-text, 179 | .supporting-text { 180 | text-align: center; 181 | } 182 | 183 | .greeting-text, 184 | .profission-text { 185 | margin: 3px; 186 | font-size: 1.8em; 187 | font-weight: 700; 188 | } 189 | 190 | .profission-text { 191 | color: rgb(66, 188, 148); 192 | } 193 | 194 | .supporting-text { 195 | margin: 1rem 2rem; 196 | line-height: 1.6; 197 | font-weight: 500; 198 | } 199 | 200 | .social-media { 201 | width: 60%; 202 | } 203 | 204 | .social-media ul { 205 | margin: 0; 206 | padding: 0; 207 | display: flex; 208 | justify-content: space-between; 209 | list-style-type: none; 210 | margin-top: 7vh; 211 | } 212 | 213 | .action-arrow-down { 214 | position: absolute; 215 | bottom: 0; 216 | } 217 | 218 | /* ----------------------------------Recent Section------------------------------------ */ 219 | 220 | .grid { 221 | display: grid; 222 | } 223 | 224 | .recent-work { 225 | width: 100%; 226 | margin: 0 auto; 227 | justify-items: center; 228 | } 229 | 230 | .recent-wrok-header { 231 | width: 70%; 232 | font-size: 1.3rem; 233 | font-weight: 600; 234 | text-align: center; 235 | } 236 | 237 | .recent-wrok-header h1 { 238 | margin: 5px auto; 239 | } 240 | 241 | .recent-wrok-header hr { 242 | width: 25%; 243 | margin: 0 auto; 244 | border: 3px solid green; 245 | border-radius: 3px; 246 | } 247 | 248 | .recent-work-container { 249 | width: 331px; 250 | margin-top: 50px; 251 | gap: 25px; 252 | } 253 | 254 | .recent-work-carts { 255 | width: 100%; 256 | height: 474px; 257 | border-radius: 8px; 258 | border: 1px solid #d0d9d4; 259 | background-color: #ebf0ee; 260 | } 261 | 262 | .cart-snapshoot { 263 | width: 100%; 264 | height: 252px; 265 | } 266 | 267 | .cart-snapshoot img { 268 | border-radius: 8px 8px 0 0; 269 | } 270 | 271 | .cart-summary { 272 | width: calc(100% - 22px); 273 | height: 200px; 274 | padding: 11px; 275 | display: flex; 276 | flex-direction: column; 277 | align-items: center; 278 | gap: 1rem; 279 | background: #fff; 280 | border-radius: 8px; 281 | } 282 | 283 | .project-title { 284 | font-weight: 600; 285 | font-size: 24px; 286 | line-height: 32px; 287 | margin: 5px; 288 | display: flex; 289 | align-items: center; 290 | text-align: center; 291 | color: #3a4a42; 292 | } 293 | 294 | .project-tags { 295 | display: flex; 296 | align-items: center; 297 | list-style-type: none; 298 | padding: 0; 299 | margin: 0; 300 | gap: 8px; 301 | height: 32px; 302 | } 303 | 304 | .cart-summary ul li { 305 | display: flex; 306 | align-items: center; 307 | padding: 8px 12px; 308 | background: #ebf0ee; 309 | border-radius: 4px; 310 | color: #3a4a42; 311 | font-size: 12px; 312 | font-weight: 600; 313 | line-height: 16px; 314 | } 315 | 316 | .cart-summary .btn { 317 | height: 20px; 318 | font-weight: 500; 319 | } 320 | 321 | /* ----------------------------------About me Section------------------------------------ */ 322 | 323 | .about-me { 324 | width: 100%; 325 | margin: 0 auto; 326 | justify-items: center; 327 | } 328 | 329 | .about-me-header { 330 | width: 100%; 331 | display: flex; 332 | align-items: center; 333 | flex-direction: column; 334 | background: url("images/aboutme-topright.svg"), url("images/aboutme-bottomleft.svg"); 335 | background-position: right top, left bottom; 336 | background-repeat: no-repeat; 337 | } 338 | 339 | .about-me-header h1 { 340 | width: 60%; 341 | font-size: 1.8em; 342 | font-weight: 700; 343 | text-align: center; 344 | } 345 | 346 | .about-me-header p { 347 | width: 70%; 348 | margin: 0 auto 25px; 349 | line-height: 1.6; 350 | font-weight: 500; 351 | text-align: center; 352 | } 353 | 354 | .about-me-header .btn { 355 | width: 135px; 356 | font-weight: 500; 357 | text-align: center; 358 | display: flex; 359 | justify-content: center; 360 | align-items: center; 361 | } 362 | 363 | .about-me-carts-container { 364 | width: 331px; 365 | margin-top: 50px; 366 | gap: 25px; 367 | } 368 | 369 | .about-me-carts { 370 | width: 100%; 371 | height: 352px; 372 | padding-bottom: 5%; 373 | border-radius: 8px; 374 | border: 1px solid #c1c7d0; 375 | background-color: #ebf0ee; 376 | transition: width 2.5s, height 2.5s; 377 | } 378 | 379 | .about-me-carts:hover { 380 | width: 96%; 381 | height: 342px; 382 | margin: 5px 2% 5px 2%; 383 | } 384 | 385 | .icon-placeholder { 386 | width: 100%; 387 | height: 128px; 388 | margin-top: 30px; 389 | display: flex; 390 | justify-content: center; 391 | align-items: center; 392 | } 393 | 394 | .title-tags { 395 | width: 100%; 396 | margin-top: 30px; 397 | display: flex; 398 | flex-direction: column; 399 | justify-content: center; 400 | align-items: center; 401 | } 402 | 403 | .about-cart-title { 404 | font-weight: 600; 405 | font-size: 24px; 406 | line-height: 32px; 407 | text-align: center; 408 | color: #344563; 409 | } 410 | 411 | .about-cart-tags { 412 | display: flex; 413 | flex-wrap: wrap; 414 | justify-content: center; 415 | align-items: center; 416 | list-style-type: none; 417 | padding: 0; 418 | height: 40px; 419 | gap: 8px; 420 | } 421 | 422 | .title-tags ul li { 423 | display: flex; 424 | padding: 8px 12px; 425 | background: #fff; 426 | font-weight: 600; 427 | font-size: 12px; 428 | line-height: 16px; 429 | color: #36b37e; 430 | border-radius: 8px; 431 | } 432 | 433 | .form-itself small { 434 | color: red; 435 | font-size: 0.8rem; 436 | } 437 | 438 | /* ----------------------------------form Section------------------------------------ */ 439 | 440 | .from-section { 441 | width: 100%; 442 | padding-bottom: 5vh; 443 | display: flex; 444 | justify-content: center; 445 | background: url("images/contact-form-illustration.svg"); 446 | background-position: right bottom; 447 | background-repeat: no-repeat; 448 | } 449 | 450 | .form-section-container { 451 | width: 331px; 452 | display: flex; 453 | flex-direction: column; 454 | justify-content: center; 455 | align-items: center; 456 | gap: 30px; 457 | } 458 | 459 | .form-header { 460 | font-size: 2rem; 461 | font-weight: 600; 462 | line-height: 2.4rem; 463 | color: #172b4d; 464 | text-align: justify; 465 | } 466 | 467 | .form-itself { 468 | width: 100%; 469 | display: flex; 470 | flex-direction: column; 471 | gap: 20px; 472 | } 473 | 474 | .form-itself input, 475 | .form-itself textarea { 476 | padding: 10px; 477 | font-weight: 400; 478 | font-size: 15px; 479 | line-height: 24px; 480 | border: 1px solid #d0d9d4; 481 | border-radius: 4px; 482 | } 483 | 484 | .form-itself textarea { 485 | height: 100px; 486 | } 487 | 488 | .form-itself .btn { 489 | width: 129px; 490 | font-weight: 500; 491 | font-size: 17px; 492 | line-height: 24px; 493 | display: flex; 494 | align-items: center; 495 | justify-content: center; 496 | } 497 | 498 | /* ----------------------------------footer Section------------------------------------ */ 499 | 500 | footer { 501 | display: flex; 502 | flex-direction: column; 503 | justify-content: center; 504 | align-items: center; 505 | padding-bottom: 100px; 506 | } 507 | 508 | .footer .footer-social-media { 509 | display: flex; 510 | align-items: center; 511 | justify-content: center; 512 | } 513 | 514 | footer .footer-social-media ul { 515 | padding: 0; 516 | display: flex; 517 | gap: 12%; 518 | justify-content: center; 519 | list-style-type: none; 520 | } 521 | 522 | /* --------------------------------------------Desktop-View Styles---------------------------------------------- */ 523 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-portfolio", 3 | "version": "1.0.0", 4 | "description": "The place for my work history.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/ab-noori/My-Portfolio.git" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/ab-noori/My-Portfolio/issues" 18 | }, 19 | "homepage": "https://github.com/ab-noori/My-Portfolio#readme", 20 | "devDependencies": { 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^7.32.0", 23 | "eslint-config-airbnb-base": "^14.2.1", 24 | "eslint-plugin-import": "^2.27.5", 25 | "hint": "^7.1.3", 26 | "stylelint": "^13.13.1", 27 | "stylelint-config-standard": "^21.0.0", 28 | "stylelint-csstree-validator": "^1.9.0", 29 | "stylelint-scss": "^3.21.0" 30 | }, 31 | "dependencies": { 32 | "abab": "^2.0.6", 33 | "abbrev": "^1.1.1", 34 | "acorn": "^8.8.1", 35 | "acorn-globals": "^7.0.1", 36 | "acorn-jsx": "^5.3.2", 37 | "acorn-jsx-walk": "^2.0.0", 38 | "acorn-walk": "^8.2.0", 39 | "agent-base": "^6.0.2", 40 | "agentkeepalive": "^4.2.1", 41 | "aggregate-error": "^3.1.0", 42 | "ajv": "^8.12.0", 43 | "ajv-formats": "^2.1.1", 44 | "ansi-align": "^3.0.1", 45 | "ansi-regex": "^5.0.1", 46 | "ansi-styles": "^4.3.0", 47 | "anymatch": "^3.1.3", 48 | "aproba": "^2.0.0", 49 | "are-we-there-yet": "^2.0.0", 50 | "array-union": "^2.1.0", 51 | "arrify": "^1.0.1", 52 | "ast-types": "^0.13.4", 53 | "astral-regex": "^2.0.0", 54 | "async": "^3.2.4", 55 | "asynckit": "^0.4.0", 56 | "autoprefixer": "^9.8.8", 57 | "axe-core": "^4.6.2", 58 | "bail": "^1.0.5", 59 | "balanced-match": "^1.0.2", 60 | "base64-js": "^1.5.1", 61 | "bcp47": "^1.1.2", 62 | "binary-extensions": "^2.2.0", 63 | "bl": "^4.1.0", 64 | "boolbase": "^1.0.0", 65 | "boxen": "^5.1.2", 66 | "brace-expansion": "^1.1.11", 67 | "braces": "^3.0.2", 68 | "browserslist": "^4.21.4", 69 | "buffer": "^5.7.1", 70 | "buffer-crc32": "^0.2.13", 71 | "builtins": "^5.0.1", 72 | "bytes": "^3.1.2", 73 | "cacache": "^16.1.3", 74 | "cacheable-lookup": "^5.0.4", 75 | "cacheable-request": "^7.0.2", 76 | "callsites": "^3.1.0", 77 | "camelcase": "^6.3.0", 78 | "camelcase-keys": "^6.2.2", 79 | "caniuse-lite": "^1.0.30001444", 80 | "canvas": "^2.11.0", 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.7.1", 88 | "clean-stack": "^2.2.0", 89 | "cli-boxes": "^2.2.1", 90 | "cli-cursor": "^3.1.0", 91 | "cli-spinners": "^2.7.0", 92 | "clone": "^1.0.4", 93 | "clone-regexp": "^2.2.0", 94 | "clone-response": "^1.0.3", 95 | "cloudinary": "^1.33.0", 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 | "console-control-strings": "^1.1.0", 105 | "content-type": "^1.0.4", 106 | "convert-source-map": "^1.9.0", 107 | "core-js": "^3.27.1", 108 | "core-util-is": "^1.0.3", 109 | "cosmiconfig": "^7.1.0", 110 | "cross-fetch": "^3.1.5", 111 | "cross-spawn": "^7.0.3", 112 | "crypto-random-string": "^2.0.0", 113 | "css-select": "^4.3.0", 114 | "css-tree": "^1.1.3", 115 | "css-what": "^6.1.0", 116 | "cssesc": "^3.0.0", 117 | "cssom": "^0.5.0", 118 | "cssstyle": "^2.3.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 | "degenerator": "^3.0.2", 131 | "delayed-stream": "^1.0.0", 132 | "delegates": "^1.0.0", 133 | "depd": "^1.1.2", 134 | "detect-libc": "^2.0.1", 135 | "devtools-protocol": "^0.0.981744", 136 | "dir-glob": "^3.0.1", 137 | "dom-serializer": "^1.4.1", 138 | "domelementtype": "^2.3.0", 139 | "domexception": "^4.0.0", 140 | "domhandler": "^4.3.1", 141 | "domutils": "^2.8.0", 142 | "dot-prop": "^5.3.0", 143 | "duplexer3": "^0.1.5", 144 | "ejs": "^3.1.8", 145 | "electron-to-chromium": "^1.4.284", 146 | "emoji-regex": "^8.0.0", 147 | "encoding": "^0.1.13", 148 | "end-of-stream": "^1.4.4", 149 | "entities": "^2.2.0", 150 | "err-code": "^2.0.3", 151 | "error-ex": "^1.3.2", 152 | "escalade": "^3.1.1", 153 | "escape-goat": "^2.1.1", 154 | "escape-string-regexp": "^1.0.5", 155 | "escodegen": "^2.0.0", 156 | "eslint-visitor-keys": "^3.3.0", 157 | "esprima": "^4.0.1", 158 | "estraverse": "^5.3.0", 159 | "esutils": "^2.0.3", 160 | "eventemitter2": "^6.4.9", 161 | "execa": "^4.1.0", 162 | "execall": "^2.0.0", 163 | "extend": "^3.0.2", 164 | "extract-zip": "^2.0.1", 165 | "fast-deep-equal": "^3.1.3", 166 | "fast-glob": "^3.2.12", 167 | "fast-levenshtein": "^2.0.6", 168 | "fast-xml-parser": "^3.21.1", 169 | "fastest-levenshtein": "^1.0.16", 170 | "fastq": "^1.15.0", 171 | "fd-slicer": "^1.1.0", 172 | "file-entry-cache": "^6.0.1", 173 | "file-type": "^16.5.4", 174 | "file-uri-to-path": "^2.0.0", 175 | "filelist": "^1.0.4", 176 | "fill-range": "^7.0.1", 177 | "find-up": "^4.1.0", 178 | "flat-cache": "^3.0.4", 179 | "flatted": "^3.2.7", 180 | "form-data": "^4.0.0", 181 | "fs-constants": "^1.0.0", 182 | "fs-extra": "^10.1.0", 183 | "fs-minipass": "^2.1.0", 184 | "fs.realpath": "^1.0.0", 185 | "ftp": "^0.3.10", 186 | "function-bind": "^1.1.1", 187 | "gauge": "^3.0.2", 188 | "gensync": "^1.0.0-beta.2", 189 | "get-stdin": "^8.0.0", 190 | "get-stream": "^5.2.0", 191 | "get-uri": "^3.0.2", 192 | "glob": "^8.0.3", 193 | "glob-parent": "^5.1.2", 194 | "global-dirs": "^3.0.1", 195 | "global-modules": "^2.0.0", 196 | "global-prefix": "^3.0.0", 197 | "globals": "^11.12.0", 198 | "globby": "^11.1.0", 199 | "globjoin": "^0.1.4", 200 | "gonzales-pe": "^4.3.0", 201 | "got": "^11.8.6", 202 | "graceful-fs": "^4.2.10", 203 | "hard-rejection": "^2.1.0", 204 | "has": "^1.0.3", 205 | "has-flag": "^4.0.0", 206 | "has-unicode": "^2.0.1", 207 | "has-yarn": "^2.1.0", 208 | "hosted-git-info": "^5.2.1", 209 | "html-encoding-sniffer": "^3.0.0", 210 | "html-tags": "^3.2.0", 211 | "htmlparser2": "^3.10.1", 212 | "http-cache-semantics": "^4.1.0", 213 | "http-errors": "^2.0.0", 214 | "http-proxy-agent": "^5.0.0", 215 | "http2-wrapper": "^1.0.3", 216 | "https": "^1.0.0", 217 | "https-proxy-agent": "^5.0.1", 218 | "human-signals": "^1.1.1", 219 | "humanize-ms": "^1.2.1", 220 | "iconv-lite": "^0.6.3", 221 | "ieee754": "^1.2.1", 222 | "ignore": "^5.2.4", 223 | "image-size": "^1.0.2", 224 | "import-fresh": "^3.3.0", 225 | "import-lazy": "^2.1.0", 226 | "imurmurhash": "^0.1.4", 227 | "indent-string": "^4.0.0", 228 | "infer-owner": "^1.0.4", 229 | "inflight": "^1.0.6", 230 | "inherits": "^2.0.4", 231 | "ini": "^2.0.0", 232 | "invert-kv": "^3.0.1", 233 | "ip": "^1.1.8", 234 | "is-alphabetical": "^1.0.4", 235 | "is-alphanumerical": "^1.0.4", 236 | "is-arrayish": "^0.3.2", 237 | "is-binary-path": "^2.1.0", 238 | "is-buffer": "^2.0.5", 239 | "is-ci": "^3.0.1", 240 | "is-core-module": "^2.11.0", 241 | "is-decimal": "^1.0.4", 242 | "is-docker": "^2.2.1", 243 | "is-extglob": "^2.1.1", 244 | "is-fullwidth-code-point": "^3.0.0", 245 | "is-glob": "^4.0.3", 246 | "is-hexadecimal": "^1.0.4", 247 | "is-installed-globally": "^0.4.0", 248 | "is-interactive": "^1.0.0", 249 | "is-lambda": "^1.0.1", 250 | "is-npm": "^5.0.0", 251 | "is-number": "^7.0.0", 252 | "is-obj": "^2.0.0", 253 | "is-path-inside": "^3.0.3", 254 | "is-plain-obj": "^1.1.0", 255 | "is-potential-custom-element-name": "^1.0.1", 256 | "is-regexp": "^2.1.0", 257 | "is-stream": "^2.0.1", 258 | "is-svg": "^4.3.2", 259 | "is-typedarray": "^1.0.0", 260 | "is-unicode-supported": "^0.1.0", 261 | "is-wsl": "^2.2.0", 262 | "is-yarn-global": "^0.3.0", 263 | "isarray": "^0.0.1", 264 | "isexe": "^2.0.0", 265 | "jake": "^10.8.5", 266 | "js-library-detector": "^6.5.0", 267 | "js-tokens": "^4.0.0", 268 | "jsdom": "^20.0.3", 269 | "jsesc": "^2.5.2", 270 | "json-buffer": "^3.0.1", 271 | "json-parse-even-better-errors": "^2.3.1", 272 | "json-schema-traverse": "^1.0.0", 273 | "json5": "^2.2.3", 274 | "jsonc-parser": "^3.2.0", 275 | "jsonfile": "^6.1.0", 276 | "jsonparse": "^1.3.1", 277 | "keyv": "^4.5.2", 278 | "kind-of": "^6.0.3", 279 | "known-css-properties": "^0.21.0", 280 | "latest-version": "^7.0.0", 281 | "lcid": "^3.1.1", 282 | "levn": "^0.4.1", 283 | "lines-and-columns": "^1.2.4", 284 | "locate-path": "^5.0.0", 285 | "lockfile": "^1.0.4", 286 | "lodash": "^4.17.21", 287 | "lodash.truncate": "^4.4.2", 288 | "log-symbols": "^4.1.0", 289 | "longest-streak": "^2.0.4", 290 | "lowercase-keys": "^2.0.0", 291 | "lru-cache": "^7.14.1", 292 | "make-dir": "^3.1.0", 293 | "make-fetch-happen": "^10.2.1", 294 | "map-age-cleaner": "^0.1.3", 295 | "map-obj": "^4.3.0", 296 | "mathml-tag-names": "^2.1.3", 297 | "mdast-util-from-markdown": "^0.8.5", 298 | "mdast-util-to-markdown": "^0.6.5", 299 | "mdast-util-to-string": "^2.0.0", 300 | "mdn-data": "^2.0.30", 301 | "mem": "^5.1.1", 302 | "meow": "^9.0.0", 303 | "merge-stream": "^2.0.0", 304 | "merge2": "^1.4.1", 305 | "metaviewport-parser": "^0.2.0", 306 | "micromark": "^2.11.4", 307 | "micromatch": "^4.0.5", 308 | "mime-db": "^1.52.0", 309 | "mime-types": "^2.1.35", 310 | "mimic-fn": "^2.1.0", 311 | "mimic-response": "^1.0.1", 312 | "min-indent": "^1.0.1", 313 | "minimatch": "^3.1.2", 314 | "minimist": "^1.2.7", 315 | "minimist-options": "^4.1.0", 316 | "minipass": "^3.3.6", 317 | "minipass-collect": "^1.0.2", 318 | "minipass-fetch": "^2.1.2", 319 | "minipass-flush": "^1.0.5", 320 | "minipass-json-stream": "^1.0.1", 321 | "minipass-pipeline": "^1.2.4", 322 | "minipass-sized": "^1.0.3", 323 | "minizlib": "^2.1.2", 324 | "mkdirp": "^1.0.4", 325 | "mkdirp-classic": "^0.5.3", 326 | "ms": "^2.1.2", 327 | "mutationobserver-shim": "^0.3.7", 328 | "nan": "^2.17.0", 329 | "nanoid": "^3.3.4", 330 | "negotiator": "^0.6.3", 331 | "netmask": "^2.0.2", 332 | "node-fetch": "^2.6.8", 333 | "node-releases": "^2.0.8", 334 | "nopt": "^5.0.0", 335 | "normalize-package-data": "^3.0.3", 336 | "normalize-path": "^3.0.0", 337 | "normalize-range": "^0.1.2", 338 | "normalize-selector": "^0.2.0", 339 | "normalize-url": "^6.1.0", 340 | "npm-package-arg": "^9.1.2", 341 | "npm-registry-fetch": "^13.3.1", 342 | "npm-run-path": "^4.0.1", 343 | "npmlog": "^5.0.1", 344 | "nth-check": "^2.1.1", 345 | "num2fraction": "^1.2.2", 346 | "nwsapi": "^2.2.2", 347 | "object-assign": "^4.1.1", 348 | "once": "^1.4.0", 349 | "onetime": "^5.1.2", 350 | "optionator": "^0.9.1", 351 | "ora": "^5.4.1", 352 | "os-locale": "^5.0.0", 353 | "p-cancelable": "^2.1.1", 354 | "p-defer": "^1.0.0", 355 | "p-is-promise": "^2.1.0", 356 | "p-limit": "^2.3.0", 357 | "p-locate": "^4.1.0", 358 | "p-map": "^4.0.0", 359 | "p-try": "^2.2.0", 360 | "pac-proxy-agent": "^5.0.0", 361 | "pac-resolver": "^5.0.1", 362 | "package-json": "^8.1.0", 363 | "parent-module": "^1.0.1", 364 | "parse-entities": "^2.0.0", 365 | "parse-json": "^5.2.0", 366 | "parse5": "^6.0.1", 367 | "parse5-htmlparser2-tree-adapter": "^6.0.1", 368 | "path-exists": "^4.0.0", 369 | "path-is-absolute": "^1.0.1", 370 | "path-key": "^3.1.1", 371 | "path-parse": "^1.0.7", 372 | "path-type": "^4.0.0", 373 | "peek-readable": "^4.1.0", 374 | "pend": "^1.2.0", 375 | "picocolors": "^1.0.0", 376 | "picomatch": "^2.3.1", 377 | "pkg-dir": "^4.2.0", 378 | "postcss": "^8.4.21", 379 | "postcss-html": "^0.36.0", 380 | "postcss-less": "^5.0.0", 381 | "postcss-media-query-parser": "^0.2.3", 382 | "postcss-resolve-nested-selector": "^0.1.1", 383 | "postcss-safe-parser": "^6.0.0", 384 | "postcss-sass": "^0.5.0", 385 | "postcss-scss": "^4.0.6", 386 | "postcss-selector-parser": "^6.0.11", 387 | "postcss-syntax": "^0.36.2", 388 | "postcss-value-parser": "^4.2.0", 389 | "prelude-ls": "^1.2.1", 390 | "prepend-http": "^2.0.0", 391 | "proc-log": "^2.0.1", 392 | "progress": "^2.0.3", 393 | "promise-inflight": "^1.0.1", 394 | "promise-retry": "^2.0.1", 395 | "proxy-agent": "^5.0.0", 396 | "proxy-from-env": "^1.1.0", 397 | "psl": "^1.9.0", 398 | "pump": "^3.0.0", 399 | "punycode": "^2.2.0", 400 | "pupa": "^2.1.1", 401 | "puppeteer-core": "^13.7.0", 402 | "q": "^1.5.1", 403 | "querystringify": "^2.2.0", 404 | "queue": "^6.0.2", 405 | "queue-microtask": "^1.2.3", 406 | "quick-lru": "^5.1.1", 407 | "raw-body": "^2.5.1", 408 | "rc": "^1.2.8", 409 | "read-pkg": "^5.2.0", 410 | "read-pkg-up": "^7.0.1", 411 | "readable-stream": "^3.6.0", 412 | "readable-web-to-node-stream": "^3.0.2", 413 | "readdirp": "^3.6.0", 414 | "redent": "^3.0.0", 415 | "registry-auth-token": "^4.2.2", 416 | "registry-url": "^5.1.0", 417 | "remark": "^13.0.0", 418 | "remark-parse": "^9.0.0", 419 | "remark-stringify": "^9.0.1", 420 | "repeat-string": "^1.6.1", 421 | "require-from-string": "^2.0.2", 422 | "requires-port": "^1.0.0", 423 | "resolve": "^1.22.1", 424 | "resolve-alpn": "^1.2.1", 425 | "resolve-from": "^5.0.0", 426 | "responselike": "^2.0.1", 427 | "restore-cursor": "^3.1.0", 428 | "retry": "^0.12.0", 429 | "reusify": "^1.0.4", 430 | "rimraf": "^3.0.2", 431 | "run-parallel": "^1.2.0", 432 | "safe-buffer": "^5.2.1", 433 | "safer-buffer": "^2.1.2", 434 | "saxes": "^6.0.0", 435 | "semver": "^7.3.8", 436 | "semver-diff": "^3.1.1", 437 | "set-blocking": "^2.0.0", 438 | "setimmediate": "^1.0.5", 439 | "setprototypeof": "^1.2.0", 440 | "shebang-command": "^2.0.0", 441 | "shebang-regex": "^3.0.0", 442 | "signal-exit": "^3.0.7", 443 | "simple-concat": "^1.0.1", 444 | "simple-get": "^3.1.1", 445 | "simple-swizzle": "^0.2.2", 446 | "slash": "^3.0.0", 447 | "slice-ansi": "^4.0.0", 448 | "smart-buffer": "^4.2.0", 449 | "socks": "^2.7.1", 450 | "socks-proxy-agent": "^7.0.0", 451 | "source-map": "^0.6.1", 452 | "source-map-js": "^1.0.2", 453 | "spdx-correct": "^3.1.1", 454 | "spdx-exceptions": "^2.3.0", 455 | "spdx-expression-parse": "^3.0.1", 456 | "spdx-license-ids": "^3.0.12", 457 | "specificity": "^0.4.1", 458 | "ssri": "^9.0.1", 459 | "statuses": "^2.0.1", 460 | "string_decoder": "^1.3.0", 461 | "string-width": "^4.2.3", 462 | "strip-ansi": "^6.0.1", 463 | "strip-final-newline": "^2.0.0", 464 | "strip-indent": "^3.0.0", 465 | "strip-json-comments": "^2.0.1", 466 | "strnum": "^1.0.5", 467 | "strtok3": "^6.3.0", 468 | "style-search": "^0.1.0", 469 | "stylelint-config-recommended": "^4.0.0", 470 | "sugarss": "^2.0.0", 471 | "supports-color": "^7.2.0", 472 | "supports-preserve-symlinks-flag": "^1.0.0", 473 | "svg-tags": "^1.0.0", 474 | "symbol-tree": "^3.2.4", 475 | "table": "^6.8.1", 476 | "tar": "^6.1.13", 477 | "tar-fs": "^2.1.1", 478 | "tar-stream": "^2.2.0", 479 | "text-table": "^0.2.0", 480 | "through": "^2.3.8", 481 | "to-fast-properties": "^2.0.0", 482 | "to-readable-stream": "^1.0.0", 483 | "to-regex-range": "^5.0.1", 484 | "toidentifier": "^1.0.1", 485 | "token-types": "^4.2.1", 486 | "tough-cookie": "^4.1.2", 487 | "tr46": "^3.0.0", 488 | "trim-newlines": "^3.0.1", 489 | "trough": "^1.0.5", 490 | "tslib": "^2.4.1", 491 | "tsutils": "^3.21.0", 492 | "type-check": "^0.4.0", 493 | "type-fest": "^0.20.2", 494 | "typedarray-to-buffer": "^3.1.5", 495 | "typescript": "^4.9.4", 496 | "unbzip2-stream": "^1.4.3", 497 | "unified": "^9.2.2", 498 | "unique-filename": "^2.0.1", 499 | "unique-slug": "^3.0.0", 500 | "unique-string": "^2.0.0", 501 | "unist-util-find-all-after": "^3.0.2", 502 | "unist-util-is": "^4.1.0", 503 | "unist-util-stringify-position": "^2.0.3", 504 | "universalify": "^2.0.0", 505 | "unpipe": "^1.0.0", 506 | "update-browserslist-db": "^1.0.10", 507 | "update-notifier": "^6.0.2", 508 | "uri-js": "^4.4.1", 509 | "url-parse": "^1.5.10", 510 | "url-parse-lax": "^3.0.0", 511 | "util-deprecate": "^1.0.2", 512 | "v8-compile-cache": "^2.3.0", 513 | "validate-npm-package-license": "^3.0.4", 514 | "validate-npm-package-name": "^4.0.0", 515 | "vfile": "^4.2.1", 516 | "vfile-message": "^2.0.4", 517 | "vm2": "^3.9.13", 518 | "w3c-xmlserializer": "^4.0.0", 519 | "wcwidth": "^1.0.1", 520 | "webidl-conversions": "^7.0.0", 521 | "whatwg-encoding": "^2.0.0", 522 | "whatwg-mimetype": "^3.0.0", 523 | "whatwg-url": "^11.0.0", 524 | "which": "^2.0.2", 525 | "wide-align": "^1.1.5", 526 | "widest-line": "^3.1.0", 527 | "word-wrap": "^1.2.3", 528 | "wrap-ansi": "^7.0.0", 529 | "wrappy": "^1.0.2", 530 | "write-file-atomic": "^3.0.3", 531 | "ws": "^8.12.0", 532 | "xdg-basedir": "^4.0.0", 533 | "xml-name-validator": "^4.0.0", 534 | "xmlchars": "^2.2.0", 535 | "xregexp": "^2.0.0", 536 | "yallist": "^4.0.0", 537 | "yaml": "^1.10.2", 538 | "yargs-parser": "^20.2.9", 539 | "yauzl": "^2.10.0", 540 | "zwitch": "^1.0.5" 541 | } 542 | } 543 | -------------------------------------------------------------------------------- /images/header-illsutration-mobile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /images/Header-llustration-desktop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | --------------------------------------------------------------------------------