├── .gitignore ├── .vscode ├── settings.json └── storeroom ├── images ├── X.png ├── Icon.png ├── Group.png ├── Union.png ├── github.png ├── Disabled.png ├── icon-skills.png ├── Linkedin icon.png ├── WindowDisabled.png ├── icon-languages.png ├── icon-frameworks.png ├── Snapshoot-Portfolio.png ├── Mobile-popup-Portfolio.JPG ├── Header-llustration-desktop.png ├── header-illsutration-mobile.png ├── illustration-contact-form.png ├── illustration-aboutme-mobile.png ├── illustration-contact-mobile.png ├── illustration about me desktop (1).png └── Header-llustration-desktop.svg ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── LICENSE ├── .github └── workflows │ └── linters.yml ├── README.md ├── index.html ├── index.js ├── style.css └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | test.md 2 | node_modules -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5503 3 | } 4 | -------------------------------------------------------------------------------- /images/X.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/X.png -------------------------------------------------------------------------------- /images/Icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/Icon.png -------------------------------------------------------------------------------- /images/Group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/Group.png -------------------------------------------------------------------------------- /images/Union.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/Union.png -------------------------------------------------------------------------------- /images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/github.png -------------------------------------------------------------------------------- /images/Disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/Disabled.png -------------------------------------------------------------------------------- /images/icon-skills.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/icon-skills.png -------------------------------------------------------------------------------- /images/Linkedin icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/Linkedin icon.png -------------------------------------------------------------------------------- /images/WindowDisabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/WindowDisabled.png -------------------------------------------------------------------------------- /images/icon-languages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/icon-languages.png -------------------------------------------------------------------------------- /images/icon-frameworks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/icon-frameworks.png -------------------------------------------------------------------------------- /images/Snapshoot-Portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/Snapshoot-Portfolio.png -------------------------------------------------------------------------------- /images/Mobile-popup-Portfolio.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/Mobile-popup-Portfolio.JPG -------------------------------------------------------------------------------- /images/Header-llustration-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/Header-llustration-desktop.png -------------------------------------------------------------------------------- /images/header-illsutration-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/header-illsutration-mobile.png -------------------------------------------------------------------------------- /images/illustration-contact-form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/illustration-contact-form.png -------------------------------------------------------------------------------- /images/illustration-aboutme-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/illustration-aboutme-mobile.png -------------------------------------------------------------------------------- /images/illustration-contact-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/illustration-contact-mobile.png -------------------------------------------------------------------------------- /images/illustration about me desktop (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mike47ip/mobilePortfolioWeb/HEAD/images/illustration about me desktop (1).png -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "extends": ["airbnb-base"], 13 | "rules": { 14 | "no-shadow": "off", 15 | "no-param-reassign": "off", 16 | "eol-last": "off", 17 | "import/extensions": [ 1, { 18 | "js": "always", "json": "always" 19 | }] 20 | }, 21 | "ignorePatterns": [ 22 | "dist/", 23 | "build/" 24 | ] 25 | } -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 MIKE 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 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v3 14 | - uses: actions/setup-node@v3 15 | with: 16 | node-version: "18.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.11.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-22.04 24 | steps: 25 | - uses: actions/checkout@v3 26 | - uses: actions/setup-node@v3 27 | with: 28 | node-version: "18.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@7.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-22.04 38 | steps: 39 | - uses: actions/checkout@v3 40 | - uses: actions/setup-node@v3 41 | with: 42 | node-version: "18.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-22.04 52 | steps: 53 | - uses: actions/checkout@v3 54 | - uses: actions/setup-node@v3 55 | with: 56 | node-version: "18.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | nodechecker: 64 | name: node_modules checker 65 | runs-on: ubuntu-22.04 66 | steps: 67 | - uses: actions/checkout@v3 68 | - name: Check node_modules existence 69 | run: | 70 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Portfolio

4 | 5 |
6 | 7 | 8 | 9 | # 📗 Table of Contents 10 | 11 | - [📖 About the Project](#about-project) 12 | - [🛠 Built With](#built-with) 13 | - [Tech Stack](#tech-stack) 14 | - [🚀 Live Demo](#live-demo) 15 | - [💻 Getting Started](#getting-started) 16 | - [Setup](#setup) 17 | - [Prerequisites](#prerequisites) 18 | - [Install](#install) 19 | - [Usage](#usage) 20 | - [Run tests](#run-tests) 21 | - [🚀 Live Demo](#live-demo) 22 | - [Deployment](#triangular_flag_on_post-deployment) 23 | - [👥 Authors](#authors) 24 | - [🔭 Future Features](#future-features) 25 | - [🤝 Contributing](#contributing) 26 | - [⭐️ Show your support](#support) 27 | - [🙏 Acknowledgements](#acknowledgements) 28 | - [📝 License](#license) 29 | 30 | 31 | 32 | # 📖 [Portfolio - Mobile Section] 33 | 34 | **[Portfolio - Mobile Section]** is a great website tool that helps to secure a job as a web developer, 35 | 36 | ## 🛠 Built With 37 | 38 | ### Tech Stack 39 | 40 |
41 | HTML, CSS 42 | 45 |
46 | 47 |
48 | Github flow 49 | 52 |
53 | 54 |
55 | VScode 56 | 59 |
60 | 61 | 62 | 63 | 64 | ## 💻 Getting Started 65 | 66 | To get a local copy up and running, follow these steps. 67 | 68 | ### Prerequisites 69 | 70 | In order to run this project you need: 71 | 72 | Install a code editor 73 | 74 | ### Setup 75 | 76 | Clone this repository to your desired folder: 77 | 78 | cd my-folder 79 | 80 | git clone repo-link 81 | 82 | ### Install 83 | 84 | Install this project with: 85 | 86 | ### Usage 87 | 88 | To run the project, execute the following command: 89 | 90 | Press ctrl+shif+p on vscode and choose run 91 | 92 | ### Run tests 93 | 94 | To run tests, run the following command: 95 | 96 | Press ctrl+shift+p on vscode and choose test 97 | 98 | ### Deployment 99 | 100 | You can deploy this project using: 101 | 102 | 103 | 104 | ## 👥 Authors 105 | 106 | 👤 **Author1** 107 | 108 | 109 | - GitHub: [@githubhandle](https://github.com/Mike47ip) 110 | - Twitter: [@twitterhandle](https://twitter.com/Mikepee47) 111 | - LinkedIn: [@LinkedIn](https://www.linkedin.com/in/michael-darkwah-81a039141/) 112 | - Facebook: [@facebook](https://web.facebook.com/profile.php?id=100089565852279) 113 | 114 | 115 | 116 | 117 | ## 🔭 Future Features 118 | 119 | - [ ] **[My Projects]** 120 | - [ ] **[About Me]** 121 | - [ ] **[Contact]** 122 | 123 | 124 | 125 | 126 | 127 | ## ⭐️ Show your support 128 | 129 | If you like this project show your love by leaving a comment 130 | 131 | 132 | 133 | ## 🙏 Acknowledgments 134 | 135 | I would like to thank all Micronauts for their support 136 | 137 | 138 | 139 | ## 🚀 Live Demo 140 | 141 | > Add a link to your deployed project. 142 | 143 | - [My_Portfolio](https://mike47ip.github.io/mobilePortfolioWeb/) 144 | 145 | ## 📝 License 146 | 147 | This project is [MIT](https://github.com/Mike47ip/mobilePortfolioWeb/blob/toolbar-headline-section/MIT.md) licensed. 148 | 149 | 150 | ## 🤝 Contributing 151 | 152 | Contributions, issues, and feature requests are welcome! 153 | 154 | Feel free to check the [issues page](https://github.com/Mike47ip/mobilePortfolioWeb/issues). 155 | 156 | 157 | 158 |

(back to top)

159 | -------------------------------------------------------------------------------- /.vscode/storeroom: -------------------------------------------------------------------------------- 1 | 2 |

My Recent works

3 | 4 |
5 | 6 | 7 | 8 |
9 |
10 |
11 |

Multi-Post Stories Gain+Glory

12 |
    13 |
  • Ruby on rails
    • 14 |
  • CSS
    • 15 |
  • JavaScript
    • 16 |
  • HTML
    • 17 |
18 | 19 |
20 |
21 | 22 |
23 |
24 |

Multi-Post Stories Gain+Glory

25 |
    26 |
  • Ruby on rails
    • 27 |
  • CSS
    • 28 |
  • JavaScript
    • 29 |
  • HTML
    • 30 |
31 | 32 |
33 |
34 | 35 |
36 |
37 |

Multi-Post Stories Gain+Glory

38 |
    39 |
  • Ruby on rails
    • 40 |
  • CSS
    • 41 |
  • JavaScript
    • 42 |
  • HTML
    • 43 |
44 | 45 |
46 |
47 | 48 |
49 |
50 |

Multi-Post Stories Gain+Glory

51 |
    52 |
  • Ruby on rails
    • 53 |
  • CSS
    • 54 |
  • JavaScript
    • 55 |
  • HTML
    • 56 |
57 | 58 |
59 |
60 | 61 |
62 |
63 |

Multi-Post Stories Gain+Glory

64 |
    65 |
  • Ruby on rails
    • 66 |
  • CSS
    • 67 |
  • JavaScript
    • 68 |
  • HTML
    • 69 |
70 | 71 |
72 |
73 | 74 |
75 |
76 |

Multi-Post Stories Gain+Glory

