├── .vscode └── settings.json ├── mob-img ├── css.png ├── html.png ├── popup.png ├── Contactme.png ├── capston1.png ├── dropdown.png ├── normalbtn.png ├── background.png ├── javascript.png ├── SnapshootPortfolio1.png ├── SnapshootPortfolio2.png ├── SnapshootPortfolio3.png ├── SnapshootPortfolio4.png ├── contact-form-background.png ├── header-background-mobile.svg ├── angle-down-solid.svg ├── chevron-right-solid.svg ├── Menu.svg ├── monster.svg ├── twitter).svg ├── Linkedinicon.svg ├── Vector.svg ├── thumb.svg └── header-shapes mobile@2x.svg ├── desktop-img ├── capston1.png ├── liveicon.png ├── sourcevector.png ├── SnapshootPortfolio.png ├── SnapshootPortfolio2.png ├── SnapshootPortfolio3.png ├── SnapshootPortfolio4.png ├── contactformbackgroundshapes.svg └── Headerbg.svg ├── .stylelintrc.json ├── .hintrc ├── .eslintrc.json ├── README.md ├── form.js ├── .github └── workflows │ └── linters.yml ├── README copy.md ├── index.html ├── app.js └── style.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } 4 | -------------------------------------------------------------------------------- /mob-img/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/mob-img/css.png -------------------------------------------------------------------------------- /mob-img/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/mob-img/html.png -------------------------------------------------------------------------------- /mob-img/popup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/mob-img/popup.png -------------------------------------------------------------------------------- /mob-img/Contactme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/mob-img/Contactme.png -------------------------------------------------------------------------------- /mob-img/capston1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/mob-img/capston1.png -------------------------------------------------------------------------------- /mob-img/dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/mob-img/dropdown.png -------------------------------------------------------------------------------- /mob-img/normalbtn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/mob-img/normalbtn.png -------------------------------------------------------------------------------- /desktop-img/capston1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/desktop-img/capston1.png -------------------------------------------------------------------------------- /desktop-img/liveicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/desktop-img/liveicon.png -------------------------------------------------------------------------------- /mob-img/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/mob-img/background.png -------------------------------------------------------------------------------- /mob-img/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/mob-img/javascript.png -------------------------------------------------------------------------------- /desktop-img/sourcevector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/desktop-img/sourcevector.png -------------------------------------------------------------------------------- /mob-img/SnapshootPortfolio1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/mob-img/SnapshootPortfolio1.png -------------------------------------------------------------------------------- /mob-img/SnapshootPortfolio2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/mob-img/SnapshootPortfolio2.png -------------------------------------------------------------------------------- /mob-img/SnapshootPortfolio3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/mob-img/SnapshootPortfolio3.png -------------------------------------------------------------------------------- /mob-img/SnapshootPortfolio4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/mob-img/SnapshootPortfolio4.png -------------------------------------------------------------------------------- /desktop-img/SnapshootPortfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/desktop-img/SnapshootPortfolio.png -------------------------------------------------------------------------------- /desktop-img/SnapshootPortfolio2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/desktop-img/SnapshootPortfolio2.png -------------------------------------------------------------------------------- /desktop-img/SnapshootPortfolio3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/desktop-img/SnapshootPortfolio3.png -------------------------------------------------------------------------------- /desktop-img/SnapshootPortfolio4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/desktop-img/SnapshootPortfolio4.png -------------------------------------------------------------------------------- /mob-img/contact-form-background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christianbiring1/My_Portfolio/HEAD/mob-img/contact-form-background.png -------------------------------------------------------------------------------- /mob-img/header-background-mobile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true, 7 | "csstree/validator": true 8 | }, 9 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 10 | } 11 | -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /mob-img/angle-down-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /mob-img/chevron-right-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /mob-img/Menu.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 | "eol-last": "off", 17 | "import/extensions": [ 1, { 18 | "js": "always", "json": "always" 19 | }] 20 | }, 21 | "ignorePatterns": [ 22 | "dist/", 23 | "build/" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /mob-img/monster.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /mob-img/twitter).svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /mob-img/Linkedinicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /mob-img/Vector.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Setup, mobile and Desktop version of my portfolio 2 | 3 | > Description of the project. 4 | 5 | - set up a new repository and prepare it for deployement using best practices (e.g. linters). 6 | 7 | - build all the sections (introduction, works section, About me and contact section) of the mobile and Desktop version of my portfoliowebsite using the template I have chosen in Figma. 8 | 9 | ## Built With 10 | 11 | - HTML 12 | - CSS 13 | - GitHubflow 14 | 15 | ## Live Demo 16 | 17 | [You can check the live demo here](https://christianbiring1.github.io/My_Portfolio/) 18 | 19 | ### Prerequisites 20 | 21 | - Have completed the previous activities. 22 | 23 | ## Set up 24 | 25 | - git clone git@github.com:christianbiring1/portfolio-mobile-version.git 26 | - cd portfolio-mobile-version 27 | - code 28 | 29 | ## Author 30 | 31 | 👤 **Christian biringanine** 32 | 33 | - GitHub: [@christianbiring1](https://github.com/christianbiring1) 34 | - Twitter: [@christianbirin4](https://twitter.com/christianbirin4) 35 | - LinkedIn: [Christian Biringanine](https://linkedin.com/in/christian-biringanine-1833011a5/) 36 | 37 | ## 🤝 Contributing 38 | 39 | Contributions, issues, and feature requests are welcome! 40 | 41 | Feel free to check the [issues page](../../issues/). 42 | 43 | ## Show your support 44 | 45 | Give a ⭐️ if you like this project! 46 | 47 | ## Acknowledgments 48 | 49 | - Hat tip to anyone who will take a glance to this project 50 | 51 | ## 📝 License 52 | 53 | This project is [MIT](./MIT.md) licensed. 54 | -------------------------------------------------------------------------------- /form.js: -------------------------------------------------------------------------------- 1 | // Constraint form validation API 2 | 3 | const form = document.querySelector('.form-contact'); 4 | const userName = document.querySelector('#name') 5 | const userEmail = document.querySelector('#email'); 6 | const userMessage = document.querySelector('#msg'); 7 | const message = document.querySelector('small'); 8 | 9 | // Get the value of the inputs 10 | 11 | form.addEventListener('submit', (e) => { 12 | const client = userName.value; 13 | const emailAddress = userEmail.value; 14 | const interestMessage = userMessage.value; 15 | const errorMessage = []; 16 | 17 | if (emailAddress === '') { 18 | errorMessage.push('The email value must not be empty'); 19 | message.innerHTML = errorMessage.join(', '); 20 | } 21 | if (emailAddress !== emailAddress.toLowerCase()) { 22 | errorMessage.push('The email must be in lower case'); 23 | message.innerHTML = errorMessage.join(', '); 24 | } 25 | if (errorMessage.length > 0) { 26 | e.preventDefault(); 27 | message.classList.add('error'); 28 | message.innerHTML = errorMessage.join(', '); 29 | } 30 | }); 31 | /* local storage */ 32 | // set Item in the local storage 33 | form.addEventListener('input', () => { 34 | const data = { 35 | 'name': userName.value, 36 | 'email': userEmail.value, 37 | 'message': userMessage.value, 38 | } 39 | const dataStored = JSON.stringify(data); 40 | localStorage.setItem('data', dataStored); 41 | location.reload; 42 | }); 43 | 44 | // Get item from the local storage. 45 | window.addEventListener('load', () => { 46 | const getData = JSON.parse(localStorage.getItem('data')); 47 | userName.value = getData.name; 48 | userEmail.value = getData.email; 49 | userMessage.value = getData.message; 50 | }); -------------------------------------------------------------------------------- /desktop-img/contactformbackgroundshapes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-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 | -------------------------------------------------------------------------------- /mob-img/thumb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /mob-img/header-shapes mobile@2x.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /desktop-img/Headerbg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /README copy.md: -------------------------------------------------------------------------------- 1 | # HTML & CSS3 & JavaScript Course 2 | 3 | If you are not familiar with linters, read [root level README](../README.md). 4 | 5 | ## Set-up GitHub Actions 6 | 7 | Please do the following **steps in this order**: 8 | 9 | 1. In the first commit of your feature branch create a `.github/workflows` folder and add a copy of [`.github/workflows/linters.yml`](.github/workflows/linters.yml) to that folder. 10 | - **Remember** to use the file linked above 11 | - **Remember** that `.github` folder starts with a dot. 12 | 2. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 13 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 14 | 3. When you open your first pull request you should see the result of the GitHub actions checks: 15 | 16 | ![gh actions checks](../assets/images/gh-actions-html-css-checks.png) 17 | 18 | Click on the `Details` link of each action to see the full output and the errors that need to be fixed: 19 | 20 | ![gh actions failing checks](../assets/images/gh-actions-html-css-failing-checks.png) 21 | 22 | ## Set-up linters in your local env 23 | 24 | **Note**: The `npm` package manager is going to create a `node_modules` directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a [`.gitignore`](https://git-scm.com/docs/gitignore) file and add `node_modules` to it: 25 | 26 | ``` 27 | # .gitignore 28 | node_modules/ 29 | ``` 30 | 31 | ### [Lighthouse](https://developers.google.com/web/tools/lighthouse) 32 | 33 | An open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more. 34 | 35 | You can get the Lighthouse report by any of the following ways: 36 | 37 | - [In Chrome DevTools](https://developers.google.com/web/tools/lighthouse#devtools) 38 | - [From the command line](https://developers.google.com/web/tools/lighthouse#cli) 39 | - [As a Node module](https://developers.google.com/web/tools/lighthouse#programmatic) 40 | - [From a web UI](https://developers.google.com/web/tools/lighthouse#psi) 41 | 42 | To access the report generated by Lighthouse on your pull request, click the `Details` link for the `Linters/Lighthouse` check and you will see the full output of the action: 43 | 44 | ![lighthouse report](../assets/images/lighthouse-report.png) 45 | 46 | ### [Webhint](https://webhint.io/) 47 | 48 | A customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors. 49 | 50 | **NOTE:** If you are running on Windows, you need to initialize npm to create `package.json` file. 51 | ``` 52 | npm init -y 53 | ``` 54 | 55 | 1. Run 56 | ``` 57 | npm install --save-dev hint@6.x 58 | ``` 59 | *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).* 60 | 2. Copy [.hintrc](.hintrc) to the root directory of your project. 61 | 3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 62 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 63 | 4. Run 64 | ``` 65 | npx hint . 66 | ``` 67 | 5. Fix validation errors. 68 | 69 | ### [Stylelint](https://stylelint.io/) 70 | 71 | A mighty, modern linter that helps you avoid errors and enforce conventions in your styles. 72 | 73 | 1. Run 74 | 75 | ``` 76 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 77 | ``` 78 | 79 | *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).* 80 | 81 | 2. Copy [.stylelintrc.json](./.stylelintrc.json) to the root directory of your project. 82 | 3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 83 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 84 | 4. Run `npx stylelint "**/*.{css,scss}"` on the root of your directory of your project. 85 | 5. Fix linter errors. 86 | 6. **IMPORTANT NOTE**: feel free to research [auto-correct options for Stylelint](https://stylelint.io/user-guide/cli#autofixing-errors) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code! 87 | 88 | ### [ESLint](https://eslint.org/) 89 | 90 | 1. Run 91 | ``` 92 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 93 | ``` 94 | *not sure how to use npm? Read [this](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).* 95 | 96 | 2. Copy [.eslintrc.json](./.eslintrc.json) to the root directory of your project. 97 | 3. **Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.** 98 | - If you think that change is necessary - open a [Pull Request in this repository](../README.md#contributing) and let your code reviewer know about it. 99 | 4. Run `npx eslint .` on the root of your directory of your project. 100 | 5. Fix linter errors. 101 | 6. **IMPORTANT NOTE**: feel free to research [auto-correct options for Stylelint](https://stylelint.io/user-guide/cli#autofixing-errors) if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code! 102 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | 19 | 20 | 21 | 25 | 29 | Portfolio 30 | 31 | 32 | 33 |
34 | 49 |
50 |
51 |
52 |
53 |

