├── .gitignore ├── .vscode └── settings.json ├── imgs ├── Dot.png ├── JS1.png ├── CSS1.png ├── Dance.png ├── HTML1.png ├── Pics.png ├── Union.png ├── Ellipse.png ├── github.png ├── twitter.png ├── x-icon.png ├── avialable.png ├── prof-port.png ├── Facebook360.png ├── contactform.png ├── professional.png ├── SeparatorBottom.png ├── availPortfolio.png ├── Snapshoot-Portfolio.jpg ├── header-shapes-mobile.png ├── Union.svg ├── Vector(2).svg ├── medium.svg ├── close.svg ├── Linkedinicon.svg ├── Vector(1).svg └── header-shapesmobile@2x.svg ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── Icon.svg ├── close.svg ├── Modal-close.svg ├── js ├── app.js ├── validation.js └── pop-up.js ├── package.json ├── sourcecode.svg ├── README.md ├── .github └── workflows │ └── linters.yml ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | # .gitignore 2 | node_modules/ -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } 4 | -------------------------------------------------------------------------------- /imgs/Dot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/Dot.png -------------------------------------------------------------------------------- /imgs/JS1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/JS1.png -------------------------------------------------------------------------------- /imgs/CSS1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/CSS1.png -------------------------------------------------------------------------------- /imgs/Dance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/Dance.png -------------------------------------------------------------------------------- /imgs/HTML1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/HTML1.png -------------------------------------------------------------------------------- /imgs/Pics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/Pics.png -------------------------------------------------------------------------------- /imgs/Union.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/Union.png -------------------------------------------------------------------------------- /imgs/Ellipse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/Ellipse.png -------------------------------------------------------------------------------- /imgs/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/github.png -------------------------------------------------------------------------------- /imgs/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/twitter.png -------------------------------------------------------------------------------- /imgs/x-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/x-icon.png -------------------------------------------------------------------------------- /imgs/avialable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/avialable.png -------------------------------------------------------------------------------- /imgs/prof-port.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/prof-port.png -------------------------------------------------------------------------------- /imgs/Facebook360.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/Facebook360.png -------------------------------------------------------------------------------- /imgs/contactform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/contactform.png -------------------------------------------------------------------------------- /imgs/professional.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/professional.png -------------------------------------------------------------------------------- /imgs/SeparatorBottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/SeparatorBottom.png -------------------------------------------------------------------------------- /imgs/availPortfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/availPortfolio.png -------------------------------------------------------------------------------- /imgs/Snapshoot-Portfolio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/Snapshoot-Portfolio.jpg -------------------------------------------------------------------------------- /imgs/header-shapes-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Basir-Mohammadi/My_Portfolio/HEAD/imgs/header-shapes-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 | } -------------------------------------------------------------------------------- /imgs/Union.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.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 | 17 | "eol-last": "off", 18 | "import/extensions": [ 1, { 19 | "js": "always", "json": "always" 20 | }] 21 | 22 | }, 23 | "ignorePatterns": [ 24 | "dist/", 25 | "build/" 26 | ] 27 | } -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": [ 7 | true, 8 | { 9 | "ignoreAtRules": [ 10 | "tailwind", 11 | "apply", 12 | "variants", 13 | "responsive", 14 | "screen" 15 | ] 16 | } 17 | ] 18 | }, 19 | "csstree/validator": true, 20 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"] 21 | } 22 | -------------------------------------------------------------------------------- /imgs/Vector(2).svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /imgs/medium.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /imgs/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Modal-close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | const hamburger = document.querySelector('.hamburger'); 2 | const menu = document.querySelector('.menu-popup'); 3 | const navLinks = document.querySelector('.nav-links'); 4 | const logo = document.querySelector('.logo'); 5 | const lits = document.querySelectorAll('.item'); 6 | 7 | hamburger.addEventListener('click', () => { 8 | hamburger.classList.toggle('active'); 9 | menu.classList.toggle('active'); 10 | navLinks.classList.toggle('active'); 11 | logo.classList.toggle('active'); 12 | }); 13 | 14 | const toggleMenu = () => { 15 | if (document.documentElement.clientWidth <= 767) { 16 | hamburger.classList.toggle('active'); 17 | menu.classList.toggle('active'); 18 | navLinks.classList.toggle('active'); 19 | logo.classList.toggle('active'); 20 | } 21 | }; 22 | 23 | lits.forEach((menuItem) => { 24 | menuItem.addEventListener('click', toggleMenu); 25 | }); 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my_portfolio", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/basirking/My_Portfolio.git" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/basirking/My_Portfolio/issues" 18 | }, 19 | "homepage": "https://github.com/basirking/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.26.0", 25 | "hint": "^6.1.11", 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 | -------------------------------------------------------------------------------- /imgs/Linkedinicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /sourcecode.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /js/validation.js: -------------------------------------------------------------------------------- 1 | const Form = document.getElementById('forms'); 2 | const email = document.getElementById('email'); 3 | 4 | const validation = (event) => { 5 | const emailError = document.querySelector('.error'); 6 | if (email.validity.patternMismatch) { 7 | email.setCustomValidity(''); 8 | emailError.textContent = 'Enter email in lowercase'; 9 | emailError.classList.add('show'); 10 | event.preventDefault(); 11 | } else if (email.validity.valueMissing) { 12 | email.setCustomValidity(''); 13 | emailError.textContent = 'Kindly enter email'; 14 | emailError.classList.add('show'); 15 | event.preventDefault(); 16 | } else if (email.validity.typeMismatch) { 17 | email.setCustomValidity(''); 18 | emailError.textContent = 'Kindly enter proper email'; 19 | emailError.classList.add('show'); 20 | event.preventDefault(); 21 | } else { 22 | email.setCustomValidity(''); 23 | emailError.classList.remove('show'); 24 | event.preventDefault(); 25 | } 26 | }; 27 | Form.addEventListener('input', validation); 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://img.shields.io/badge/Microverse-blueviolet) 2 | 3 | # My_Portfolio 4 | 5 | > This is my first portfolio project in microverse. 6 | 7 | 8 | ## Built With 9 | 10 | - HTML 11 | - CSS 12 | - linters 13 | 14 | ## Live Demo 15 | 16 | [My-Portfolio](https://basirking.github.io/My_Portfolio/) 17 | 18 | 19 | 20 | 21 | 22 | ## Getting Started 23 | 24 | *To get a local copy up and running follow these simple example steps.* 25 | 26 | 27 | ### Prerequisites 28 | - IDE eg (Atom/Visual studio code) 29 | - Set-up linter(HTML and CSS) 30 | ### Setup 31 | - Clone the github repository and set up linters 32 | 33 | 34 | 35 | ## Author 36 | 37 | 👤 *Basir Mohammadi* 38 | 39 | - GitHub: [@basirking](https://github.com/basirking) 40 | - LinkedIn: [@basir-mohammadi](https://www.linkedin.com/in/basir-mohammadi-1296b3157) 41 | 42 | 43 | 44 | 45 | 46 | ## Show your support 47 | 48 | Give a ⭐ if you like this project! 49 | 50 | ## Acknowledgments 51 | 52 | - Hat tip to anyone whose code was used 53 | - Inspiration 54 | 55 | 56 | ## 📝 License 57 | 58 | This project is [MIT](./MIT.md) licensed. 59 | -------------------------------------------------------------------------------- /imgs/Vector(1).svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.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 | nodechecker: 64 | name: node_modules checker 65 | runs-on: ubuntu-18.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 -------------------------------------------------------------------------------- /imgs/header-shapesmobile@2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | My Portfolio 12 | 13 | 14 |
15 |
16 |
17 |
18 | 33 |
34 |
35 | 36 |
37 |
38 |
39 |

