├── .eslintrc.json ├── .github └── workflows │ └── linters.yml ├── .gitignore ├── .hintrc ├── .stylelintrc.json ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── images ├── ArrowDown.svg ├── Cancel.svg ├── DEskImg3.png ├── DeskImg1.png ├── DeskImg2.png ├── DeskImg4.png ├── DesktopheaderBg.png ├── Disabled.svg ├── FooterBg.png ├── Linkedinicon.svg ├── Multipost2.svg ├── MutiPostStory.svg ├── TonicColor.svg ├── TonicImage.svg ├── Union.png ├── contact-form-Bg-mobile.svg ├── css3.svg ├── github.svg ├── hand.svg ├── header-shapes mobile@2x.svg ├── headerBack.png ├── headerTrans.png ├── html.svg ├── imageprofile4x.png ├── javascript.svg ├── m.svg ├── right.svg ├── seeLive.svg ├── sourceGit.svg ├── todoListImage.png ├── tonicImgDesktop.svg └── twitter.svg ├── index.html ├── package-lock.json ├── package.json ├── script.js └── style.css /.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 | -------------------------------------------------------------------------------- /.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-18.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-18.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@6.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-18.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-18.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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Compiled class file 2 | *.class 3 | 4 | # Log file 5 | *.log 6 | 7 | # BlueJ files 8 | *.ctxt 9 | 10 | # Mobile Tools for Java (J2ME) 11 | .mtj.tmp/ 12 | 13 | # Package Files # 14 | *.jar 15 | *.war 16 | *.nar 17 | *.ear 18 | *.zip 19 | *.tar.gz 20 | *.rar 21 | 22 | # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml 23 | hs_err_pid* 24 | 25 | #node modules 26 | node_modules/ 27 | 28 | #Rough NOte 29 | note.txt 30 | -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /.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": true, 7 | "csstree/validator": true 8 | }, 9 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 10 | } 11 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Kanu Mike Chibundu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # My-portfolio 2 | 3 | My portfolio website to showcase my information as a web developer and my created projects 4 | 5 | # hello-microverse 6 | 7 | ![](https://img.shields.io/badge/Microverse-blueviolet) 8 | 9 | 10 | 11 | This is the first GitHub Flow project 12 | 13 | Additional description about the project and its features. 14 | 15 | ## Live Preview 16 | 17 | LIVE DEMO: [Myportfolio](https://ginohmk.github.io/My-portfolio/) 18 | 19 | ## Built With 20 | 21 | - HTML & CSS 22 | 23 | ## Getting Started 24 | 25 | To get a local copy up and running follow these simple example steps. 26 | 27 | ### Prerequisites 28 | 29 | clone repo: `git@github.com:Ginohmk/My-portfolio.git` 30 | 31 | then 32 | `cd My-portfolio` 33 | 34 | ### Install 35 | 36 | run `npm install` to install dependencies 37 | 38 | ## Authors 39 | 40 | 👤 **Author** 41 | 42 | - GitHub: [@Ginohmk](https://github.com/Ginohmk) 43 | - Twitter: [@michotall95](https://www.twitter.com/michotall95) 44 | - LinkedIn: [@kanumike](https://www.linkedin.com/in/kanu-mike-497119211/) 45 | - Instagram: [@savy_kanu_mike](https/instagram.com/savy_kanu_mike) 46 | - Facebook: [@mike.kanu](https://www.facebook.com/mike.kanu) 47 | 48 | ## 🤝 Contribute 49 | 50 | Contributions, issues, and feature requests are welcome! 51 | 52 | Feel free to check the [issues page](../../issues/) 53 | 54 | ## Show your support 55 | 56 | Give a ⭐️ if you like this project! 57 | 58 | ## Acknowledgments 59 | 60 | - Hat tip to anyone whose code was used 61 | - Inspiration 62 | - etc 63 | -------------------------------------------------------------------------------- /images/ArrowDown.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/Cancel.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/DEskImg3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmike01/My-portfolio/13cd235feda6d9854018ce1aeeea44107ef2f6c9/images/DEskImg3.png -------------------------------------------------------------------------------- /images/DeskImg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmike01/My-portfolio/13cd235feda6d9854018ce1aeeea44107ef2f6c9/images/DeskImg1.png -------------------------------------------------------------------------------- /images/DeskImg2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmike01/My-portfolio/13cd235feda6d9854018ce1aeeea44107ef2f6c9/images/DeskImg2.png -------------------------------------------------------------------------------- /images/DeskImg4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmike01/My-portfolio/13cd235feda6d9854018ce1aeeea44107ef2f6c9/images/DeskImg4.png -------------------------------------------------------------------------------- /images/DesktopheaderBg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmike01/My-portfolio/13cd235feda6d9854018ce1aeeea44107ef2f6c9/images/DesktopheaderBg.png -------------------------------------------------------------------------------- /images/Disabled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/FooterBg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmike01/My-portfolio/13cd235feda6d9854018ce1aeeea44107ef2f6c9/images/FooterBg.png -------------------------------------------------------------------------------- /images/Linkedinicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /images/Union.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmike01/My-portfolio/13cd235feda6d9854018ce1aeeea44107ef2f6c9/images/Union.png -------------------------------------------------------------------------------- /images/contact-form-Bg-mobile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /images/css3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /images/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/hand.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/header-shapes mobile@2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /images/headerBack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmike01/My-portfolio/13cd235feda6d9854018ce1aeeea44107ef2f6c9/images/headerBack.png -------------------------------------------------------------------------------- /images/headerTrans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmike01/My-portfolio/13cd235feda6d9854018ce1aeeea44107ef2f6c9/images/headerTrans.png -------------------------------------------------------------------------------- /images/html.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /images/imageprofile4x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmike01/My-portfolio/13cd235feda6d9854018ce1aeeea44107ef2f6c9/images/imageprofile4x.png -------------------------------------------------------------------------------- /images/javascript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /images/m.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/seeLive.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/sourceGit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/todoListImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmike01/My-portfolio/13cd235feda6d9854018ce1aeeea44107ef2f6c9/images/todoListImage.png -------------------------------------------------------------------------------- /images/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 19 | 20 | 21 | 22 | 23 | 24 | Mike's profolio page 25 | 26 | 27 | 28 |
29 |
30 | 31 |
32 | 33 | 52 |
53 | 54 | 55 | 93 |
94 | 95 | 96 |
97 | 98 |
99 | 100 |
101 | 102 | 103 | 104 |
105 |
106 |

About
Myself

107 |

108 | Hello I’m a software developer! I can help you build a product , 109 | feature or website Look through some of my work and experience! If 110 | you like what you see and have a project you need coded, don’t 111 | hestiate to contact me. 112 |

113 |
114 |

LET'S CONNECT

115 | 142 | 145 |
146 |
147 | 148 |
149 |
150 |
151 |
152 |

Language