77 |
    78 |
  • Ruby on rails
    • 79 |
  • CSS
    • 80 |
  • JavaScript
    • 81 |
  • HTML
    • 82 |
83 | 84 |
85 |
86 |
87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | document.querySelectorAll('.button').forEach((n) => n.addEventListener('click', () => { 97 | secpop.classList.toggle('active'); 98 | console.log('clicked'); 99 | 100 | })); 101 | 102 | 103 | closepop.addEventListener('click', () => { 104 | secpop.style.display ='none'; 105 | }); 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | Form Input Persistence 118 | 119 | 120 |
121 | 122 | 123 |
124 | 125 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | const form = document.querySelector('form'); 156 | let collectedInputData; 157 | form.addEventListener('submit', (event) => { 158 | const formInputData = new FormData(event.target); 159 | collectedInputData = {}; 160 | formInputData.forEach((value, key) => { 161 | collectedInputData[key] = value; 162 | }); 163 | const formData = JSON.stringify(collectedInputData); 164 | localStorage.setItem('Collected-Data', formData); 165 | }); 166 | 167 | const savedDate = JSON.parse(localStorage.getItem('Collected-Data')); 168 | window.onload = () => { 169 | document.querySelector('email').value = savedDate.email; 170 | document.querySelector('fname').value = savedDate.name; 171 | document.querySelector('type').value = savedDate.message; 172 | }; 173 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mobile-Portfolio 8 | 9 | 10 | 11 |
12 | 34 |
35 | 36 |
37 |
38 | 45 |

Hey there! I'm Michael

46 | 47 |

I'm a Software Developer

48 | 49 |

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

56 | 57 | 79 | 80 |
81 | scroll 82 |
83 |
84 | 85 |
86 |

My Recent works

87 | 88 |
89 | 90 |
91 |
92 | 93 | 94 |
95 |
96 | X button 97 | Popup Window Image 98 |
99 |
100 |