40 | I'am Basir
41 | Nice to see you! 42 |

43 |
44 | 45 |
46 |

47 | Hello I'm a software developer! I can help you build a product, 48 | feature or website look through
49 | some of my work and experience! If you like what you see and 50 | have a project you need coded,
51 | don't hesitate to contact me. 52 |

53 |
54 |
55 | 56 |
57 | 58 | LET'S CONNECT 59 | 60 |
61 | 62 | 91 |
92 |
93 | 94 | 95 |
96 | 97 |
98 |
99 |
100 |

About
Myself

101 |
102 |
103 |

104 | Hello I'm a software developer! I can help you build a product, 105 | feature or website look through some of my work and experience! If 106 | you like what you see and have a project you need coded, don't 107 | hesitate to contact me. 108 |

109 |
110 |
111 | 112 | LET'S CONNECT 113 | 114 |
115 | 116 | 145 |
146 | 147 |

Get My Resume

148 | 149 |
150 |
151 | 152 |
153 |
154 | 155 |

Languages

156 | 157 |
158 | 159 |
160 |
    161 |
  • 162 | 170 |
    • 171 |
  • 172 | 180 |
    • 181 |
  • 182 | 190 |
    • 191 |
192 |
    193 |
  • 194 |

    Frameworks

    195 |
    .
    196 |
    • 197 |
  • 198 |

    Skills

    199 |
    .
    200 |
    • 201 |
202 |
203 |
204 |
205 | 206 |
207 |
208 | 209 |

Contact me

210 | 211 |

212 | if you have an application you are interested in developing, a 213 | feature that you need built or a project that needs coding, I'd love 214 | to help with it 215 |