153 |
154 | Arrow pointer 155 |
156 |
157 |
    158 |
  • 159 | javascript icon 160 | Javascript 161 |
    • 162 |
  • 163 | HTML icon 164 | HTML 165 |
    • 166 |
  • 167 | CSS3 icon 168 | CSS 169 |
    • 170 |
171 |
172 |
173 |
174 | 175 |
176 |
177 |
178 |

Frameworks

179 |
180 | Arrow pionter 181 |
182 |
183 |
    184 |
  • 185 | javascript icon 186 | Javascript 187 |
    • 188 |
  • 189 | HTML icon 190 | HTML 191 |
    • 192 |
  • 193 | CSS3 icon 194 | CSS 195 |
    • 196 |
197 |
198 |
199 |
200 | 201 |
202 |
203 |
204 |

Skill

205 |
206 | Arrow pointer 207 |
208 |
209 |
    210 |
  • 211 | javascript icon 212 | Javascript 213 |
    • 214 |
  • 215 | HTML icon 216 | HTML 217 |
    • 218 |
  • 219 | CSS3 icon 220 | CSS 221 |
    • 222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 | 230 | 231 | 294 | 295 | 296 | 297 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "My-portfolio", 3 | "version": "1.0.0", 4 | "description": "My portfolio website to showcase my information as a web developer and my created projects", 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/Ginohmk/My-portfolio.git" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/Ginohmk/My-portfolio/issues" 18 | }, 19 | "homepage": "https://github.com/Ginohmk/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.25.3", 25 | "hint": "^6.1.9", 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 | } 32 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable prefer-const */ 2 | const ham = document.querySelector('.hide-ham'); 3 | const menuLink = document.querySelector('.desktop-menu'); 4 | const cancelMenu = document.querySelector('.cancel-dropDown'); 5 | const navLinks = Array.from(document.getElementsByClassName('link')); 6 | const navH1 = document.querySelector('.greet'); 7 | const navP = document.querySelector('.banner-detail'); 8 | const letConnect = document.querySelector('.connect'); 9 | const logo = document.querySelector('.logo'); 10 | const projectSection = document.getElementById('project-show-case'); 11 | let count = 1; 12 | let modalCount = 1; 13 | 14 | // Creting Global elements ( For Cards) 15 | const divImg = document.createElement('div'); 16 | divImg.setAttribute('class', 'project-img'); 17 | 18 | const writeUp = document.createElement('section'); 19 | writeUp.setAttribute('class', 'write-up'); 20 | 21 | const titleDetail = document.createElement('section'); 22 | titleDetail.setAttribute('class', 'title-detail-tag'); 23 | 24 | const descriptionPara = document.createElement('p'); 25 | descriptionPara.setAttribute('class', 'project-description'); 26 | 27 | const ulTech = document.createElement('ul'); 28 | ulTech.setAttribute('class', 'lang-tag'); 29 | 30 | const cardButton = document.createElement('button'); 31 | cardButton.setAttribute('class', 'see-project'); 32 | cardButton.setAttribute('type', 'button'); 33 | 34 | // Object storage for project details 35 | const projectObj = { 36 | projectOne: { 37 | imageUrl: './images/todoListImage.png', 38 | name: 'Todo List', 39 | tags: ['TODO LIST', 'Front End Dev', '2021'], 40 | description: 41 | 'A Todo List built with javascript, using Webpage features, to enable users to Add list of Todo Items, Edit Items and also delete ccompleted items', 42 | technology: ['html', 'css', 'javascript', 'WebPack'], 43 | projectDetails: 'See project', 44 | liveLink: 'https://ginohmk.github.io/TodoList-With-Webpack', 45 | sourceLink: 'https://github.com/Ginohmk/TodoList-With-Webpack.git', 46 | }, 47 | projectTwo: { 48 | imageUrl: './images/MutiPostStory.svg', 49 | name: 'Multi-Post Stories', 50 | tags: ['CANOPY', 'Back End Dev', '2015'], 51 | description: 52 | 'A daily selection of privately personalized reads; no accounts or sign-ups required', 53 | technology: ['html', 'css', 'javascript'], 54 | projectDetails: 'See project', 55 | liveLink: '#', 56 | sourceLink: '#', 57 | }, 58 | projectThree: { 59 | imageUrl: './images/TonicColor.svg', 60 | name: 'Facebook 360', 61 | tags: ['FACEBOOK', 'Full Stack Dev', '2015'], 62 | description: 63 | "Exploring the future of media in Facebook's first Virtual Reality app; a place to discover and enjoy 360 photos and videos on Gear VR.", 64 | technology: ['html', 'css', 'Ruby on Rails', 'javascript'], 65 | projectDetails: 'See project', 66 | liveLink: '#', 67 | sourceLink: '#', 68 | }, 69 | projectFour: { 70 | imageUrl: './images/Multipost2.svg', 71 | name: 'Uber Navigation', 72 | tags: ['Uber', 'Lead Developer', '2018'], 73 | description: 74 | 'A smart assistant to make driving more safe, efficient, and fun by unlocking your most expensive computer: your car', 75 | technology: ['html', 'css', 'Ruby on Rails', 'javascript'], 76 | projectDetails: 'See project', 77 | liveLink: '#', 78 | sourceLink: '#', 79 | }, 80 | }; 81 | 82 | // Dynamically creating Cards 83 | Object.keys(projectObj).forEach((k) => { 84 | const section = document.createElement('section'); 85 | section.classList.add('project-card'); 86 | const projectAll = projectObj[k]; 87 | Object.keys(projectAll).forEach((k) => { 88 | // image 89 | if (k === 'imageUrl') { 90 | // Change Imagies of card on desktop view ( in Css media query) 91 | if (count === 1) { 92 | divImg.setAttribute('id', 'one'); 93 | } else if (count === 2) { 94 | divImg.setAttribute('id', 'two'); 95 | } else if (count === 3) { 96 | divImg.setAttribute('id', 'three'); 97 | } else { 98 | divImg.setAttribute('id', 'four'); 99 | } 100 | divImg.innerHTML = `Tonic-Project Image`; 101 | section.appendChild(divImg.cloneNode(true)); 102 | // eslint-disable-next-line brace-style 103 | } 104 | // name 105 | else if (k === 'name') { 106 | writeUp.innerHTML = `

${projectAll[k]}

