├── .gitignore ├── .DS_Store ├── assets ├── .DS_Store ├── ico │ ├── github.png │ ├── medium.png │ ├── linkedin.png │ ├── twitter.png │ ├── angellist.png │ ├── button_down.png │ ├── live_icon.png │ ├── github_white.png │ ├── skills.svg │ ├── languages.svg │ └── frameworks.svg ├── img │ ├── Logo.png │ ├── cardDesktop.png │ ├── cardMobile.jpg │ ├── awesomeList_mb.png │ ├── flexProject_mb.png │ └── tourismSummit_mb.png └── fig │ ├── contact-left-desktop-1.svg │ ├── about-left-mobile.svg │ ├── contact-left-desktop-2.svg │ ├── contact-right-desktop.svg │ ├── contact-right-mobile.svg │ ├── about-right-mobile.svg │ ├── about-left-desktop.svg │ ├── about-right-desktop.svg │ ├── header-bg-mobile.svg │ └── header-bg-desktop.svg ├── .idea ├── .gitignore ├── vcs.xml ├── modules.xml └── Personal_portfolio.iml ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── package.json ├── LICENSE ├── .github └── workflows │ └── linters.yml ├── README.md ├── index.html ├── main.js └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | # .gitignore 2 | node_modules/ -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/.DS_Store -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/.DS_Store -------------------------------------------------------------------------------- /assets/ico/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/ico/github.png -------------------------------------------------------------------------------- /assets/ico/medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/ico/medium.png -------------------------------------------------------------------------------- /assets/img/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/img/Logo.png -------------------------------------------------------------------------------- /assets/ico/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/ico/linkedin.png -------------------------------------------------------------------------------- /assets/ico/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/ico/twitter.png -------------------------------------------------------------------------------- /assets/ico/angellist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/ico/angellist.png -------------------------------------------------------------------------------- /assets/ico/button_down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/ico/button_down.png -------------------------------------------------------------------------------- /assets/ico/live_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/ico/live_icon.png -------------------------------------------------------------------------------- /assets/img/cardDesktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/img/cardDesktop.png -------------------------------------------------------------------------------- /assets/img/cardMobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/img/cardMobile.jpg -------------------------------------------------------------------------------- /assets/ico/github_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/ico/github_white.png -------------------------------------------------------------------------------- /assets/img/awesomeList_mb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/img/awesomeList_mb.png -------------------------------------------------------------------------------- /assets/img/flexProject_mb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/img/flexProject_mb.png -------------------------------------------------------------------------------- /assets/img/tourismSummit_mb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergio-usma/Personal_portfolio/HEAD/assets/img/tourismSummit_mb.png -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /.idea/Personal_portfolio.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 9 | } 10 | ], 11 | "scss/at-rule-no-unknown": [ 12 | true, 13 | { 14 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"] 15 | } 16 | ], 17 | "csstree/validator": true 18 | }, 19 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"] 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "personal_portfolio", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel-eslint": "^10.1.0", 14 | "eslint": "^7.32.0", 15 | "eslint-config-airbnb-base": "^14.2.1", 16 | "eslint-plugin-import": "^2.27.5", 17 | "hint": "^7.1.8", 18 | "stylelint": "^13.13.1", 19 | "stylelint-config-standard": "^21.0.0", 20 | "stylelint-csstree-validator": "^1.9.0", 21 | "stylelint-scss": "^3.21.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Sergio Andres Usma 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 | -------------------------------------------------------------------------------- /assets/ico/skills.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /assets/ico/languages.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.7.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-22.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "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@v2 40 | - uses: actions/setup-node@v1 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@v2 54 | - uses: actions/setup-node@v1 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@v2 68 | - name: Check node_modules existence 69 | run: | 70 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi 71 | -------------------------------------------------------------------------------- /assets/fig/contact-left-desktop-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /assets/fig/about-left-mobile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /assets/fig/contact-left-desktop-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /assets/fig/contact-right-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 | -------------------------------------------------------------------------------- /assets/fig/contact-right-mobile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /assets/ico/frameworks.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /assets/fig/about-right-mobile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /assets/fig/about-left-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 | -------------------------------------------------------------------------------- /assets/fig/about-right-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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | logo 6 |
7 | 8 |

Personal portfolio project

9 | 10 |
11 | 12 | 13 | 14 | # 📗 Table of Contents 15 | 16 | - [📖 About the Project](#about-project) 17 | - [🛠 Built With](#built-with) 18 | - [Tech Stack](#tech-stack) 19 | - [Key Features](#key-features) 20 | - [🚀 Live Demo](#live-demo) 21 | - [💻 Getting Started](#getting-started) 22 | - [Setup](#setup) 23 | - [Prerequisites](#prerequisites) 24 | - [Install](#install) 25 | - [Usage](#usage) 26 | - [Run tests](#run-tests) 27 | - [Deployment](#deployment) 28 | - [👥 Authors](#authors) 29 | - [🔭 Future Features](#future-features) 30 | - [🤝 Contributing](#contributing) 31 | - [⭐️ Show your support](#support) 32 | - [🙏 Acknowledgements](#acknowledgements) 33 | - [❓ FAQ (OPTIONAL)](#faq) 34 | - [📝 License](#license) 35 | 36 | 37 | 38 | # 📖 Hello Microverse 39 | 40 | **Personal_portfolio** is a project that consists of building a personal portfolio site. This project is part of the Microverse curriculum. In this first part, the project is built using only HTML and CSS. In the future, more technologies will be added. Besides, includes a README file with the project description and two sections: one with the navigation bar, and another with author's name and links to the author's social networks. 41 | 42 | [Click here](https://www.loom.com/share/ab6809d556574bbcb8ec807e629eb4e0) to see the presentation video 43 | 44 | ## 🛠 Built With 45 | 46 | - HTML 47 | - CSS 48 | - JavScript 49 | - Linters 50 | 51 | ### Tech Stack 52 | 53 | In this project was only used HTML and CSS. More technologies Coming soon. 54 | 55 | 56 | 57 | ### Key Features 58 | 59 | - **Semantic HTML** 60 | - **CSS** 61 | - **Responsive Design** 62 | - **Use of DOM** 63 | - **Use of Linters** 64 | 65 |

(back to top)

66 | 67 | 68 | 69 | ## 🚀 Live Demo 70 | 71 | - If you want to see a preview from the project go and [click here!](https://sergio-usma.github.io/Personal_portfolio/) 72 | 73 |

(back to top)

74 | 75 | 76 | 77 | ## 💻 Getting Started 78 | 79 | To get a local copy up and running, follow these steps. 80 | 81 | ### Prerequisites 82 | 83 | In order to run this project you need: 84 | 85 | - VS Code or an IDE 86 | - NodeJS 87 | - Git 88 | - GitHub account 89 | 90 | ### Setup 91 | 92 | Clone this repository to your desired folder: 93 | 94 | 1. Click the green "Code" button and copy the repository URL. 95 | 96 | 2. Open a terminal window and navigate to the directory where you want to clone the repository. 97 | 98 | 3. Type "git clone" in the terminal window, followed by a space and then paste the repository URL https://github.com/sergio-usma/Personal_portfolio. Press "Enter" to clone the repository. 99 | 100 | 4. Verify that the repository has been cloned successfully by checking the contents of the directory where you cloned it. 101 | 102 | 5. That's all, you have the code! 103 | 104 | ### Install 105 | 106 | Install don't required. 107 | 108 | ### Usage 109 | 110 | Edit the code using VS Code or an IDE. 111 | 112 | ### Run tests 113 | 114 | Test don't required. 115 | 116 | 117 | ### Deployment 118 | 119 | You can deploy this project using your preferred deployment method. However we recommend using GitHub Pages link given in the project's description or in the Live Demo section. 120 | 121 | 122 |