216 |
217 |
218 |
224 | 233 | 234 | 243 | 244 | 253 |
254 | 260 |
261 |
262 |
263 |
264 | 265 | 266 | 267 |
268 | 269 | 270 | -------------------------------------------------------------------------------- /js/pop-up.js: -------------------------------------------------------------------------------- 1 | const projects = [ 2 | { 3 | title: 'Tonic', 4 | roles: { company: 'Canopy', position: ['Back End Dev', '2015'] }, 5 | image: 'snapshootportfolio.svg', 6 | alt: 'Canopy project screenshot', 7 | description: 8 | 'A daily selection of privately personalized reads; no accounts or sign-ups required.', 9 | skills: ['html', 'css', 'javascript'], 10 | skillsModal: ['html', 'css', 'javascript', 'github', 'ruby', 'Bootstraps'], 11 | livelink: { link: '#', text: 'See live' }, 12 | seesource: { link: '#', text: 'See Source' }, 13 | seeproject: 'See Project', 14 | htmlClass: { 15 | article: ['grid-item', 'card'], 16 | cardImage: ['card-image'], 17 | cardDescription: ['card-description'], 18 | }, 19 | }, 20 | 21 | { 22 | title: 'Multi-Post Stories', 23 | roles: { company: 'Facebook', position: ['Full Stack Dev', '2015'] }, 24 | image: 'project-4.svg', 25 | alt: 'Multi-Post stories project screenshot', 26 | description: 27 | 'Experimental content creation feature that allows users to add to an existing story over the course of a day without spamming their friends.', 28 | skills: ['html', 'Ruby on rails', 'css', 'javascript'], 29 | skillsModal: ['html', 'css', 'javascript', 'github', 'ruby', 'Bootstraps'], 30 | livelink: { link: '#', text: 'See live' }, 31 | seesource: { link: '#', text: 'See Source' }, 32 | seeproject: 'See Project', 33 | htmlClass: { 34 | article: ['grid-item', 'card', 'hide-ruby'], 35 | cardImage: ['card-image', 'flex-item-2'], 36 | cardDescription: ['card-description', 'flex-item-1'], 37 | }, 38 | }, 39 | 40 | { 41 | title: 'Facebook 360', 42 | roles: { company: 'Facebook', position: ['Full Stack Dev', '2015'] }, 43 | image: 'tonic.svg', 44 | alt: 'Facebook 360 project screenshot', 45 | description: 46 | 'Exploring the future of media in Facebooks first Virtual Reality app; a place to discover and enjoy 360 photos and videos on Gear VR.', 47 | skills: ['html', 'Ruby on rails', 'css', 'javascript'], 48 | skillsModal: ['html', 'css', 'javascript', 'github', 'ruby', 'Bootstraps'], 49 | livelink: { link: '#', text: 'See live' }, 50 | seesource: { link: '#', text: 'See Source' }, 51 | seeproject: 'See Project', 52 | htmlClass: { 53 | article: ['grid-item', 'card', 'flex-item-2', 'hide-ruby'], 54 | cardImage: ['card-image'], 55 | cardDescription: ['card-description'], 56 | }, 57 | }, 58 | 59 | { 60 | title: 'Uber Navigation', 61 | roles: { company: 'Uber', position: ['Lead Developer', '2018'] }, 62 | image: 'multi-stories-post.svg', 63 | alt: 'Uber Navigation project screenshot', 64 | description: 65 | 'A smart assistant to make driving more safe, efficient, and fun by unlocking your most expensive computer: your car..', 66 | skills: ['html', 'Ruby on rails', 'css', 'javascript'], 67 | skillsModal: ['html', 'css', 'javascript', 'github', 'ruby', 'Bootstraps'], 68 | livelink: { link: '#', text: 'See live' }, 69 | seesource: { link: '#', text: 'See Source' }, 70 | seeproject: 'See Project', 71 | htmlClass: { 72 | article: [ 73 | 'grid-item', 74 | 'card', 75 | 'flex-item-3', 76 | 'flex-item-last', 77 | 'hide-ruby', 78 | ], 79 | cardImage: ['card-image', 'flex-item-2'], 80 | cardDescription: ['card-description', 'flex-item-1'], 81 | }, 82 | }, 83 | ]; 84 | 85 | const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the releaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s with the releorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum han printer took a galley of type and scrambled it 1960s with the releawn printer took a galley of type and scrambled it 1960s with the releaLorem Ipsum is simply dummy text of the printing and typesetting industry.'; 86 | const mobileText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent'; 87 | 88 | const listItems = (items) => { 89 | let list = ''; 90 | items.forEach((element) => { 91 | list += `
  • ${element}
    • `; 92 | }); 93 | 94 | return list; 95 | }; 96 | 97 | const createImageButton = (project, dest, srcLink) => { 98 | const link = document.createElement('a'); 99 | link.className = 'btn'; 100 | link.textContent = `${dest.text} `; 101 | link.href = dest.link; 102 | const img = document.createElement('img'); 103 | img.src = srcLink; 104 | img.alt = `${dest.text} Icon`; 105 | link.appendChild(img); 106 | 107 | return link; 108 | }; 109 | 110 | const modalFooter = (project) => { 111 | const modalButtons = document.createElement('div'); 112 | modalButtons.className = 'show'; 113 | const seeSourceButton = createImageButton( 114 | project, 115 | project.livelink, 116 | 'Icon.svg', 117 | ); 118 | modalButtons.appendChild(seeSourceButton); 119 | const seeLiveButton = createImageButton( 120 | project, 121 | project.seesource, 122 | 'sourcecode.svg', 123 | ); 124 | modalButtons.appendChild(seeLiveButton); 125 | 126 | return modalButtons; 127 | }; 128 | 129 | const createRoles = (project) => { 130 | const cardRoleWrapper = document.createElement('div'); 131 | cardRoleWrapper.className = 'project-role-wrapper'; 132 | 133 | const cardRoleCompany = document.createElement('span'); 134 | cardRoleCompany.textContent = project.roles.company; 135 | 136 | cardRoleWrapper.appendChild(cardRoleCompany); 137 | 138 | const cardRolePosition = document.createElement('ul'); 139 | cardRolePosition.className = 'project-role'; 140 | cardRolePosition.innerHTML = listItems(project.roles.position); 141 | 142 | cardRoleWrapper.appendChild(cardRolePosition); 143 | 144 | return cardRoleWrapper; 145 | }; 146 | 147 | const createHeader = (project, titleElement) => { 148 | const cardHeader = document.createElement(titleElement); 149 | cardHeader.textContent = project.title; 150 | 151 | return cardHeader; 152 | }; 153 | 154 | const createProjectCard = (project, position = null, isDesktop = true) => { 155 | const articleHolder = document.createElement('article'); 156 | articleHolder.className = project.htmlClass.article.join(' '); 157 | const cardHeader = createHeader(project, 'h2'); 158 | const cardRoleWrapper = createRoles(project); 159 | 160 | if (!isDesktop) { 161 | articleHolder.appendChild(cardHeader); 162 | articleHolder.appendChild(cardRoleWrapper); 163 | } 164 | 165 | const cardImage = document.createElement('div'); 166 | cardImage.className = project.htmlClass.cardImage.join(' '); 167 | const Image = document.createElement('img'); 168 | 169 | if (isDesktop || document.documentElement.clientWidth <= 767) { 170 | Image.src = project.image; 171 | Image.alt = project.alt; 172 | cardImage.appendChild(Image); 173 | } else { 174 | cardImage.style.height = '568px'; 175 | cardImage.style.backgroundImage = `url(${project.image})`; 176 | cardImage.style.backgroundRepeat = 'no-repeat'; 177 | cardImage.style.backgroundSize = '95%'; 178 | cardImage.style.backgroundPositionY = '0'; 179 | cardImage.style.backgroundPositionX = '18px'; 180 | 181 | cardImage.classList.remove('flex-item-2'); 182 | } 183 | articleHolder.appendChild(cardImage); 184 | 185 | const cardDescription = document.createElement('div'); 186 | cardDescription.className = project.htmlClass.cardDescription.join(' '); 187 | 188 | const cardTagWrapper = document.createElement('div'); 189 | cardTagWrapper.className = 'tags-wrapper'; 190 | 191 | const cardTagList = document.createElement('ul'); 192 | cardTagList.className = 'tags'; 193 | 194 | const cardButton = document.createElement('a'); 195 | cardButton.className = 'btn btn-project'; 196 | 197 | if (position) { 198 | cardButton.setAttribute('data-position', position - 1); 199 | } 200 | 201 | const cardText = document.createElement('p'); 202 | cardText.textContent = project.description; 203 | 204 | cardTagList.innerHTML = listItems(project.skills); 205 | 206 | if (isDesktop) { 207 | cardDescription.appendChild(cardHeader); 208 | cardDescription.appendChild(cardRoleWrapper); 209 | cardText.textContent = project.description; 210 | } else if (document.documentElement.clientWidth <= 767) { 211 | cardText.textContent = mobileText; 212 | } else { 213 | cardText.textContent = dummyText; 214 | cardTagList.innerHTML = listItems(project.skillsModal); 215 | } 216 | cardTagWrapper.appendChild(cardTagList); 217 | cardDescription.appendChild(cardText); 218 | if (isDesktop) { 219 | cardButton.innerHTML = 'See Project'; 220 | cardTagWrapper.appendChild(cardButton); 221 | } 222 | cardDescription.appendChild(cardTagWrapper); 223 | articleHolder.appendChild(cardDescription); 224 | 225 | return articleHolder; 226 | }; 227 | 228 | const articleContainer = document.createElement('div'); 229 | const cardContainer = document.querySelector('#port'); 230 | 231 | for (let i = 0; i < projects.length; i += 1) { 232 | const cardInstance = createProjectCard(projects[i], i + 1, true); 233 | articleContainer.appendChild(cardInstance); 234 | } 235 | 236 | cardContainer.appendChild(articleContainer); 237 | 238 | const closePopup = () => { 239 | const Modal = document.querySelector('.Modal'); 240 | Modal.style.display = 'none'; 241 | Modal.innerHTML = ''; 242 | document.querySelector('body').classList.toggle('fixed'); 243 | }; 244 | 245 | const ModalCloseButton = () => { 246 | const ModalCloseBtn = document.createElement('img'); 247 | ModalCloseBtn.className = 'Modal-close'; 248 | ModalCloseBtn.src = 'Modal-close.svg'; 249 | ModalCloseBtn.alt = 'Close modal button'; 250 | 251 | ModalCloseBtn.addEventListener('click', closePopup); 252 | 253 | return ModalCloseBtn; 254 | }; 255 | 256 | function showPopupWindow() { 257 | const position = parseInt(this.getAttribute('data-position'), 10); 258 | const modalContent = createProjectCard(projects[position], false, false); 259 | 260 | const Modal = document.querySelector('.Modal'); 261 | const ModalCloseBtn = ModalCloseButton(); 262 | const modalButtons = modalFooter(projects[position]); 263 | 264 | Modal.innerHTML = ''; 265 | 266 | Modal.appendChild(modalContent); 267 | const tagsWrapper = document.querySelector('.Modal .tags-wrapper'); 268 | tagsWrapper.appendChild(modalButtons); 269 | Modal.childNodes[0].appendChild(ModalCloseBtn); 270 | 271 | Modal.style.display = 'flex'; 272 | document.querySelector('body').classList.toggle('fixed'); 273 | } 274 | 275 | const btnProjects = document.querySelectorAll('.btn-project'); 276 | 277 | btnProjects.forEach((btnProject) => { 278 | btnProject.addEventListener('click', showPopupWindow); 279 | }); 280 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: "Poppins", sans-serif; 3 | background-color: #e5e5e5; 4 | } 5 | 6 | * { 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | } 11 | 12 | a { 13 | text-decoration: none; 14 | color: black; 15 | } 16 | 17 | ul { 18 | list-style-type: none; 19 | } 20 | 21 | nav { 22 | display: flex; 23 | justify-content: space-between; 24 | margin-bottom: 0; 25 | } 26 | 27 | .logo { 28 | position: absolute; 29 | } 30 | 31 | .logo.active { 32 | display: none; 33 | } 34 | 35 | .nav { 36 | display: block; 37 | width: 40px; 38 | } 39 | 40 | .nav-bar { 41 | margin: 15px 15px; 42 | } 43 | 44 | .nav-links { 45 | display: none; 46 | } 47 | 48 | .nav-links.active { 49 | display: block; 50 | } 51 | 52 | .lists li { 53 | background-color: rgba(235, 235, 255, 1); 54 | padding: 9px; 55 | border-radius: 15%; 56 | } 57 | 58 | .nav-links.active li { 59 | margin: 10px 12px; 60 | margin-left: -80%; 61 | margin-top: 40px; 62 | } 63 | 64 | .nav-links.active li a { 65 | color: whitesmoke; 66 | text-decoration: none; 67 | font-style: normal; 68 | font-weight: 600; 69 | line-height: 44px; 70 | font-size: 32px; 71 | } 72 | 73 | .hamburger { 74 | cursor: pointer; 75 | display: block; 76 | } 77 | 78 | .bar { 79 | display: flex; 80 | width: 25px; 81 | height: 3px; 82 | margin: 5px auto; 83 | color: #fff; 84 | background: rgba(96, 112, 255, 1); 85 | transition: all 0.3s ease-in-out; 86 | } 87 | 88 | .hamburger.active .bar:nth-child(2) { 89 | opacity: 0; 90 | } 91 | 92 | .hamburger.active .bar:nth-child(3) { 93 | transform: translateY(-8px) rotate(-45deg); 94 | background: whitesmoke; 95 | } 96 | 97 | .hamburger.active .bar:nth-child(1) { 98 | transform: translateY(8px) rotate(45deg); 99 | background: whitesmoke; 100 | } 101 | 102 | .menu-popup.active { 103 | display: block; 104 | height: 100%; 105 | width: 100%; 106 | position: fixed; 107 | z-index: 1; 108 | left: 0; 109 | top: 0; 110 | backdrop-filter: blur(5px); 111 | background: rgba(96, 112, 255, 1); 112 | background: rgba(96, 112, 255, 0.9); 113 | overflow: hidden; /* Disable horizontal scroll */ 114 | transition: 0.5s; 115 | color: white; 116 | } 117 | 118 | .container { 119 | display: grid; 120 | margin: 0; 121 | background-image: url("imgs/header-shapesmobile@2x.svg"); 122 | background-repeat: no-repeat; 123 | background-size: cover; 124 | } 125 | 126 | .introduction { 127 | color: #172b4d; 128 | font-weight: bold; 129 | font-size: 30px; 130 | line-height: 45px; 131 | font-family: "Poppins", sans-serif; 132 | } 133 | 134 | .body-main { 135 | width: 75%; 136 | padding: 10%; 137 | margin-top: 40px; 138 | } 139 | 140 | .content { 141 | margin-top: 15px; 142 | } 143 | 144 | .content h4 { 145 | font-weight: 100; 146 | font-family: Arial, Helvetica, sans-serif; 147 | } 148 | 149 | .connect { 150 | padding-bottom: 15px; 151 | } 152 | 153 | .connect1, 154 | .connect2 { 155 | color: rgba(127, 140, 255, 1); 156 | } 157 | 158 | .social-image ul { 159 | display: flex; 160 | gap: 5%; 161 | list-style: none; 162 | flex-direction: row; 163 | } 164 | 165 | .languages ul { 166 | background-color: rgb(229, 235, 235); 167 | padding-left: 8px; 168 | margin-right: 40px; 169 | border-radius: 15px; 170 | } 171 | 172 | .grid-item ul { 173 | display: flex; 174 | list-style-type: none; 175 | } 176 | 177 | .container > .social-image ul, 178 | .connect1 { 179 | padding-left: 42px; 180 | } 181 | 182 | .container-1, 183 | .container-2, 184 | .container-3, 185 | .container-4, 186 | .container-5 { 187 | margin-top: 100px; 188 | outline-style: round; 189 | background-color: white; 190 | height: 100%; 191 | padding: 32px; 192 | padding-top: 30px; 193 | border-radius: 8px; 194 | } 195 | 196 | .tonic { 197 | padding-bottom: 5%; 198 | font-size: 30px; 199 | } 200 | 201 | .Stories { 202 | padding-bottom: 2%; 203 | width: 65%; 204 | font-size: 25px; 205 | } 206 | 207 | .dates { 208 | display: flex; 209 | gap: 5%; 210 | padding-left: 7px; 211 | padding-bottom: 25px; 212 | list-style: none; 213 | flex-direction: row; 214 | } 215 | 216 | .content-details { 217 | padding-left: 7px; 218 | font-size: 18px; 219 | width: 79%; 220 | padding-bottom: 8px; 221 | } 222 | 223 | .lists { 224 | display: flex; 225 | gap: 7%; 226 | margin-top: 5px; 227 | padding-left: 7px; 228 | list-style: none; 229 | flex-direction: row; 230 | } 231 | 232 | .lists h6 { 233 | color: rgba(96, 112, 255, 1); 234 | } 235 | 236 | .button, 237 | .resum { 238 | border-radius: 5px; 239 | margin-top: 31px; 240 | margin-left: 8px; 241 | padding: 2%; 242 | border: 2px solid blue; 243 | width: max-content; 244 | } 245 | 246 | .button, 247 | .language { 248 | margin-right: 65%; 249 | } 250 | 251 | .container-5 { 252 | height: 790px; 253 | } 254 | 255 | .Pics { 256 | width: 100%; 257 | margin-bottom: 15px; 258 | } 259 | 260 | .Pics img { 261 | width: 100%; 262 | } 263 | 264 | .contentright { 265 | display: flex; 266 | flex-direction: column; 267 | } 268 | 269 | .last-details { 270 | width: 85%; 271 | } 272 | 273 | .languages { 274 | list-style-type: none; 275 | } 276 | 277 | .fram-skill { 278 | list-style-type: none; 279 | margin-left: 7px; 280 | } 281 | 282 | .language { 283 | margin-top: 15px; 284 | margin-left: 2px; 285 | margin-bottom: 10px; 286 | } 287 | 288 | .framework { 289 | margin-top: 30px; 290 | margin-bottom: 5px; 291 | } 292 | 293 | .container-6 { 294 | display: flex; 295 | margin-top: 115px; 296 | justify-content: center; 297 | border-top-left-radius: 100px; 298 | background-image: url("imgs/contactform.png"); 299 | background-color: rgba(96, 112, 255, 1); 300 | } 301 | 302 | .contact-img { 303 | font-size: 25px; 304 | margin-top: 90px; 305 | display: flex; 306 | position: absolute; 307 | flex-direction: column; 308 | justify-content: center; 309 | align-items: center; 310 | font-weight: 100vh; 311 | } 312 | 313 | .lang-s { 314 | margin-top: 20px; 315 | display: flex; 316 | list-style-type: none; 317 | flex-direction: row; 318 | align-items: center; 319 | padding-left: 20px; 320 | padding-top: 10px; 321 | padding-bottom: 10px; 322 | } 323 | 324 | .top { 325 | padding-left: 20px; 326 | } 327 | 328 | .button h4, 329 | .resum h4 { 330 | color: blue; 331 | } 332 | 333 | .resum:hover { 334 | background: rgb(21, 38, 194); 335 | color: whitesmoke; 336 | } 337 | 338 | .button:hover { 339 | background: rgb(21, 38, 194); 340 | color: whitesmoke; 341 | } 342 | 343 | .line { 344 | width: 100%; 345 | margin-bottom: 45px; 346 | height: 1px; 347 | background: rgb(206, 203, 203); 348 | } 349 | 350 | .contact-img h1, 351 | .text-img { 352 | font-weight: 200; 353 | color: white; 354 | } 355 | 356 | .forms { 357 | width: 100%; 358 | } 359 | 360 | .text-img { 361 | margin: 20px; 362 | } 363 | 364 | input[type="text"], 365 | .email { 366 | padding: 12px 165px; 367 | display: inline-block; 368 | border: 1px solid #ccc; 369 | border-radius: 12px; 370 | box-sizing: border-box; 371 | padding-left: 20px; 372 | width: 365px; 373 | } 374 | 375 | .fname { 376 | margin-top: 350px; 377 | margin-bottom: 20px; 378 | width: 300px; 379 | padding-right: -20px; 380 | } 381 | 382 | .email { 383 | width: 365px; 384 | } 385 | 386 | .fname, 387 | .email, 388 | .textarea { 389 | margin-left: 25px; 390 | margin-right: 25px; 391 | } 392 | 393 | .textarea { 394 | width: 87%; 395 | margin-top: 20px; 396 | height: 240px; 397 | border-radius: 15px; 398 | padding-top: 4px; 399 | padding-left: 6px; 400 | } 401 | 402 | .touchbtn { 403 | background-color: white; 404 | border: none; 405 | overflow: hidden; 406 | color: rgba(96, 112, 255, 1); 407 | padding: 12px 28px; 408 | text-align: center; 409 | text-decoration: none; 410 | display: inline-block; 411 | border-radius: 10px; 412 | font-size: 25px; 413 | margin: 25px 27px; 414 | cursor: pointer; 415 | } 416 | 417 | .text1 input { 418 | border-color: red; 419 | } 420 | 421 | .text1.success input { 422 | border-color: green; 423 | } 424 | 425 | .text1.error input { 426 | border-color: red; 427 | background: #f8d7da; 428 | color: #721c24; 429 | padding: 10px 5px; 430 | border-radius: 2px; 431 | font-size: 14px; 432 | display: none; 433 | margin: 0 35px; 434 | } 435 | 436 | .error.show { 437 | display: flex; 438 | } 439 | 440 | .touchbtn.active:hover { 441 | background-color: rgb(5, 43, 2); 442 | } 443 | 444 | .fixed { 445 | overflow: hidden; 446 | } 447 | 448 | .grid-item .project-role li { 449 | color: #474e59; 450 | margin-left: 35px; 451 | font-weight: 600; 452 | } 453 | 454 | .grid-item { 455 | display: flex; 456 | flex-direction: column; 457 | padding: 16px; 458 | margin: 88px 0 0; 459 | } 460 | 461 | .grid-item.card { 462 | border: 1px solid #dfe1e6; 463 | border-radius: 16px; 464 | background-color: #fff; 465 | } 466 | 467 | .grid-item .project-role li::before { 468 | content: " "; 469 | width: 12px; 470 | height: 12px; 471 | border-radius: 50%; 472 | position: absolute; 473 | margin-left: -25px; 474 | margin-top: 8px; 475 | background-color: #c1c7d0; 476 | } 477 | 478 | .grid-item .card-image img { 479 | width: 100%; 480 | } 481 | 482 | .grid-item h2 { 483 | margin: 12px 0; 484 | font-size: 32px; 485 | } 486 | 487 | .grid-item .tags { 488 | display: flex; 489 | margin-top: 16px; 490 | } 491 | 492 | .grid-item .tags li { 493 | color: #3b4eff; 494 | font: 500 12px; 495 | padding: 4px 12px 4px 12px; 496 | background: #ebebff; 497 | border-radius: 8px; 498 | text-decoration: none; 499 | margin: 8px 5px 20px 0; 500 | } 501 | 502 | .hide-ruby.grid-item .tags li:nth-child(2) { 503 | display: none; 504 | } 505 | 506 | .grid-item .card-description p { 507 | margin: 20px 0; 508 | } 509 | 510 | .btn { 511 | display: flex; 512 | width: 200px; 513 | align-items: center; 514 | justify-content: center; 515 | color: #3268f1; 516 | padding: 12px 16px; 517 | font-size: 17px; 518 | font-weight: 500; 519 | border-radius: 8px; 520 | margin: 0 0 20px; 521 | background-color: #fff; 522 | border: 1px solid #3268f1; 523 | transition: all 0.5s; 524 | } 525 | 526 | .btn-up { 527 | margin-top: 22px; 528 | font-weight: 700; 529 | } 530 | 531 | .btn span { 532 | cursor: pointer; 533 | position: relative; 534 | transition: 0.5s; 535 | } 536 | 537 | .project-role-wrapper { 538 | display: flex; 539 | flex-direction: row; 540 | } 541 | 542 | .grid-item .project-role-wrapper span { 543 | font-weight: bold; 544 | } 545 | 546 | .btn span::after { 547 | content: "\00bb"; 548 | position: absolute; 549 | opacity: 0; 550 | top: -11px; 551 | font-size: xx-large; 552 | right: -20px; 553 | transition: 0.5s; 554 | } 555 | 556 | .btn:hover { 557 | cursor: pointer; 558 | color: #fff; 559 | background: #6070ff; 560 | box-shadow: 0 8px 16px rgba(64, 83, 252, 0.24); 561 | } 562 | 563 | .btn:hover span { 564 | padding-right: 25px; 565 | } 566 | 567 | .btn:hover span::after { 568 | opacity: 1; 569 | right: 0; 570 | } 571 | 572 | .btn:focus { 573 | color: #fff; 574 | background-color: #2230d2; 575 | } 576 | 577 | .btn.disabled { 578 | color: #5e6c84; 579 | border: 1px solid #5e6c84; 580 | } 581 | 582 | .Modal .tags-wrapper ul { 583 | margin-bottom: 10px; 584 | border-bottom: 1px solid #e5e5e5; 585 | } 586 | 587 | .Modal .btn { 588 | width: 140px; 589 | font-size: 14px; 590 | } 591 | 592 | .Modal .btn img { 593 | margin: 0 0 0 3px; 594 | } 595 | 596 | .grid-item .card-image img:hover { 597 | cursor: pointer; 598 | } 599 | 600 | .Modal { 601 | position: fixed; 602 | display: none; 603 | height: 100vh; 604 | left: 0; 605 | right: 0; 606 | bottom: 0; 607 | top: 0; 608 | z-index: 3; 609 | justify-content: center; 610 | align-items: center; 611 | background-color: rgba(193, 199, 208, 0.75); 612 | backdrop-filter: blur(5px); 613 | padding: 10px 20px; 614 | } 615 | 616 | .Modal .grid-item { 617 | margin: 10px 0; 618 | height: 90vh; 619 | overflow-y: scroll; 620 | } 621 | 622 | .Modal .grid-item .btn, 623 | .Modal .card-image { 624 | margin-top: 20px; 625 | } 626 | 627 | .Modal .grid-item .card-description p { 628 | line-height: 26px; 629 | } 630 | 631 | .Modal .Modal-close { 632 | width: 20px; 633 | position: absolute; 634 | right: 40px; 635 | top: 10%; 636 | cursor: pointer; 637 | } 638 | 639 | .Modal .show { 640 | justify-content: center; 641 | align-content: center; 642 | display: flex; 643 | gap: 10px; 644 | } 645 | 646 | .Modal .grid-item h2 { 647 | font-size: 25px; 648 | margin: 6px 0 12px 0; 649 | } 650 | 651 | @media only screen and (min-width: 850px) { 652 | html { 653 | font-family: "Roboto", sans-serif; 654 | } 655 | 656 | * { 657 | margin: 0; 658 | padding: 0; 659 | box-sizing: border-box; 660 | } 661 | 662 | /* hamburger */ 663 | .menu-popup.active { 664 | display: none; 665 | } 666 | 667 | .hamburger { 668 | display: none; 669 | } 670 | 671 | .container { 672 | display: flex; 673 | justify-content: center; 674 | align-items: center; 675 | flex-direction: column; 676 | height: 650px; 677 | background-color: white; 678 | border-bottom-left-radius: 70px; 679 | } 680 | 681 | .body-main { 682 | display: flex; 683 | justify-content: center; 684 | flex-direction: column; 685 | padding: auto; 686 | } 687 | 688 | .container > .social-image ul { 689 | gap: 30%; 690 | margin-right: 950px; 691 | } 692 | 693 | .connect { 694 | width: 80%; 695 | } 696 | 697 | .connect1 { 698 | color: rgba(127, 140, 255, 1); 699 | } 700 | 701 | .nav-bar { 702 | margin: 0; 703 | padding-top: 20px; 704 | background-color: white; 705 | display: flex; 706 | justify-content: space-between; 707 | } 708 | 709 | .nav-links { 710 | display: flex; 711 | list-style-type: none; 712 | align-items: center; 713 | color: black; 714 | transition: background-color 2s; 715 | } 716 | 717 | .nav-links li { 718 | margin: 0 10px; 719 | color: black; 720 | padding: 8px 15px; 721 | font-size: 18px; 722 | } 723 | 724 | .nav-links li:hover { 725 | background-color: rgb(52, 201, 168); 726 | border-radius: 20px; 727 | } 728 | 729 | .logo { 730 | margin-left: 50px; 731 | } 732 | 733 | .logo:hover { 734 | background-color: rgb(52, 201, 168); 735 | padding: 5px; 736 | border-radius: 20px; 737 | } 738 | 739 | .container-1, 740 | .container-2, 741 | .container-3, 742 | .container-4 { 743 | width: auto; 744 | height: auto; 745 | top: 0; 746 | border-radius: 24px; 747 | border: solid white; 748 | padding-top: 50px; 749 | justify-content: center; 750 | display: flex; 751 | flex-direction: row; 752 | align-content: center; 753 | } 754 | 755 | .container-5 { 756 | border-top-right-radius: 30px; 757 | width: auto; 758 | height: auto; 759 | padding: 80px 0; 760 | justify-content: center; 761 | display: flex; 762 | flex-direction: row; 763 | align-content: center; 764 | } 765 | 766 | .container-2, 767 | .container-4 { 768 | display: flex; 769 | flex-direction: row-reverse; 770 | } 771 | 772 | .prog-lists { 773 | margin-top: 30px; 774 | } 775 | 776 | .lists h6 { 777 | color: rgba(96, 112, 255, 1); 778 | } 779 | 780 | .about { 781 | padding-left: 50px; 782 | } 783 | 784 | .about > .connect { 785 | margin-top: 40px; 786 | width: 30%; 787 | } 788 | 789 | .Pics { 790 | width: 50%; 791 | } 792 | 793 | .about > .last-details { 794 | width: 85%; 795 | font-family: Verdana, Geneva, Tahoma, sans-serif; 796 | font-weight: 100; 797 | } 798 | 799 | .languages { 800 | display: flex; 801 | flex-direction: row; 802 | padding: 30px; 803 | margin-right: 380px; 804 | } 805 | 806 | .language { 807 | width: max-content; 808 | } 809 | 810 | .fram-skill, 811 | .language { 812 | margin-left: 28px; 813 | } 814 | 815 | .lang-s { 816 | display: flex; 817 | flex-direction: column; 818 | padding: 0 30px 20px 0; 819 | } 820 | 821 | .contentright { 822 | display: flex; 823 | flex-direction: column; 824 | width: 50%; 825 | margin-left: 50px; 826 | } 827 | 828 | .container-6 { 829 | display: flex; 830 | width: auto; 831 | margin-top: -5px; 832 | } 833 | 834 | .contact-img { 835 | width: 40%; 836 | padding-top: 70px; 837 | } 838 | 839 | .contact-img h1, 840 | .text-img { 841 | font-weight: 200; 842 | color: white; 843 | } 844 | 845 | .forms { 846 | display: flex; 847 | flex-direction: column; 848 | width: 31%; 849 | } 850 | 851 | .touchbtn { 852 | margin-left: 115px; 853 | } 854 | 855 | .touchbtn:hover { 856 | background: rgba(64, 83, 252, 1); 857 | } 858 | 859 | .button, 860 | .resum { 861 | border: 2px solid blue; 862 | width: max-content; 863 | } 864 | 865 | .button h4, 866 | .resum h4 { 867 | color: blue; 868 | } 869 | 870 | .resum:hover { 871 | background: rgb(21, 38, 194); 872 | color: whitesmoke; 873 | } 874 | 875 | .button:hover { 876 | background: rgb(21, 38, 194); 877 | color: whitesmoke; 878 | } 879 | 880 | .line { 881 | width: 100%; 882 | margin-bottom: 45px; 883 | height: 1px; 884 | background: rgb(206, 203, 203); 885 | } 886 | 887 | body { 888 | background-color: #e5e5e5; 889 | } 890 | 891 | .Modal .show { 892 | justify-content: space-evenly; 893 | display: flex; 894 | flex-direction: row; 895 | } 896 | 897 | .btn:hover { 898 | cursor: pointer; 899 | } 900 | 901 | .Modal .card { 902 | width: 90%; 903 | } 904 | 905 | .Modal .card-image { 906 | margin: 36px 0; 907 | padding: 290px; 908 | } 909 | 910 | .Modal .tags-wrapper { 911 | min-width: 30%; 912 | } 913 | 914 | .Modal .grid-item { 915 | margin: 10px 24px; 916 | } 917 | 918 | .Modal .Modal-close { 919 | right: 120px; 920 | top: 45px; 921 | } 922 | 923 | .project-cards .grid-item .project-role li { 924 | font-weight: normal; 925 | } 926 | 927 | .Modal .tags-wrapper ul { 928 | flex-wrap: wrap; 929 | } 930 | 931 | .hide-on-mobile { 932 | display: list-item; 933 | } 934 | 935 | .Modal .card-description { 936 | display: flex; 937 | flex-direction: row; 938 | justify-content: space-between; 939 | } 940 | 941 | .project-cards { 942 | margin: 0 0 114px 0; 943 | background-color: #e5e5e5; 944 | } 945 | 946 | .project-cards .grid-item { 947 | flex-direction: row; 948 | gap: 46px; 949 | width: 80%; 950 | margin: 114px auto 0 auto; 951 | } 952 | 953 | .project-cards .grid-item.card div { 954 | width: 50%; 955 | } 956 | 957 | .project-cards .grid-item.card .project-role-wrapper, 958 | .project-cards .grid-item.card .tags-wrapper { 959 | width: 100%; 960 | } 961 | 962 | .Modal .grid-item .card-description p { 963 | margin: 0 36px 0 0; 964 | } 965 | } 966 | --------------------------------------------------------------------------------