I'm Christian
Glad to see
you!

54 |

I'm Christian
Glad to see you!

55 |

56 | I'm a software developer! I can help you build a product, feature or 57 | website. Look through some of my work and experience! If you like 58 | what you see and have a project you need coded, don't hesitate to 59 | contact me. 60 |

61 | 91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |

About
Myself

99 |

100 | Hello I'm a software developer! I can help you build a product , 101 | feature or website Look through some of my work and experience! If 102 | you like what you see and have a project you need coded, don't 103 | hestiate to contact me. 104 |

105 | 135 | 136 |
137 |
138 |
    139 |
  • 140 |

    141 | languages 142 | dropdown-icone 147 |

    148 |
      149 |
    • 150 | js-icone 152 | JavaScript 153 | 154 |
      • 155 |
    • 156 | html-icone 162 | HTML 164 |
      • 165 |
    • 166 | CSS-icone 172 | CSS 174 |
      • 175 |
    176 |
    • 177 |
  • 178 |

    179 | Frameworks 180 | dropdown-icone 185 |

    186 |
    • 187 |
  • 188 |

    189 | Skills 190 | dropdown-icone 195 |

    196 |
    • 197 |
198 |
199 |
200 |
201 |

Contact me

202 |

203 | If you have an application you are interested in developing, a feature 204 | that you need built or a project that needs coding. I'd love to help 205 | with it 206 |