101 |
102 | 103 | See live   104 | 105 | 106 | See source   107 | 108 |
109 |
110 |
    111 |

    112 |
    113 |
    114 | 115 | See live   116 | 117 | 118 | See source   119 | 120 |
    121 |
    122 |
    123 | 124 |
    125 |

    About me

    126 |

    127 | I can help you build a product, feature or website. Look through some 128 | of my work and
    129 | experience! If you like what you see and have a project you need 130 | coded,
    don't hestiate to contact me. 131 |

    132 | 133 | 134 |
    135 |
      136 |
    • 137 | Languages 138 |
      • 139 |
    • Languages
      • 140 |
    • 141 |
        142 |
      • JavaScript
        • 143 |
      • Ruby
        • 144 |
      • HTML
        • 145 |
      • CSS
        • 146 |
      147 |
      • 148 |
    149 | 150 |
      151 |
    • 152 | Frameworks 153 |
      • 154 |
    • Frameworks
      • 155 |
    • 156 |
        157 |
      • Bootstrap
        • 158 |
      • Ruby on rails
        • 159 |
      • RSpec
        • 160 |
      • Capybara
        • 161 |
      • Selenium
        • 162 |
      163 |
      • 164 |
    165 | 166 |
      167 |
    • 168 | Skills 169 |
      • 170 |
    • Skills
      • 171 |
    • 172 |
        173 |
      • Codekit
        • 174 |
      • Github
        • 175 |
      • Codepen
        • 176 |
      • Gitlab
        • 177 |
      • Terminal
        • 178 |
      179 |
      • 180 |
    181 |
    182 |
    183 | 184 |
    185 |

    186 | I'm always interested in hearing about new projects, so if you'd like 187 | to chat please get in touch. 188 |

    189 | 190 |
    195 | 196 |
    204 | 205 |
    212 | 221 |
    222 |

    223 | 224 |
    225 | 226 |
    227 |
    228 | 229 | 255 | 259 | 260 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const vector = document.querySelector('.vector'); 2 | const popwrap = document.querySelector('.Popwrapper'); 3 | const xmenu = document.querySelector('.Xmenu'); 4 | 5 | vector.addEventListener('click', () => { 6 | popwrap.style.left = '0'; 7 | }); 8 | 9 | document.querySelectorAll('.nav-links > li').forEach((sync) => sync.addEventListener('click', () => { 10 | popwrap.style.left = '100%'; 11 | vector.style.display = 'block'; 12 | })); 13 | 14 | xmenu.addEventListener('click', () => { 15 | popwrap.style.left = '100%'; 16 | vector.style.display = 'block'; 17 | }); 18 | 19 | // Mobile Version of Popup Window 20 | 21 | const projectsMobile = [ 22 | { 23 | id: '1', 24 | heading: 'Multi-Post Stories Gain+Glory', 25 | technologies: ['Ruby on rails', 'CSS', 'JavaScript', 'HTML'], 26 | button: 'See Project', 27 | }, 28 | { 29 | id: '2', 30 | heading: 'Multi-Post Stories Gain+Glory', 31 | technologies: ['Ruby on rails', 'CSS', 'JavaScript', 'HTML'], 32 | button: 'See Project', 33 | }, 34 | { 35 | id: '3', 36 | heading: 'Multi-Post Stories Gain+Glory', 37 | technologies: ['Ruby on rails', 'CSS', 'JavaScript', 'HTML'], 38 | button: 'See Project', 39 | }, 40 | { 41 | id: '4', 42 | heading: 'Multi-Post Stories Gain+Glory', 43 | technologies: ['Ruby on rails', 'CSS', 'JavaScript', 'HTML'], 44 | button: 'See Project', 45 | }, 46 | { 47 | id: '5', 48 | heading: 'Multi-Post Stories Gain+Glory', 49 | technologies: ['Ruby on rails', 'CSS', 'JavaScript', 'HTML'], 50 | button: 'See Project', 51 | }, 52 | { 53 | id: '6', 54 | heading: 'Multi-Post Stories Gain+Glory', 55 | technologies: ['Ruby on rails', 'CSS', 'JavaScript', 'HTML'], 56 | button: 'See Project', 57 | }, 58 | ]; 59 | 60 | projectsMobile.forEach((mobileProjects) => { 61 | const projects = document.querySelector('.container'); 62 | 63 | const cardyB = document.createElement('div'); 64 | cardyB.classList.add('card'); 65 | 66 | const cardyC = document.createElement('div'); 67 | cardyC.classList.add('title'); 68 | 69 | cardyB.appendChild(cardyC); 70 | 71 | const cardhead = document.createElement('h2'); 72 | cardhead.classList.add('text'); 73 | cardhead.innerText = mobileProjects.heading; 74 | 75 | cardyC.appendChild(cardhead); 76 | 77 | const tech = document.createElement('ul'); 78 | tech.classList.add('server'); 79 | 80 | mobileProjects.technologies.forEach((techtrans) => { 81 | const li = document.createElement('li'); 82 | li.innerHTML = techtrans; 83 | tech.appendChild(li); 84 | }); 85 | 86 | cardyC.appendChild(tech); 87 | const btn = document.createElement('button'); 88 | btn.classList.add('button1'); 89 | btn.setAttribute('id', mobileProjects.id); 90 | btn.innerHTML = mobileProjects.button; 91 | 92 | cardyC.appendChild(btn); 93 | 94 | projects.appendChild(cardyB); 95 | }); 96 | 97 | const projectPopupWindow = [ 98 | { 99 | id: '1', 100 | image: '/Images/Snapshoot-Portfolio.png', 101 | alt: 'Popup Window Image', 102 | heading: 'Keeping track of hundreds of components', 103 | technologies: ['Ruby on Rails', 'CSS', 'JavaScript', 'Bootstrap'], 104 | paragraph: 105 | '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.

    Lorem Ipsum is simply dummy text of the printing and typesettin 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.', 106 | button1: 'https://github.com/Mike47ip/mobilePortfolioWeb', 107 | button2: 'https://github.com/Mike47ip/mobilePortfolioWeb', 108 | }, 109 | 110 | { 111 | id: '2', 112 | image: '/Images/Snapshoot-Portfolio.png', 113 | alt: 'Popup Window Image', 114 | heading: 'Keeping track of hundreds of components', 115 | technologies: ['Ruby on Rails', 'CSS', 'JavaScript', 'Bootstrap'], 116 | paragraph: 117 | '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.

    Lorem Ipsum is simply dummy text of the printing and typesettin 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.', 118 | button1: 'https://github.com/Mike47ip/mobilePortfolioWeb', 119 | button2: 'https://github.com/Mike47ip/mobilePortfolioWeb', 120 | }, 121 | { 122 | id: '3', 123 | image: '/Images/Snapshoot-Portfolio.png', 124 | alt: 'Popup Window Image', 125 | heading: 'Keeping track of hundreds of components', 126 | technologies: ['Ruby on Rails', 'CSS', 'JavaScript', 'Bootstrap'], 127 | paragraph: 128 | '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.

    Lorem Ipsum is simply dummy text of the printing and typesettin 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.', 129 | button1: 'https://github.com/Mike47ip/mobilePortfolioWeb', 130 | button2: 'https://github.com/Mike47ip/mobilePortfolioWeb', 131 | }, 132 | { 133 | id: '4', 134 | image: '/Images/Snapshoot-Portfolio.png', 135 | alt: 'Popup Window Image', 136 | heading: 'Keeping track of hundreds of components', 137 | technologies: ['Ruby on Rails', 'CSS', 'JavaScript', 'Bootstrap'], 138 | paragraph: 139 | '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.

    Lorem Ipsum is simply dummy text of the printing and typesettin 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.', 140 | button1: 'https://github.com/Mike47ip/mobilePortfolioWeb', 141 | button2: 'https://github.com/Mike47ip/mobilePortfolioWeb', 142 | }, 143 | { 144 | id: '5', 145 | image: '/Images/Snapshoot-Portfolio.png', 146 | alt: 'Popup Window Image', 147 | heading: 'Keeping track of hundreds of components', 148 | technologies: ['Ruby on Rails', 'CSS', 'JavaScript', 'Bootstrap'], 149 | paragraph: 150 | '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.

    Lorem Ipsum is simply dummy text of the printing and typesettin 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.', 151 | button1: 'https://github.com/Mike47ip/mobilePortfolioWeb', 152 | button2: 'https://github.com/Mike47ip/mobilePortfolioWeb', 153 | }, 154 | { 155 | id: '6', 156 | image: '/Images/Snapshoot-Portfolio.png', 157 | alt: 'Popup Window Image', 158 | heading: 'Keeping track of hundreds of components', 159 | technologies: ['Ruby on Rails', 'CSS', 'JavaScript', 'Bootstrap'], 160 | paragraph: 161 | '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.

    Lorem Ipsum is simply dummy text of the printing and typesettin 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.', 162 | button1: 'https://github.com/Mike47ip/mobilePortfolioWeb', 163 | button2: 'https://github.com/Mike47ip/mobilePortfolioWeb', 164 | }, 165 | ]; 166 | 167 | const openpop = document.querySelectorAll('.button1'); 168 | const secpop = document.querySelector('.Secpopupwin'); 169 | const closepop = document.querySelector('.Closepop'); 170 | const popupimage = document.querySelector('.popupWindowImage'); 171 | const popuppara = document.querySelector('.headingpop'); 172 | const popupServer = document.querySelector('#serverWin'); 173 | const popupLorem = document.querySelector('.Lorem'); 174 | const live = document.querySelector('#live'); 175 | const source = document.querySelector('#source'); 176 | 177 | const openpopwin = () => { 178 | secpop.classList.add('active'); 179 | }; 180 | 181 | const closepopwin = () => { 182 | secpop.classList.remove('active'); 183 | }; 184 | 185 | closepop.addEventListener('click', closepopwin); 186 | 187 | openpop.forEach((windowpop) => { 188 | windowpop.addEventListener('click', () => { 189 | openpopwin(); 190 | 191 | projectPopupWindow.forEach((windowpopup) => { 192 | if (windowpopup.id === windowpop.id) { 193 | popupimage.src = windowpopup.image; 194 | popuppara.textContent = windowpopup.heading; 195 | popupServer.textContent = ''; 196 | windowpopup.technologies.forEach((tech) => { 197 | const techlist = document.createElement('li'); 198 | techlist.innerText = tech; 199 | popupServer.appendChild(techlist); 200 | }); 201 | popupLorem.innerHTML = windowpopup.paragraph; 202 | live.href = windowpopup.button1; 203 | source.href = windowpopup.button2; 204 | } 205 | }); 206 | }); 207 | }); 208 | 209 | const formValidation = document.querySelector('form'); 210 | const error = document.querySelector('.display-error'); 211 | 212 | const isUpperCaseEmail = (email) => { 213 | if (/[A-Z]/.test(email)) { 214 | return true; 215 | } 216 | return false; 217 | }; 218 | 219 | formValidation.addEventListener('submit', (event) => { 220 | event.preventDefault(); 221 | const email = event.target.email.value; 222 | const validEmail = !isUpperCaseEmail(email); 223 | 224 | if (validEmail) { 225 | error.innerHTML = ''; 226 | formValidation.submit(); 227 | } else { 228 | error.style.color = 'red'; 229 | error.innerHTML = 'Please Email should be in lowercase'; 230 | } 231 | }); 232 | 233 | // Retrieve the form element and input element 234 | const form = document.getElementById('myForm'); 235 | const input = document.getElementById('fname'); 236 | const email = document.getElementById('email'); 237 | const textArea = document.getElementById('type'); 238 | 239 | // Add an event listener to the form submission 240 | form.addEventListener('submit', (e) => { 241 | e.preventDefault(); // Prevent form submission 242 | 243 | // Store the input value in localStorage 244 | localStorage.setItem('myInputValue', input.value); 245 | localStorage.setItem('hell', email.value); 246 | localStorage.setItem('heaven', textArea.value); 247 | // Reset the form 248 | form.reset(); 249 | }); 250 | 251 | // Check if the input value is stored in localStorage 252 | if (localStorage.getItem('myInputValue')) { 253 | // Set the input value from localStorage 254 | input.value = localStorage.getItem('myInputValue'); 255 | email.value = localStorage.getItem('hell'); 256 | textArea.value = localStorage.getItem('heaven'); 257 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:wght@400;500;700;900&display=swap"); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | scroll-behavior: smooth; 8 | } 9 | 10 | body { 11 | overflow-x: hidden; 12 | margin: 0; 13 | height: auto; 14 | } 15 | 16 | .header { 17 | display: grid; 18 | grid-template-columns: auto auto; 19 | justify-content: space-between; 20 | } 21 | 22 | .logo { 23 | padding-left: 24px; 24 | padding-top: 10px; 25 | padding-bottom: 10px; 26 | } 27 | 28 | footer a { 29 | height: 186px; 30 | text-decoration: none; 31 | font-family: "Inter", sans-serif; 32 | font-style: normal; 33 | font-weight: 401; 34 | font-size: 20px; 35 | line-height: 32px; 36 | color: #42526e; 37 | margin-bottom: 147px; 38 | } 39 | 40 | .logo a { 41 | text-decoration: none; 42 | font-family: "Inter", sans-serif; 43 | font-style: normal; 44 | font-weight: 600; 45 | font-size: 18px; 46 | line-height: 28px; 47 | color: #28352f; 48 | } 49 | 50 | .vector { 51 | margin-top: 10px; 52 | margin-right: 35px; 53 | right: 10%; 54 | z-index: 1; 55 | cursor: pointer; 56 | font-size: 30px; 57 | } 58 | 59 | .Secpopupwin { 60 | display: none; 61 | justify-content: center; 62 | position: fixed; 63 | width: 100vw; 64 | height: 100vh; 65 | background-color: rgb(0, 0, 0, 68%); 66 | z-index: 10; 67 | top: 0; 68 | overflow: scroll; 69 | padding-top: 15px; 70 | } 71 | 72 | .Secpopupwin.active { 73 | display: flex; 74 | } 75 | 76 | .Closepop { 77 | position: relative; 78 | cursor: pointer; 79 | align-items: end; 80 | width: auto; 81 | padding-bottom: 0; 82 | } 83 | 84 | .cardWin { 85 | height: 791px; 86 | width: 80%; 87 | border-radius: 18px; 88 | display: flex; 89 | flex-direction: column; 90 | justify-content: center; 91 | flex-wrap: wrap; 92 | padding-top: 25px; 93 | } 94 | 95 | .popupWindowImage { 96 | padding-top: 24px; 97 | width: 100%; 98 | } 99 | 100 | .titleWin { 101 | display: flex; 102 | flex-direction: column; 103 | justify-content: space-between; 104 | align-items: start; 105 | background: #fff; 106 | border-radius: 8px; 107 | padding: 16px; 108 | margin: 20px 16px; 109 | gap: 8px; 110 | overflow-y: scroll; 111 | } 112 | 113 | .headingpop { 114 | color: #172b4d; 115 | font-family: "Inter", sans-serif; 116 | font-size: 32px; 117 | font-weight: 600; 118 | line-height: 44px; 119 | text-align: left; 120 | padding-left: 0; 121 | padding-top: 10px; 122 | } 123 | 124 | .Lorem { 125 | font-family: "Inter", sans-serif; 126 | font-size: 15px; 127 | font-weight: 400; 128 | line-height: 24px; 129 | text-align: left; 130 | padding: 15px 12px 16px 0; 131 | } 132 | 133 | .buttonPop { 134 | display: flex; 135 | align-items: center; 136 | gap: 12px; 137 | flex-direction: row; 138 | height: fit-content; 139 | width: fit-content; 140 | text-align: center; 141 | padding: 12px 16px; 142 | background: #36b37f; 143 | border-radius: 4px; 144 | border-style: none; 145 | font-family: "Inter", sans-serif; 146 | font-style: normal; 147 | font-weight: 500; 148 | font-size: 17px; 149 | line-height: 24px; 150 | color: #fff; 151 | transition: background-color 0.3s ease, width 2s, height 2s; 152 | letter-spacing: 0.51px; 153 | text-decoration: none; 154 | } 155 | 156 | .buttonPop:hover { 157 | background: #4ada9e; 158 | } 159 | 160 | .buttonPop:active { 161 | background: #008552; 162 | } 163 | 164 | .poplinks { 165 | display: flex; 166 | gap: 10px; 167 | } 168 | 169 | .newpoplinks { 170 | display: flex; 171 | gap: 10px; 172 | } 173 | 174 | .newbuttonPop { 175 | display: flex; 176 | align-items: center; 177 | gap: 12px; 178 | flex-direction: row; 179 | height: fit-content; 180 | width: fit-content; 181 | text-align: center; 182 | padding: 12px 16px; 183 | background: #36b37f; 184 | border-radius: 4px; 185 | border-style: none; 186 | font-family: "Inter", sans-serif; 187 | font-style: normal; 188 | font-weight: 500; 189 | font-size: 17px; 190 | line-height: 24px; 191 | color: #fff; 192 | transition: background-color 0.3s ease, width 2s, height 2s; 193 | letter-spacing: 0.51px; 194 | text-decoration: none; 195 | } 196 | 197 | .newbuttonPop:hover { 198 | background: #4ada9e; 199 | } 200 | 201 | .newbuttonPop:active { 202 | background: #008552; 203 | } 204 | 205 | main { 206 | height: auto; 207 | overflow-x: hidden; 208 | } 209 | 210 | .porfolio { 211 | display: flex; 212 | flex-direction: column; 213 | width: 100%; 214 | overflow-x: hidden; 215 | padding: 60px 24px 0 24px; 216 | background-image: url("./Images/header-illsutration-mobile.png"); 217 | background-size: cover; 218 | background-repeat: no-repeat; 219 | } 220 | 221 | .card { 222 | height: 474px; 223 | width: 327px; 224 | border: 1px solid #d0d9d4; 225 | border-radius: 8px; 226 | background: #ebf0ee; 227 | display: flex; 228 | flex-direction: column; 229 | justify-content: flex-end; 230 | } 231 | 232 | h1 { 233 | font-family: "Inter", sans-serif; 234 | font-style: bold; 235 | font-weight: 700; 236 | font-size: 43px; 237 | line-height: 52px; 238 | text-align: center; 239 | color: #172b4d; 240 | } 241 | 242 | h2 { 243 | padding-top: 20px; 244 | font-family: "Inter", sans-serif; 245 | font-style: bold; 246 | font-weight: 700; 247 | font-size: 42px; 248 | line-height: 42px; 249 | text-align: center; 250 | color: #36b37e; 251 | } 252 | 253 | p { 254 | padding-top: 38px; 255 | font-family: "Inter", sans-serif; 256 | font-style: normal; 257 | font-weight: 400; 258 | font-size: 20px; 259 | line-height: 28px; 260 | text-align: center; 261 | color: #172b4d; 262 | } 263 | 264 | .social { 265 | display: inline-flex; 266 | justify-content: center; 267 | padding-top: 45px; 268 | gap: 20px; 269 | } 270 | 271 | .social li { 272 | list-style: none; 273 | } 274 | 275 | .social li a { 276 | font-size: 20px; 277 | color: #505f79; 278 | } 279 | 280 | .disabled { 281 | text-align: center; 282 | margin-top: 65px; 283 | } 284 | 285 | .headerSubMenu { 286 | display: none; 287 | } 288 | 289 | .works li { 290 | list-style: none; 291 | transition: background-color 0.3 ease; 292 | } 293 | 294 | .language li { 295 | font-family: "Inter", sans-serif; 296 | font-style: normal; 297 | font-weight: 600; 298 | font-size: 12px; 299 | line-height: 16px; 300 | color: #36b37e; 301 | list-style: none; 302 | padding: 12px; 303 | background: #fff; 304 | border-radius: 8px; 305 | transition: all 0.3s ease; 306 | } 307 | 308 | .Popwrapper { 309 | left: 100%; 310 | position: fixed; 311 | z-index: 2; 312 | box-sizing: border-box; 313 | } 314 | 315 | .Xmenu { 316 | cursor: pointer; 317 | float: right; 318 | padding: 10px 40px; 319 | } 320 | 321 | .Xmenu img { 322 | width: 20px; 323 | height: auto; 324 | } 325 | 326 | .PopupMenu { 327 | display: block; 328 | padding: 14px; 329 | width: 100vw; 330 | height: 100vh; 331 | background-color: #fff; 332 | } 333 | 334 | .PopupMenu ul { 335 | padding: 108px 0; 336 | } 337 | 338 | .server li { 339 | padding: 5px 6px; 340 | background: #ebf0ee; 341 | border-radius: 4px; 342 | list-style: none; 343 | font-family: "Inter", sans-serif; 344 | font-style: normal; 345 | font-weight: 600; 346 | font-size: 12px; 347 | line-height: 16px; 348 | color: #3a4a42; 349 | transition: background-color 0.5s ease; 350 | } 351 | 352 | .PopupMenu ul li { 353 | list-style: none; 354 | font-family: "Inter", sans-serif; 355 | font-style: bold; 356 | font-weight: 700; 357 | font-size: 42.5px; 358 | line-height: 52px; 359 | color: #3a4a42; 360 | padding: 20px; 361 | cursor: pointer; 362 | } 363 | 364 | .menu_items { 365 | cursor: pointer; 366 | transition: color orange 1.5s ease-in-out; 367 | } 368 | 369 | .nav-links li a { 370 | text-decoration: none; 371 | color: #3a4a42; 372 | } 373 | 374 | .nav-links li a:hover { 375 | color: blue; 376 | } 377 | 378 | .projects { 379 | display: flex; 380 | flex-direction: column; 381 | align-items: center; 382 | } 383 | 384 | .head { 385 | font-family: "Inter", sans-serif; 386 | font-style: normal; 387 | font-weight: 700; 388 | font-size: 40px; 389 | line-height: 42px; 390 | color: #172b4d; 391 | padding: 24px; 392 | } 393 | 394 | .span { 395 | width: 48px; 396 | border: 3px solid #36b37e; 397 | } 398 | 399 | .container { 400 | display: grid; 401 | grid-template-columns: auto; 402 | gap: 24px; 403 | padding: 62px 24px; 404 | } 405 | 406 | .title { 407 | display: flex; 408 | flex-direction: column; 409 | justify-content: space-between; 410 | align-items: center; 411 | background: #fff; 412 | border-radius: 8px; 413 | padding-bottom: 24px; 414 | gap: 8px; 415 | } 416 | 417 | .text { 418 | text-align: center; 419 | padding: 0 5px; 420 | font-family: "Inter", sans-serif; 421 | font-style: normal; 422 | font-weight: 600; 423 | font-size: 24px; 424 | line-height: 32px; 425 | color: #3a4a42; 426 | } 427 | 428 | .server { 429 | display: flex; 430 | flex-wrap: wrap; 431 | gap: 8px; 432 | margin-top: 10px; 433 | } 434 | 435 | .server :hover { 436 | background-color: #5ddfa9; 437 | } 438 | 439 | .button1 { 440 | padding: 8px; 441 | background: #36b37f; 442 | border-radius: 4px; 443 | border-style: none; 444 | font-family: "Inter", sans-serif; 445 | font-style: normal; 446 | font-weight: 500; 447 | font-size: 17px; 448 | line-height: 24px; 449 | color: #fff; 450 | transition: background-color 0.3s ease, width 2s, height 2s; 451 | } 452 | 453 | .button1:hover { 454 | background: #4ada9e; 455 | } 456 | 457 | .button1:active { 458 | background: #008552; 459 | } 460 | 461 | .button { 462 | padding: 8px; 463 | background: #36b37f; 464 | border-radius: 4px; 465 | border-style: none; 466 | font-family: "Inter", sans-serif; 467 | font-style: normal; 468 | font-weight: 500; 469 | font-size: 17px; 470 | line-height: 24px; 471 | color: #fff; 472 | transition: background-color 0.3s ease, width 2s, height 2s; 473 | } 474 | 475 | .button:hover { 476 | background: #4ada9e; 477 | } 478 | 479 | .button:active { 480 | background: #008552; 481 | } 482 | 483 | .about > h2 { 484 | font-family: "Inter", sans-serif; 485 | font-style: normal; 486 | font-weight: 700; 487 | font-size: 40px; 488 | line-height: 52px; 489 | color: #172b4d; 490 | } 491 | 492 | .about > p { 493 | font-family: "Inter", sans-serif; 494 | font-style: normal; 495 | font-weight: 400; 496 | font-size: 20px; 497 | line-height: 32px; 498 | color: #42526e; 499 | padding-bottom: 24px; 500 | } 501 | 502 | .about .button { 503 | margin-bottom: 60px; 504 | } 505 | 506 | .tools { 507 | display: grid; 508 | padding-left: 100px; 509 | padding-right: 100px; 510 | grid-template-rows: auto auto auto; 511 | gap: 15px; 512 | } 513 | 514 | .works { 515 | width: 251px; 516 | height: 351px; 517 | background: #ebf0ee; 518 | border: 1px solid #c1c7d0; 519 | border-radius: 8px; 520 | display: flex; 521 | flex-direction: column; 522 | justify-content: space-around; 523 | align-items: center; 524 | } 525 | 526 | .work :hover { 527 | background-color: #172b4d; 528 | } 529 | 530 | .languages { 531 | font-family: "Inter", sans-serif; 532 | font-style: normal; 533 | font-weight: 600; 534 | font-size: 24px; 535 | line-height: 32px; 536 | color: #344563; 537 | } 538 | 539 | .frameworks { 540 | font-family: "Inter", sans-serif; 541 | font-style: normal; 542 | font-weight: 600; 543 | font-size: 24px; 544 | line-height: 32px; 545 | color: #344563; 546 | } 547 | 548 | .skills { 549 | font-family: "Inter", sans-serif; 550 | font-style: normal; 551 | font-weight: 600; 552 | font-size: 24px; 553 | line-height: 32px; 554 | color: #344563; 555 | } 556 | 557 | .language { 558 | display: flex; 559 | justify-content: center; 560 | padding: 0; 561 | gap: 8px; 562 | flex-wrap: wrap; 563 | } 564 | 565 | .language li:hover { 566 | background-color: #344f81; 567 | color: white; 568 | } 569 | 570 | .contact p { 571 | font-family: "Inter", sans-serif; 572 | font-style: normal; 573 | font-weight: 700; 574 | font-size: 40px; 575 | line-height: 52px; 576 | color: #172b4d; 577 | padding-bottom: 50px; 578 | } 579 | 580 | form { 581 | display: flex; 582 | flex-direction: column; 583 | align-items: center; 584 | padding: 0 24px 70px; 585 | } 586 | 587 | footer { 588 | display: flex; 589 | height: 100px; 590 | flex-direction: column; 591 | align-items: center; 592 | padding-top: 0; 593 | background-image: url("./Images/illustration-contact-form.png"); 594 | background-size: auto; 595 | background-repeat: no-repeat; 596 | background-position: right; 597 | } 598 | 599 | footer .social { 600 | padding-top: 0; 601 | } 602 | 603 | .about { 604 | display: flex; 605 | flex-direction: column; 606 | align-items: center; 607 | padding: 0 24px; 608 | background-image: url("./Images/illustration-aboutme-mobile.png"); 609 | background-size: contain; 610 | background-repeat: no-repeat; 611 | } 612 | 613 | .contact { 614 | display: flex; 615 | flex-direction: column; 616 | align-items: center; 617 | } 618 | 619 | #fname { 620 | padding: 10px; 621 | width: 327px; 622 | border: 1px solid #d0d9d4; 623 | border-radius: 4px; 624 | font-family: "Inter", sans-serif; 625 | font-style: normal; 626 | font-weight: 400; 627 | font-size: 15px; 628 | line-height: 24px; 629 | color: #6b778c; 630 | } 631 | 632 | #email { 633 | padding: 10px; 634 | width: 327px; 635 | border: 1px solid #d0d9d4; 636 | border-radius: 4px; 637 | font-family: "Inter", sans-serif; 638 | font-style: normal; 639 | font-weight: 400; 640 | font-size: 15px; 641 | line-height: 24px; 642 | color: #6b778c; 643 | } 644 | 645 | #type { 646 | padding: 10px; 647 | width: 327px; 648 | height: 114px; 649 | border: 1px solid #d0d9d4; 650 | border-radius: 4px; 651 | font-family: "Inter", sans-serif; 652 | font-style: normal; 653 | font-weight: 400; 654 | font-size: 15px; 655 | line-height: 24px; 656 | color: #091e42; 657 | } 658 | 659 | .display-error { 660 | font-size: 15px !important; 661 | color: red; 662 | padding: 0; 663 | } 664 | 665 | .Xpopmenu { 666 | float: right; 667 | cursor: pointer; 668 | } 669 | 670 | .buttonDiv { 671 | padding: 8px; 672 | background: #36b37f; 673 | border-radius: 4px; 674 | border-style: none; 675 | font-family: "Inter", sans-serif; 676 | font-style: normal; 677 | font-weight: 500; 678 | font-size: 17px; 679 | line-height: 24px; 680 | color: #fff; 681 | transition: background-color 0.3s ease, width 2s, height 2s; 682 | gap: 60px; 683 | width: 150px; 684 | } 685 | 686 | @media screen and (max-width: 354px) { 687 | .titleWin { 688 | padding: 4px; 689 | } 690 | 691 | .newpoplinks { 692 | display: flex; 693 | gap: 3.5px; 694 | } 695 | 696 | .newbuttonPop { 697 | width: 110px; 698 | padding: 8px 2px 8px 2px; 699 | font-size: 15px; 700 | } 701 | } 702 | 703 | @media screen and (max-width: 426px) { 704 | .newbuttonPop { 705 | font-size: 15px; 706 | } 707 | } 708 | 709 | @media screen and (max-width: 530px) { 710 | img.Closepop { 711 | left: 80%; 712 | width: 30px; 713 | height: auto; 714 | } 715 | } 716 | 717 | @media screen and (max-width: 640px) { 718 | .poplinks { 719 | top: 125%; 720 | } 721 | } 722 | 723 | @media screen and (max-width: 768px) { 724 | .poplinks { 725 | top: 89%; 726 | right: 20%; 727 | height: 55px; 728 | text-align: center; 729 | } 730 | 731 | .popupWindowImage { 732 | padding-top: 0; 733 | margin-top: -40px; 734 | } 735 | 736 | .Closepop { 737 | left: 89%; 738 | top: 5%; 739 | } 740 | } 741 | 742 | @media screen and (min-width: 768px) { 743 | .porfolio { 744 | background-image: url("./Images/header-llustration-desktop.png"); 745 | background-size: cover; 746 | background-repeat: no-repeat; 747 | height: 850px; 748 | } 749 | 750 | .popupWindowImage { 751 | padding-top: 0; 752 | width: 100%; 753 | margin-top: -1.2%; 754 | } 755 | 756 | .Closepop { 757 | cursor: pointer; 758 | align-items: end; 759 | left: 95%; 760 | top: -3%; 761 | width: auto; 762 | padding-bottom: 0; 763 | } 764 | 765 | .modal-body { 766 | display: flex; 767 | justify-content: space-between; 768 | } 769 | 770 | .poplinks { 771 | display: flex; 772 | gap: 12px; 773 | min-width: 320px; 774 | } 775 | 776 | .newbuttonPop { 777 | display: none; 778 | } 779 | 780 | .headerSubMenu { 781 | display: grid; 782 | justify-content: center; 783 | grid-template-columns: auto auto auto; 784 | gap: 20px; 785 | position: relative; 786 | margin-top: -20px; 787 | cursor: pointer; 788 | } 789 | 790 | .headerSubMenu li { 791 | font-family: "Inter", sans-serif; 792 | font-style: normal; 793 | font-weight: 600; 794 | font-size: 12px; 795 | line-height: 16px; 796 | color: #3a4a42; 797 | list-style: none; 798 | padding: 5px 7px; 799 | border-radius: 0.3rem; 800 | transition: background-color 0.3s ease; 801 | } 802 | 803 | .headerSubMenu li a { 804 | font-family: "Inter", sans-serif; 805 | font-style: normal; 806 | font-weight: 600; 807 | font-size: 12px; 808 | line-height: 16px; 809 | color: #3a4a42; 810 | list-style: none; 811 | padding: 5px 7px; 812 | border-radius: 0.3rem; 813 | transition: background-color 0.3s ease; 814 | text-decoration: none; 815 | } 816 | 817 | .headerSubMenu li a:hover { 818 | background-color: #313741; 819 | color: white; 820 | } 821 | 822 | .Secpopupwin.active { 823 | display: flex; 824 | } 825 | 826 | .header { 827 | display: none; 828 | } 829 | 830 | #fname { 831 | width: 400px; 832 | } 833 | 834 | .work { 835 | width: 250px; 836 | } 837 | 838 | #email { 839 | width: 400px; 840 | } 841 | 842 | #type { 843 | width: 400px; 844 | } 845 | 846 | .container { 847 | display: grid; 848 | grid-template-columns: auto auto auto; 849 | padding-left: 100px; 850 | padding-right: 100px; 851 | gap: 24px; 852 | } 853 | 854 | h1 { 855 | margin-top: 150px; 856 | } 857 | 858 | .logo, 859 | .vector { 860 | display: none; 861 | } 862 | 863 | .tools { 864 | display: grid; 865 | padding-left: 100px; 866 | padding-right: 100px; 867 | grid-template-columns: auto auto auto; 868 | gap: 15px; 869 | } 870 | 871 | .about { 872 | display: flex; 873 | flex-direction: column; 874 | align-items: center; 875 | margin-bottom: 60px; 876 | background-image: url("./images/Group.png"); 877 | background-size: auto; 878 | background-repeat: no-repeat; 879 | background-position: right; 880 | margin-top: 2px; 881 | } 882 | 883 | .card { 884 | height: 474px; 885 | width: 250px; 886 | border: 1px solid #d0d9d4; 887 | border-radius: 8px; 888 | background: #ebf0ee; 889 | display: flex; 890 | flex-direction: column; 891 | } 892 | } 893 | 894 | @media screen and (min-width: 1024px) { 895 | #fname { 896 | width: 531px; 897 | } 898 | 899 | #email { 900 | width: 531px; 901 | } 902 | 903 | #type { 904 | width: 531px; 905 | } 906 | 907 | .card { 908 | height: 474px; 909 | width: 350px; 910 | border: 1px solid #d0d9d4; 911 | border-radius: 8px; 912 | background: #ebf0ee; 913 | display: flex; 914 | flex-direction: column; 915 | justify-content: flex-end; 916 | } 917 | 918 | .modal-body { 919 | display: flex; 920 | } 921 | } 922 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mobileportfolioweb", 3 | "version": "1.0.0", 4 | "description": "
    ", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-eslint": "^10.1.0", 15 | "eslint": "^7.32.0", 16 | "eslint-config-airbnb-base": "^14.2.1", 17 | "eslint-plugin-import": "^2.27.5", 18 | "hint": "^7.1.10", 19 | "stylelint": "^13.13.1", 20 | "stylelint-config-standard": "^21.0.0", 21 | "stylelint-csstree-validator": "^1.9.0", 22 | "stylelint-scss": "^3.21.0" 23 | }, 24 | "dependencies": { 25 | "abab": "^2.0.6", 26 | "abbrev": "^1.1.1", 27 | "acorn": "^8.8.2", 28 | "acorn-globals": "^7.0.1", 29 | "acorn-jsx": "^5.3.2", 30 | "acorn-jsx-walk": "^2.0.0", 31 | "acorn-walk": "^8.2.0", 32 | "agent-base": "^6.0.2", 33 | "agentkeepalive": "^4.3.0", 34 | "aggregate-error": "^3.1.0", 35 | "ajv": "^8.12.0", 36 | "ajv-formats": "^2.1.1", 37 | "ansi-align": "^3.0.1", 38 | "ansi-colors": "^4.1.3", 39 | "ansi-regex": "^5.0.1", 40 | "ansi-styles": "^4.3.0", 41 | "anymatch": "^3.1.3", 42 | "aproba": "^2.0.0", 43 | "are-we-there-yet": "^2.0.0", 44 | "argparse": "^1.0.10", 45 | "array-buffer-byte-length": "^1.0.0", 46 | "array-includes": "^3.1.6", 47 | "array-union": "^2.1.0", 48 | "array.prototype.flat": "^1.3.1", 49 | "array.prototype.flatmap": "^1.3.1", 50 | "arrify": "^1.0.1", 51 | "ast-types": "^0.13.4", 52 | "astral-regex": "^2.0.0", 53 | "async": "^3.2.4", 54 | "asynckit": "^0.4.0", 55 | "autoprefixer": "^9.8.8", 56 | "available-typed-arrays": "^1.0.5", 57 | "axe-core": "^4.7.2", 58 | "bail": "^1.0.5", 59 | "balanced-match": "^1.0.2", 60 | "base64-js": "^1.5.1", 61 | "bcp47": "^1.1.2", 62 | "binary-extensions": "^2.2.0", 63 | "bl": "^4.1.0", 64 | "boolbase": "^1.0.0", 65 | "boxen": "^5.1.2", 66 | "brace-expansion": "^1.1.11", 67 | "braces": "^3.0.2", 68 | "browserslist": "^4.21.7", 69 | "buffer": "^5.7.1", 70 | "buffer-crc32": "^0.2.13", 71 | "builtins": "^5.0.1", 72 | "bytes": "^3.1.2", 73 | "cacache": "^17.1.3", 74 | "cacheable-lookup": "^5.0.4", 75 | "cacheable-request": "^7.0.4", 76 | "call-bind": "^1.0.2", 77 | "callsites": "^3.1.0", 78 | "camelcase": "^6.3.0", 79 | "camelcase-keys": "^6.2.2", 80 | "caniuse-lite": "^1.0.30001492", 81 | "canvas": "^2.11.2", 82 | "chalk": "^4.1.2", 83 | "character-entities": "^1.2.4", 84 | "character-entities-legacy": "^1.1.4", 85 | "character-reference-invalid": "^1.1.4", 86 | "chokidar": "^3.5.3", 87 | "chownr": "^2.0.0", 88 | "ci-info": "^3.8.0", 89 | "clean-stack": "^2.2.0", 90 | "cli-boxes": "^2.2.1", 91 | "cli-cursor": "^3.1.0", 92 | "cli-spinners": "^2.9.0", 93 | "clone": "^1.0.4", 94 | "clone-regexp": "^2.2.0", 95 | "clone-response": "^1.0.3", 96 | "cloudinary": "^1.37.1", 97 | "cloudinary-core": "^2.13.0", 98 | "color-convert": "^2.0.1", 99 | "color-name": "^1.1.4", 100 | "color-string": "^1.9.1", 101 | "color-support": "^1.1.3", 102 | "combined-stream": "^1.0.8", 103 | "concat-map": "^0.0.1", 104 | "configstore": "^5.0.1", 105 | "confusing-browser-globals": "^1.0.11", 106 | "console-control-strings": "^1.1.0", 107 | "content-type": "^1.0.5", 108 | "convert-source-map": "^1.9.0", 109 | "core-js": "^3.30.2", 110 | "core-util-is": "^1.0.3", 111 | "cosmiconfig": "^7.1.0", 112 | "cross-fetch": "^3.1.5", 113 | "cross-spawn": "^7.0.3", 114 | "crypto-random-string": "^2.0.0", 115 | "css-select": "^4.3.0", 116 | "css-tree": "^1.1.3", 117 | "css-what": "^6.1.0", 118 | "cssesc": "^3.0.0", 119 | "cssstyle": "^3.0.0", 120 | "data-uri-to-buffer": "^4.0.1", 121 | "data-urls": "^3.0.2", 122 | "debug": "^4.3.4", 123 | "decamelize": "^1.2.0", 124 | "decamelize-keys": "^1.1.1", 125 | "decimal.js": "^10.4.3", 126 | "decompress-response": "^6.0.0", 127 | "deep-extend": "^0.6.0", 128 | "deep-is": "^0.1.4", 129 | "defaults": "^1.0.4", 130 | "defer-to-connect": "^2.0.1", 131 | "define-properties": "^1.2.0", 132 | "degenerator": "^3.0.4", 133 | "delayed-stream": "^1.0.0", 134 | "delegates": "^1.0.0", 135 | "depd": "^2.0.0", 136 | "detect-libc": "^2.0.1", 137 | "devtools-protocol": "^0.0.981744", 138 | "dir-glob": "^3.0.1", 139 | "doctrine": "^3.0.0", 140 | "dom-serializer": "^1.4.1", 141 | "domelementtype": "^2.3.0", 142 | "domexception": "^4.0.0", 143 | "domhandler": "^4.3.1", 144 | "domutils": "^2.8.0", 145 | "dot-prop": "^5.3.0", 146 | "duplexer3": "^0.1.5", 147 | "eastasianwidth": "^0.2.0", 148 | "ejs": "^3.1.9", 149 | "electron-to-chromium": "^1.4.418", 150 | "emoji-regex": "^9.2.2", 151 | "encoding": "^0.1.13", 152 | "end-of-stream": "^1.4.4", 153 | "enquirer": "^2.3.6", 154 | "entities": "^2.2.0", 155 | "err-code": "^2.0.3", 156 | "error-ex": "^1.3.2", 157 | "es-abstract": "^1.21.2", 158 | "es-set-tostringtag": "^2.0.1", 159 | "es-shim-unscopables": "^1.0.0", 160 | "es-to-primitive": "^1.2.1", 161 | "escalade": "^3.1.1", 162 | "escape-goat": "^2.1.1", 163 | "escape-string-regexp": "^1.0.5", 164 | "escodegen": "^2.0.0", 165 | "eslint-import-resolver-node": "^0.3.7", 166 | "eslint-module-utils": "^2.8.0", 167 | "eslint-scope": "^5.1.1", 168 | "eslint-utils": "^2.1.0", 169 | "eslint-visitor-keys": "^3.4.1", 170 | "espree": "^7.3.1", 171 | "esprima": "^4.0.1", 172 | "esquery": "^1.5.0", 173 | "esrecurse": "^4.3.0", 174 | "estraverse": "^5.3.0", 175 | "esutils": "^2.0.3", 176 | "eventemitter2": "^6.4.9", 177 | "execa": "^4.1.0", 178 | "execall": "^2.0.0", 179 | "extend": "^3.0.2", 180 | "extract-zip": "^2.0.1", 181 | "fast-deep-equal": "^3.1.3", 182 | "fast-glob": "^3.2.12", 183 | "fast-json-stable-stringify": "^2.1.0", 184 | "fast-levenshtein": "^2.0.6", 185 | "fast-xml-parser": "^4.2.4", 186 | "fastest-levenshtein": "^1.0.16", 187 | "fastq": "^1.15.0", 188 | "fd-slicer": "^1.1.0", 189 | "fetch-blob": "^3.2.0", 190 | "file-entry-cache": "^6.0.1", 191 | "file-type": "^16.5.4", 192 | "file-uri-to-path": "^2.0.0", 193 | "filelist": "^1.0.4", 194 | "fill-range": "^7.0.1", 195 | "find-up": "^4.1.0", 196 | "flat-cache": "^3.0.4", 197 | "flatted": "^3.2.7", 198 | "for-each": "^0.3.3", 199 | "foreground-child": "^3.1.1", 200 | "form-data": "^4.0.0", 201 | "formdata-polyfill": "^4.0.10", 202 | "fs-constants": "^1.0.0", 203 | "fs-extra": "^11.1.1", 204 | "fs-minipass": "^3.0.2", 205 | "fs.realpath": "^1.0.0", 206 | "ftp": "^0.3.10", 207 | "function-bind": "^1.1.1", 208 | "function.prototype.name": "^1.1.5", 209 | "functional-red-black-tree": "^1.0.1", 210 | "functions-have-names": "^1.2.3", 211 | "gauge": "^3.0.2", 212 | "gensync": "^1.0.0-beta.2", 213 | "get-intrinsic": "^1.2.1", 214 | "get-stdin": "^8.0.0", 215 | "get-stream": "^5.2.0", 216 | "get-symbol-description": "^1.0.0", 217 | "get-uri": "^3.0.2", 218 | "glob": "^10.2.7", 219 | "glob-parent": "^5.1.2", 220 | "global-dirs": "^3.0.1", 221 | "global-modules": "^2.0.0", 222 | "global-prefix": "^3.0.0", 223 | "globals": "^11.12.0", 224 | "globalthis": "^1.0.3", 225 | "globby": "^11.1.0", 226 | "globjoin": "^0.1.4", 227 | "gonzales-pe": "^4.3.0", 228 | "gopd": "^1.0.1", 229 | "got": "^11.8.6", 230 | "graceful-fs": "^4.2.11", 231 | "hard-rejection": "^2.1.0", 232 | "has": "^1.0.3", 233 | "has-bigints": "^1.0.2", 234 | "has-flag": "^4.0.0", 235 | "has-property-descriptors": "^1.0.0", 236 | "has-proto": "^1.0.1", 237 | "has-symbols": "^1.0.3", 238 | "has-tostringtag": "^1.0.0", 239 | "has-unicode": "^2.0.1", 240 | "has-yarn": "^2.1.0", 241 | "hosted-git-info": "^6.1.1", 242 | "html-encoding-sniffer": "^3.0.0", 243 | "html-tags": "^3.3.1", 244 | "htmlparser2": "^3.10.1", 245 | "http-cache-semantics": "^4.1.1", 246 | "http-errors": "^2.0.0", 247 | "http-proxy-agent": "^5.0.0", 248 | "http2-wrapper": "^1.0.3", 249 | "https": "^1.0.0", 250 | "https-proxy-agent": "^5.0.1", 251 | "human-signals": "^1.1.1", 252 | "humanize-ms": "^1.2.1", 253 | "iconv-lite": "^0.6.3", 254 | "ieee754": "^1.2.1", 255 | "ignore": "^5.2.4", 256 | "image-size": "^1.0.2", 257 | "import-fresh": "^3.3.0", 258 | "import-lazy": "^2.1.0", 259 | "imurmurhash": "^0.1.4", 260 | "indent-string": "^4.0.0", 261 | "inflight": "^1.0.6", 262 | "inherits": "^2.0.4", 263 | "ini": "^2.0.0", 264 | "internal-slot": "^1.0.5", 265 | "invert-kv": "^3.0.1", 266 | "ip": "^1.1.8", 267 | "is-alphabetical": "^1.0.4", 268 | "is-alphanumerical": "^1.0.4", 269 | "is-array-buffer": "^3.0.2", 270 | "is-arrayish": "^0.3.2", 271 | "is-bigint": "^1.0.4", 272 | "is-binary-path": "^2.1.0", 273 | "is-boolean-object": "^1.1.2", 274 | "is-buffer": "^2.0.5", 275 | "is-callable": "^1.2.7", 276 | "is-ci": "^3.0.1", 277 | "is-core-module": "^2.12.1", 278 | "is-date-object": "^1.0.5", 279 | "is-decimal": "^1.0.4", 280 | "is-docker": "^2.2.1", 281 | "is-extglob": "^2.1.1", 282 | "is-fullwidth-code-point": "^3.0.0", 283 | "is-glob": "^4.0.3", 284 | "is-hexadecimal": "^1.0.4", 285 | "is-installed-globally": "^0.4.0", 286 | "is-interactive": "^1.0.0", 287 | "is-lambda": "^1.0.1", 288 | "is-negative-zero": "^2.0.2", 289 | "is-npm": "^5.0.0", 290 | "is-number": "^7.0.0", 291 | "is-number-object": "^1.0.7", 292 | "is-obj": "^2.0.0", 293 | "is-path-inside": "^3.0.3", 294 | "is-plain-obj": "^1.1.0", 295 | "is-potential-custom-element-name": "^1.0.1", 296 | "is-regex": "^1.1.4", 297 | "is-regexp": "^2.1.0", 298 | "is-shared-array-buffer": "^1.0.2", 299 | "is-stream": "^2.0.1", 300 | "is-string": "^1.0.7", 301 | "is-svg": "^4.4.0", 302 | "is-symbol": "^1.0.4", 303 | "is-typed-array": "^1.1.10", 304 | "is-typedarray": "^1.0.0", 305 | "is-unicode-supported": "^0.1.0", 306 | "is-weakref": "^1.0.2", 307 | "is-wsl": "^2.2.0", 308 | "is-yarn-global": "^0.3.0", 309 | "isarray": "^0.0.1", 310 | "isexe": "^2.0.0", 311 | "jackspeak": "^2.2.1", 312 | "jake": "^10.8.7", 313 | "js-library-detector": "^6.6.0", 314 | "js-tokens": "^4.0.0", 315 | "js-yaml": "^3.14.1", 316 | "jsdom": "^21.1.2", 317 | "jsesc": "^2.5.2", 318 | "json-buffer": "^3.0.1", 319 | "json-parse-even-better-errors": "^2.3.1", 320 | "json-schema-traverse": "^1.0.0", 321 | "json-stable-stringify-without-jsonify": "^1.0.1", 322 | "json5": "^2.2.3", 323 | "jsonc-parser": "^3.2.0", 324 | "jsonfile": "^6.1.0", 325 | "jsonparse": "^1.3.1", 326 | "keyv": "^4.5.2", 327 | "kind-of": "^6.0.3", 328 | "known-css-properties": "^0.21.0", 329 | "latest-version": "^5.1.0", 330 | "lcid": "^3.1.1", 331 | "levn": "^0.4.1", 332 | "lines-and-columns": "^1.2.4", 333 | "locate-path": "^5.0.0", 334 | "lockfile": "^1.0.4", 335 | "lodash": "^4.17.21", 336 | "lodash.merge": "^4.6.2", 337 | "lodash.truncate": "^4.4.2", 338 | "log-symbols": "^4.1.0", 339 | "longest-streak": "^2.0.4", 340 | "lowercase-keys": "^2.0.0", 341 | "lru-cache": "^7.18.3", 342 | "make-dir": "^3.1.0", 343 | "make-fetch-happen": "^11.1.1", 344 | "map-age-cleaner": "^0.1.3", 345 | "map-obj": "^4.3.0", 346 | "mathml-tag-names": "^2.1.3", 347 | "mdast-util-from-markdown": "^0.8.5", 348 | "mdast-util-to-markdown": "^0.6.5", 349 | "mdast-util-to-string": "^2.0.0", 350 | "mdn-data": "^2.0.32", 351 | "mem": "^5.1.1", 352 | "meow": "^9.0.0", 353 | "merge-stream": "^2.0.0", 354 | "merge2": "^1.4.1", 355 | "metaviewport-parser": "^0.3.0", 356 | "micromark": "^2.11.4", 357 | "micromatch": "^4.0.5", 358 | "mime-db": "^1.52.0", 359 | "mime-types": "^2.1.35", 360 | "mimic-fn": "^2.1.0", 361 | "mimic-response": "^1.0.1", 362 | "min-indent": "^1.0.1", 363 | "minimatch": "^3.1.2", 364 | "minimist": "^1.2.8", 365 | "minimist-options": "^4.1.0", 366 | "minipass": "^5.0.0", 367 | "minipass-collect": "^1.0.2", 368 | "minipass-fetch": "^3.0.3", 369 | "minipass-flush": "^1.0.5", 370 | "minipass-json-stream": "^1.0.1", 371 | "minipass-pipeline": "^1.2.4", 372 | "minipass-sized": "^1.0.3", 373 | "minizlib": "^2.1.2", 374 | "mkdirp": "^1.0.4", 375 | "mkdirp-classic": "^0.5.3", 376 | "ms": "^2.1.2", 377 | "mutationobserver-shim": "^0.3.7", 378 | "nan": "^2.17.0", 379 | "nanoid": "^3.3.6", 380 | "natural-compare": "^1.4.0", 381 | "negotiator": "^0.6.3", 382 | "netmask": "^2.0.2", 383 | "node-domexception": "^1.0.0", 384 | "node-fetch": "^3.3.1", 385 | "node-releases": "^2.0.12", 386 | "nopt": "^5.0.0", 387 | "normalize-package-data": "^3.0.3", 388 | "normalize-path": "^3.0.0", 389 | "normalize-range": "^0.1.2", 390 | "normalize-selector": "^0.2.0", 391 | "normalize-url": "^6.1.0", 392 | "npm-package-arg": "^10.1.0", 393 | "npm-registry-fetch": "^14.0.5", 394 | "npm-run-path": "^4.0.1", 395 | "npmlog": "^5.0.1", 396 | "nth-check": "^2.1.1", 397 | "num2fraction": "^1.2.2", 398 | "nwsapi": "^2.2.5", 399 | "object-assign": "^4.1.1", 400 | "object-inspect": "^1.12.3", 401 | "object-keys": "^1.1.1", 402 | "object.assign": "^4.1.4", 403 | "object.entries": "^1.1.6", 404 | "object.values": "^1.1.6", 405 | "once": "^1.4.0", 406 | "onetime": "^5.1.2", 407 | "optionator": "^0.9.1", 408 | "ora": "^5.4.1", 409 | "os-locale": "^5.0.0", 410 | "p-cancelable": "^2.1.1", 411 | "p-defer": "^1.0.0", 412 | "p-is-promise": "^2.1.0", 413 | "p-limit": "^2.3.0", 414 | "p-locate": "^4.1.0", 415 | "p-map": "^4.0.0", 416 | "p-try": "^2.2.0", 417 | "pac-proxy-agent": "^5.0.0", 418 | "pac-resolver": "^5.0.1", 419 | "package-json": "^6.5.0", 420 | "parent-module": "^1.0.1", 421 | "parse-entities": "^2.0.0", 422 | "parse-json": "^5.2.0", 423 | "parse5": "^6.0.1", 424 | "parse5-htmlparser2-tree-adapter": "^6.0.1", 425 | "path-exists": "^4.0.0", 426 | "path-is-absolute": "^1.0.1", 427 | "path-key": "^3.1.1", 428 | "path-parse": "^1.0.7", 429 | "path-scurry": "^1.9.2", 430 | "path-type": "^4.0.0", 431 | "peek-readable": "^4.1.0", 432 | "pend": "^1.2.0", 433 | "picocolors": "^1.0.0", 434 | "picomatch": "^2.3.1", 435 | "pkg-dir": "^4.2.0", 436 | "postcss": "^8.4.24", 437 | "postcss-html": "^0.36.0", 438 | "postcss-less": "^5.0.0", 439 | "postcss-media-query-parser": "^0.2.3", 440 | "postcss-resolve-nested-selector": "^0.1.1", 441 | "postcss-safe-parser": "^6.0.0", 442 | "postcss-sass": "^0.5.0", 443 | "postcss-scss": "^4.0.6", 444 | "postcss-selector-parser": "^6.0.13", 445 | "postcss-syntax": "^0.36.2", 446 | "postcss-value-parser": "^4.2.0", 447 | "prelude-ls": "^1.2.1", 448 | "prepend-http": "^2.0.0", 449 | "proc-log": "^3.0.0", 450 | "progress": "^2.0.3", 451 | "promise-retry": "^2.0.1", 452 | "proxy-agent": "^5.0.0", 453 | "proxy-from-env": "^1.1.0", 454 | "psl": "^1.9.0", 455 | "pump": "^3.0.0", 456 | "punycode": "^2.3.0", 457 | "pupa": "^2.1.1", 458 | "puppeteer-core": "^13.7.0", 459 | "q": "^1.5.1", 460 | "querystringify": "^2.2.0", 461 | "queue": "^6.0.2", 462 | "queue-microtask": "^1.2.3", 463 | "quick-lru": "^5.1.1", 464 | "raw-body": "^2.5.2", 465 | "rc": "^1.2.8", 466 | "read-pkg": "^5.2.0", 467 | "read-pkg-up": "^7.0.1", 468 | "readable-stream": "^3.6.2", 469 | "readable-web-to-node-stream": "^3.0.2", 470 | "readdirp": "^3.6.0", 471 | "redent": "^3.0.0", 472 | "regexp.prototype.flags": "^1.5.0", 473 | "regexpp": "^3.2.0", 474 | "registry-auth-token": "^4.2.2", 475 | "registry-url": "^5.1.0", 476 | "remark": "^13.0.0", 477 | "remark-parse": "^9.0.0", 478 | "remark-stringify": "^9.0.1", 479 | "repeat-string": "^1.6.1", 480 | "require-from-string": "^2.0.2", 481 | "requires-port": "^1.0.0", 482 | "resolve": "^1.22.2", 483 | "resolve-alpn": "^1.2.1", 484 | "resolve-from": "^5.0.0", 485 | "responselike": "^2.0.1", 486 | "restore-cursor": "^3.1.0", 487 | "retry": "^0.12.0", 488 | "reusify": "^1.0.4", 489 | "rimraf": "^3.0.2", 490 | "rrweb-cssom": "^0.6.0", 491 | "run-parallel": "^1.2.0", 492 | "safe-buffer": "^5.2.1", 493 | "safe-regex-test": "^1.0.0", 494 | "safer-buffer": "^2.1.2", 495 | "saxes": "^6.0.0", 496 | "semver": "^7.5.1", 497 | "semver-diff": "^3.1.1", 498 | "set-blocking": "^2.0.0", 499 | "setimmediate": "^1.0.5", 500 | "setprototypeof": "^1.2.0", 501 | "shebang-command": "^2.0.0", 502 | "shebang-regex": "^3.0.0", 503 | "side-channel": "^1.0.4", 504 | "signal-exit": "^3.0.7", 505 | "simple-concat": "^1.0.1", 506 | "simple-get": "^3.1.1", 507 | "simple-swizzle": "^0.2.2", 508 | "slash": "^3.0.0", 509 | "slice-ansi": "^4.0.0", 510 | "smart-buffer": "^4.2.0", 511 | "socks": "^2.7.1", 512 | "socks-proxy-agent": "^7.0.0", 513 | "source-map": "^0.6.1", 514 | "source-map-js": "^1.0.2", 515 | "spdx-correct": "^3.2.0", 516 | "spdx-exceptions": "^2.3.0", 517 | "spdx-expression-parse": "^3.0.1", 518 | "spdx-license-ids": "^3.0.13", 519 | "specificity": "^0.4.1", 520 | "sprintf-js": "^1.0.3", 521 | "ssri": "^10.0.4", 522 | "statuses": "^2.0.1", 523 | "string_decoder": "^1.3.0", 524 | "string-width": "^5.1.2", 525 | "string-width-cjs": "^4.2.3", 526 | "string.prototype.trim": "^1.2.7", 527 | "string.prototype.trimend": "^1.0.6", 528 | "string.prototype.trimstart": "^1.0.6", 529 | "strip-ansi": "^6.0.1", 530 | "strip-ansi-cjs": "^6.0.1", 531 | "strip-bom": "^3.0.0", 532 | "strip-final-newline": "^2.0.0", 533 | "strip-indent": "^3.0.0", 534 | "strip-json-comments": "^2.0.1", 535 | "strnum": "^1.0.5", 536 | "strtok3": "^6.3.0", 537 | "style-search": "^0.1.0", 538 | "stylelint-config-recommended": "^4.0.0", 539 | "sugarss": "^2.0.0", 540 | "supports-color": "^7.2.0", 541 | "supports-preserve-symlinks-flag": "^1.0.0", 542 | "svg-tags": "^1.0.0", 543 | "symbol-tree": "^3.2.4", 544 | "table": "^6.8.1", 545 | "tar": "^6.1.15", 546 | "tar-fs": "^2.1.1", 547 | "tar-stream": "^2.2.0", 548 | "text-table": "^0.2.0", 549 | "through": "^2.3.8", 550 | "to-fast-properties": "^2.0.0", 551 | "to-readable-stream": "^1.0.0", 552 | "to-regex-range": "^5.0.1", 553 | "toidentifier": "^1.0.1", 554 | "token-types": "^4.2.1", 555 | "tough-cookie": "^4.1.3", 556 | "tr46": "^3.0.0", 557 | "trim-newlines": "^3.0.1", 558 | "trough": "^1.0.5", 559 | "tsconfig-paths": "^3.14.2", 560 | "tslib": "^2.5.3", 561 | "tsutils": "^3.21.0", 562 | "type-check": "^0.4.0", 563 | "type-fest": "^0.20.2", 564 | "typed-array-length": "^1.0.4", 565 | "typedarray-to-buffer": "^3.1.5", 566 | "typescript": "^5.1.3", 567 | "unbox-primitive": "^1.0.2", 568 | "unbzip2-stream": "^1.4.3", 569 | "unified": "^9.2.2", 570 | "unique-filename": "^3.0.0", 571 | "unique-slug": "^4.0.0", 572 | "unique-string": "^2.0.0", 573 | "unist-util-find-all-after": "^3.0.2", 574 | "unist-util-is": "^4.1.0", 575 | "unist-util-stringify-position": "^2.0.3", 576 | "universalify": "^2.0.0", 577 | "unpipe": "^1.0.0", 578 | "update-browserslist-db": "^1.0.11", 579 | "update-notifier": "^5.1.0", 580 | "uri-js": "^4.4.1", 581 | "url-parse": "^1.5.10", 582 | "url-parse-lax": "^3.0.0", 583 | "util-deprecate": "^1.0.2", 584 | "v8-compile-cache": "^2.3.0", 585 | "validate-npm-package-license": "^3.0.4", 586 | "validate-npm-package-name": "^5.0.0", 587 | "vfile": "^4.2.1", 588 | "vfile-message": "^2.0.4", 589 | "vm2": "^3.9.19", 590 | "w3c-xmlserializer": "^4.0.0", 591 | "wcwidth": "^1.0.1", 592 | "web-streams-polyfill": "^3.2.1", 593 | "webidl-conversions": "^7.0.0", 594 | "whatwg-encoding": "^2.0.0", 595 | "whatwg-mimetype": "^3.0.0", 596 | "whatwg-url": "^11.0.0", 597 | "which": "^2.0.2", 598 | "which-boxed-primitive": "^1.0.2", 599 | "which-typed-array": "^1.1.9", 600 | "wide-align": "^1.1.5", 601 | "widest-line": "^3.1.0", 602 | "word-wrap": "^1.2.3", 603 | "wrap-ansi": "^8.1.0", 604 | "wrap-ansi-cjs": "^7.0.0", 605 | "wrappy": "^1.0.2", 606 | "write-file-atomic": "^3.0.3", 607 | "ws": "^8.13.0", 608 | "xdg-basedir": "^4.0.0", 609 | "xml-name-validator": "^4.0.0", 610 | "xmlchars": "^2.2.0", 611 | "xregexp": "^2.0.0", 612 | "yallist": "^4.0.0", 613 | "yaml": "^1.10.2", 614 | "yargs-parser": "^20.2.9", 615 | "yauzl": "^2.10.0", 616 | "zwitch": "^1.0.5" 617 | } 618 | } 619 | -------------------------------------------------------------------------------- /images/Header-llustration-desktop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | --------------------------------------------------------------------------------