(back to top)

123 | 124 | 125 | 126 | ## 👥 Authors 127 | 128 | 👤 **Author** 129 | 130 | - GitHub: [@sergio-usma](https://github.com/sergio-usma) 131 | - Twitter: [@VonUsma](https://twitter.com/vonusma) 132 | - LinkedIn: [Sergio Andres Usma](https://linkedin.com/in/sergioandresusma) 133 | 134 | 135 |

(back to top)

136 | 137 | 138 | 139 | ## 🔭 Future Features 140 | 141 | These are the coming soon features for this project: 142 | 143 | 1. [ ] Projects section pop-ups. 144 | 2. [ ] Full features mobile & desktop version. 145 | 146 |

(back to top)

147 | 148 | 149 | 150 | ## 🤝 Contributing 151 | 152 | Contributions, issues, and feature requests are welcome! 153 | 154 | Feel free to check the [issues page](../../issues/). 155 | 156 |

(back to top)

157 | 158 | 159 | 160 | ## ⭐️ Show your support 161 | 162 | If you like this project, please consider supporting us! Your support helps us to continue developing and improving our project for everyone to enjoy. Whether it's a small donation, sharing the project with your friends, or contributing your skills and expertise, every little bit makes a huge difference. With your support, we can create something truly amazing together. Thank you for being a part of our community and helping us to make a difference! 163 | 164 |

(back to top)

165 | 166 | 167 | 168 | ## 🙏 Acknowledgments 169 | 170 | I would like to thank Microverse for his groundbreaking work on data visualization in his lessons. 171 | 172 |

(back to top)

173 | 174 | 175 | 176 | ## ❓ FAQ (OPTIONAL) 177 | 178 | - **How do I set up the project?** 179 | 180 | - Clone the repository from GitHub. 181 | 182 | - **How can I contribute to the project?** 183 | 184 | 1. Fork the repository on GitHub. 185 | 2. Create a new branch for your changes using git checkout -b my-feature-branch. 186 | 3. Make your changes and commit them with descriptive commit messages. 187 | 4. Push your changes to your forked repository. 188 | 5. Submit a pull request to the original repository. 189 | 6. Wait for feedback and iterate on your changes as needed. 190 | 191 |

(back to top)

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

(back to top)

200 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 15 | Sergio Usma's portfolio 16 | 17 | 18 | 19 |
20 | 39 |
40 | 41 | 42 |
43 |
44 |
45 |

46 | Hey there.
I'm Sergio. 47 |

48 | I'm a software developer 49 | 50 |

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

56 | 57 | 86 | 87 |
88 | A rounded button with a black-down-arrow 93 |
94 |
95 |
96 |
97 | 98 | 99 |
100 |
101 |

102 | My Recent
Works 103 |

104 |
105 |
106 |
107 |
108 | 109 | 110 | 111 |
112 |
113 |
114 |

About me

115 | 116 |

117 | I can help you build a product, feature or website Look through some 118 | of my work and
 experience! If 119 | you like what you see and have a project you need coded, 120 |
don’t hesitate to contact me. 121 |

122 | 123 | 126 |
127 | 128 |
129 |
130 |
131 |
132 | World black and green vectorized icon 137 |
138 |

Languages

139 | 140 |
    141 |
  • JavaScript
    • 142 |
  • Ruby
    • 143 |
  • HTML
    • 144 |
  • CSS
    • 145 |
146 |
147 |
148 | 149 |
150 |
151 |
152 | Five black and green boxes creating a network 157 |
158 |

Frameworks

159 | 160 |
    161 |
  • React.js
    • 162 |
  • Ruby on Rails
    • 163 |
  • RSpec
    • 164 |
  • Capybara
    • 165 |
  • Selenium
    • 166 |
167 |
168 |
169 | 170 |
171 |
172 |
173 | Three lighting symbols in green color forming an icon 178 |
179 |

Skills

180 | 181 |
    182 |
  • Database Management
    • 183 |
  • Version Control
    • 184 |
  • CLI
    • 185 |
  • Web Development
    • 186 |
  • API Design
    • 187 |
188 |
189 |
190 |
191 |
192 |
193 | 194 | 195 |
196 |
197 |
198 |

199 | I'm always interested in hearing about new projects, so if you'd 200 | like to chat please get in touch. 201 |

202 | 203 |
208 |
    209 |
  • 210 | 211 | 219 |
    • 220 | 221 |
  • 222 | 223 | 232 |
    • 233 | 234 |
  • 235 | 236 | 245 |
    • 246 | 247 | 257 | 258 |
  • 259 | 260 | 267 |
    • 268 |
269 | 270 | 271 |
272 | 273 | 274 |
275 |
276 |
277 | 278 | 311 | 312 | 313 | 314 | 315 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | // DOM items 2 | const viewportWidth = window.innerWidth; 3 | const header = document.querySelector('#header'); 4 | const burger = document.querySelector('#burger'); 5 | 6 | let showMenu = false; 7 | 8 | function toggleMenu() { 9 | if (!showMenu && viewportWidth < 600) { 10 | header.classList.remove('header'); 11 | header.classList.add('header-active'); 12 | burger.classList.remove('burger'); 13 | burger.classList.add('burger-active'); 14 | document.body.style.overflowY = 'hidden'; 15 | 16 | // set menu state 17 | showMenu = true; 18 | } else { 19 | header.classList.remove('header-active'); 20 | header.classList.add('header'); 21 | burger.classList.remove('burger-active'); 22 | burger.classList.add('burger'); 23 | document.body.style.overflowY = 'auto'; 24 | 25 | // Set menu state 26 | showMenu = false; 27 | } 28 | } 29 | burger.addEventListener('click', toggleMenu); 30 | 31 | /* -------------------- CARD POPUPs ----------------------*/ 32 | /*---------------------------------------------------------*/ 33 | 34 | const mediaQueryBr = () => { 35 | if (viewportWidth < 600) { 36 | return '