207 |
212 |
220 |
227 |
235 | 236 | 237 |
238 |
239 |
240 | 241 | 242 | 243 | 244 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | /* mobile menu */ 2 | const hamburger = document.querySelector('.hamburger'); 3 | const logo = document.querySelector('.desk-logo'); 4 | const navMenu = document.querySelector('.nav-menu'); 5 | const navBar = document.querySelector('.desk-nav'); 6 | const navLink = document.querySelectorAll('.desk-nav a'); 7 | 8 | hamburger.addEventListener('click', () => { 9 | hamburger.classList.toggle('active'); 10 | logo.classList.toggle('active'); 11 | navMenu.classList.toggle('active'); 12 | navBar.classList.toggle('active'); 13 | navLink.forEach((link) => link.classList.toggle('active')); 14 | }); 15 | 16 | navLink.forEach((link) => link.addEventListener('click', () => { 17 | hamburger.classList.remove('active'); 18 | logo.classList.remove('active'); 19 | navMenu.classList.remove('active'); 20 | navBar.classList.remove('active'); 21 | navLink.forEach((link) => link.classList.remove('active')); 22 | })); 23 | 24 | /* mobile popup window */ 25 | /* Generate card element */ 26 | 27 | const projectInfo1 = [ 28 | { 29 | featureImage: './mob-img/capston1.png', 30 | classMobileImg: 'work-img1', 31 | classDeskImg: 'desktop-work1', 32 | featureImageDesk: './desktop-img/capston1.png', 33 | projectName: 'Genuine Charity', 34 | caption: 'Genuine Charity', 35 | feature: { 36 | title: 'CANOPY', 37 | domain: 'backEndDev', 38 | year: 2015, 39 | }, 40 | projectDescription: 41 | 'A daily selection of privately personalized reads; no accounts or sign-ups required.', 42 | technologies: ['html', 'css', 'javaScript', 'gitHub', 'Ruby', 'Bootstrap'], 43 | popUpDescription: `In this capstone project I have built is based on an online website for a conference. We have been provided some design guidelines to create the website, but I have personalized the content, i.e., instead of a conference I have built a website for geniune charity and care.`, 44 | liveDemo: `https://christianbiring1.github.io/Capstone_project-module1/`, 45 | sourceCode: `https://github.com/christianbiring1/Capstone_project-module1`, 46 | }, 47 | 48 | { 49 | featureImage: './mob-img/SnapshootPortfolio3.png', 50 | classMobileImg: 'work-img3', 51 | classDeskImg: 'desktop-work3', 52 | featureImageDesk: './desktop-img/SnapshootPortfolio3.png', 53 | projectName: 'Facebook 360', 54 | caption: 'Tonic', 55 | feature: { 56 | title: 'CANOPY', 57 | domain: 'backEndDev', 58 | year: 2015, 59 | }, 60 | projectDescription: 61 | 'A daily selection of privately personalized reads; no accounts or sign-ups required.', 62 | technologies: ['html', 'css', 'javaScript', 'gitHub', 'Ruby', 'Bootstrap'], 63 | popUpDescription: `Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modidicta suscipit iusto, iste earum quod ad optio aliquid, voluptatum 64 | aspernatur repellendus! Non quidem, id adipisci aut temporibus fuga dolor hic delectus numquam. Quo eligendi nesciunt reprehenderit voluptatem iure impedit tenetur nisi, officia, 65 | numquam minima voluptatibus? Obcaecati maxime laudantium nihil beatae?`, 66 | liveDemo: `https://christianbiring1.github.io/Capstone_project-module1/`, 67 | sourceCode: `https://github.com/christianbiring1/Capstone_project-module1`, 68 | }, 69 | ]; 70 | 71 | const projectInfo2 = [ 72 | { 73 | featureImage: './mob-img/SnapshootPortfolio2.png', 74 | classMobileImg: 'work-img2', 75 | classDeskImg: 'desktop-work2', 76 | featureImageDesk: './desktop-img/SnapshootPortfolio2.png', 77 | projectName: 'Multi-Post Stories', 78 | caption: 'Multi-Post Stories', 79 | feature: { 80 | title: 'CANOPY', 81 | domain: 'backEndDev', 82 | year: 2015, 83 | }, 84 | projectDescription: 85 | 'A daily selection of privately personalized reads; no accounts or sign-ups required.', 86 | technologies: ['html', 'css', 'javaScript', 'gitHub', 'Ruby', 'Bootstrap'], 87 | popUpDescription: `Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modidicta suscipit iusto, iste earum quod ad optio aliquid, voluptatum 88 | aspernatur repellendus! Non quidem, id adipisci aut temporibus fuga dolor hic delectus numquam. Quo eligendi nesciunt reprehenderit voluptatem iure impedit tenetur nisi, officia, 89 | numquam minima voluptatibus? Obcaecati maxime laudantium nihil beatae?`, 90 | liveDemo: `https://christianbiring1.github.io/Capstone_project-module1/`, 91 | sourceCode: `https://github.com/christianbiring1/Capstone_project-module1`, 92 | }, 93 | 94 | { 95 | featureImage: './mob-img/SnapshootPortfolio4.png', 96 | classMobileImg: 'work-img4', 97 | classDeskImg: 'desktop-work4', 98 | featureImageDesk: './desktop-img/SnapshootPortfolio4.png', 99 | projectName: 'Uber Navigation', 100 | caption: 'Multi-Post Stories', 101 | feature: { 102 | title: 'CANOPY', 103 | domain: 'backEndDev', 104 | year: 2015, 105 | }, 106 | projectDescription: 107 | 'A daily selection of privately personalized reads; no accounts or sign-ups required.', 108 | technologies: ['html', 'css', 'javaScript', 'gitHub', 'Ruby', 'Bootstrap'], 109 | popUpDescription: `Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modidicta suscipit iusto, iste earum quod ad optio aliquid, voluptatum 110 | aspernatur repellendus! Non quidem, id adipisci aut temporibus fuga dolor hic delectus numquam. Quo eligendi nesciunt reprehenderit voluptatem iure impedit tenetur nisi, officia, 111 | numquam minima voluptatibus? Obcaecati maxime laudantium nihil beatae?`, 112 | liveDemo: `https://christianbiring1.github.io/Capstone_project-module1/`, 113 | sourceCode: `https://github.com/christianbiring1/Capstone_project-module1`, 114 | }, 115 | ]; 116 | 117 | /* Grab the container i.e work-section-container */ 118 | 119 | const workSectionContainer = document.querySelector('.work-section'); 120 | 121 | /* Generate the work-section content of card 1 & 3 */ 122 | 123 | projectInfo1.forEach((work) => { 124 | const layout = document.createElement('article'); 125 | const layoutClass = ['card-work', 'card-work1']; 126 | layout.classList.add(layoutClass[0]); 127 | layout.classList.add(layoutClass[1]); 128 | layout.innerHTML = `
129 | 130 |

${work.caption}

131 |
132 |
133 |

${work.projectName}

134 | 139 |
140 |

${work.projectDescription}

141 |
142 | 147 |
148 | 149 |
`; 150 | workSectionContainer.appendChild(layout); 151 | /* Generation of the popUp container */ 152 | /* Generate popUp window */ 153 | 154 | const popLayer = document.querySelector('.layer'); 155 | const popUpWindow = document.querySelector('.popup-window'); 156 | const sample = document.querySelectorAll(`.${work.classDeskImg}`); 157 | sample.forEach((image) => { 158 | image.addEventListener('click', () => { 159 | work.featureImageDesk = image.getAttribute('src'); 160 | popUpWindow.innerHTML = `

${work.projectName}

161 |
162 | 167 | 168 |
169 | 170 |
171 |

${work.popUpDescription}

172 |
173 |
174 |
    175 |
  • ${work.technologies[0]}
    • 176 |
  • ${work.technologies[1]}
    • 177 |
  • ${work.technologies[2]}
    • 178 |
179 |
    180 |
  • ${work.technologies[3]}
    • 181 |
  • ${work.technologies[4]}
    • 182 |
  • ${work.technologies[5]}
    • 183 |
      184 |
185 |
186 |
188 | 190 |
191 |
192 |
`; 193 | popLayer.appendChild(popUpWindow); 194 | popUpWindow.classList.toggle('active'); 195 | popLayer.classList.toggle('active'); 196 | const closeModel = document.querySelector('.close'); 197 | closeModel.addEventListener('click', () => { 198 | popUpWindow.classList.remove('active'); 199 | popLayer.classList.remove('active'); 200 | }); 201 | }); 202 | }); 203 | }); 204 | 205 | /* Generate the work-section content of card 2 & 4 */ 206 | 207 | projectInfo2.forEach((work) => { 208 | const secondLayout = document.createElement('article'); 209 | const layoutClass = ['card-work', 'card-work2']; 210 | secondLayout.classList.add(layoutClass[0]); 211 | secondLayout.classList.add(layoutClass[1]); 212 | secondLayout.innerHTML = `
213 | 214 |

${work.caption}

215 |
216 |
217 |

${work.projectName}

218 | 223 |
224 |

${work.projectDescription}

225 |
226 | 231 |
232 | 233 |
`; 234 | workSectionContainer.appendChild(secondLayout); 235 | 236 | /* Generation of the popUp container */ 237 | /* Generate popUp window */ 238 | const popLayer = document.querySelector('.layer'); 239 | const popUpWindow = document.querySelector('.popup-window'); 240 | 241 | /* Poping Up The Window */ 242 | const sample = document.querySelectorAll(`.${work.classDeskImg}`); 243 | sample.forEach((image) => { 244 | image.addEventListener('click', () => { 245 | popUpWindow.innerHTML = `

${work.projectName}

246 |
247 | 252 | 253 |
254 | 255 |
256 |

${work.popUpDescription}

257 |
258 |
259 |
    260 |
  • ${work.technologies[0]}
    • 261 |
  • ${work.technologies[1]}
    • 262 |
  • ${work.technologies[2]}
    • 263 |
264 |
    265 |
  • ${work.technologies[3]}
    • 266 |
  • ${work.technologies[4]}
    • 267 |
  • ${work.technologies[5]}
    • 268 |
      269 |
270 |
271 | 273 | 275 |
276 |
277 |
`; 278 | 279 | popLayer.appendChild(popUpWindow); 280 | 281 | popUpWindow.classList.toggle('active'); 282 | popLayer.classList.toggle('active'); 283 | const closeModel = document.querySelector('.close'); 284 | closeModel.addEventListener('click', () => { 285 | popUpWindow.classList.remove('active'); 286 | popLayer.classList.remove('active'); 287 | }); 288 | }); 289 | }); 290 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | font-family: "Poppins", sans-serif; 8 | } 9 | 10 | html { 11 | scroll-behavior: smooth; 12 | } 13 | 14 | ::-webkit-scrollbar { 15 | width: 10px; 16 | } 17 | 18 | ::-webkit-scrollbar-track { 19 | border-radius: 5px; 20 | box-shadow: inset 0 0 10px transparent; 21 | } 22 | 23 | ::-webkit-scrollbar-thumb { 24 | border-radius: 5px; 25 | background-color: #2230d2; 26 | } 27 | 28 | body { 29 | /* position: relative; */ 30 | height: 100vh; 31 | overflow-x: hidden; 32 | } 33 | 34 | header { 35 | margin: 1rem; 36 | vertical-align: middle; 37 | overflow: hidden; 38 | } 39 | 40 | header nav { 41 | display: flex; 42 | justify-content: space-between; 43 | width: 100%; 44 | } 45 | 46 | header .logo { 47 | color: #6070ff; 48 | height: 20px; 49 | left: 12px; 50 | text-decoration: none; 51 | font-weight: 700; 52 | text-transform: capitalize; 53 | } 54 | 55 | .desk-logo.active { 56 | visibility: hidden; 57 | } 58 | 59 | .hamburger { 60 | display: block; 61 | cursor: pointer; 62 | } 63 | 64 | .bar { 65 | display: block; 66 | width: 25px; 67 | height: 3px; 68 | margin: 5px auto; 69 | background-color: #6070ff; 70 | } 71 | 72 | .hamburger.active { 73 | margin: 20px; 74 | } 75 | 76 | .hamburger.active .bar:nth-child(2) { 77 | opacity: 0; 78 | } 79 | 80 | .hamburger.active .bar:nth-child(1) { 81 | transform: translateY(8px) rotate(45deg); 82 | background-color: #fff; 83 | } 84 | 85 | .hamburger.active .bar:nth-child(3) { 86 | transform: translateY(-8px) rotate(-45deg); 87 | background-color: #fff; 88 | } 89 | 90 | .nav-menu.active { 91 | position: fixed; 92 | left: 0; 93 | top: 0; 94 | height: 4660px; 95 | width: 100%; 96 | background-color: #6070ffd9; 97 | z-index: 1; 98 | } 99 | 100 | .desk-nav.active { 101 | position: absolute; 102 | display: flex; 103 | flex-direction: column; 104 | justify-content: flex-start; 105 | margin: 30px 10px; 106 | } 107 | 108 | .home-page.active, 109 | .about-page.active, 110 | .contact-page.active { 111 | text-decoration: none; 112 | display: inline-block; 113 | font-size: 2rem; 114 | color: #fff; 115 | margin: 10px 20px; 116 | font-weight: 600; 117 | } 118 | 119 | .layer { 120 | display: none; 121 | } 122 | 123 | .layer.active { 124 | display: flex; 125 | position: absolute; 126 | justify-content: center; 127 | align-items: center; 128 | top: -200px; 129 | left: 0; 130 | bottom: 0; 131 | right: 0; 132 | background-color: rgba(193, 199, 208, 0.5); 133 | z-index: 5; 134 | overflow-y: scroll; 135 | } 136 | 137 | .popup-container, 138 | .popup-window { 139 | display: none; 140 | } 141 | 142 | .popup-window.active { 143 | display: block; 144 | width: 90%; 145 | margin: 10px auto; 146 | background-color: #fff; 147 | border-radius: 20px; 148 | z-index: 10; 149 | position: fixed; 150 | top: 0; 151 | bottom: 0; 152 | overflow-y: auto; 153 | left: 0; 154 | right: 0; 155 | } 156 | 157 | .popup-window.active::-webkit-scrollbar { 158 | width: 10px; 159 | } 160 | 161 | .popup-window.active::-webkit-scrollbar-thumb { 162 | background: linear-gradient(transparent, #3e4141); 163 | border-radius: 6px; 164 | } 165 | 166 | .popup-window::-webkit-scrollbar-thumb:hover { 167 | background: linear-gradient(transparent, #8a9dff); 168 | } 169 | 170 | .popup-window h2 { 171 | padding: 10px 15px 0; 172 | } 173 | 174 | .popup-window .img { 175 | width: 70%; 176 | margin: 0 auto; 177 | display: block; 178 | } 179 | 180 | .popup-window .header { 181 | display: flex; 182 | justify-content: space-between; 183 | align-items: center; 184 | margin: 20px 20px 0; 185 | } 186 | 187 | .header .feature { 188 | display: flex; 189 | justify-content: space-between; 190 | align-items: center; 191 | position: relative; 192 | top: -25px; 193 | left: -5px; 194 | max-width: 100px; 195 | } 196 | 197 | .feature li { 198 | list-style: none; 199 | margin: 0 5px; 200 | } 201 | 202 | .feature .tech { 203 | color: #6b778c; 204 | line-height: 24px; 205 | font-weight: 400; 206 | position: relative; 207 | } 208 | 209 | .feature .tech::before { 210 | position: absolute; 211 | content: ""; 212 | width: 8px; 213 | height: 8px; 214 | background: #c1c7d0; 215 | border-radius: 50%; 216 | left: -8px; 217 | top: 6px; 218 | } 219 | 220 | .feature .tech::after { 221 | position: absolute; 222 | content: ""; 223 | width: 8px; 224 | height: 8px; 225 | background: #c1c7d0; 226 | border-radius: 50%; 227 | right: -8px; 228 | top: 6px; 229 | } 230 | 231 | .popup-window .close { 232 | outline: none; 233 | background-color: transparent; 234 | color: #67798e; 235 | border: none; 236 | font-size: 2rem; 237 | position: relative; 238 | top: -60px; 239 | cursor: pointer; 240 | } 241 | 242 | .popup-body { 243 | display: flex; 244 | flex-direction: column; 245 | margin: 0 auto; 246 | padding: 0 10px; 247 | } 248 | 249 | .popup-body .details { 250 | color: #344563; 251 | font-weight: 400; 252 | font-size: 14px; 253 | line-height: 24px; 254 | } 255 | 256 | .popup-languages ul { 257 | display: flex; 258 | justify-content: flex-start; 259 | width: 60%; 260 | gap: 10px; 261 | padding: 10px; 262 | } 263 | 264 | .popup-languages .supplement-desk { 265 | display: none; 266 | } 267 | 268 | .popup-languages li { 269 | text-align: center; 270 | list-style-type: none; 271 | color: #6070ff; 272 | font-weight: 500; 273 | font-size: 12px; 274 | letter-spacing: 0.05em; 275 | border: 1px solid transparent; 276 | height: 24px; 277 | background: #ebebff; 278 | border-radius: 10px; 279 | } 280 | 281 | .popup-btn { 282 | display: flex; 283 | gap: 15px; 284 | flex-direction: row; 285 | font-size: 0.9rem; 286 | } 287 | 288 | .popup-btn a { 289 | text-decoration: none; 290 | color: #6070ff; 291 | } 292 | 293 | .live, 294 | .source { 295 | border: 1px solid #6070ff; 296 | color: #396df2; 297 | cursor: pointer; 298 | font-weight: 500; 299 | text-align: center; 300 | font-size: 17px; 301 | text-transform: capitalize; 302 | padding: 0.5em; 303 | border-radius: 10px; 304 | } 305 | 306 | .wrapper { 307 | position: relative; 308 | height: auto; 309 | left: 0; 310 | right: 0; 311 | width: 100%; 312 | margin: 0 auto; 313 | background-color: #e5e5e5; 314 | } 315 | 316 | .first-section { 317 | width: 100%; 318 | height: auto; 319 | background-image: url("mob-img/header-shapes\ mobile@2x.svg"); 320 | background-size: cover; 321 | background-repeat: no-repeat; 322 | background-color: #fff; 323 | padding-bottom: 10px; 324 | } 325 | 326 | .first-section-container { 327 | margin: 30px 20px; 328 | width: 100%; 329 | } 330 | 331 | .primary-text { 332 | font-weight: 700; 333 | font-size: 40px; 334 | line-height: 52px; 335 | color: #172b4d; 336 | padding: 5rem 0 10px; 337 | } 338 | 339 | .primary-text-desk { 340 | display: none; 341 | } 342 | 343 | .intro { 344 | color: #344563; 345 | line-height: 24px; 346 | font-weight: 400; 347 | font-size: 16px; 348 | width: 95%; 349 | } 350 | 351 | .social { 352 | margin-top: 12px; 353 | } 354 | 355 | .social h3 { 356 | text-transform: uppercase; 357 | font-weight: 500; 358 | color: #7f8cff; 359 | padding-bottom: 15px; 360 | } 361 | 362 | .social ul { 363 | display: flex; 364 | } 365 | 366 | .social ul li { 367 | list-style: none; 368 | margin-left: -10px; 369 | } 370 | 371 | .desktop-work1, 372 | .desktop-work2, 373 | .desktop-work3, 374 | .desktop-work4 { 375 | display: block; 376 | width: 90%; 377 | } 378 | 379 | .card-work button { 380 | color: #396df2; 381 | text-decoration: none; 382 | letter-spacing: 0.03em; 383 | font-weight: 500; 384 | font-size: 17px; 385 | text-transform: capitalize; 386 | border: 1px solid #6070ff; 387 | padding: 0.5em; 388 | border-radius: 10px; 389 | position: relative; 390 | left: 0; 391 | } 392 | 393 | .card-work button img { 394 | opacity: 0; 395 | position: absolute; 396 | height: 100%; 397 | top: 0; 398 | right: 0; 399 | border-radius: 10px; 400 | width: 100%; 401 | } 402 | 403 | .contact button { 404 | width: 140px; 405 | height: 48px; 406 | padding: 12px 16px 30px 16px; 407 | border-radius: 8px; 408 | line-height: 24px; 409 | font-size: 17px; 410 | text-align: center; 411 | letter-spacing: 3%; 412 | color: #6070ff; 413 | font-weight: 500; 414 | border: 1px solid #6070ff; 415 | margin: 15px 0 20px; 416 | } 417 | 418 | .card-work button:hover { 419 | color: #fff; 420 | background: #6070ff; 421 | box-shadow: 0 8px 16px #4053fc3d; 422 | } 423 | 424 | .card-work button:active { 425 | background: #2230d2; 426 | color: #fff; 427 | } 428 | 429 | .card-work button:disabled { 430 | color: #5e6c84; 431 | background: #fff; 432 | border-color: #5e6c84; 433 | } 434 | 435 | .social ul li a { 436 | margin: 15px; 437 | } 438 | 439 | .work-section { 440 | display: grid; 441 | background-color: #e5e5e5; 442 | padding: 30px 0 100px; 443 | } 444 | 445 | .work-section h2 { 446 | flex: none; 447 | font-weight: 700; 448 | font-size: 32px; 449 | line-height: 44px; 450 | color: #172b4d; 451 | margin: 12px 0; 452 | text-align: start; 453 | } 454 | 455 | .card-work { 456 | display: grid; 457 | grid-template-rows: auto; 458 | padding: 16px; 459 | height: auto; 460 | border: 1px solid #dfe1e6; 461 | border-radius: 16px; 462 | background-color: #fff; 463 | width: 100%; 464 | margin: -2px auto; 465 | } 466 | 467 | .type { 468 | display: flex; 469 | flex-direction: row; 470 | justify-content: space-between; 471 | width: 80%; 472 | } 473 | 474 | .type h2 { 475 | display: none; 476 | } 477 | 478 | .type ul { 479 | display: flex; 480 | justify-content: space-between; 481 | width: 236px; 482 | position: relative; 483 | left: 0; 484 | } 485 | 486 | .type ul li { 487 | list-style-type: none; 488 | font-size: 13px; 489 | font-weight: 600; 490 | } 491 | 492 | .type .title { 493 | line-height: 16px; 494 | color: #344563; 495 | text-transform: uppercase; 496 | width: 55px; 497 | } 498 | 499 | .domain { 500 | color: #7a869a; 501 | line-height: 16px; 502 | text-transform: capitalize; 503 | width: 88px; 504 | left: -22px; 505 | position: relative; 506 | } 507 | 508 | .domain::before { 509 | position: absolute; 510 | content: ""; 511 | width: 8px; 512 | height: 8px; 513 | background: #c1c7d0; 514 | border-radius: 50%; 515 | left: -9px; 516 | top: 3px; 517 | } 518 | 519 | .domain::after { 520 | position: absolute; 521 | content: ""; 522 | width: 8px; 523 | height: 8px; 524 | background: #c1c7d0; 525 | border-radius: 50%; 526 | right: -6px; 527 | top: 4px; 528 | } 529 | 530 | .feature .name { 531 | position: relative; 532 | font-weight: 500; 533 | } 534 | 535 | .year { 536 | width: 29px; 537 | height: 16px; 538 | position: relative; 539 | left: -44px; 540 | line-height: 16px; 541 | } 542 | 543 | .description { 544 | position: relative; 545 | font-size: 15px; 546 | color: #344563; 547 | width: 295px; 548 | height: 76px; 549 | top: 20px; 550 | } 551 | 552 | .languages { 553 | margin-left: -10px; 554 | } 555 | 556 | .languages ul { 557 | display: flex; 558 | justify-content: flex-start; 559 | padding: 20px 0 10px; 560 | margin: 15px 0; 561 | } 562 | 563 | .languages ul li { 564 | color: #6070ff; 565 | font-weight: 500; 566 | font-size: 12px; 567 | letter-spacing: 0.05em; 568 | list-style-type: none; 569 | padding: 0 10px; 570 | } 571 | 572 | .html { 573 | border: 1px solid transparent; 574 | width: 53px; 575 | height: 24px; 576 | padding: 0.5em; 577 | background: #ebebff; 578 | border-radius: 20px; 579 | } 580 | 581 | .css { 582 | border: 1px solid transparent; 583 | width: 45px; 584 | height: 24px; 585 | background: #ebebff; 586 | border-radius: 20px; 587 | padding: 0.5em; 588 | } 589 | 590 | .js { 591 | width: 89px; 592 | border: 1px solid transparent; 593 | height: 24px; 594 | background: #ebebff; 595 | border-radius: 20px; 596 | padding: 0.5em; 597 | } 598 | 599 | .about { 600 | border: 1px solid #fff; 601 | background-color: #fff; 602 | border-top-right-radius: 80px; 603 | padding: 100px 0 20px; 604 | } 605 | 606 | .about .left, 607 | .mastering { 608 | margin: 0 20px; 609 | } 610 | 611 | .about h2 { 612 | font-size: 40px; 613 | line-height: 52px; 614 | color: #172b4d; 615 | margin-bottom: 12px; 616 | } 617 | 618 | .content { 619 | color: #344563; 620 | line-height: 24px; 621 | font-weight: 400; 622 | } 623 | 624 | .resume { 625 | text-decoration: none; 626 | font-weight: 500; 627 | font-size: 17px; 628 | line-height: 24px; 629 | color: #396df2; 630 | letter-spacing: 0.05em; 631 | border: 1px solid #6070ff; 632 | border-radius: 10px; 633 | padding: 0.6em; 634 | display: inline-block; 635 | margin: 15px 0; 636 | animation: wiggle 2s linear infinite; 637 | } 638 | 639 | .resume:hover { 640 | color: #fff; 641 | background: #6070ff; 642 | box-shadow: 0 8px 16px #4053fc3d; 643 | } 644 | 645 | .resume:active { 646 | background: #2230d2; 647 | color: #fff; 648 | } 649 | 650 | .resume:disabled { 651 | color: #5e6c84; 652 | background: #fff; 653 | border-color: #5e6c84; 654 | } 655 | 656 | .mastering .icone { 657 | display: grid; 658 | grid-template-columns: 1fr 1fr; 659 | align-content: center; 660 | background-color: #f7f7f9; 661 | margin: 5px 0; 662 | padding: 5px 0; 663 | } 664 | 665 | .mastering .icone span { 666 | display: inline; 667 | margin: 0; 668 | position: relative; 669 | } 670 | 671 | .label { 672 | position: relative; 673 | left: -100px; 674 | top: 13px; 675 | color: #253858; 676 | } 677 | 678 | .mastering p { 679 | font-weight: 500; 680 | font-size: 20px; 681 | } 682 | 683 | .mastering ul li { 684 | list-style-type: none; 685 | padding-bottom: 10px; 686 | } 687 | 688 | .mastering li p { 689 | margin: 10px 0; 690 | } 691 | 692 | .prog-fram, 693 | .prog-skills { 694 | position: relative; 695 | } 696 | 697 | .prog-fram::after, 698 | .prog-skills::after { 699 | content: ""; 700 | position: absolute; 701 | width: 90%; 702 | border-bottom: 1px solid #dfe1e6; 703 | top: 20px; 704 | left: 10px; 705 | } 706 | 707 | .contact h2 { 708 | color: #fff; 709 | text-align: center; 710 | height: 56px; 711 | font-size: 40px; 712 | line-height: 56px; 713 | margin: 20px 0 20px; 714 | } 715 | 716 | .interest { 717 | color: #ebebff; 718 | text-align: center; 719 | font-size: 20px; 720 | line-height: 28px; 721 | margin: 0 auto 25px; 722 | } 723 | 724 | .contact { 725 | background-color: #6070ff; 726 | background-image: url("./mob-img/contact-form-background.png"); 727 | background-repeat: no-repeat; 728 | background-position-x: 350px; 729 | padding: 80px 10px 10px 10px; 730 | border-top-left-radius: 120px; 731 | text-align: center; 732 | } 733 | 734 | .contact-form { 735 | display: flex; 736 | flex-direction: column; 737 | justify-content: flex-start; 738 | } 739 | 740 | .contact input { 741 | border: 1px solid transparent; 742 | border-radius: 8px; 743 | background: #fff; 744 | font-size: 17px; 745 | line-height: 20px; 746 | color: #172b4d; 747 | width: 80%; 748 | margin-top: 20px; 749 | height: 48px; 750 | padding-left: 5px; 751 | } 752 | 753 | .contact textarea { 754 | width: 80%; 755 | border-radius: 8px; 756 | margin-top: 20px; 757 | padding: 10px; 758 | height: 200px; 759 | } 760 | 761 | .contact button:hover { 762 | background: #6070ff; 763 | box-shadow: 0 8px 16px #4053fc3d; 764 | color: #fff; 765 | border-color: #fff; 766 | } 767 | 768 | .contact button:active { 769 | background: #2230d2; 770 | color: #fff; 771 | } 772 | 773 | .contact button:disabled { 774 | color: #5e6c84; 775 | background: #fff; 776 | border-color: #5e6c84; 777 | } 778 | 779 | .frameworks, 780 | .skills { 781 | position: relative; 782 | top: -20px; 783 | padding: 5px; 784 | } 785 | 786 | .skills { 787 | top: -30px; 788 | } 789 | 790 | .drop-icone { 791 | width: 12px; 792 | color: #acb7c3; 793 | opacity: 0.5; 794 | float: right; 795 | position: relative; 796 | right: 20px; 797 | } 798 | 799 | .desk-nav { 800 | display: none; 801 | } 802 | 803 | .error { 804 | color: #f00; 805 | padding: 0.5rem; 806 | border-radius: 10px; 807 | font-weight: 400; 808 | } 809 | 810 | @media only screen and (min-width: 768px) { 811 | .home-page, 812 | .about-page, 813 | .contact-page { 814 | display: inline; 815 | text-decoration: none; 816 | } 817 | 818 | header { 819 | margin: 0; 820 | text-align: center; 821 | height: 100px; 822 | width: 100%; 823 | overflow-x: hidden; 824 | } 825 | 826 | header nav { 827 | position: fixed; 828 | z-index: 1; 829 | background-color: #fff; 830 | box-shadow: 0 3px 5px lightgray; 831 | height: 50px; 832 | align-items: center; 833 | } 834 | 835 | .hamburger { 836 | display: none; 837 | } 838 | 839 | .desk-nav { 840 | display: flex; 841 | align-items: center; 842 | height: 40px; 843 | position: relative; 844 | top: 0; 845 | right: 50px; 846 | } 847 | 848 | .desk-nav a { 849 | display: flex; 850 | align-items: center; 851 | padding: 10px 12px; 852 | color: #344563; 853 | font-weight: 500; 854 | } 855 | 856 | .desk-logo { 857 | display: flex; 858 | align-items: center; 859 | text-align: center; 860 | font-size: 18px; 861 | line-height: 20px; 862 | height: 40px; 863 | position: relative; 864 | top: 0; 865 | left: 0; 866 | margin-left: 100px; 867 | } 868 | 869 | .desk-logo a { 870 | animation-duration: 1.5s; 871 | animation-name: rotate; 872 | } 873 | 874 | @keyframes rotate { 875 | from { 876 | transform: rotate(0deg); 877 | } 878 | 879 | to { 880 | transform: rotate(360deg); 881 | } 882 | } 883 | 884 | .wrapper { 885 | top: 0; 886 | width: 100%; 887 | } 888 | 889 | .popup-window.active { 890 | width: 80%; 891 | } 892 | 893 | figcaption h2 { 894 | display: none; 895 | } 896 | 897 | .popup-window h2 { 898 | font-size: 2.5rem; 899 | } 900 | 901 | .popup-window .header { 902 | margin: 20px 30px; 903 | } 904 | 905 | .header .feature { 906 | width: 35%; 907 | top: -10px; 908 | } 909 | 910 | .domain { 911 | color: #6b778c; 912 | line-height: 24px; 913 | font-size: 18px; 914 | font-weight: 400; 915 | position: relative; 916 | width: 120px; 917 | top: -5px; 918 | left: -15px; 919 | } 920 | 921 | .popup-window .close { 922 | outline: none; 923 | background-color: transparent; 924 | color: #67798e; 925 | border: none; 926 | font-size: 2rem; 927 | position: relative; 928 | top: -60px; 929 | cursor: pointer; 930 | } 931 | 932 | .popup-body { 933 | display: flex; 934 | flex-direction: row; 935 | justify-content: space-between; 936 | margin: 0 auto; 937 | position: relative; 938 | top: 30px; 939 | width: 90%; 940 | } 941 | 942 | .popup-body .details { 943 | color: #344563; 944 | font-weight: 400; 945 | font-size: 16px; 946 | line-height: 24px; 947 | width: 70%; 948 | } 949 | 950 | .popup-languages ul { 951 | width: 60%; 952 | top: 10px; 953 | } 954 | 955 | .popup-languages .supplement-desk { 956 | display: flex; 957 | gap: 10px; 958 | padding: 10px 0 30px; 959 | } 960 | 961 | .popup-btn { 962 | top: 10px; 963 | gap: 5px; 964 | position: relative; 965 | } 966 | 967 | .first-section { 968 | height: 800px; 969 | background-image: url("desktop-img/Headerbg.svg"); 970 | background-size: contain; 971 | background-repeat: no-repeat; 972 | background-position-y: -20px; 973 | border-bottom-left-radius: 200px; 974 | } 975 | 976 | .first-section-container { 977 | width: 80%; 978 | height: auto; 979 | display: flex; 980 | flex-direction: column; 981 | position: relative; 982 | top: 200px; 983 | margin: 0 auto; 984 | } 985 | 986 | .primary-text { 987 | display: none; 988 | } 989 | 990 | .primary-text-desk { 991 | display: block; 992 | font-size: 48px; 993 | line-height: 60px; 994 | color: #091e42; 995 | height: 122px; 996 | letter-spacing: 0.37px; 997 | } 998 | 999 | .intro { 1000 | line-height: 28px; 1001 | font-size: 20px; 1002 | margin: 12px 0; 1003 | width: 88%; 1004 | } 1005 | 1006 | .work-section { 1007 | margin: 10px; 1008 | width: 100%; 1009 | text-align: center; 1010 | } 1011 | 1012 | .card-work1, 1013 | .card-work2 { 1014 | width: 80%; 1015 | height: auto; 1016 | display: grid; 1017 | grid-template-columns: 1fr 1fr; 1018 | column-gap: 35px; 1019 | align-content: center; 1020 | margin: 20px auto; 1021 | border-radius: 24px; 1022 | } 1023 | 1024 | .card-work1:hover, 1025 | .card-work2:hover { 1026 | border: 1px solid #a7aeff; 1027 | cursor: pointer; 1028 | } 1029 | 1030 | .work-img1, 1031 | .work-img2, 1032 | .work-img3, 1033 | .work-img4 { 1034 | display: none; 1035 | } 1036 | 1037 | .desktop-work1, 1038 | .desktop-work2, 1039 | .desktop-work3, 1040 | .desktop-work4 { 1041 | display: inline; 1042 | } 1043 | 1044 | .card-work1 img, 1045 | .card-work2 img { 1046 | width: 100%; 1047 | } 1048 | 1049 | .card-work1 img:hover, 1050 | .card-work2 img:hover { 1051 | transform: scale(1.01); 1052 | } 1053 | 1054 | .ordering { 1055 | order: -1; 1056 | } 1057 | 1058 | .type { 1059 | display: block; 1060 | } 1061 | 1062 | .type h2 { 1063 | display: block; 1064 | height: auto; 1065 | font-size: 40px; 1066 | line-height: 52px; 1067 | color: #091e42; 1068 | margin: 12px 0; 1069 | } 1070 | 1071 | .type ul { 1072 | width: 294px; 1073 | } 1074 | 1075 | .type .title { 1076 | font-size: 18px; 1077 | font-weight: 500; 1078 | width: 75px; 1079 | } 1080 | 1081 | .domain::before { 1082 | width: 10px; 1083 | height: 10px; 1084 | left: 0; 1085 | top: 6px; 1086 | } 1087 | 1088 | .domain::after { 1089 | width: 10px; 1090 | height: 10px; 1091 | right: 0; 1092 | top: 6px; 1093 | } 1094 | 1095 | .year { 1096 | font-size: 18px; 1097 | font-weight: 400; 1098 | color: #6b778c; 1099 | left: -33px; 1100 | } 1101 | 1102 | .description { 1103 | position: relative; 1104 | font-size: 15px; 1105 | color: #344563; 1106 | width: calc(90% - 8px); 1107 | height: 76px; 1108 | top: 15px; 1109 | text-align: justify; 1110 | } 1111 | 1112 | .languages-desk { 1113 | margin: 0; 1114 | padding: 0; 1115 | position: relative; 1116 | top: -15px; 1117 | left: -8px; 1118 | } 1119 | 1120 | .card-work button { 1121 | border-radius: 10px; 1122 | position: relative; 1123 | width: 124px; 1124 | left: -80px; 1125 | } 1126 | 1127 | .about { 1128 | margin: 0; 1129 | display: grid; 1130 | grid-template-columns: 1fr 0.7fr; 1131 | column-gap: 10px; 1132 | border-top-right-radius: 150px; 1133 | align-content: center; 1134 | } 1135 | 1136 | .left { 1137 | width: 447px; 1138 | height: 392px; 1139 | margin-left: 20px; 1140 | } 1141 | 1142 | @keyframes wiggle { 1143 | 0%, 1144 | 7% { 1145 | transform: rotate(0); 1146 | } 1147 | 1148 | 15% { 1149 | transform: rotateZ(-15deg); 1150 | } 1151 | 1152 | 20% { 1153 | transform: rotateZ(10deg); 1154 | } 1155 | 1156 | 25% { 1157 | transform: rotateZ(-10deg); 1158 | } 1159 | 1160 | 30% { 1161 | transform: rotateZ(6deg); 1162 | } 1163 | 1164 | 35% { 1165 | transform: rotateZ(-4deg); 1166 | } 1167 | 1168 | 40%, 1169 | 100% { 1170 | transform: rotateZ(0); 1171 | } 1172 | } 1173 | 1174 | .mastering { 1175 | width: 684px; 1176 | height: 360px; 1177 | } 1178 | 1179 | .flex-icone { 1180 | display: flex; 1181 | position: relative; 1182 | justify-content: space-around; 1183 | align-items: center; 1184 | top: 15px; 1185 | left: 10px; 1186 | width: 414px; 1187 | } 1188 | 1189 | .icone { 1190 | position: relative; 1191 | } 1192 | 1193 | .label { 1194 | position: relative; 1195 | left: -100px; 1196 | top: 60px; 1197 | } 1198 | 1199 | .fav-html { 1200 | position: relative; 1201 | left: -60px; 1202 | } 1203 | 1204 | .fav-css { 1205 | position: relative; 1206 | left: -60px; 1207 | } 1208 | 1209 | .frameworks { 1210 | position: relative; 1211 | top: 50px; 1212 | } 1213 | 1214 | .skills { 1215 | position: relative; 1216 | top: 40px; 1217 | } 1218 | 1219 | .prog-fram, 1220 | .prog-skills, 1221 | .prog-lang { 1222 | width: 90%; 1223 | } 1224 | 1225 | .prog-fram p, 1226 | .prog-skills p, 1227 | .prog-lang p { 1228 | color: #344563; 1229 | } 1230 | 1231 | .contact { 1232 | background-color: #6070ff; 1233 | background-image: url("./desktop-img/contactformbackgroundshapes.svg"); 1234 | background-repeat: no-repeat; 1235 | width: 100%; 1236 | height: 846px; 1237 | transform: matrix(1, 0, 0, 1, 0, 0); 1238 | padding-top: 120px; 1239 | } 1240 | 1241 | .interest { 1242 | margin: 0 auto 25px; 1243 | width: 569px; 1244 | height: 102px; 1245 | transition: all 0.5s; 1246 | } 1247 | 1248 | .interest:hover { 1249 | transform: translateX(-20px); 1250 | } 1251 | 1252 | .form-contact { 1253 | width: 447px; 1254 | height: 395px; 1255 | text-align: center; 1256 | position: relative; 1257 | margin: 0 auto; 1258 | } 1259 | 1260 | .contact input { 1261 | width: 447px; 1262 | border-radius: 2px; 1263 | padding: 15px; 1264 | } 1265 | 1266 | .contact textarea { 1267 | width: 447px; 1268 | height: 170px; 1269 | border-radius: 2px; 1270 | } 1271 | } 1272 | 1273 | @media screen and (min-width: 960px) { 1274 | .card-work button { 1275 | left: -120px; 1276 | } 1277 | } 1278 | 1279 | @media screen and (min-width: 1120px) { 1280 | .card-work button { 1281 | left: -150px; 1282 | } 1283 | 1284 | .popup-window.active { 1285 | width: 60%; 1286 | } 1287 | } 1288 | 1289 | @media screen and (min-width: 1340px) { 1290 | .card-work button { 1291 | left: -200px; 1292 | } 1293 | 1294 | .left { 1295 | margin-left: 120px; 1296 | } 1297 | } 1298 | --------------------------------------------------------------------------------