`; 107 | // eslint-disable-next-line brace-style 108 | } 109 | // Tags 110 | else if (k === 'tags') { 111 | const listTags = projectAll[k]; 112 | titleDetail.innerHTML = `${listTags[0]} 113 | `; 117 | writeUp.appendChild(titleDetail); 118 | // eslint-disable-next-line brace-style 119 | } 120 | // description 121 | else if (k === 'description') { 122 | descriptionPara.textContent = `${projectAll[k]}`; 123 | writeUp.appendChild(descriptionPara); 124 | // eslint-disable-next-line brace-style 125 | } 126 | // technology used 127 | else if (k === 'technology') { 128 | const listTechTag = projectAll[k]; 129 | let listFill = ''; 130 | 131 | // for dynamic tech tag length 132 | // eslint-disable-next-line no-plusplus 133 | for (let i = 0; i < listTechTag.length; i++) { 134 | listFill += `
  • ${listTechTag[i]}
    • `; 135 | } 136 | ulTech.innerHTML = `${listFill}`; 137 | writeUp.appendChild(ulTech); 138 | // eslint-disable-next-line brace-style 139 | } 140 | // button 141 | else if (k === 'projectDetails') { 142 | cardButton.innerHTML = `${projectAll[k]}`; 143 | writeUp.appendChild(cardButton.cloneNode(true)); 144 | section.appendChild(writeUp.cloneNode(true)); 145 | } 146 | }); 147 | // eslint-disable-next-line no-plusplus 148 | count++; 149 | projectSection.appendChild(section); 150 | }); 151 | 152 | /* Modal 153 | Creating Global Elements (For Modal) 154 | */ 155 | 156 | const modalHead = document.createElement('div'); 157 | modalHead.setAttribute('class', 'modal-head'); 158 | 159 | const CancelDiv = document.createElement('div'); 160 | CancelDiv.classList.add('image-cancel"'); 161 | 162 | const h4 = document.createElement('h4'); 163 | 164 | const mainModal = document.createElement('div'); 165 | mainModal.setAttribute('class', 'main-modal'); 166 | 167 | const modalTags = document.createElement('div'); 168 | modalTags.setAttribute('class', 'modal-tags'); 169 | 170 | const modalImage = document.createElement('div'); 171 | modalImage.setAttribute('class', 'main-image'); 172 | 173 | const flexDesk = document.createElement('div'); 174 | flexDesk.setAttribute('class', 'flexDesk'); 175 | 176 | const pModal = document.createElement('p'); 177 | 178 | const flexRight = document.createElement('div'); 179 | flexRight.setAttribute('class', 'flex-right'); 180 | 181 | const rule = document.createElement('hr'); 182 | 183 | const ulModal = document.createElement('ul'); 184 | 185 | const liveButton = document.createElement('div'); 186 | liveButton.setAttribute('class', 'button-live'); 187 | 188 | const liveButton1 = document.createElement('div'); 189 | 190 | const cardLine = document.createElement('div'); 191 | cardLine.setAttribute('class', 'card-line'); 192 | 193 | const cardModal = Array.from(document.getElementsByClassName('see-project')); 194 | 195 | // Modal Creation 196 | Object.keys(projectObj).forEach((k) => { 197 | const projectModalAll = projectObj[k]; 198 | const sectionModal = document.createElement('section'); 199 | sectionModal.classList.add('modal-container'); 200 | const modalCard = document.createElement('div'); 201 | modalCard.classList.add('modal-card'); 202 | Object.keys(projectModalAll).forEach((k) => { 203 | const widthScreen = 991; 204 | if (k === 'name') { 205 | h4.textContent = `${projectModalAll[k]}`; 206 | CancelDiv.innerHTML = '
    ×
    '; 207 | modalHead.appendChild(h4); 208 | modalHead.appendChild(CancelDiv); 209 | modalCard.appendChild(modalHead.cloneNode(true)); 210 | } 211 | if (k === 'imageUrl') { 212 | if (window.screen.width > widthScreen) { 213 | if (modalCount === 1) { 214 | // eslint-disable-next-line operator-linebreak 215 | modalImage.innerHTML = 216 | 'Image of project'; 217 | } else if (modalCount === 2) { 218 | // eslint-disable-next-line operator-linebreak 219 | modalImage.innerHTML = 220 | 'Image of project'; 221 | } else if (modalCount === 3) { 222 | // eslint-disable-next-line operator-linebreak 223 | modalImage.innerHTML = 224 | 'Image of project'; 225 | } else { 226 | // eslint-disable-next-line operator-linebreak 227 | modalImage.innerHTML = 228 | 'Image of project'; 229 | } 230 | } else { 231 | modalImage.innerHTML = `Image of project`; 232 | } 233 | mainModal.appendChild(modalImage); 234 | modalCard.append(mainModal); 235 | } 236 | if (k === 'tags') { 237 | const listModalTags = projectModalAll[k]; 238 | modalTags.innerHTML = `${listModalTags[0]} 239 | `; 243 | mainModal.append(modalTags); 244 | modalCard.appendChild(mainModal); 245 | } 246 | if (k === 'description') { 247 | pModal.textContent = `${projectModalAll[k]}`; 248 | flexDesk.appendChild(pModal); 249 | mainModal.appendChild(flexDesk); 250 | } 251 | 252 | if (k === 'technology') { 253 | const listModal = projectModalAll[k]; 254 | let listModalFill = ''; 255 | 256 | // eslint-disable-next-line no-plusplus 257 | for (let j = 0; j < listModal.length; j++) { 258 | listModalFill += `
  • ${listModal[j]}`; 259 | } 260 | ulModal.innerHTML = `${listModalFill}`; 261 | flexRight.appendChild(ulModal); 262 | flexRight.appendChild(rule); 263 | flexDesk.appendChild(flexRight); 264 | } 265 | 266 | if (k === 'liveLink') { 267 | liveButton.innerHTML = `See live 268 | See live project icon 269 | `; 270 | flexRight.appendChild(liveButton); 271 | } 272 | 273 | if (k === 'sourceLink') { 274 | liveButton1.innerHTML = `See source 275 | See source project icon 276 | `; 277 | liveButton.appendChild(liveButton1); 278 | flexRight.appendChild(liveButton); 279 | } 280 | }); 281 | // eslint-disable-next-line no-plusplus 282 | modalCount++; 283 | sectionModal.appendChild(modalCard); 284 | sectionModal.appendChild(cardLine); 285 | document.body.appendChild(sectionModal.cloneNode(true)); 286 | }); 287 | 288 | const modalAll = Array.from(document.getElementsByClassName('modal-container')); 289 | const modalImageCancel = Array.from( 290 | // eslint-disable-next-line comma-dangle 291 | document.getElementsByClassName('image-cancel') 292 | ); 293 | 294 | // Add the display None Class 295 | Object.keys(modalAll).forEach((k) => { 296 | if (k === '0') { 297 | modalAll[k].classList.add('class', 'modalOne'); 298 | } else if (k === '1') { 299 | modalAll[k].classList.add('class', 'modaltwo'); 300 | } else if (k === '2') { 301 | modalAll[k].classList.add('class', 'modalthree'); 302 | } else if (k === '3') { 303 | modalAll[k].classList.add('class', 'modalfour'); 304 | } 305 | }); 306 | 307 | // Show modal 308 | Object.keys(cardModal).forEach((k) => { 309 | cardModal[k].addEventListener('click', () => { 310 | if (k === '0') { 311 | modalAll[k].classList.toggle('modalOne'); 312 | } else if (k === '1') { 313 | modalAll[k].classList.toggle('modaltwo'); 314 | } else if (k === '2') { 315 | modalAll[k].classList.toggle('modalthree'); 316 | } else if (k === '3') { 317 | modalAll[k].classList.toggle('modalfour'); 318 | } 319 | }); 320 | }); 321 | 322 | // Close Modal 323 | Object.keys(modalImageCancel).forEach((k) => { 324 | modalImageCancel[k].addEventListener('click', () => { 325 | if (k === '0') { 326 | modalAll[k].classList.toggle('modalOne'); 327 | } else if (k === '1') { 328 | modalAll[k].classList.toggle('modaltwo'); 329 | } else if (k === '2') { 330 | modalAll[k].classList.toggle('modalthree'); 331 | } else if (k === '3') { 332 | modalAll[k].classList.toggle('modalfour'); 333 | } 334 | }); 335 | }); 336 | 337 | // Reload on screen size change 338 | window.addEventListener('resize', () => { 339 | window.location.reload(); 340 | }); 341 | 342 | /* Mobile Menu */ 343 | function closeMobileMenu() { 344 | menuLink.classList.toggle('hide'); 345 | navH1.classList.toggle('blur'); 346 | navP.classList.toggle('blur'); 347 | letConnect.classList.toggle('blur'); 348 | ham.classList.toggle('blur'); 349 | logo.classList.toggle('blur'); 350 | } 351 | 352 | ham.addEventListener('click', closeMobileMenu); 353 | 354 | cancelMenu.addEventListener('click', closeMobileMenu); 355 | 356 | Object.keys(navLinks).forEach((k) => { 357 | if (k !== '') { 358 | navLinks[k].addEventListener('click', closeMobileMenu); 359 | } 360 | }); 361 | 362 | // FORM VALIDATION & LOCAL STORAGE 363 | const formOne = document.getElementById('formOne'); 364 | const inputName = document.getElementById('name'); 365 | const email = document.getElementById('email'); 366 | const textArea = document.getElementById('textArea'); 367 | const lStorage = window.localStorage.getItem('data'); 368 | const formEntry = {}; 369 | let errorMsg = document.getElementById('errorMsg'); 370 | let emailTest = ''; 371 | let formTest = false; 372 | 373 | // eslint-disable-next-line no-trailing-spaces 374 | /* Get lowercase of each vale in 375 | email for testing real user case value */ 376 | 377 | // Validation Starts 378 | email.addEventListener('keyup', () => { 379 | emailTest = email.value.toLowerCase(); 380 | }); 381 | 382 | formOne.addEventListener('submit', (e) => { 383 | if (emailTest !== email.value) { 384 | errorMsg.innerText = 'Email should be lowercase.'; 385 | if (formTest === false) { 386 | errorMsg.classList.toggle('hideErr'); 387 | } 388 | formTest = true; 389 | // To remove the errMsg when email input is clicked 390 | email.addEventListener('click', () => { 391 | if (formTest === true) { 392 | errorMsg.classList.toggle('hideErr'); 393 | } 394 | formTest = false; 395 | }); 396 | e.preventDefault(); 397 | } else errorMsg = ''; 398 | }); 399 | 400 | // Local Storage Get user input Data 401 | function getUserData() { 402 | formEntry[inputName.name] = inputName.value; 403 | formEntry[email.name] = email.value; 404 | formEntry[textArea.name] = textArea.value; 405 | let items = JSON.stringify(formEntry); 406 | localStorage.setItem('data', `${items}`); 407 | } 408 | 409 | // Set user input value 410 | function setUserData() { 411 | const holdObj = JSON.parse(lStorage); 412 | inputName.value = holdObj.userName; 413 | email.value = holdObj.replyto; 414 | textArea.value = holdObj.message; 415 | } 416 | 417 | // on keyup to listen to User input 418 | formOne.addEventListener('keyup', () => { 419 | getUserData(); 420 | }); 421 | 422 | // Check and set user input value only when local storage is not empty 423 | if (lStorage) { 424 | setUserData(); 425 | } 426 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Imported */ 2 | 3 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); 4 | 5 | /* General */ 6 | 7 | html { 8 | box-sizing: border-box; 9 | overflow-x: hidden; 10 | } 11 | 12 | *, 13 | *::after, 14 | *::before { 15 | box-sizing: inherit; 16 | padding: 0; 17 | margin: 0; 18 | } 19 | 20 | /* Document code */ 21 | 22 | body { 23 | overflow-y: hidden; 24 | scroll-behavior: smooth; 25 | position: relative; 26 | background: #e5e5e5; 27 | font-family: 'Poppins', sans-serif; 28 | } 29 | 30 | .desktop-bg { 31 | display: none; 32 | } 33 | 34 | .hero { 35 | position: relative; 36 | background-image: url(./images/headerTrans.png), url(./images/headerBack.png); 37 | background-repeat: no-repeat, no-repeat; 38 | background-position: 95%; 39 | border-bottom-left-radius: 25% 50px; 40 | background-size: cover; 41 | height: 93vh; 42 | width: 100%; 43 | display: flex; 44 | flex-direction: column; 45 | align-items: center; 46 | justify-content: flex-start; 47 | gap: 12%; 48 | } 49 | 50 | .desktop-menu { 51 | position: absolute; 52 | top: 0; 53 | left: 0; 54 | right: 0; 55 | bottom: 0; 56 | height: 100vh; 57 | padding-top: 63px; 58 | padding-left: 28px; 59 | padding-right: 30px; 60 | display: flex; 61 | flex-direction: column; 62 | background-color: #6070ff; 63 | mix-blend-mode: multiply; 64 | z-index: 5; 65 | } 66 | 67 | .blur { 68 | -webkit-filter: blur(10px); 69 | filter: blur(10px); 70 | } 71 | 72 | .hide { 73 | display: none; 74 | } 75 | 76 | .hide-ham { 77 | display: inline-block; 78 | } 79 | 80 | .cancel-dropDown { 81 | text-align: right; 82 | font-size: 2rem; 83 | height: 55px; 84 | margin-top: -2rem; 85 | margin-bottom: 0.5rem; 86 | } 87 | 88 | .desktop-menu ul { 89 | margin-top: 11px; 90 | display: flex; 91 | flex-direction: column; 92 | gap: 49px; 93 | } 94 | 95 | .desktop-menu li { 96 | list-style-type: none; 97 | font-size: 2rem; 98 | line-height: 44px; 99 | font-weight: 600; 100 | } 101 | 102 | .desktop-menu a { 103 | text-decoration: none; 104 | color: #fff; 105 | } 106 | 107 | .mobile-line { 108 | height: 5px; 109 | width: 134px; 110 | margin: 0 auto; 111 | border-radius: 10px; 112 | background-color: #0d151e; 113 | position: absolute; 114 | bottom: 10px; 115 | left: 0; 116 | right: 0; 117 | } 118 | 119 | header { 120 | width: 100%; 121 | display: flex; 122 | justify-content: space-between; 123 | align-items: center; 124 | padding-right: 30px; 125 | padding-left: 30px; 126 | padding-top: 10px; 127 | } 128 | 129 | .logo { 130 | text-align: center; 131 | transition: all 1s ease-in-out; 132 | } 133 | 134 | .logo:hover { 135 | transform: rotate(360deg); 136 | } 137 | 138 | .logo a { 139 | text-decoration: none; 140 | font-size: 18px; 141 | line-height: 20px; 142 | font-weight: bold; 143 | color: #6070ff; 144 | } 145 | 146 | .banner { 147 | padding-bottom: 20px; 148 | width: 90%; 149 | display: flex; 150 | flex-direction: column; 151 | flex: 1; 152 | } 153 | 154 | .banner h1 { 155 | position: relative; 156 | width: 70%; 157 | font-size: 2.1rem; 158 | line-height: 52px; 159 | color: #172b4d; 160 | animation: slide-right 1s ease-in-out; 161 | } 162 | 163 | @keyframes slide-right { 164 | 0% { 165 | left: 700px; 166 | } 167 | 168 | 25% { 169 | left: 500px; 170 | } 171 | 172 | 50% { 173 | left: 300px; 174 | } 175 | 176 | 75% { 177 | left: 100px; 178 | } 179 | 180 | 100% { 181 | left: 0; 182 | } 183 | } 184 | 185 | .banner p { 186 | font-size: 1em; 187 | line-height: 24px; 188 | font-weight: 400; 189 | color: #344563; 190 | margin: 12px 0; 191 | animation: Fade-in 1s ease-in-out 0.8s; 192 | } 193 | 194 | @keyframes Fade-in { 195 | 0% { 196 | opacity: 0; 197 | } 198 | 199 | 25% { 200 | opacity: 0.04; 201 | } 202 | 203 | 50% { 204 | opacity: 0.08; 205 | } 206 | 207 | 75% { 208 | opacity: 0.1; 209 | } 210 | 211 | 100% { 212 | opacity: 1; 213 | } 214 | } 215 | 216 | .project-img img, 217 | .main-image img { 218 | width: 100%; 219 | } 220 | 221 | .main-image img { 222 | width: 100%; 223 | } 224 | 225 | .button-live img { 226 | margin-left: 1px; 227 | vertical-align: text-bottom; 228 | } 229 | 230 | .framework-icon img, 231 | .lang-icon li img, 232 | .skill-icon li img { 233 | height: 48px; 234 | width: 48px; 235 | } 236 | 237 | .connect { 238 | position: relative; 239 | flex-direction: column; 240 | gap: 20px; 241 | animation: slide-left 1s ease-in-out; 242 | } 243 | 244 | @keyframes slide-left { 245 | 0% { 246 | right: 700px; 247 | } 248 | 249 | 25% { 250 | right: 500px; 251 | } 252 | 253 | 50% { 254 | right: 300px; 255 | } 256 | 257 | 75% { 258 | right: 100px; 259 | } 260 | 261 | 100% { 262 | right: 0; 263 | } 264 | } 265 | 266 | .connect h2 { 267 | margin-bottom: 10px; 268 | font-size: 1.1em; 269 | font-weight: 500; 270 | color: #7f8cff; 271 | display: flex; 272 | } 273 | 274 | .connect .social-icon img { 275 | height: 20px; 276 | width: 14.166671752929688px; 277 | left: 180px; 278 | } 279 | 280 | .social-icon { 281 | display: flex; 282 | align-items: center; 283 | gap: 15px; 284 | } 285 | 286 | .social-icon li { 287 | list-style-type: none; 288 | color: #505f79; 289 | } 290 | 291 | /* Project Show case Section */ 292 | 293 | #project-show-case { 294 | width: 100%; 295 | margin: 0 24px; 296 | margin-bottom: 114px; 297 | margin-top: 87px; 298 | display: grid; 299 | grid-template-columns: auto; 300 | row-gap: 88px; 301 | justify-content: center; 302 | } 303 | 304 | .project-card { 305 | display: flex; 306 | flex-direction: column; 307 | justify-content: start; 308 | align-items: center; 309 | flex: 1; 310 | height: 100%; 311 | padding-bottom: 20px; 312 | width: 87%; 313 | background-color: #fff; 314 | border-radius: 15px; 315 | } 316 | 317 | .project-img, 318 | .main-image { 319 | width: 90%; 320 | margin: 16px; 321 | border-radius: 8px; 322 | } 323 | 324 | .write-up { 325 | width: 90%; 326 | height: 50%; 327 | margin: 0 auto; 328 | display: flex; 329 | flex-direction: column; 330 | justify-content: space-between; 331 | gap: 20px; 332 | } 333 | 334 | .title { 335 | color: #172b4d; 336 | font-weight: 700; 337 | font-size: 2.4rem; 338 | line-height: 44px; 339 | } 340 | 341 | .title-detail-tag { 342 | display: flex; 343 | align-items: center; 344 | gap: 32px; 345 | } 346 | 347 | .tag-title, 348 | .list-tag-title li { 349 | color: #344563; 350 | font-weight: 600; 351 | font-style: normal; 352 | font-size: 0.8rem; 353 | line-height: 16px; 354 | } 355 | 356 | .list-tag-title { 357 | display: flex; 358 | align-items: center; 359 | gap: 32px; 360 | } 361 | 362 | .list-tag-title li { 363 | color: #7a869a; 364 | } 365 | 366 | .project-description { 367 | line-height: 24px; 368 | font-weight: 400; 369 | color: #344563; 370 | font-size: 0.9rem; 371 | } 372 | 373 | .lang-tag { 374 | display: flex; 375 | flex-wrap: wrap; 376 | gap: 20px; 377 | } 378 | 379 | .lang-tag li { 380 | list-style-type: none; 381 | font-size: 0.7rem; 382 | line-height: 16px; 383 | color: #6070ff; 384 | background-color: #ebebff; 385 | padding: 4px 12px; 386 | border-radius: 8px; 387 | } 388 | 389 | .see-project .p, 390 | .see-resume .p { 391 | font-size: 0.9rem; 392 | } 393 | 394 | .see-project, 395 | .see-resume { 396 | height: 45px; 397 | max-width: 45%; 398 | padding: 12px; 399 | color: #396df2; 400 | background-color: #fff; 401 | border-radius: 8px; 402 | text-align: center; 403 | border: 1px solid #7f8cff; 404 | } 405 | 406 | /* Project Button links */ 407 | 408 | /* Hover */ 409 | .form-button:hover, 410 | .see-project:hover, 411 | .see-resume:hover { 412 | color: #fff; 413 | background-color: #6070ff; 414 | box-shadow: 0 8px 16px rgba(64, 83, 252, 0.24); 415 | cursor: pointer; 416 | } 417 | 418 | /* Pressed */ 419 | .form-button:active, 420 | .see-project:active, 421 | .see-resume:active { 422 | background-color: #2230d2; 423 | } 424 | 425 | /* Enabled */ 426 | .form-button:visited, 427 | .see-project:visited, 428 | .see-resume:visited { 429 | border: 1px solid #7f8cff; 430 | box-sizing: border-box; 431 | border-radius: 8px; 432 | } 433 | 434 | .see-project .p { 435 | line-height: 24px; 436 | font-size: 1rem; 437 | } 438 | 439 | /* About section */ 440 | 441 | .about-section { 442 | background-color: #fff; 443 | width: 100%; 444 | padding-top: 114px; 445 | padding-bottom: 114px; 446 | margin: 0 auto; 447 | height: 100%; 448 | display: flex; 449 | flex-direction: column; 450 | gap: 12px; 451 | border-top-right-radius: 25% 60px; 452 | } 453 | 454 | .about-write { 455 | width: 90%; 456 | display: flex; 457 | flex-direction: column; 458 | justify-content: flex-start; 459 | gap: 12px; 460 | margin: 0 auto; 461 | } 462 | 463 | .about-connect { 464 | display: flex; 465 | flex-direction: column; 466 | gap: 12px; 467 | } 468 | 469 | .about-section h2 { 470 | font-weight: bold; 471 | font-size: 2.2rem; 472 | color: #172b4d; 473 | line-height: 52px; 474 | } 475 | 476 | .about-detail { 477 | font-weight: 400; 478 | font-size: 1rem; 479 | line-height: 24px; 480 | color: #344563; 481 | } 482 | 483 | .about-connect h3 { 484 | color: #7f8cff; 485 | font-size: 1rem; 486 | line-height: 24px; 487 | font-weight: 500; 488 | } 489 | 490 | .about-connect .social-icon img { 491 | height: 16px; 492 | width: 20px; 493 | } 494 | 495 | /* Language */ 496 | 497 | .languages { 498 | width: 90%; 499 | margin: 60px auto; 500 | display: flex; 501 | flex-direction: column; 502 | gap: 36px; 503 | } 504 | 505 | .select-lang { 506 | width: 88%; 507 | display: flex; 508 | justify-content: space-between; 509 | align-items: center; 510 | } 511 | 512 | .select-lang h3 { 513 | font-size: 1.2rem; 514 | font-weight: 500; 515 | line-height: 24px; 516 | color: #000; 517 | } 518 | 519 | .javascript, 520 | .framework, 521 | .skill { 522 | display: grid; 523 | grid-template-columns: auto; 524 | gap: 36px; 525 | } 526 | 527 | .flex-right li { 528 | list-style-type: none; 529 | border: 1px solid #dfe1e6; 530 | border-radius: 8px; 531 | padding: 4px 12px; 532 | background-color: #ebebff; 533 | color: #6070ff; 534 | } 535 | 536 | .lang-icon, 537 | .skill-icon, 538 | .framework-icon { 539 | width: 100%; 540 | display: flex; 541 | flex-direction: column; 542 | gap: 12px; 543 | } 544 | 545 | .lang-icon li, 546 | .framework-icon li, 547 | .skill-icon li { 548 | list-style-type: none; 549 | width: 95%; 550 | height: 66.72px; 551 | background-color: #f7f7f9; 552 | display: flex; 553 | align-items: center; 554 | gap: 16px; 555 | transition: transform 1s ease-in-out; 556 | } 557 | 558 | .contact-form ul li { 559 | list-style-type: none; 560 | } 561 | 562 | .contact-form ul { 563 | width: 100%; 564 | margin: 0 auto; 565 | display: flex; 566 | flex-direction: column; 567 | gap: 20px; 568 | } 569 | 570 | .lang-icon li:hover, 571 | .framework-icon li:hover, 572 | .skill-icon li:hover { 573 | transform: scaleX(0.3); 574 | } 575 | 576 | .lang-name { 577 | font-size: 0.9rem; 578 | font-weight: 500; 579 | color: #253858; 580 | line-height: 24px; 581 | } 582 | 583 | .framework-icon.hide { 584 | display: none; 585 | } 586 | 587 | .skill-icon.hide { 588 | display: none; 589 | } 590 | 591 | .line.lang { 592 | display: none; 593 | } 594 | 595 | .line { 596 | height: 1px; 597 | width: 97%; 598 | border: 1px solid #dfe1e6; 599 | } 600 | 601 | /* Footer */ 602 | 603 | footer { 604 | width: 100%; 605 | background-color: #6070ff; 606 | border-top-left-radius: 25% 60px; 607 | padding-bottom: 40px; 608 | margin-top: -60px; 609 | position: inherit; 610 | display: flex; 611 | flex-direction: column; 612 | align-items: center; 613 | justify-content: center; 614 | } 615 | 616 | .trans-background { 617 | margin-top: 12px; 618 | height: 867px; 619 | width: 265px; 620 | position: absolute; 621 | top: 0; 622 | right: -3px; 623 | border-radius: 0; 624 | background-image: url(./images/contact-form-Bg-mobile.svg); 625 | background-repeat: no-repeat; 626 | background-size: cover; 627 | z-index: 2; 628 | } 629 | 630 | .contact-me { 631 | z-index: 3; 632 | width: 90%; 633 | margin: 0 auto; 634 | } 635 | 636 | .contact-heading { 637 | text-align: center; 638 | margin-top: 103px; 639 | } 640 | 641 | .contact-heading h2 { 642 | color: #fff; 643 | line-height: 52px; 644 | font-size: 2.1rem; 645 | font-weight: bold; 646 | } 647 | 648 | .contact-description { 649 | color: #fff; 650 | font-size: 1.1rem; 651 | margin-bottom: 77px; 652 | margin-top: 12px; 653 | } 654 | 655 | .contact-description p { 656 | text-align: center; 657 | color: #ebebff; 658 | font-weight: 400; 659 | line-height: 28px; 660 | } 661 | 662 | input[type='text']::placeholder, 663 | input[type='text']::-ms-input-placeholder, 664 | input[type='text']::-webkit-input-placeholder, 665 | input[type='email']::placeholder, 666 | input[type='email']::-ms-input-placeholder, 667 | input[type='email']:-webkit-input-placeholder { 668 | color: #172b4d; 669 | opacity: 1; 670 | } 671 | 672 | textarea::placeholder, 673 | textarea::-webkit-input-placeholder { 674 | color: #b3bac5; 675 | } 676 | 677 | input[type='text']:active, 678 | input[type='text']:focus, 679 | input[type='email']:active, 680 | input[type='email']:focus, 681 | textarea:active, 682 | textarea:focus { 683 | outline: none; 684 | } 685 | 686 | .contact-form li input { 687 | border: 1px solid #cfd8dc; 688 | height: 48px; 689 | border-radius: 8px; 690 | width: 100%; 691 | color: #172b4d; 692 | padding: 15px 38px 15px 16px; 693 | } 694 | 695 | .text-area { 696 | padding: 15px 38px 15px 16px; 697 | background-color: #fff; 698 | border: 1px solid #cfd8dc; 699 | border-radius: 8px; 700 | display: flex; 701 | flex-wrap: wrap; 702 | width: 100%; 703 | color: #b3bac5; 704 | line-height: 24px; 705 | vertical-align: top; 706 | text-align: left; 707 | } 708 | 709 | .contact-form button { 710 | display: flex; 711 | align-items: center; 712 | padding: 12px 16px; 713 | background-color: #fff; 714 | color: #6070ff; 715 | font-size: 1.1rem; 716 | text-align: center; 717 | border-radius: 8px; 718 | border: none; 719 | width: 140px; 720 | height: 48px; 721 | margin-top: 22px; 722 | margin-bottom: 45px; 723 | } 724 | 725 | .footer-line, 726 | .card-line { 727 | height: 5px; 728 | width: 134px; 729 | margin: 0 auto; 730 | border-radius: 10px; 731 | background-color: #0d151e; 732 | } 733 | 734 | /* MODAL */ 735 | 736 | .modal-container { 737 | width: 100%; 738 | height: 100%; 739 | background-color: rgba(193, 199, 208, 0.94); 740 | margin: auto; 741 | position: absolute; 742 | top: 0; 743 | right: 0; 744 | left: 0; 745 | padding-top: 75px; 746 | padding-bottom: 12px; 747 | z-index: 100; 748 | } 749 | 750 | .modal-card { 751 | width: 87%; 752 | position: fixed; 753 | transform: translateY(-50%); 754 | top: 50%; 755 | left: 7%; 756 | margin: 0 auto; 757 | padding: 18px 16px; 758 | background-color: #fff; 759 | border-radius: 16px; 760 | margin-bottom: 32px; 761 | transition: all 0.5s ease-in-out; 762 | } 763 | 764 | .modal-head { 765 | display: flex; 766 | justify-content: space-between; 767 | align-items: center; 768 | margin-bottom: 32px; 769 | } 770 | 771 | .modal-head h4 { 772 | color: #17284d; 773 | font-weight: 700; 774 | line-height: 44px; 775 | font-size: 2rem; 776 | } 777 | 778 | .modal-tags { 779 | display: flex; 780 | align-items: center; 781 | gap: 30px; 782 | margin-bottom: 20px; 783 | } 784 | 785 | .modal-tags h5 { 786 | color: #344563; 787 | line-height: 16px; 788 | font-size: 0.9rem; 789 | } 790 | 791 | .modal-tags ul { 792 | display: flex; 793 | align-items: center; 794 | gap: 30px; 795 | } 796 | 797 | .main-image { 798 | margin-bottom: 12px; 799 | } 800 | 801 | .flexDesk p { 802 | color: #344563; 803 | font-size: 1rem; 804 | line-height: 24px; 805 | font-weight: 400; 806 | margin-bottom: 12px; 807 | } 808 | 809 | .flex-right ul { 810 | display: flex; 811 | align-items: center; 812 | gap: 30px; 813 | width: 100%; 814 | flex-wrap: wrap; 815 | margin-bottom: 20px; 816 | } 817 | 818 | .flex-right hr { 819 | margin-bottom: 25px; 820 | } 821 | 822 | .button-live { 823 | display: flex; 824 | align-items: center; 825 | justify-content: center; 826 | flex-wrap: wrap; 827 | margin-bottom: 15px; 828 | gap: 5px; 829 | } 830 | 831 | .button-live a { 832 | text-decoration: none; 833 | color: #396df2; 834 | background-color: #fff; 835 | border: 1px solid #6070ff; 836 | border-radius: 8px; 837 | padding: 14px 22px; 838 | } 839 | 840 | .active { 841 | display: block; 842 | } 843 | 844 | .modalOne { 845 | display: none; 846 | } 847 | 848 | .modaltwo { 849 | display: none; 850 | } 851 | 852 | .modalthree { 853 | display: none; 854 | } 855 | 856 | .modalfour { 857 | display: none; 858 | } 859 | 860 | .image-cancel { 861 | cursor: pointer; 862 | font-size: 2.2rem; 863 | color: #67798e; 864 | } 865 | 866 | .notshow { 867 | display: none; 868 | } 869 | 870 | .form-button:active { 871 | font-weight: 600; 872 | } 873 | 874 | .button-errorMsg { 875 | display: flex; 876 | flex-direction: column; 877 | align-items: center; 878 | gap: 25px; 879 | } 880 | 881 | #errorMsg { 882 | line-height: 24px; 883 | height: 40px; 884 | font-weight: 400; 885 | color: rgb(231, 71, 71); 886 | background-color: #fff; 887 | font-size: 1.2rem; 888 | border: 1px solid red; 889 | box-shadow: 0 3px 0 0 rgba(241, 79, 79, 0.7); 890 | border-radius: 8px; 891 | padding: 5px 12px; 892 | margin-top: 7px; 893 | margin-bottom: -1.6rem; 894 | } 895 | 896 | .hideErr { 897 | display: none; 898 | } 899 | 900 | /* Media Query */ 901 | 902 | /* Mobile Screen less than 300px */ 903 | 904 | @media (max-width: 300px) { 905 | .see-project .p { 906 | font-size: 0.8rem; 907 | } 908 | 909 | .button-live { 910 | flex-wrap: wrap; 911 | justify-content: center; 912 | } 913 | 914 | .see-resume .p { 915 | font-size: 0.75rem; 916 | } 917 | } 918 | 919 | @media (max-width: 365px) { 920 | .button-live > a { 921 | flex-wrap: wrap; 922 | margin-bottom: 20px; 923 | } 924 | } 925 | 926 | /* Desktop view 992px */ 927 | 928 | @media (min-width: 992px) { 929 | .Ham-menu { 930 | display: none; 931 | } 932 | 933 | .blur { 934 | -webkit-filter: blur(0); 935 | filter: blur(0); 936 | } 937 | 938 | .menu { 939 | width: 25%; 940 | } 941 | 942 | .hide { 943 | display: none; 944 | } 945 | 946 | .desktop-menu { 947 | position: relative; 948 | top: 0; 949 | flex-direction: row; 950 | margin-top: -28px; 951 | width: 100%; 952 | height: 100%; 953 | padding: 0; 954 | display: flex; 955 | gap: 0; 956 | color: black; 957 | background-color: inherit; 958 | } 959 | 960 | .mobile-line { 961 | display: none; 962 | } 963 | 964 | .desktop-menu li { 965 | list-style-type: none; 966 | } 967 | 968 | .framework-icon li, 969 | .lang-icon li, 970 | .skill-icon li { 971 | padding: 10px; 972 | height: 100%; 973 | flex-direction: column; 974 | align-items: flex-start; 975 | justify-content: center; 976 | } 977 | 978 | .modal-tags li { 979 | color: #7a869a; 980 | font-size: 0.9rem; 981 | line-height: 16px; 982 | font-weight: 600; 983 | } 984 | 985 | .desktop-menu ul li:hover { 986 | cursor: pointer; 987 | } 988 | 989 | .desktop-menu li a { 990 | text-decoration: none; 991 | color: #344563; 992 | font-weight: bolder; 993 | font-size: 0.9rem; 994 | } 995 | 996 | .desktop-menu ul { 997 | flex-direction: row; 998 | justify-content: flex-start; 999 | width: 100%; 1000 | vertical-align: top; 1001 | gap: 30px; 1002 | } 1003 | 1004 | .hero { 1005 | position: relative; 1006 | background-color: #fff; 1007 | background-image: none; 1008 | height: 83vh; 1009 | border-bottom-left-radius: 25% 100px; 1010 | } 1011 | 1012 | .desktop-bg { 1013 | display: block; 1014 | z-index: 1; 1015 | background-image: url(./images/DesktopheaderBg.png); 1016 | background-repeat: no-repeat; 1017 | background-size: 100%; 1018 | height: 524px; 1019 | width: 93%; 1020 | margin-top: 90px; 1021 | margin-right: 8px; 1022 | position: absolute; 1023 | } 1024 | 1025 | header { 1026 | position: fixed; 1027 | z-index: 100; 1028 | width: 100%; 1029 | padding: 25px 0; 1030 | padding-left: 70px; 1031 | padding-right: 70px; 1032 | background-color: #fff; 1033 | } 1034 | 1035 | .banner { 1036 | z-index: 2; 1037 | margin-top: 135px; 1038 | width: 70%; 1039 | } 1040 | 1041 | .project-img img { 1042 | display: none; 1043 | } 1044 | 1045 | .main-image img { 1046 | width: 100%; 1047 | height: 630px; 1048 | margin-bottom: 10px; 1049 | } 1050 | 1051 | .social-icon li img { 1052 | height: 50px; 1053 | width: 50px; 1054 | } 1055 | 1056 | .project-img { 1057 | height: 100%; 1058 | } 1059 | 1060 | #project-show-case { 1061 | width: 95%; 1062 | margin: 0 auto; 1063 | margin-top: -38px; 1064 | margin-bottom: 194px; 1065 | row-gap: 152px; 1066 | grid-template-rows: auto; 1067 | } 1068 | 1069 | #project-show-case .project-card:nth-child(odd) .project-img { 1070 | order: 2; 1071 | } 1072 | 1073 | .write-up { 1074 | height: 70%; 1075 | margin-top: 37px; 1076 | margin-left: 20px; 1077 | } 1078 | 1079 | .project-card { 1080 | display: grid; 1081 | grid-template-columns: 1fr 1fr; 1082 | justify-content: start; 1083 | align-items: flex-start; 1084 | width: 100%; 1085 | max-width: 1024px; 1086 | height: calc(100% + 89px); 1087 | padding-bottom: 20px; 1088 | } 1089 | 1090 | #one { 1091 | background-image: url(./images/todoListImage.png); 1092 | background-repeat: no-repeat; 1093 | background-size: contain; 1094 | } 1095 | 1096 | #two { 1097 | background-image: url(./images/DeskImg2.png); 1098 | background-repeat: no-repeat; 1099 | background-size: contain; 1100 | } 1101 | 1102 | #three { 1103 | background-image: url(./images/DEskImg3.png); 1104 | background-repeat: no-repeat; 1105 | background-size: contain; 1106 | } 1107 | 1108 | #four { 1109 | background-image: url(./images/DeskImg4.png); 1110 | background-repeat: no-repeat; 1111 | background-size: contain; 1112 | } 1113 | 1114 | /* Effects on hover */ 1115 | .project-card:hover { 1116 | cursor: pointer; 1117 | border: 2px solid #a7aeff; 1118 | } 1119 | 1120 | .project-card:hover .see-project { 1121 | color: #fff; 1122 | background-color: #6070ff; 1123 | box-shadow: 0 8px 16px rgba(64, 83, 252, 0.24); 1124 | } 1125 | 1126 | /* About Section */ 1127 | .about-section { 1128 | flex-direction: row; 1129 | justify-content: flex-start; 1130 | align-items: flex-start; 1131 | padding-left: 103px; 1132 | padding-bottom: 250px; 1133 | border-top-right-radius: 25% 100px; 1134 | } 1135 | 1136 | .about-connect { 1137 | gap: 24px; 1138 | } 1139 | 1140 | .about-write { 1141 | width: 40%; 1142 | } 1143 | 1144 | .languages { 1145 | width: 55%; 1146 | margin: auto; 1147 | display: flex; 1148 | flex-direction: column; 1149 | gap: 36px; 1150 | } 1151 | 1152 | .framework-icon, 1153 | .lang-icon, 1154 | .skill-icon { 1155 | width: 45%; 1156 | flex-direction: row; 1157 | } 1158 | 1159 | /* Footer */ 1160 | 1161 | footer { 1162 | border-top-left-radius: 25% 100px; 1163 | margin-top: -90px; 1164 | } 1165 | 1166 | .trans-background { 1167 | margin-top: 79px; 1168 | margin-right: 19px; 1169 | width: 970px; 1170 | height: 540px; 1171 | background-image: url(./images/FooterBg.png); 1172 | z-index: 10; 1173 | } 1174 | 1175 | .contact-me { 1176 | z-index: 11; 1177 | width: 60%; 1178 | text-align: center; 1179 | } 1180 | 1181 | .contact-description { 1182 | width: 85%; 1183 | margin: 0 auto; 1184 | margin-bottom: 24px; 1185 | } 1186 | 1187 | .contact-form { 1188 | width: 70%; 1189 | margin: 0 auto; 1190 | } 1191 | 1192 | .contact-form li input, 1193 | .text-area { 1194 | border-radius: 2px; 1195 | } 1196 | 1197 | .contact-form button { 1198 | margin: 0 auto; 1199 | margin-top: 22px; 1200 | margin-bottom: 45px; 1201 | } 1202 | 1203 | .modal-card { 1204 | height: 940px; 1205 | overflow-y: auto; 1206 | margin: 0 auto; 1207 | left: 17%; 1208 | right: 20%; 1209 | width: 70%; 1210 | max-width: 950px; 1211 | } 1212 | 1213 | .flexDesk { 1214 | display: flex; 1215 | } 1216 | 1217 | .flexDesk p { 1218 | flex: 1; 1219 | } 1220 | 1221 | .flex-right { 1222 | flex: 1; 1223 | } 1224 | 1225 | .main-image { 1226 | display: flex; 1227 | width: 100%; 1228 | margin-left: -0.2rem; 1229 | } 1230 | } 1231 | 1232 | /* For higher resolution (desktop) */ 1233 | 1234 | @media (min-width: 1024px) { 1235 | .project-img.one, 1236 | .project-img.two, 1237 | .project-img.three, 1238 | .project-img.four { 1239 | height: 95%; 1240 | } 1241 | 1242 | .banner { 1243 | margin-top: 238px; 1244 | width: 65%; 1245 | } 1246 | 1247 | .banner p { 1248 | width: 70%; 1249 | } 1250 | 1251 | header { 1252 | padding-left: 90px; 1253 | padding-right: 90px; 1254 | } 1255 | 1256 | .about-section { 1257 | padding-right: 110px; 1258 | } 1259 | } 1260 | --------------------------------------------------------------------------------