'; 37 | } 38 | return ''; 39 | }; 40 | 41 | const projectsArray = [ 42 | { 43 | name: 'The World Tourism Summit 2023', 44 | imgMobile: './assets/img/tourismSummit_mb.png', 45 | imgDesktop: './assets/img/tourismSummit_mb.png', 46 | techTags: ['HTML', 'CSS', 'JavaScript'], 47 | liveLink: 'https://sergio-usma.github.io/First_capstone_project/', 48 | sourceLink: 'https://github.com/sergio-usma/First_capstone_project', 49 | description: 'The first capstone project for \'The Portal\' module in the Microverse curriculum is a dynamic website utilizing HTML, CSS, and basic JavaScript. The project showcases the comprehensive details of The World Tourism Summit 2023, scheduled to be held in Bogota, Colombia, from November 27th to 29th at CORFERIAS.', 50 | }, 51 | { 52 | name: 'Awesome To-Do List', 53 | imgMobile: './assets/img/awesomeList_mb.png', 54 | imgDesktop: './assets/img/awesomeList_mb.png', 55 | techTags: ['HTML', 'CSS', 'JavaScript', 'Webpack'], 56 | liveLink: 'https://sergio-usma.github.io/To-Do-List/', 57 | sourceLink: 'https://github.com/sergio-usma/To-Do-List', 58 | description: 'This is a project for lightweight task management application using a To-Do List. It was built using HTML, CSS, and JavaScript. It allows users to add, delete, and mark tasks as complete, with data stored locally. It serves as an introduction to web development and DOM manipulation.', 59 | }, 60 | { 61 | name: 'Wall of Wonder by Frontend Masters', 62 | imgMobile: './assets/img/flexProject_mb.png', 63 | imgDesktop: './assets/img/flexProject_mb.png', 64 | techTags: ['HTML', 'CSS', 'JavaScript'], 65 | liveLink: 'https://sergio-usma.github.io/flexbox-test/', 66 | sourceLink: 'https://github.com/sergio-usma/flexbox-test', 67 | description: 'This repository features a personal project that demonstrates the application of CSS grid and flexbox techniques. Explore diverse layouts and responsive designs, showcasing the versatility and power of these CSS tools. Delve into the code to discover visually appealing and dynamic web layouts created using grid and flexbox.', 68 | }, 69 | { 70 | name: 'Multi-Post Stories Gain+Glory', 71 | imgMobile: './assets/img/cardMobile.jpg', 72 | imgDesktop: './assets/img/cardDesktop.png', 73 | techTags: ['Ruby on Rails', 'CSS', 'JavaScript', 'HTML'], 74 | liveLink: 'https://example.com/project1', 75 | sourceLink: 'https://github.com/user/project1', 76 | description: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s.${mediaQueryBr()}Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s.`, 77 | }, 78 | { 79 | name: 'Multi-Post Stories Gain+Glory', 80 | imgMobile: './assets/img/cardMobile.jpg', 81 | imgDesktop: './assets/img/cardDesktop.png', 82 | techTags: ['Ruby on Rails', 'CSS', 'JavaScript', 'HTML'], 83 | liveLink: 'https://example.com/project1', 84 | sourceLink: 'https://github.com/user/project1', 85 | description: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s.${mediaQueryBr()}Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s.`, 86 | }, 87 | { 88 | name: 'Keeping track of hundreds of components', 89 | imgMobile: './assets/img/cardMobile.jpg', 90 | imgDesktop: './assets/img/cardDesktop.png', 91 | techTags: [ 92 | 'Codekit', 93 | 'GitHub', 94 | 'JavaScript', 95 | 'Bootstrap', 96 | 'Terminal', 97 | 'Codepen', 98 | ], 99 | liveLink: 'https://example.com/project1', 100 | sourceLink: 'https://github.com/user/project1', 101 | description: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s.${mediaQueryBr()}Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it 1960s.`, 102 | }, 103 | ]; 104 | 105 | /*---------------------------------------------------------*/ 106 | /* ---------------------- POST CREATION --------------------*/ 107 | /*---------------------------------------------------------*/ 108 | 109 | for (let i = 0; i < projectsArray.length; i += 1) { 110 | const projectsWrapper = document.getElementsByClassName('projects__wrapper')[0]; 111 | 112 | const projectCard = document.createElement('article'); 113 | projectCard.classList.add('project__card', `card${i}`); 114 | // Space for image 115 | 116 | const projectCardImage = document.createElement('img'); 117 | projectCardImage.classList.add('project__card__image'); 118 | projectCardImage.setAttribute('src', projectsArray[i].imgMobile); 119 | projectCardImage.setAttribute('alt', projectsArray[i].name); 120 | projectCard.appendChild(projectCardImage); 121 | 122 | const projectCardWrapper = document.createElement('div'); 123 | projectCardWrapper.classList.add('project__card__wrapper'); 124 | projectCard.appendChild(projectCardWrapper); 125 | 126 | const projectCardTitle = document.createElement('h4'); 127 | projectCardTitle.classList.add('project__card__title'); 128 | projectCardTitle.innerHTML = projectsArray[i].name; 129 | projectCardWrapper.appendChild(projectCardTitle); 130 | 131 | const projectCardTags = document.createElement('ul'); 132 | projectCardTags.classList.add('project__card__tags'); 133 | projectCardWrapper.appendChild(projectCardTags); 134 | 135 | for (let j = 0; j < projectsArray[i].techTags.length; j += 1) { 136 | const projectCardTag = document.createElement('li'); 137 | projectCardTag.innerHTML = projectsArray[i].techTags[j]; 138 | projectCardTags.appendChild(projectCardTag); 139 | } 140 | const projectCardButton = document.createElement('button'); 141 | projectCardButton.classList.add('project__card__button'); 142 | projectCardButton.setAttribute('type', 'button'); 143 | projectCardButton.innerHTML = 'See Project'; 144 | 145 | projectCardWrapper.appendChild(projectCardButton); 146 | 147 | projectsWrapper.appendChild(projectCard); 148 | } 149 | 150 | /*---------------------------------------------------------*/ 151 | /* -------------------- POPUP CREATION ---------------------*/ 152 | /*---------------------------------------------------------*/ 153 | 154 | function createPopup(index) { 155 | const project = projectsArray[index]; 156 | const projectsWrapper = document.getElementsByClassName('projects__wrapper')[0]; 157 | 158 | // Create popup window 159 | const popupWindow = document.createElement('div'); 160 | popupWindow.setAttribute('id', 'popup__window'); 161 | popupWindow.classList.add('popup__window'); 162 | 163 | // Create popup content 164 | const popupContent = document.createElement('div'); 165 | popupContent.classList.add('popup-content'); 166 | popupWindow.appendChild(popupContent); 167 | 168 | // Create popup content wrapper 169 | const popupContentWrapper = document.createElement('div'); 170 | popupContentWrapper.classList.add('popup-content__wrapper'); 171 | popupContent.appendChild(popupContentWrapper); 172 | 173 | // Create popup close button 174 | const popupCloseButton = document.createElement('div'); 175 | popupCloseButton.setAttribute('id', 'popup__close__button'); 176 | popupContentWrapper.appendChild(popupCloseButton); 177 | 178 | // Create popup close button icon 179 | const popupCloseButtonBar1 = document.createElement('span'); 180 | popupCloseButtonBar1.classList.add('bar'); 181 | popupCloseButton.appendChild(popupCloseButtonBar1); 182 | 183 | const popupCloseButtonBar2 = document.createElement('span'); 184 | popupCloseButtonBar2.classList.add('bar'); 185 | popupCloseButton.appendChild(popupCloseButtonBar2); 186 | 187 | // Generate popup picture tag 188 | const popupPicture = document.createElement('picture'); 189 | popupPicture.setAttribute('id', 'popup__picture'); 190 | popupPicture.classList.add('popup__picture'); 191 | popupContentWrapper.appendChild(popupPicture); 192 | 193 | // Generate popup source tag 194 | const popupSource = document.createElement('source'); 195 | popupSource.setAttribute('media', '(min-width: 600px)'); 196 | popupSource.setAttribute('srcset', project.imgDesktop); 197 | popupPicture.appendChild(popupSource); 198 | 199 | // Generate popup image tag 200 | const popupImage = document.createElement('img'); 201 | popupImage.setAttribute('src', project.imgMobile); 202 | popupImage.setAttribute('alt', 'Project Image'); 203 | popupPicture.appendChild(popupImage); 204 | 205 | // Generate popup title 206 | const popupTitle = document.createElement('h3'); 207 | popupTitle.classList.add('popup__title'); 208 | popupTitle.innerHTML = project.name; 209 | popupContentWrapper.appendChild(popupTitle); 210 | 211 | // Generate popup card tags 212 | const popupCardTags = document.createElement('ul'); 213 | popupCardTags.setAttribute('id', 'popup__card__tags'); 214 | popupCardTags.classList.add('project__card__tags'); 215 | popupContentWrapper.appendChild(popupCardTags); 216 | 217 | // generate popup card tags list 218 | for (let j = 0; j < project.techTags.length; j += 1) { 219 | const popupCardTag = document.createElement('li'); 220 | popupCardTag.innerHTML = project.techTags[j]; 221 | popupCardTags.appendChild(popupCardTag); 222 | } 223 | 224 | // Generate popup description 225 | const popupDescription = document.createElement('p'); 226 | popupDescription.setAttribute('id', 'popup__description'); 227 | popupDescription.classList.add('popup__description'); 228 | popupDescription.innerHTML = project.description; 229 | popupContentWrapper.appendChild(popupDescription); 230 | 231 | // Generate popup buttons container 232 | const popupButtonsContainer = document.createElement('div'); 233 | popupButtonsContainer.classList.add('popup__buttons__container'); 234 | popupContentWrapper.appendChild(popupButtonsContainer); 235 | 236 | // Generate popup live link button 237 | const popupLiveLinkButton = document.createElement('button'); 238 | popupLiveLinkButton.setAttribute('id', 'popup__live__link__button'); 239 | popupLiveLinkButton.setAttribute('type', 'button'); 240 | popupLiveLinkButton.innerHTML = 'See Live'; 241 | popupButtonsContainer.appendChild(popupLiveLinkButton); 242 | 243 | // Add popup live link button icon 244 | const popupLiveLinkButtonIcon = document.createElement('img'); 245 | popupLiveLinkButtonIcon.setAttribute('src', './assets/ico/live_icon.png'); 246 | popupLiveLinkButtonIcon.setAttribute('alt', 'Live Link Icon'); 247 | popupLiveLinkButton.appendChild(popupLiveLinkButtonIcon); 248 | 249 | // Generate popup source link button 250 | const popupSourceLinkButton = document.createElement('button'); 251 | popupSourceLinkButton.setAttribute('id', 'popup__source__link__button'); 252 | popupSourceLinkButton.setAttribute('type', 'button'); 253 | popupSourceLinkButton.innerHTML = 'See Source'; 254 | popupButtonsContainer.appendChild(popupSourceLinkButton); 255 | 256 | // Add popup source link button icon 257 | const popupSourceLinkButtonIcon = document.createElement('img'); 258 | popupSourceLinkButtonIcon.setAttribute( 259 | 'src', 260 | './assets/ico/github_white.png', 261 | ); 262 | popupSourceLinkButtonIcon.setAttribute('alt', 'Source Link Icon'); 263 | popupSourceLinkButton.appendChild(popupSourceLinkButtonIcon); 264 | 265 | // Append popup window to projects wrapper 266 | projectsWrapper.appendChild(popupWindow); 267 | 268 | // Append popup window to body 269 | document.body.appendChild(popupWindow); 270 | 271 | // Add event listener to popup close button 272 | popupCloseButton.addEventListener('click', () => { 273 | popupWindow.style.display = 'none'; 274 | }); 275 | 276 | // Add event listener to popup live link button 277 | popupLiveLinkButton.addEventListener('click', () => { 278 | window.open(project.liveLink); 279 | }); 280 | 281 | // Add event listener to popup source link button 282 | popupSourceLinkButton.addEventListener('click', () => { 283 | window.open(project.sourceLink); 284 | }); 285 | } 286 | 287 | /* ----------- ADD EVENT LISTENER TO PROJECT CARD BUTTONS----------*/ 288 | document.addEventListener('DOMContentLoaded', () => { 289 | const projectCardButtons = document.querySelectorAll('.project__card__button'); 290 | 291 | for (let i = 0; i < projectCardButtons.length; i += 1) { 292 | ((index) => { 293 | projectCardButtons[index].addEventListener('click', () => { 294 | createPopup(index); 295 | const popupWindow = document.getElementsByClassName('popup__window')[index]; 296 | popupWindow.style.display = 'block'; 297 | }); 298 | })(i); 299 | } 300 | }); 301 | 302 | /* ----------- FORM VALIDATION ----------*/ 303 | const fullName = document.getElementById('full-name'); 304 | const firstName = document.getElementById('firstname'); 305 | const lastName = document.getElementById('lastname'); 306 | const email = document.getElementById('email'); 307 | 308 | if (viewportWidth < 600) { 309 | firstName.removeAttribute('required'); 310 | lastName.removeAttribute('required'); 311 | } else { 312 | fullName.removeAttribute('required'); 313 | } 314 | 315 | /* ------- ERROR MESSAGE ------*/ 316 | function errorMessage() { 317 | const errorWindow = document.createElement('div'); 318 | errorWindow.setAttribute('id', 'error-window'); 319 | const errorMsg = document.createElement('div'); 320 | errorMsg.setAttribute('id', 'error-message'); 321 | errorMsg.setAttribute('class', 'error-message'); 322 | const errorMsgText = document.createTextNode( 323 | 'Your email should have only lowercase letters', 324 | ); 325 | errorMsg.appendChild(errorMsgText); 326 | errorWindow.appendChild(errorMsg); 327 | email.after(errorWindow); 328 | } 329 | 330 | /* ------- VALIDATE EMAIL FORMAT -------*/ 331 | email.addEventListener('input', () => { 332 | const emailValue = email.value; 333 | const contactForm = document.getElementsByClassName('contact__form')[0]; 334 | const emailError = document.getElementById('error-message'); 335 | if (emailValue !== emailValue.toLowerCase()) { 336 | if (contactForm.contains(emailError) === false) { 337 | errorMessage(); 338 | } 339 | } else if (document.body.contains(emailError) === true) { 340 | emailError.remove(); 341 | } 342 | }); 343 | 344 | /* ------- PREVENT SUBMIT FORM WITH ERROR ----------*/ 345 | document 346 | .getElementsByClassName('contact__form')[0] 347 | .addEventListener('submit', (event) => { 348 | const emailValue = document.getElementById('email').value; 349 | if (emailValue !== emailValue.toLowerCase()) { 350 | event.preventDefault(); 351 | } 352 | }); 353 | 354 | /* ------- SAVE INPUT VALUES TO LOCAL STORAGE -------*/ 355 | const contactForm = document.getElementsByClassName('contact__form')[0]; 356 | contactForm.addEventListener('submit', () => { 357 | const fullNameValue = document.getElementById('full-name').value; 358 | const firstNameValue = document.getElementById('firstname').value; 359 | const lastNameValue = document.getElementById('lastname').value; 360 | const emailValue = document.getElementById('email').value; 361 | const messageValue = document.getElementById('message').value; 362 | localStorage.setItem('fullName', fullNameValue); 363 | localStorage.setItem('firstName', firstNameValue); 364 | localStorage.setItem('lastName', lastNameValue); 365 | localStorage.setItem('email', emailValue); 366 | localStorage.setItem('message', messageValue); 367 | }); 368 | 369 | /* ------- GET INPUT VALUES FROM LOCAL STORAGE -------*/ 370 | window.addEventListener('load', () => { 371 | const fullNameValue = localStorage.getItem('fullName'); 372 | const firstNameValue = localStorage.getItem('firstName'); 373 | const lastNameValue = localStorage.getItem('lastName'); 374 | const emailValue = localStorage.getItem('email'); 375 | const messageValue = localStorage.getItem('message'); 376 | 377 | if (fullNameValue !== null) { 378 | document.getElementById('full-name').value = fullNameValue; 379 | } else { 380 | document.getElementById('full-name').value = ''; 381 | } 382 | 383 | if (firstNameValue !== null) { 384 | document.getElementById('firstname').value = firstNameValue; 385 | } else { 386 | document.getElementById('firstname').value = ''; 387 | } 388 | 389 | if (lastNameValue !== null) { 390 | document.getElementById('lastname').value = lastNameValue; 391 | } else { 392 | document.getElementById('lastname').value = ''; 393 | } 394 | 395 | document.getElementById('email').value = emailValue; 396 | document.getElementById('message').value = messageValue; 397 | }); 398 | -------------------------------------------------------------------------------- /assets/fig/header-bg-mobile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /assets/fig/header-bg-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 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-main_theme: #36b37e; 3 | --color-second_green: #c5e9da; 4 | --color-light-green: #ebf0ee; 5 | --color-dark-blue: #172b4d; 6 | --color-nav-text: #344563; 7 | --color-card-text: #3a4a42; 8 | --color-white-bg: #e5e5e5; 9 | --color-white: #fff; 10 | --color-card-bg: #ebf0ee; 11 | --color-card-br: #d0d9d4; 12 | --color-button-enabled: #36b37f; 13 | --color-button-pressed: #008552; 14 | --color-button-hover: rgba(54, 179, 127, 0.24); 15 | --sections-max-width: 2160px; 16 | --wrapper-max-width: 1280px; 17 | --html-test-background: white; 18 | } 19 | 20 | hr { 21 | box-sizing: content-box; 22 | height: 0; 23 | overflow: visible; 24 | } 25 | 26 | html { 27 | box-sizing: border-box; 28 | font-size: 62.5%; 29 | line-height: 1.15; 30 | -webkit-text-size-adjust: 100%; 31 | } 32 | 33 | *, 34 | *::before, 35 | *::after { 36 | box-sizing: border-box; 37 | margin: 0; 38 | padding: 0; 39 | } 40 | 41 | body { 42 | font-family: "Inter", sans-serif; 43 | font-size: 1.6rem; 44 | } 45 | 46 | /* ----- HEADER SECTION ----- */ 47 | 48 | header { 49 | /* background-color: purple; */ 50 | } 51 | 52 | .header { 53 | width: 100vw; 54 | max-width: var(--sections-max-width); 55 | height: 5vh; 56 | min-height: 60px; 57 | margin: auto; 58 | display: flex; 59 | justify-content: flex-end; 60 | align-items: center; 61 | background-color: var(--color-white); 62 | } 63 | 64 | header ul { 65 | display: none; 66 | } 67 | 68 | .burger { 69 | width: 18px; 70 | height: 12px; 71 | margin-top: 25px; 72 | margin-right: 30px; 73 | align-self: flex-start; 74 | display: flex; 75 | flex-direction: column; 76 | justify-content: space-around; 77 | box-sizing: border-box; 78 | cursor: pointer; 79 | } 80 | 81 | .burger .bar { 82 | border-radius: 20px; 83 | height: 2px; 84 | background-color: var(--color-dark-blue); 85 | } 86 | 87 | /* -----------BURGER MENU - ACTIVE ------------ */ 88 | 89 | .header-active { 90 | width: 100vw; 91 | height: 100vh; 92 | position: absolute; 93 | display: flex; 94 | justify-content: flex-end; 95 | background: var(--color-white); 96 | } 97 | 98 | button, 99 | button a { 100 | max-height: 48px; 101 | padding: 0 5%; 102 | margin: 0 12px; 103 | text-decoration: none; 104 | font-style: normal; 105 | font-weight: 500; 106 | font-size: 17px; 107 | line-height: 24px; 108 | color: var(--color-white); 109 | cursor: pointer; 110 | } 111 | 112 | .about-me__button a { 113 | padding: 0; 114 | } 115 | 116 | .header-active ul { 117 | height: 250px; 118 | width: 100vw; 119 | display: flex; 120 | flex-direction: column; 121 | justify-content: space-between; 122 | padding-top: 70px; 123 | padding-left: 10%; 124 | list-style: none; 125 | } 126 | 127 | .burger-active { 128 | width: 18px; 129 | height: 18px; 130 | margin-top: 25px; 131 | margin-right: 30px; 132 | align-self: flex-start; 133 | display: flex; 134 | flex-direction: column; 135 | justify-content: space-around; 136 | box-sizing: border-box; 137 | cursor: pointer; 138 | } 139 | 140 | .burger-active .top { 141 | border-radius: 20px; 142 | height: 2px; 143 | background-color: var(--color-dark-blue); 144 | transform: rotate(45deg) translateY(8px); 145 | transition: all 0.3s ease; 146 | } 147 | 148 | .burger-active .bot { 149 | border-radius: 20px; 150 | height: 2px; 151 | background-color: var(--color-dark-blue); 152 | transform: rotate(-45deg) translateY(-8px); 153 | transition: all 0.3s ease; 154 | } 155 | 156 | /* ----- MAIN SECTION ----- */ 157 | 158 | #main { 159 | background-color: var(--html-test-background); 160 | } 161 | 162 | .main { 163 | width: 100vw; 164 | max-width: var(--sections-max-width); 165 | min-height: 770px; 166 | margin: auto; 167 | display: flex; 168 | flex-flow: column nowrap; 169 | justify-content: space-around; 170 | align-items: center; 171 | background-image: url("./assets/fig/header-bg-mobile.svg"); 172 | background-repeat: no-repeat; 173 | background-size: cover; 174 | background-position: top center; 175 | background-color: var(--color-white); 176 | } 177 | 178 | .main__container { 179 | display: flex; 180 | flex-direction: column; 181 | justify-content: space-around; 182 | align-items: center; 183 | } 184 | 185 | .main h1 { 186 | margin-top: 5%; 187 | font-style: normal; 188 | font-weight: 700; 189 | font-size: 4rem; 190 | line-height: 52px; 191 | text-align: center; 192 | color: var(--color-dark-blue); 193 | } 194 | 195 | .main .h1__sub { 196 | width: 80%; 197 | font-style: normal; 198 | font-weight: 700; 199 | font-size: 4rem; 200 | line-height: 52px; 201 | text-align: center; 202 | color: var(--color-main_theme); 203 | } 204 | 205 | p, 206 | .main p { 207 | width: 82%; 208 | min-width: 300px; 209 | margin-top: 5%; 210 | font-style: normal; 211 | font-weight: 400; 212 | font-size: 2rem; 213 | line-height: 2.8rem; 214 | text-align: center; 215 | color: var(--color-dark-blue); 216 | } 217 | 218 | .span__br2 { 219 | display: none; 220 | } 221 | 222 | .main__social-media { 223 | width: 100%; 224 | display: flex; 225 | justify-content: center; 226 | } 227 | 228 | .main__social-media ul { 229 | width: 50%; 230 | max-width: 230px; 231 | padding-left: 0; 232 | margin: 5% 0 10% 0; 233 | display: flex; 234 | flex-flow: row nowrap; 235 | justify-content: space-between; 236 | align-items: center; 237 | list-style: none; 238 | } 239 | 240 | .main__arrow-button { 241 | width: 40px; 242 | height: 40px; 243 | margin: 20% auto 5% auto; 244 | border-radius: 50%; 245 | } 246 | 247 | .main__arrow-button:hover { 248 | box-shadow: var(--color-button-hover) 0 0 0 0; 249 | } 250 | 251 | /* ----- PROJECTS SECTION ----- */ 252 | 253 | #projects { 254 | background-color: var(--html-test-background); 255 | } 256 | 257 | .projects { 258 | width: 100vw; 259 | max-width: var(--sections-max-width); 260 | margin: auto; 261 | display: flex; 262 | flex-flow: column nowrap; 263 | justify-content: space-around; 264 | align-items: center; 265 | background-color: var(--color-white); 266 | } 267 | 268 | h2, 269 | .projects__title { 270 | max-width: 463px; 271 | margin: 7% auto 3% auto; 272 | font-style: normal; 273 | font-weight: 700; 274 | font-size: 4rem; 275 | line-height: 5.2rem; 276 | color: var(--color-dark-blue); 277 | text-align: center; 278 | } 279 | 280 | .projects__h2-icon { 281 | width: 48px; 282 | margin: 0 auto 10% auto; 283 | border-radius: 24px; 284 | height: 5px; 285 | background-color: var(--color-main_theme); 286 | } 287 | 288 | .projects__wrapper, 289 | .wrapper { 290 | width: 100vw; 291 | max-width: var(--wrapper-max-width); 292 | margin-bottom: 30px; 293 | display: grid; 294 | place-items: center; 295 | grid-template-columns: repeat(auto-fit, minmax(327px, 1fr)); 296 | row-gap: 32px; 297 | } 298 | 299 | .project__card { 300 | width: 327px; 301 | height: 474px; 302 | position: relative; 303 | background: var(--color-card-bg); 304 | border: 1px solid var(--color-card-br); 305 | border-radius: 8px; 306 | } 307 | 308 | .project__card:hover { 309 | transform: scale(1.03); 310 | transition: all 0.1s ease; 311 | box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2); 312 | } 313 | 314 | .project__card__wrapper { 315 | width: 327px; 316 | height: 222px; 317 | position: absolute; 318 | left: calc(50% - 327px / 2); 319 | bottom: -1px; 320 | display: flex; 321 | flex-flow: column nowrap; 322 | justify-content: space-evenly; 323 | align-items: center; 324 | background: var(--color-white); 325 | border-left: 1px solid var(--color-card-br); 326 | border-right: 1px solid var(--color-card-br); 327 | border-bottom: 1px solid var(--color-card-br); 328 | border-radius: 8px; 329 | } 330 | 331 | .project__card__image { 332 | object-fit: fill; 333 | width: 100%; 334 | height: 55%; 335 | border-radius: 8px 8px 0 0; 336 | } 337 | 338 | h4, 339 | .project__card__title { 340 | width: 100%; 341 | height: 48px; 342 | margin: 0 0 16px 0; 343 | padding: 0 1rem 0 1rem; 344 | font-style: normal; 345 | font-weight: 600; 346 | font-size: 2.4rem; 347 | line-height: 3.2rem; 348 | text-align: center; 349 | color: var(--color-card-text); 350 | } 351 | 352 | .project__card__tags, 353 | .tags { 354 | width: 100%; 355 | display: flex; 356 | flex-flow: row wrap; 357 | justify-content: center; 358 | gap: 8px; 359 | list-style: none; 360 | float: left; 361 | } 362 | 363 | .project__card__tags li, 364 | .tags li { 365 | width: auto; 366 | height: 32px; 367 | display: flex; 368 | align-items: center; 369 | padding: 8px 12px; 370 | font-style: normal; 371 | font-weight: 600; 372 | font-size: 1.2rem; 373 | line-height: 1.6rem; 374 | text-align: center; 375 | color: var(--color-card-text); 376 | background: #ebf0ee; 377 | border-radius: 4px; 378 | } 379 | 380 | .project__card__description { 381 | font-style: normal; 382 | font-weight: 400; 383 | font-size: 16px; 384 | line-height: 24px; 385 | color: var(--color-nav-text); 386 | } 387 | 388 | button, 389 | .project__card__button { 390 | width: auto; 391 | height: 48px; 392 | border-style: none; 393 | margin-top: 8px; 394 | background: var(--color-button-enabled); 395 | border-radius: 4px; 396 | } 397 | 398 | button:hover { 399 | box-shadow: 0 8px 16px var(--color-button-hover); 400 | } 401 | 402 | button:active { 403 | background: var(--color-button-pressed); 404 | } 405 | 406 | .header-active ul li a { 407 | font-weight: 600; 408 | font-size: 3.2rem; 409 | line-height: 4.4rem; 410 | text-decoration: none; 411 | color: var(--color-card-text); 412 | } 413 | 414 | /* ----- POPUP CREATION ----- */ 415 | 416 | .popup__window { 417 | display: none; 418 | position: fixed; 419 | top: 0; 420 | left: 0; 421 | width: 100%; 422 | height: 100%; 423 | background: #c1c7d0; 424 | background-blend-mode: multiply; 425 | z-index: 100; 426 | overflow-y: auto; 427 | overflow-x: hidden; 428 | } 429 | 430 | .popup-content { 431 | padding: 1.6rem; 432 | width: 90%; 433 | max-width: 920px; 434 | max-height: 1083px; 435 | margin: 5% auto 2% auto; 436 | background: #fff; 437 | border: 1px solid #ebecf0; 438 | box-shadow: 0 48px 48px rgba(37, 47, 137, 0.08); 439 | border-radius: 8px; 440 | z-index: 200; 441 | } 442 | 443 | .popup-content__wrapper { 444 | display: grid; 445 | grid-template-columns: 1fr; 446 | grid-template-areas: 447 | "img" 448 | "title" 449 | "tags" 450 | "description" 451 | "buttons"; 452 | justify-content: center; 453 | align-items: center; 454 | } 455 | 456 | #popup__close__button { 457 | grid-area: 1/1/2/2; 458 | align-self: start; 459 | justify-self: end; 460 | margin: 1rem; 461 | width: 40px; 462 | height: 40px; 463 | cursor: pointer; 464 | position: relative; 465 | } 466 | 467 | #popup__close__button .bar { 468 | position: absolute; 469 | width: 20px; 470 | height: 2px; 471 | background-color: var(--color-white); 472 | top: 50%; 473 | left: 50%; 474 | transform: translate(-50%, -50%); 475 | } 476 | 477 | #popup__close__button .bar:first-child { 478 | transform: translate(-50%, -50%) rotate(45deg); 479 | } 480 | 481 | #popup__close__button .bar:last-child { 482 | transform: translate(-50%, -50%) rotate(-45deg); 483 | } 484 | 485 | .popup__picture { 486 | grid-area: img; 487 | } 488 | 489 | .popup__picture img { 490 | width: 100%; 491 | max-width: 910px; 492 | height: 100%; 493 | border-radius: 8px; 494 | } 495 | 496 | .popup__title { 497 | grid-area: title; 498 | font-style: normal; 499 | font-weight: 700; 500 | font-size: 3.2rem; 501 | line-height: 4.4rem; 502 | text-align: left; 503 | color: #172b4d; 504 | margin: 2rem 0; 505 | } 506 | 507 | #popup__card__tags { 508 | grid-area: tags; 509 | justify-content: left; 510 | width: 100%; 511 | } 512 | 513 | .about-me__card__tags li { 514 | height: 40px; 515 | background: #fff; 516 | border-radius: 8px; 517 | color: #36b37e; 518 | } 519 | 520 | #popup__card__tags li { 521 | margin-right: 8px; 522 | padding: 0 10px; 523 | } 524 | 525 | #popup__card__tags li:nth-child(n + 4) { 526 | display: none; 527 | } 528 | 529 | .popup__description { 530 | grid-area: description; 531 | width: 100%; 532 | min-width: 0; 533 | margin: 2rem 0 1rem 0; 534 | text-align: justify; 535 | line-height: 140%; 536 | font-size: 100%; 537 | } 538 | 539 | .popup__buttons__container { 540 | grid-area: buttons; 541 | display: flex; 542 | flex-flow: row nowrap; 543 | justify-content: center; 544 | align-items: flex-start; 545 | align-self: start; 546 | margin-top: 1vh; 547 | gap: 12px 18px; 548 | width: 100%; 549 | height: 70%; 550 | } 551 | 552 | #popup__live__link__button { 553 | flex-basis: 45%; 554 | margin: 0; 555 | font-size: 100%; 556 | padding: 0 4%; 557 | display: flex; 558 | justify-content: center; 559 | align-items: center; 560 | line-height: 1.6rem; 561 | } 562 | 563 | #popup__live__link__button img { 564 | width: 18px; 565 | margin-left: 1rem; 566 | } 567 | 568 | #popup__source__link__button { 569 | flex-basis: 50%; 570 | margin: 0; 571 | font-size: 100%; 572 | padding: 0 4%; 573 | display: flex; 574 | justify-content: center; 575 | align-items: center; 576 | line-height: 1.6rem; 577 | } 578 | 579 | #popup__source__link__button img { 580 | width: 18px; 581 | margin-left: 1rem; 582 | } 583 | 584 | /* ----- ABOUT ME SECTION ----- */ 585 | 586 | #about { 587 | background-color: var(--html-test-background); 588 | } 589 | 590 | .about-me { 591 | width: 100vw; 592 | max-width: var(--sections-max-width); 593 | 594 | /* min-height: 720px; */ 595 | 596 | margin: auto; 597 | display: flex; 598 | flex-flow: column nowrap; 599 | justify-content: space-around; 600 | align-items: center; 601 | background-color: var(--color-white); 602 | } 603 | 604 | .about-me__container { 605 | width: 100vw; 606 | max-width: var(--sections-max-width); 607 | display: flex; 608 | flex-direction: column; 609 | align-items: center; 610 | align-content: space-around; 611 | justify-content: center; 612 | background-image: 613 | url("./assets/fig/about-left-mobile.svg"), 614 | url("./assets/fig/about-right-mobile.svg"); 615 | background-repeat: no-repeat; 616 | background-size: 17%, 17%; 617 | background-position: bottom left, top right; 618 | } 619 | 620 | .about-me__button { 621 | margin: 5% auto 0 auto; 622 | padding: 0; 623 | } 624 | 625 | .about-me__wrapper { 626 | margin-top: 60px; 627 | } 628 | 629 | .about-me__card__container { 630 | box-sizing: border-box; 631 | height: 316px; 632 | width: 327px; 633 | border-radius: 8px; 634 | display: flex; 635 | flex-direction: column; 636 | background: #ebf0ee; 637 | border: 1px solid #c1c7d0; 638 | } 639 | 640 | .about-me__languages { 641 | display: flex; 642 | flex-direction: column; 643 | align-items: center; 644 | justify-content: space-between; 645 | } 646 | 647 | .about-me__icon__holder { 648 | height: 80px; 649 | width: 80px; 650 | margin: 40px auto 28px auto; 651 | border-radius: 50%; 652 | display: flex; 653 | justify-content: center; 654 | align-items: center; 655 | background: #fff; 656 | box-shadow: 0 16px 24px rgba(37, 47, 137, 0.08); 657 | } 658 | 659 | .about-me__card__title { 660 | width: 100%; 661 | height: 48px; 662 | margin: 0 0 10px 0; 663 | font-style: normal; 664 | font-weight: 600; 665 | font-size: 2.4rem; 666 | line-height: 3.2rem; 667 | text-align: center; 668 | color: var(--color-card-text); 669 | } 670 | 671 | .about-me__card__tags { 672 | width: 90%; 673 | justify-content: center; 674 | gap: 8px; 675 | } 676 | 677 | /* ----- CONTACT SECTION ----- */ 678 | 679 | #contact { 680 | background-color: var(--html-test-background); 681 | } 682 | 683 | .contact { 684 | background-color: white; 685 | max-width: var(--sections-max-width); 686 | margin: 4% auto 0 auto; 687 | background-image: url("./assets/fig/contact-right-mobile.svg"); 688 | background-repeat: no-repeat; 689 | background-size: 17%; 690 | background-position: bottom right; 691 | } 692 | 693 | .contact__container { 694 | max-width: calc(var(--wrapper-max-width) + 10vw); 695 | margin: auto; 696 | padding: 0 2%; 697 | display: flex; 698 | flex-flow: row wrap; 699 | align-items: flex-start; 700 | justify-content: center; 701 | gap: 24px; 702 | } 703 | 704 | .contact__container h2 { 705 | margin-bottom: 5%; 706 | } 707 | 708 | .contact__form { 709 | width: 90%; 710 | max-width: 684px; 711 | } 712 | 713 | .contact__form ul { 714 | margin: auto; 715 | display: grid; 716 | grid-template-columns: 1fr; 717 | grid-template-areas: "full-name" "email" "message" "button__form"; 718 | gap: 24px; 719 | list-style: none; 720 | } 721 | 722 | .full-name { 723 | grid-area: full-name; 724 | } 725 | 726 | .name { 727 | display: none; 728 | } 729 | 730 | .lastname { 731 | display: none; 732 | } 733 | 734 | .email { 735 | grid-area: email; 736 | } 737 | 738 | .message { 739 | grid-area: message; 740 | } 741 | 742 | button[type="submit"] { 743 | grid-area: button__form; 744 | display: flex; 745 | justify-content: center; 746 | align-items: center; 747 | margin: 0 auto; 748 | padding: 0 12px; 749 | cursor: pointer; 750 | } 751 | 752 | input[type="text"], 753 | input[type="email"], 754 | textarea { 755 | width: 100%; 756 | height: 48px; 757 | padding-left: 16px; 758 | font-style: italic; 759 | font-weight: 400; 760 | font-size: 15px; 761 | line-height: 24px; 762 | border-radius: 4px; 763 | background: #fff; 764 | border: 1px solid #d0d9d4; 765 | resize: none; 766 | } 767 | 768 | textarea { 769 | width: 100%; 770 | height: 114px; 771 | padding: 12px; 772 | font-style: normal; 773 | border-radius: 4px; 774 | background: #fff; 775 | border: 1px solid #d0d9d4; 776 | resize: none; 777 | } 778 | 779 | label { 780 | display: none; 781 | } 782 | 783 | .contact__container__email { 784 | margin: 0 auto 8% auto; 785 | } 786 | 787 | /* ------ FORM VALIDATION ------ */ 788 | 789 | #error-window { 790 | display: flex; 791 | align-items: flex-start; 792 | width: 100%; 793 | margin-left: 1.5%; 794 | } 795 | 796 | .error-message { 797 | position: absolute; 798 | padding: 8px; 799 | background-color: #f8d7da; 800 | color: #721c24; 801 | font-size: 12px; 802 | border-radius: 2px; 803 | transition: opacity 0.3s ease; 804 | } 805 | 806 | .error-message::before { 807 | content: ""; 808 | position: absolute; 809 | top: 100%; 810 | left: 10px; 811 | margin-top: -6px; 812 | border: 6px solid transparent; 813 | border-top-color: #f8d7da; 814 | transition: opacity 0.3s ease; 815 | } 816 | 817 | .error-message.hide { 818 | opacity: 0; 819 | pointer-events: none; 820 | } 821 | 822 | /* ----- FOOTER SECTION ----- */ 823 | 824 | footer { 825 | background-color: var(--html-test-background); 826 | } 827 | 828 | .footer { 829 | max-width: var(--sections-max-width); 830 | height: 72px; 831 | margin: auto; 832 | display: flex; 833 | justify-content: center; 834 | align-items: center; 835 | } 836 | 837 | .footer__social-media ul { 838 | margin: 0; 839 | } 840 | 841 | /* -------------------------------------------- */ 842 | 843 | /* ---------- MEDIA QUERY AT 600px ---------- */ 844 | 845 | /* -------------------------------------------- */ 846 | 847 | @media screen and (min-width: 600px) { 848 | header { 849 | position: relative; 850 | } 851 | 852 | .header { 853 | position: absolute; 854 | top: 30px; 855 | left: 50%; 856 | transform: translate(-50%, -50%); 857 | justify-content: center; 858 | background-color: transparent; 859 | } 860 | 861 | .header-active { 862 | display: none; 863 | } 864 | 865 | header ul { 866 | width: 220px; 867 | display: flex; 868 | justify-content: space-between; 869 | list-style: none; 870 | } 871 | 872 | header ul a { 873 | font-weight: 600; 874 | font-size: 1.5rem; 875 | line-height: 2rem; 876 | text-decoration: none; 877 | color: var(--color-nav-text); 878 | } 879 | 880 | .burger, 881 | .burger-active { 882 | display: none; 883 | } 884 | 885 | .main { 886 | min-height: 720px; 887 | max-height: 1180px; 888 | justify-content: center; 889 | background-image: url("./assets/fig/header-bg-desktop.svg"); 890 | } 891 | 892 | .span__br { 893 | display: none; 894 | } 895 | 896 | p, 897 | .main p { 898 | width: 85%; 899 | max-width: 600px; 900 | margin-top: 1%; 901 | } 902 | 903 | .main__arrow-button { 904 | margin: 5% auto 5% auto; 905 | border-radius: 50%; 906 | } 907 | 908 | .projects__wrapper { 909 | width: 95vw; 910 | } 911 | 912 | .projects__h2-icon { 913 | display: none; 914 | } 915 | 916 | /* POPUP STARTS */ 917 | 918 | .popup-content { 919 | padding: 0; 920 | } 921 | 922 | .popup-content__wrapper { 923 | grid-template-columns: auto; 924 | grid-template-areas: 925 | ".. close" 926 | "img img" 927 | "title buttons" 928 | "tags tags" 929 | "description description"; 930 | padding: 2rem 20px; 931 | } 932 | 933 | #popup__card__tags li:nth-child(n + 4) { 934 | display: flex; 935 | } 936 | 937 | .popup__description { 938 | max-width: 100%; 939 | } 940 | 941 | #popup__close__button { 942 | grid-area: close; 943 | justify-self: end; 944 | margin: 0 0 1rem 0; 945 | background: #ebecf0; 946 | mix-blend-mode: multiply; 947 | border-radius: 8px; 948 | position: relative; 949 | } 950 | 951 | #popup__close__button .bar { 952 | background-color: #67798e; 953 | } 954 | 955 | .popup__buttons__container { 956 | flex-flow: row wrap; 957 | justify-content: flex-end; 958 | align-self: center; 959 | margin-top: 0.5rem; 960 | } 961 | 962 | #popup__live__link__button { 963 | flex-basis: 70%; 964 | } 965 | 966 | #popup__source__link__button { 967 | flex-basis: 70%; 968 | } 969 | 970 | /* POPUP ENDS */ 971 | 972 | .about-me__description { 973 | width: 68vw; 974 | } 975 | 976 | .skills { 977 | grid-area: 2/1/3/3; 978 | } 979 | 980 | .contact__container h2 { 981 | margin: 3% 0; 982 | } 983 | 984 | .contact__form ul { 985 | grid-template-columns: 1fr 1fr; 986 | grid-template-areas: 987 | "name lastname" 988 | "email email" 989 | "message message" 990 | "button__form button__form"; 991 | gap: 24px; 992 | list-style: none; 993 | } 994 | 995 | .full-name { 996 | display: none; 997 | } 998 | 999 | .name { 1000 | grid-area: name; 1001 | display: block; 1002 | } 1003 | 1004 | .lastname { 1005 | grid-area: lastname; 1006 | display: block; 1007 | } 1008 | 1009 | button[type="submit"] { 1010 | justify-content: flex-start; 1011 | margin: 0 auto 15% 0; 1012 | } 1013 | 1014 | .contact__container__email { 1015 | display: none; 1016 | } 1017 | } 1018 | 1019 | /* -------------------------------------------- */ 1020 | 1021 | /* ---------- MEDIA QUERY AT 900px ---------- */ 1022 | 1023 | /* -------------------------------------------- */ 1024 | 1025 | @media screen and (min-width: 900px) { 1026 | header ul { 1027 | width: 255px; 1028 | } 1029 | 1030 | .main { 1031 | height: 720px; 1032 | } 1033 | 1034 | p, 1035 | .main p { 1036 | max-width: 700px; 1037 | } 1038 | 1039 | .main__social-media ul { 1040 | margin-bottom: 0; 1041 | } 1042 | 1043 | .main__arrow-button { 1044 | margin-top: 15%; 1045 | } 1046 | 1047 | .popup-content__wrapper { 1048 | grid-template-areas: 1049 | ".. ... ... close" 1050 | "img img img img" 1051 | "title title title buttons" 1052 | "tags tags tags tags" 1053 | "description description description description"; 1054 | } 1055 | 1056 | .popup__buttons__container { 1057 | width: 100%; 1058 | flex-flow: row nowrap; 1059 | justify-content: flex-end; 1060 | margin-top: 2.5rem; 1061 | } 1062 | 1063 | #popup__live__link__button { 1064 | flex-basis: 45%; 1065 | padding: 0 2%; 1066 | } 1067 | 1068 | #popup__source__link__button { 1069 | flex-basis: 55%; 1070 | padding: 0 2%; 1071 | } 1072 | 1073 | .about-me__container { 1074 | background-image: 1075 | url("./assets/fig/about-left-desktop.svg"), 1076 | url("./assets/fig/about-right-desktop.svg"); 1077 | background-repeat: no-repeat; 1078 | background-size: 17%, 17%; 1079 | background-position: bottom left, top right; 1080 | } 1081 | 1082 | .contact { 1083 | min-height: 600px; 1084 | background-image: 1085 | url("./assets/fig/contact-right-desktop.svg"), 1086 | url("./assets/fig/contact-left-desktop-1.svg"), 1087 | url("./assets/fig/contact-left-desktop-2.svg"); 1088 | background-repeat: no-repeat; 1089 | background-size: 10%, 10%, 10%; 1090 | background-position: bottom right, bottom left, 15% bottom; 1091 | } 1092 | } 1093 | 1094 | /* -------------------------------------------- */ 1095 | 1096 | /* ---------- MEDIA QUERY AT 1180px ---------- */ 1097 | 1098 | /* -------------------------------------------- */ 1099 | 1100 | @media screen and (min-width: 1180px) { 1101 | .main { 1102 | /* max-width: 1800px; */ 1103 | height: 1407px; 1104 | } 1105 | 1106 | .main__container { 1107 | transform: translateY(-20%); 1108 | } 1109 | 1110 | .main h1, 1111 | .main .h1__sub { 1112 | font-weight: 800; 1113 | font-size: 48px; 1114 | line-height: 60px; 1115 | letter-spacing: calc(37px / 100); 1116 | } 1117 | 1118 | p, 1119 | .main p { 1120 | width: 100%; 1121 | margin-top: 2%; 1122 | max-width: 950px; 1123 | line-height: 3.2rem; 1124 | } 1125 | 1126 | .span__br2 { 1127 | display: inline; 1128 | } 1129 | 1130 | .main__arrow-button { 1131 | margin-top: 12%; 1132 | } 1133 | 1134 | .skills { 1135 | grid-area: auto; 1136 | } 1137 | 1138 | .contact__container h2 { 1139 | font-size: 3rem; 1140 | } 1141 | 1142 | article { 1143 | transform: scale(1.1); 1144 | margin: 6% 0; 1145 | } 1146 | 1147 | .project__card:hover { 1148 | transform: scale(1.13); 1149 | } 1150 | 1151 | .wrapper { 1152 | width: 90vw; 1153 | } 1154 | 1155 | .about-me__wrapper { 1156 | width: 96vw; 1157 | } 1158 | } 1159 | 1160 | /* -------------------------------------------- */ 1161 | 1162 | /* ---------- MEDIA QUERY AT 1920px ---------- */ 1163 | 1164 | /* -------------------------------------------- */ 1165 | 1166 | @media screen and (min-width: 1920px) { 1167 | .main__container { 1168 | transform: translateY(0%); 1169 | } 1170 | } 1171 | --------------------------------------------------------------------------------