├── .eslintrc.json ├── .github └── workflows │ └── linters.yml ├── .gitignore ├── .hintrc ├── .prettierrc.js ├── .stylelintrc.json ├── .vscode └── settings.json ├── LICENSE.md ├── README.md ├── components └── project.html ├── images ├── Battery.png ├── Cellular Connection.png ├── Header-llustration-desktop.svg ├── Linkedin icon.png ├── Rectangle.png ├── WC-section2.jpg ├── Wifi.png ├── about-me-illustration-bottom.png ├── about-me-illustration-bottom.svg ├── about-me-illustration-top.png ├── about-me-illustration-top.svg ├── angellist.png ├── cross-X-btn-desktop.svg ├── cross-X-btn-mobile.svg ├── github-popup-icon.svg ├── github.png ├── header-illsutration-mobile.svg ├── header-illsutration-mobile@2x.png ├── icon-frameworks.png ├── icon-languages.png ├── icon-skills.png ├── illustration-about-me-bottom-desktop.svg ├── illustration-about-me-top-desktop.svg ├── illustration-contact-form.png ├── left-bottom-contact-illustration-desktop.svg ├── left-middle-contact-illustration-desktop.svg ├── medium.png ├── popup-desktop-img.svg ├── popup-mobile-img.svg ├── right-contact-illustration-desktop.svg ├── see-live-icon.svg ├── twitter.png ├── wc-desktop-view.jpg ├── wordchef-mobile.jpg └── worldchef-menuBar.jpg ├── index.html ├── package-lock.json ├── package.json ├── script.js └── style.css /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "extends": ["airbnb-base"], 13 | "rules": { 14 | "no-shadow": "off", 15 | "no-param-reassign": "off", 16 | "eol-last": "off", 17 | "import/extensions": [ 18 | 1, 19 | { 20 | "js": "always", 21 | "json": "always" 22 | } 23 | ] 24 | }, 25 | "ignorePatterns": ["dist/", "build/"] 26 | } 27 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | eslint: 10 | name: ESLint 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 ESLint 18 | run: | 19 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 20 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/javascript/.eslintrc.json 21 | - name: ESLint Report 22 | run: npx eslint . 23 | lighthouse: 24 | name: Lighthouse 25 | runs-on: ubuntu-22.04 26 | steps: 27 | - uses: actions/checkout@v2 28 | - uses: actions/setup-node@v1 29 | with: 30 | node-version: "12.x" 31 | - name: Setup Lighthouse 32 | run: npm install -g @lhci/cli@0.7.x 33 | - name: Lighthouse Report 34 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 35 | webhint: 36 | name: Webhint 37 | runs-on: ubuntu-22.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Webhint 44 | run: | 45 | npm install --save-dev hint@7.x 46 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc 47 | - name: Webhint Report 48 | run: npx hint . 49 | stylelint: 50 | name: Stylelint 51 | runs-on: ubuntu-22.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - uses: actions/setup-node@v1 55 | with: 56 | node-version: "12.x" 57 | - name: Setup Stylelint 58 | run: | 59 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 60 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.stylelintrc.json 61 | - name: Stylelint Report 62 | run: npx stylelint "**/*.{css,scss}" 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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.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 | } 19 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote" , true 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": [ 7 | true, 8 | { 9 | "ignoreAtRules": [ 10 | "tailwind", 11 | "apply", 12 | "variants", 13 | "responsive", 14 | "screen" 15 | ] 16 | } 17 | ] 18 | }, 19 | "csstree/validator": true, 20 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"] 21 | } 22 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5503 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Rachel Isaac 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Portfolio-Project 2 | 3 | 4 | 5 | # 📗Table of Contents 6 | 7 | - [📖 About the Project](#about-project) 8 | - [🛠 Built With](#built-with) 9 | - [Tech Stack](#tech-stack) 10 | - [Key Features](#key-features) 11 | - [🚀 Live Demo](#live-demo) 12 | - [💻 Getting Started](#getting-started) 13 | - [Prerequisites](#prerequisites) 14 | - [Setup](#setup) 15 | - [Usage](#usage) 16 | - [👥 Authors](#authors) 17 | - [👥 Future Features](#future-features) 18 | - [🤝 Contributing](#contributing) 19 | - [🙏 Acknowledgements](#acknowledgements) 20 | - [📝 License](#license) 21 | 22 | 23 | 24 | # 📖 [Portfolio Project] 25 | 26 | **[Portfolio]** is a project used to showcase my skills and experience as a software developer. 27 | 28 | ## 🛠 Built With 29 | 30 | ### Tech Stack 31 | 32 |
33 | Client 34 | 39 |
40 | 41 | ### Key Features 42 | 43 | - An HTML File 44 | - A CSS File 45 | - A Javascript file 46 | - An md file 47 | 48 |

(back to top)

49 | 50 | 51 | 52 | ## 🚀 Live Demo 53 | 54 | > 55 | 56 | - [Live Demo Link](https://rachelwebdev.github.io/Portfolio-Project/) 57 | 58 |

(back to top)

59 | 60 | ## 💻 Getting Started 61 | 62 | ### Prerequisites 63 | 64 | In order to run this project you need: 65 | 66 | A Browser 67 | 68 | ### Setup 69 | 70 | Clone this repository to your desired folder: 71 | 72 | `git@github.com:Rachelwebdev/Portfolio-Project.git` 73 | 74 | ### Install 75 | 76 | Install this project with: 77 | A commandline interface e.g Gitbash 78 | 79 | ### Usage 80 | 81 | To run the project, execute the following command: 82 | 83 | To run the project, execute the following command: 84 | Click on the live server button on your IDE 85 | 86 |

(back to top)

87 | 88 | ## 👥 Author 89 | 90 | 👤 **Rachel Isaac** 91 | 92 | - GitHub: [@rachelwebdev](https://github.com/Rachelwebdev) 93 | - Twitter:[@rachelisaac13](https://twitter.com/Rachelisaac13) 94 | - LinkedIn: [Rachel Isaac](https://www.linkedin.com/in/rachelisaac13/) 95 | 96 |

(back to top)

97 | 98 | ### Future Features 99 | 100 | - Add different projects to the project section 101 | 102 |

(back to top)

103 | 104 | 🤝 Contributing 105 | Contributions, issues, and feature requests are welcome! 106 | 107 |

(back to top)

108 | 109 | ## 🙏 Acknowledgments 110 | 111 | 🙏 Acknowledgments 112 | Give credit to everyone who inspired your codebase. 113 | 114 | I would like to thank Microverse for the learning materials provided for this exercise, and my coding partners for answering my questions when I got stuck. 115 | 116 |

(back to top)

117 | 118 | ## 📝 License 119 | 120 |

(back to top)

121 | 122 | 📝 License 123 | This project is [MIT](https://github.com/Rachelwebdev/Portfolio-Project/blob/mobile-nav/LICENSE.md) licensed. 124 | -------------------------------------------------------------------------------- /components/project.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Portfolio 8 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | Welcome 19 | 26 |
27 |
28 | 35 |
36 | 37 |
38 | 43 |
44 |
45 | 46 | 47 |
48 |
49 |

50 | Hey there. I'm Rachel
51 | I'm a software developer 52 |

53 |

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

58 | 59 | 84 |
85 | 86 | 87 |
88 |
89 |

MY Recent Works

90 |
91 |
92 | 93 |
94 |
95 |
96 |
97 |

Multi-Post Stories Gain+Glory

98 |
    99 |
  • Ruby on rails
    • 100 |
  • css
    • 101 |
  • JavaScript
    • 102 |
  • html
    • 103 |
104 | 107 |
108 |
109 |
110 |
111 |
112 |

Multi-Post Stories Gain+Glory

113 |
    114 |
  • Ruby on rails
    • 115 |
  • css
    • 116 |
  • JavaScript
    • 117 |
  • html
    • 118 |
119 | 122 |
123 |
124 |
125 |
126 |
127 |

Multi-Post Stories Gain+Glory

128 |
    129 |
  • Ruby on rails
    • 130 |
  • css
    • 131 |
  • JavaScript
    • 132 |
  • html
    • 133 |
134 | 137 |
138 |
139 |
140 |
141 |
142 |

Multi-Post Stories Gain+Glory

143 |
    144 |
  • Ruby on rails
    • 145 |
  • css
    • 146 |
  • JavaScript
    • 147 |
  • html
    • 148 |
149 | 152 |
153 |
154 |
155 |
156 |
157 |

Multi-Post Stories Gain+Glory

158 |
    159 |
  • Ruby on rails
    • 160 |
  • css
    • 161 |
  • JavaScript
    • 162 |
  • html
    • 163 |
164 | 167 |
168 |
169 |
170 |
171 |
172 |

Multi-Post Stories Gain+Glory

173 |
    174 |
  • Ruby on rails
    • 175 |
  • css
    • 176 |
  • JavaScript
    • 177 |
  • html
    • 178 |
179 | 182 |
183 |
184 |
185 |
186 | 187 |
188 |
189 |
190 |

About me

191 | background image illustration 196 | background image illustration 201 | 202 |

203 | I can help you build a product , feature or website Look through 204 | some of my work and experience! If you like what you see and 205 | have a project you need coded, don’t hestiate to contact me. 206 |

207 | 208 | background image illustration 213 | background image illustration 218 |
219 |
220 | 221 | 222 |
223 |
224 | green-and-blue-round shaped icon 229 |
230 |

Languages

231 |
    232 |
  • JavaScript
    • 233 |
  • Ruby
    • 234 |
  • Html
    • 235 |
  • CSS
    • 236 |
237 |
238 |
239 | 240 |
241 | green-and-blue-squares-shaped icon 246 |
247 |

Frameworks

248 |
    249 |
  • Bootstrap
    • 250 |
  • Ruby
    • 251 |
  • RSpec
    • 252 |
  • Capybara
    • 253 |
  • Selenium
    • 254 |
255 |
256 |
257 | 258 |
259 | green-and-blue icon shaped like a lightening bolt 264 |
265 |

Skills

266 |
    267 |
  • Codekit
    • 268 |
  • GitHub
    • 269 |
  • Codepen
    • 270 |
  • Gitlab
    • 271 |
  • Terminal
    • 272 |
273 |
274 |
275 |
276 |
277 | 278 |
279 |

280 | I'm always interested in hearing about new projects, so if you'd 281 | like to chat please get in touch. 282 |

283 |
284 |
285 | 294 | 295 | 302 |
303 | 313 | 314 |
315 |
316 |
317 | 318 | 369 |
370 |
371 | 372 | 373 | 374 | 375 | -------------------------------------------------------------------------------- /images/Battery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/Battery.png -------------------------------------------------------------------------------- /images/Cellular Connection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/Cellular Connection.png -------------------------------------------------------------------------------- /images/Header-llustration-desktop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /images/Linkedin icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/Linkedin icon.png -------------------------------------------------------------------------------- /images/Rectangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/Rectangle.png -------------------------------------------------------------------------------- /images/WC-section2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/WC-section2.jpg -------------------------------------------------------------------------------- /images/Wifi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/Wifi.png -------------------------------------------------------------------------------- /images/about-me-illustration-bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/about-me-illustration-bottom.png -------------------------------------------------------------------------------- /images/about-me-illustration-bottom.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 | -------------------------------------------------------------------------------- /images/about-me-illustration-top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/about-me-illustration-top.png -------------------------------------------------------------------------------- /images/about-me-illustration-top.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 | -------------------------------------------------------------------------------- /images/angellist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/angellist.png -------------------------------------------------------------------------------- /images/cross-X-btn-desktop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /images/cross-X-btn-mobile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/github-popup-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/github.png -------------------------------------------------------------------------------- /images/header-illsutration-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 | 139 | -------------------------------------------------------------------------------- /images/header-illsutration-mobile@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/header-illsutration-mobile@2x.png -------------------------------------------------------------------------------- /images/icon-frameworks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/icon-frameworks.png -------------------------------------------------------------------------------- /images/icon-languages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/icon-languages.png -------------------------------------------------------------------------------- /images/icon-skills.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/icon-skills.png -------------------------------------------------------------------------------- /images/illustration-about-me-bottom-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 | -------------------------------------------------------------------------------- /images/illustration-about-me-top-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 | -------------------------------------------------------------------------------- /images/illustration-contact-form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/illustration-contact-form.png -------------------------------------------------------------------------------- /images/left-bottom-contact-illustration-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 | -------------------------------------------------------------------------------- /images/left-middle-contact-illustration-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 | -------------------------------------------------------------------------------- /images/medium.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/medium.png -------------------------------------------------------------------------------- /images/right-contact-illustration-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 | -------------------------------------------------------------------------------- /images/see-live-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/twitter.png -------------------------------------------------------------------------------- /images/wc-desktop-view.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/wc-desktop-view.jpg -------------------------------------------------------------------------------- /images/wordchef-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/wordchef-mobile.jpg -------------------------------------------------------------------------------- /images/worldchef-menuBar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rachelwebdev/Portfolio-Project/740fef9c1be9a412d2fda081b56f8cc14ae65138/images/worldchef-menuBar.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Portfolio 8 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | Welcome 19 | 26 |
27 |
28 | 35 |
36 | 37 |
38 | 43 |
44 |
45 | 46 | 47 |
48 |
49 |

50 | Hey there. I'm Rachel
51 | I'm a software developer 52 |

53 |

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

58 | 59 | 84 |
85 | 86 | 87 |
88 |
89 |

MY Recent Works

90 |
91 |
92 | 93 |
94 |
95 | 96 |
97 |
98 |
99 |

About me

100 | background image illustration 105 | background image illustration 110 | 111 |

112 | I can help you build a product , feature or website Look through 113 | some of my work and experience! If you like what you see and 114 | have a project you need coded, don’t hestiate to contact me. 115 |

116 | 117 | background image illustration 122 | background image illustration 127 |
128 |
129 | 130 | 131 |
132 |
133 | green-and-blue-round shaped icon 138 |
139 |

Languages

140 |
    141 |
  • JavaScript
    • 142 |
  • Ruby
    • 143 |
  • Html
    • 144 |
  • CSS
    • 145 |
146 |
147 |
148 | 149 |
150 | green-and-blue-squares-shaped icon 155 |
156 |

Frameworks

157 |
    158 |
  • Bootstrap
    • 159 |
  • Ruby
    • 160 |
  • RSpec
    • 161 |
  • Capybara
    • 162 |
  • Selenium
    • 163 |
164 |
165 |
166 | 167 |
168 | green-and-blue icon shaped like a lightening bolt 173 |
174 |

Skills

175 |
    176 |
  • Codekit
    • 177 |
  • GitHub
    • 178 |
  • Codepen
    • 179 |
  • Gitlab
    • 180 |
  • Terminal
    • 181 |
182 |
183 |
184 |
185 |
186 | 187 | 188 |
189 |

190 | I'm always interested in hearing about new projects, so if you'd 191 | like to chat please get in touch. 192 |

193 |
194 |
195 | 204 | 205 | 206 | 214 | 215 |
216 | 226 |
227 |
228 | 231 |
232 |
233 |
234 | 235 | 286 |
287 |
288 | 289 | 290 | 291 | 292 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "babel-eslint": "^10.1.0", 4 | "eslint": "^7.32.0", 5 | "eslint-config-airbnb-base": "^14.2.1", 6 | "eslint-plugin-import": "^2.26.0", 7 | "hint": "^7.1.3", 8 | "stylelint": "^13.13.1", 9 | "stylelint-config-standard": "^21.0.0", 10 | "stylelint-csstree-validator": "^1.9.0", 11 | "stylelint-scss": "^3.21.0" 12 | 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // -----------ADD FUNCTION TO MOBILE MENU BAR------------ 2 | 3 | const hamburger = document.querySelector('.hamburger'); 4 | const mobileMenuBar = document.querySelector('.hamburger-menu-container'); 5 | const navLinks = document.querySelectorAll('.nav-link'); 6 | 7 | const mobileMenu = () => { 8 | hamburger.classList.toggle('active'); 9 | mobileMenuBar.classList.toggle('show-menu'); 10 | }; 11 | 12 | hamburger.addEventListener('click', mobileMenu); 13 | 14 | const removeMenu = () => { 15 | mobileMenuBar.classList.remove('show-menu'); 16 | hamburger.classList.remove('active'); 17 | }; 18 | const navLinksArray = Array.from(navLinks); 19 | for (let i = 0; i < navLinksArray.length; i += 1) { 20 | navLinksArray[i].addEventListener('click', removeMenu); 21 | } 22 | 23 | // -----------REFACTOR PROJECT SECTION---------------- 24 | 25 | // Store project information in array 26 | const projectArray = [ 27 | { 28 | projectHeading: 'Multi-Post Stories Gain+Glory', 29 | projectName: 'Keeping track of hundreds of components', 30 | projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting 31 | industry. Lorem Ipsum has been the industry's standard dummy text 32 | ever since the 1500s, when an unknown printer took a galley of 33 | type and scrambled it 1960s with the releaLorem Ipsum is simply 34 | dummy text of the printing and typesetting industry. Lorem Ipsum 35 | has been the industry's standard dummy text ever since the 1500s, 36 | when an unknown printer took a galley of type and scrambled it 37 | 1960s with the release`, 38 | projectImageMobile: `an event summit website image`, 43 | projectImageDesktop: './images/wordchef-mobile.jpg', 44 | technologies1: 'Ruby on rails', 45 | technologies2: 'css', 46 | technologies3: 'JavaScript', 47 | technologies4: 'Codekit', 48 | technologies5: 'GitHub', 49 | technologies6: 'Bootstrap', 50 | technologies7: 'Terminal', 51 | technologies8: 'Codepen', 52 | technologies9: 'html', 53 | liveLink: 'https://rachelwebdev.github.io/World-Chef-Capstone-project/', 54 | sourceLink: 'https://github.com/Rachelwebdev/World-Chef-Capstone-project', 55 | projectButton: 'See Project', 56 | btnValue: 0, 57 | projectImageDisplay: `an event summit website image`, 62 | }, 63 | { 64 | projectHeading: 'Multi-Post Stories Gain+Glory', 65 | projectName: 'Keeping track of hundreds of components', 66 | projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting 67 | industry. Lorem Ipsum has been the industry's standard dummy text 68 | ever since the 1500s, when an unknown printer took a galley of 69 | type and scrambled it 1960s with the releaLorem Ipsum is simply 70 | dummy text of the printing and typesetting industry. Lorem Ipsum 71 | has been the industry's standard dummy text ever since the 1500s, 72 | when an unknown printer took a galley of type and scrambled it 73 | 1960s with the release`, 74 | projectImageMobile: './images/popup-mobile-img.svg', 75 | projectImageDesktop: './images/popup-desktop-img.svg', 76 | technologies1: 'Ruby on rails1', 77 | technologies2: 'css', 78 | technologies3: 'JavaScript', 79 | technologies4: 'Codekit', 80 | technologies5: 'GitHub', 81 | technologies6: 'Bootstrap', 82 | technologies7: 'Terminal', 83 | technologies8: 'Codepen', 84 | technologies9: 'html', 85 | liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', 86 | sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', 87 | projectButton: 'See Project', 88 | btnValue: 1, 89 | projectImageDisplay: `project 2`, 94 | }, 95 | { 96 | projectHeading: 'Multi-Post Stories Gain+Glory', 97 | projectName: 'Keeping track of hundreds of components', 98 | projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting 99 | industry. Lorem Ipsum has been the industry's standard dummy text 100 | ever since the 1500s, when an unknown printer took a galley of 101 | type and scrambled it 1960s with the releaLorem Ipsum is simply 102 | dummy text of the printing and typesetting industry. Lorem Ipsum 103 | has been the industry's standard dummy text ever since the 1500s, 104 | when an unknown printer took a galley of type and scrambled it 105 | 1960s with the release`, 106 | projectImageMobile: './images/popup-mobile-img.svg', 107 | projectImageDesktop: './images/popup-desktop-img.svg', 108 | technologies1: 'Ruby on rails', 109 | technologies2: 'css', 110 | technologies3: 'JavaScript', 111 | technologies4: 'Codekit', 112 | technologies5: 'GitHub', 113 | technologies6: 'Bootstrap', 114 | technologies7: 'Terminal', 115 | technologies8: 'Codepen', 116 | technologies9: 'html', 117 | liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', 118 | sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', 119 | projectButton: 'See Project', 120 | btnValue: 2, 121 | projectImageDisplay: `project 3`, 126 | }, 127 | { 128 | projectHeading: 'Multi-Post Stories Gain+Glory', 129 | projectName: 'Keeping track of hundreds of components', 130 | projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting 131 | industry. Lorem Ipsum has been the industry's standard dummy text 132 | ever since the 1500s, when an unknown printer took a galley of 133 | type and scrambled it 1960s with the releaLorem Ipsum is simply 134 | dummy text of the printing and typesetting industry. Lorem Ipsum 135 | has been the industry's standard dummy text ever since the 1500s, 136 | when an unknown printer took a galley of type and scrambled it 137 | 1960s with the release`, 138 | projectImageMobile: './images/popup-mobile-img.svg', 139 | projectImageDesktop: './images/popup-desktop-img.svg', 140 | technologies1: 'Ruby on rails', 141 | technologies2: 'css', 142 | technologies3: 'JavaScript', 143 | technologies4: 'Codekit', 144 | technologies5: 'GitHub', 145 | technologies6: 'Bootstrap', 146 | technologies7: 'Terminal', 147 | technologies8: 'Codepen', 148 | technologies9: 'html', 149 | liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', 150 | sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', 151 | projectButton: 'See Project', 152 | btnValue: 3, 153 | projectImageDisplay: `project 4`, 158 | }, 159 | { 160 | projectHeading: 'Multi-Post Stories Gain+Glory', 161 | projectName: 'Keeping track of hundreds of components', 162 | projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting 163 | industry. Lorem Ipsum has been the industry's standard dummy text 164 | ever since the 1500s, when an unknown printer took a galley of 165 | type and scrambled it 1960s with the releaLorem Ipsum is simply 166 | dummy text of the printing and typesetting industry. Lorem Ipsum 167 | has been the industry's standard dummy text ever since the 1500s, 168 | when an unknown printer took a galley of type and scrambled it 169 | 1960s with the release`, 170 | projectImageMobile: './images/popup-mobile-img.svg', 171 | projectImageDesktop: './images/popup-desktop-img.svg', 172 | technologies1: 'Ruby on rails', 173 | technologies2: 'css', 174 | technologies3: 'JavaScript', 175 | technologies4: 'Codekit', 176 | technologies5: 'GitHub', 177 | technologies6: 'Bootstrap', 178 | technologies7: 'Terminal', 179 | technologies8: 'Codepen', 180 | technologies9: 'html', 181 | liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', 182 | sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', 183 | projectButton: 'See Project', 184 | btnValue: 4, 185 | projectImageDisplay: `project 5`, 190 | }, 191 | { 192 | projectHeading: 'Multi-Post Stories Gain+Glory', 193 | projectName: 'Keeping track of hundreds of components', 194 | projectDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting 195 | industry. Lorem Ipsum has been the industry's standard dummy text 196 | ever since the 1500s, when an unknown printer took a galley of 197 | type and scrambled it 1960s with the releaLorem Ipsum is simply 198 | dummy text of the printing and typesetting industry. Lorem Ipsum 199 | has been the industry's standard dummy text ever since the 1500s, 200 | when an unknown printer took a galley of type and scrambled it 201 | 1960s with the release`, 202 | projectImageMobile: './images/popup-mobile-img.svg', 203 | projectImageDesktop: './images/popup-desktop-img.svg', 204 | technologies1: 'Ruby on rails', 205 | technologies2: 'css', 206 | technologies3: 'JavaScript', 207 | technologies4: 'Codekit', 208 | technologies5: 'GitHub', 209 | technologies6: 'Bootstrap', 210 | technologies7: 'Terminal', 211 | technologies8: 'Codepen', 212 | technologies9: 'html', 213 | liveLink: 'https://rachelwebdev.github.io/Portfolio-Project/', 214 | sourceLink: 'https://github.com/Rachelwebdev/Portfolio-Project', 215 | projectButton: 'See Project', 216 | btnValue: 5, 217 | projectImageDisplay: `project 6`, 222 | }, 223 | ]; 224 | 225 | const startingPoint = document.querySelector('.body'); 226 | 227 | // -------------MOBILE POPUP--------------------------------- 228 | const creatMobilePopup = () => { 229 | startingPoint.insertAdjacentHTML( 230 | 'afterbegin', 231 | ``, 273 | ); 274 | }; 275 | const projectStart = document.querySelector('.project_section'); 276 | const creatProject = () => { 277 | projectStart.insertAdjacentHTML( 278 | 'afterbegin', 279 | `
280 |
281 |
282 |

283 | 289 | 292 |
293 |
`, 294 | ); 295 | }; 296 | 297 | // eslint-disable-next-line no-plusplus 298 | for (let i = 5; i >= 0; i--) { 299 | creatProject(); 300 | const projectHeading = document.querySelector('.project-heading'); 301 | const ProjectTechnologies1 = document.querySelector('.Project-technologies1'); 302 | const ProjectTechnologies2 = document.querySelector('.Project-technologies2'); 303 | const ProjectTechnologies3 = document.querySelector('.Project-technologies3'); 304 | const ProjectTechnologies4 = document.querySelector('.Project-technologies4'); 305 | const btnProject = document.querySelector('.project-btn'); 306 | const projectImageDisplay = document.querySelector( 307 | '.project_img_placeholder', 308 | ); 309 | 310 | projectHeading.textContent = projectArray[i].projectHeading; 311 | ProjectTechnologies1.textContent = projectArray[i].technologies1; 312 | ProjectTechnologies2.textContent = projectArray[i].technologies2; 313 | ProjectTechnologies3.textContent = projectArray[i].technologies3; 314 | ProjectTechnologies4.textContent = projectArray[i].technologies9; 315 | btnProject.setAttribute('id', projectArray[i].btnValue); 316 | projectImageDisplay.innerHTML = projectArray[i].projectImageDisplay; 317 | } 318 | creatMobilePopup(); 319 | 320 | const projectNameM = document.querySelector('.popup-project-title'); 321 | const projectImageM = document.querySelector('.project-image'); 322 | const descriptionM = document.querySelector('.project-description'); 323 | const technologies1M = document.querySelector('.ruby-technology'); 324 | const technologies2M = document.querySelector('.css-technology'); 325 | const technologies3M = document.querySelector('.javascript-technology'); 326 | const liveLinkM = document.querySelector('.live-link'); 327 | const sourceLinkM = document.querySelector('.source-link'); 328 | 329 | // -------------DESKTOP POPUP------------------------------------ 330 | const createDesktopPopup = () => { 331 | startingPoint.insertAdjacentHTML( 332 | 'afterbegin', 333 | ``, 382 | ); 383 | }; 384 | createDesktopPopup(); 385 | 386 | const projectNameD = document.querySelector('.desktop-popup-project-title'); 387 | const projectImageD = document.querySelector('.popup-desktop-img'); 388 | const descriptionD = document.querySelector('.desktop-project-description'); 389 | const technologies3D = document.querySelector('.js-technology'); 390 | const technologies4 = document.querySelector('.Codekit-technology'); 391 | const technologies5 = document.querySelector('.GitHub-technology'); 392 | const technologies6 = document.querySelector('.Bootstrap-technology'); 393 | const technologies7 = document.querySelector('.Terminal-technology'); 394 | const technologies8 = document.querySelector('.Codepen-technology'); 395 | const liveLinkD = document.querySelector('.live-link-desktop'); 396 | const sourceLinkD = document.querySelector('.source-link-desktop'); 397 | 398 | const projectButton = document.querySelectorAll('.project-btn'); 399 | const modal = document.querySelector('.modal-desktop-overlay'); 400 | const modalMobile = document.querySelector('.modal-mobile-overlay'); 401 | const closeModal = document.querySelector('.cancel-icon-desktop'); 402 | const closeModalMobile = document.querySelector('.cancel-icon-mobile'); 403 | 404 | // DESKTOP OVERLAY 405 | // mobile 406 | const openModalMobile = () => { 407 | modalMobile.style.display = 'flex'; 408 | modal.style.display = 'none'; 409 | }; 410 | 411 | const collapseMobileModal = () => { 412 | modalMobile.style.display = 'none'; 413 | }; 414 | // desktop 415 | const openModalDesktop = () => { 416 | modal.style.display = 'flex'; 417 | modalMobile.style.display = 'none'; 418 | }; 419 | 420 | const collapseDesktopModal = () => { 421 | modal.style.display = 'none'; 422 | }; 423 | 424 | collapseDesktopModal(); 425 | collapseMobileModal(); 426 | 427 | projectButton.forEach((button) => { 428 | button.addEventListener('click', () => { 429 | if (window.innerWidth < 768) { 430 | collapseDesktopModal(); 431 | openModalMobile(); 432 | } else { 433 | collapseMobileModal(); 434 | openModalDesktop(); 435 | } 436 | const count = button.id; 437 | projectNameD.textContent = projectArray[count].projectName; 438 | projectImageD.setAttribute('src', projectArray[count].projectImageDesktop); 439 | descriptionD.textContent = projectArray[count].projectDescription; 440 | technologies3D.textContent = projectArray[count].technologies3; 441 | technologies4.textContent = projectArray[count].technologies4; 442 | technologies5.textContent = projectArray[count].technologies5; 443 | technologies6.textContent = projectArray[count].technologies6; 444 | technologies7.textContent = projectArray[count].technologies7; 445 | technologies8.textContent = projectArray[count].technologies8; 446 | liveLinkD.setAttribute('src', projectArray[count].liveLink); 447 | sourceLinkD.setAttribute('src', projectArray[count].sourceLink); 448 | 449 | projectNameM.textContent = projectArray[count].projectName; 450 | projectImageM.setAttribute('src', projectArray[count].projectImageMobile); 451 | descriptionM.textContent = projectArray[count].projectDescription; 452 | technologies1M.textContent = projectArray[count].technologies1; 453 | technologies2M.textContent = projectArray[count].technologies2; 454 | technologies3M.textContent = projectArray[count].technologies3; 455 | liveLinkM.setAttribute('src', projectArray[count].liveLink); 456 | sourceLinkM.setAttribute('src', projectArray[count].sourceLink); 457 | }); 458 | }); 459 | closeModalMobile.addEventListener('click', collapseMobileModal); 460 | closeModal.addEventListener('click', collapseDesktopModal); 461 | 462 | // FORM VALIDATION 463 | const email = document.getElementById('email'); 464 | const error = document.getElementById('error'); 465 | const formSubmit = document.getElementById('form-button'); 466 | 467 | formSubmit.addEventListener('click', (event) => { 468 | if (email.validity.typeMismatch) { 469 | error.textContent = 'Invalid Email!'; 470 | event.preventDefault(); 471 | return; 472 | } 473 | if (email.validity.patternMismatch) { 474 | error.textContent = 'Kindly ensure your email is in lowercase letters'; 475 | event.preventDefault(); 476 | return; 477 | } 478 | formSubmit.submit(); 479 | }); 480 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&family=Roboto&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | } 13 | 14 | a { 15 | text-decoration: none; 16 | } 17 | 18 | ul li a { 19 | text-decoration: none; 20 | scroll-behavior: smooth; 21 | } 22 | 23 | .main-container { 24 | width: 100%; 25 | background-color: #fff; 26 | } 27 | 28 | /* Navigation bar Styles */ 29 | 30 | .logo-text { 31 | font-family: "Inter", sans-serif; 32 | font-size: 20px; 33 | line-height: 28px; 34 | align-items: center; 35 | text-align: center; 36 | margin-left: 12px; 37 | color: #28352f; 38 | text-decoration: none; 39 | } 40 | 41 | .mobile-nav { 42 | display: flex; 43 | justify-content: space-between; 44 | padding-top: 15px; 45 | width: 100%; 46 | padding-inline: 24px; 47 | } 48 | 49 | .desktop-nav { 50 | display: none; 51 | } 52 | 53 | .hamburger { 54 | margin-right: 24px; 55 | cursor: pointer; 56 | z-index: 2; 57 | } 58 | 59 | .bar { 60 | display: block; 61 | width: 25px; 62 | height: 3px; 63 | margin: 5px; 64 | background-color: #101010; 65 | -webkit-transition: all 0.3s ease-in-out; 66 | transition: all 0.3s ease-in-out; 67 | } 68 | 69 | .hamburger.active .bar:nth-child(2) { 70 | opacity: 0; 71 | } 72 | 73 | .hamburger.active .bar:nth-child(1) { 74 | transform: translateY(8px) rotate(45deg); 75 | background-color: #67798e; 76 | } 77 | 78 | .hamburger.active .bar:nth-child(3) { 79 | transform: translateY(-8px) rotate(-45deg); 80 | background-color: #67798e; 81 | } 82 | 83 | .hamburger-menu-container { 84 | width: 100%; 85 | height: 100%; 86 | background-color: white; 87 | position: absolute; 88 | top: 0; 89 | display: none; 90 | } 91 | 92 | .show-menu { 93 | display: block; 94 | } 95 | 96 | .hamburger-nav-menu { 97 | display: flex; 98 | flex-direction: column; 99 | list-style: none; 100 | gap: 2rem; 101 | margin-left: 2rem; 102 | padding-top: 4rem; 103 | } 104 | 105 | .menu-container { 106 | position: fixed; 107 | } 108 | 109 | .hamburger-nav-menu a { 110 | color: #3a4a42; 111 | font-weight: 600; 112 | font-family: "Inter", sans-serif; 113 | font-size: 2rem; 114 | } 115 | 116 | /* Main Section */ 117 | main { 118 | width: 95%; 119 | height: auto; 120 | background-color: #fff; 121 | margin: auto; 122 | } 123 | 124 | /* Headline Section Styling */ 125 | 126 | #headline-container { 127 | background-image: url("./images/header-illsutration-mobile.svg"); 128 | background-repeat: no-repeat; 129 | background-size: cover; 130 | width: 100%; 131 | height: auto; 132 | display: flex; 133 | flex-direction: column; 134 | align-items: center; 135 | padding: 4rem 1.5rem; 136 | } 137 | 138 | .header-text { 139 | width: 95%; 140 | font-family: "Inter", sans-serif; 141 | font-style: normal; 142 | font-weight: 700; 143 | font-size: 2.5rem; 144 | line-height: 3.2rem; 145 | text-align: center; 146 | color: #172b4d; 147 | padding-bottom: 2rem; 148 | animation-duration: 1s; 149 | animation-name: slidein; 150 | } 151 | 152 | @keyframes slidein { 153 | 0% { 154 | margin-left: 100%; 155 | width: 300%; 156 | } 157 | 158 | 100% { 159 | margin-left: 0%; 160 | width: 100%; 161 | } 162 | } 163 | 164 | .occupation { 165 | color: #36b37e; 166 | } 167 | 168 | .profile-description { 169 | width: 95%; 170 | height: auto; 171 | font-family: "Inter", sans-serif; 172 | font-style: normal; 173 | font-weight: 400; 174 | font-size: 1.3rem; 175 | line-height: 1.8rem; 176 | text-align: center; 177 | color: #172b4d; 178 | padding-bottom: 2rem; 179 | } 180 | 181 | .social-media-icons { 182 | width: 70%; 183 | display: flex; 184 | justify-content: center; 185 | column-gap: 1rem; 186 | align-items: center; 187 | margin: 0 auto; 188 | } 189 | 190 | .social-media-icons li { 191 | list-style-type: none; 192 | } 193 | 194 | /* Recent Works Section Styling */ 195 | 196 | .recent_works_container { 197 | width: 95%; 198 | height: auto; 199 | display: flex; 200 | flex-direction: column; 201 | justify-content: center; 202 | align-items: center; 203 | padding: 4rem 1.5rem; 204 | margin: auto; 205 | } 206 | 207 | .heading-container { 208 | display: flex; 209 | flex-direction: column; 210 | justify-content: center; 211 | align-items: center; 212 | margin-bottom: 2rem; 213 | } 214 | 215 | .works_heading { 216 | width: 95%; 217 | color: #172b4d; 218 | font-family: "Inter", sans-serif; 219 | font-style: normal; 220 | font-weight: 700; 221 | font-size: 2.5rem; 222 | line-height: 3.3rem; 223 | text-align: center; 224 | margin-bottom: 1.8rem; 225 | } 226 | 227 | .indicator { 228 | display: block; 229 | width: 3rem; 230 | height: 4px; 231 | border-radius: 24px; 232 | background-color: #36b37e; 233 | } 234 | 235 | .project_section { 236 | display: grid; 237 | row-gap: 3.6rem; 238 | } 239 | 240 | /* Individual card styling for projects */ 241 | 242 | .single_project_card { 243 | width: 95%; 244 | height: 474px; 245 | flex: none; 246 | flex-grow: 0; 247 | border: 1px solid #36b37e; 248 | border-radius: 8px; 249 | overflow: hidden; 250 | padding-bottom: 4rem; 251 | transition-duration: 500ms; 252 | transition-timing-function: ease-in-out; 253 | } 254 | 255 | .single_project_card:hover { 256 | transform: scale(0.9); 257 | } 258 | 259 | .project_img_placeholder { 260 | background-color: #ebf0ee; 261 | border-radius: 8px; 262 | height: 60%; 263 | } 264 | 265 | .project-display-image, 266 | .project-display-popup { 267 | width: 100%; 268 | height: 100%; 269 | object-fit: cover; 270 | } 271 | 272 | .project_title_container { 273 | display: flex; 274 | flex-direction: column; 275 | align-items: center; 276 | padding: 1rem; 277 | width: 95%; 278 | background-color: #fff; 279 | border-radius: 8px; 280 | } 281 | 282 | .project_title { 283 | padding-bottom: 1rem; 284 | font-family: "Inter", sans-serif; 285 | width: 95%; 286 | height: auto; 287 | font-style: normal; 288 | font-weight: 600; 289 | font-size: 1.5rem; 290 | line-height: 2rem; 291 | display: flex; 292 | justify-content: center; 293 | align-items: center; 294 | text-align: center; 295 | color: #3a4a42; 296 | } 297 | 298 | .technologies_container { 299 | display: flex; 300 | justify-content: center; 301 | align-items: center; 302 | width: 95%; 303 | height: auto; 304 | padding-bottom: 2rem; 305 | } 306 | 307 | .technologies_container li { 308 | list-style-type: none; 309 | display: flex; 310 | justify-content: center; 311 | margin: 0 auto; 312 | margin-right: 0.25rem; 313 | } 314 | 315 | .technology, 316 | .ruby-technology, 317 | .css-technology, 318 | .javascript-technology, 319 | .Codekit-technology, 320 | .GitHub-technology, 321 | .js-technology, 322 | .Bootstrap-technology, 323 | .Terminal-technology, 324 | .Codepen-technology { 325 | flex: none; 326 | flex-grow: 0; 327 | padding: 0.25rem 0.5rem; 328 | background-color: #ebf0ee; 329 | font-style: normal; 330 | font-family: "Inter", sans-serif; 331 | font-weight: 600; 332 | font-size: 0.75rem; 333 | line-height: 1rem; 334 | letter-spacing: 0.03em; 335 | color: #3a4a42; 336 | border-radius: 4px; 337 | } 338 | 339 | .project-btn { 340 | display: flex; 341 | background-color: #36b37e; 342 | border-radius: 4px; 343 | padding: 1rem; 344 | border: none; 345 | font-family: "Inter", sans-serif; 346 | font-style: normal; 347 | font-weight: 500; 348 | font-size: 1rem; 349 | line-height: 1.5rem; 350 | letter-spacing: 0.03em; 351 | align-items: center; 352 | text-align: center; 353 | color: #fff; 354 | transition-duration: 500ms; 355 | transition-timing-function: ease-in-out; 356 | } 357 | 358 | .project-btn:hover { 359 | box-shadow: 0 0.5rem 1rem rgba(54, 179, 127, 0.24); 360 | display: flex; 361 | align-items: center; 362 | text-align: justify; 363 | transform: scale(1.2); 364 | } 365 | 366 | .project-btn:active { 367 | display: flex; 368 | flex-direction: row; 369 | align-items: center; 370 | padding: 1.3rem; 371 | background-color: #008552; 372 | transform: scale(1.2); 373 | } 374 | 375 | /* MOBILE OVERLAY */ 376 | .modal-mobile-overlay { 377 | background-color: rgb(193, 199, 208, 80%); 378 | display: none; 379 | align-items: center; 380 | justify-content: center; 381 | width: 100%; 382 | padding: 1rem 0; 383 | position: absolute; 384 | z-index: 10; 385 | overflow-y: auto; 386 | top: 0; 387 | } 388 | 389 | .popuphide { 390 | display: none; 391 | } 392 | 393 | .popup { 394 | display: flex; 395 | } 396 | 397 | .mobile-popup-container { 398 | /* display: none; */ 399 | width: 80%; 400 | background-color: #fff; 401 | border-radius: 8px; 402 | padding: 0.5rem; 403 | } 404 | 405 | .mobile-image-icon-container { 406 | position: relative; 407 | } 408 | 409 | .cancel-icon-mobile { 410 | width: 15%; 411 | position: absolute; 412 | top: 2%; 413 | left: 83.5%; 414 | cursor: pointer; 415 | } 416 | 417 | .project-image { 418 | width: 100%; 419 | } 420 | 421 | .popup-project-title { 422 | font-family: "Inter", sans-serif; 423 | color: #172b4d; 424 | font-size: 2rem; 425 | line-height: 2.8rem; 426 | font-weight: 600; 427 | } 428 | 429 | .popup-technologies { 430 | display: flex; 431 | justify-content: start; 432 | } 433 | 434 | .popup-technologies li { 435 | list-style-type: none; 436 | margin: 1rem 0.5rem 1rem 0; 437 | } 438 | 439 | .project-description { 440 | font-family: "Inter", sans-serif; 441 | color: #172b4d; 442 | line-height: 1.5rem; 443 | font-weight: 400; 444 | font-size: 1rem; 445 | margin-bottom: 1rem; 446 | } 447 | 448 | .live-source-button-container { 449 | display: flex; 450 | justify-content: space-between; 451 | column-gap: 2rem; 452 | } 453 | 454 | .btn-live { 455 | background: #36b37e; 456 | border-radius: 4px; 457 | border: none; 458 | font-family: "Inter", sans-serif; 459 | font-style: normal; 460 | font-weight: 500; 461 | font-size: 1rem; 462 | line-height: 1.5rem; 463 | text-align: center; 464 | color: #fff; 465 | margin: auto; 466 | text-decoration: none; 467 | padding: 4px 16px; 468 | transition-duration: 500ms; 469 | transition-timing-function: ease-in-out; 470 | } 471 | 472 | .button-icons { 473 | margin-left: 1.5rem; 474 | } 475 | 476 | .btn-live:hover { 477 | box-shadow: 0 8px 16px rgba(54, 179, 127, 0.24); 478 | display: flex; 479 | align-items: center; 480 | transform: scale(1.2); 481 | } 482 | 483 | .btn-live:active { 484 | display: flex; 485 | flex-direction: row; 486 | align-items: center; 487 | background-color: #36b37e; 488 | transform: scale(1.2); 489 | } 490 | 491 | /* About myself section styling */ 492 | .about_myself_container { 493 | display: flex; 494 | flex-direction: column; 495 | align-items: center; 496 | width: 95%; 497 | } 498 | 499 | .about_me { 500 | display: flex; 501 | flex-direction: column; 502 | align-items: center; 503 | width: 95%; 504 | height: auto; 505 | } 506 | 507 | .about-me-illustration-container { 508 | position: relative; 509 | } 510 | 511 | .top-illustration-mobile { 512 | position: absolute; 513 | top: -30%; 514 | left: 85%; 515 | } 516 | 517 | .top-illustration-desktop { 518 | display: none; 519 | } 520 | 521 | .bottom-illustration-mobile { 522 | position: absolute; 523 | bottom: 0; 524 | right: 80%; 525 | } 526 | 527 | .bottom-illustration-desktop { 528 | display: none; 529 | } 530 | 531 | .about_me_heading { 532 | width: 95%; 533 | height: auto; 534 | font-family: "Inter", sans-serif; 535 | font-style: 700; 536 | font-size: 2.5rem; 537 | line-height: 3.3rem; 538 | text-align: center; 539 | color: #172b4d; 540 | } 541 | 542 | .about_me_description { 543 | width: 95%; 544 | height: auto; 545 | font-family: "Inter", sans-serif; 546 | font-weight: 400; 547 | font-size: 1.25rem; 548 | line-height: 2rem; 549 | text-align: center; 550 | color: #42526e; 551 | padding-bottom: 1.25rem; 552 | } 553 | 554 | .resume_btn { 555 | display: flex; 556 | flex-direction: row; 557 | justify-content: center; 558 | align-items: center; 559 | padding: 0.75rem; 560 | background: #36b37e; 561 | border-radius: 4px; 562 | border: none; 563 | font-family: "Inter", sans-serif; 564 | font-style: normal; 565 | font-weight: 500; 566 | font-size: 1rem; 567 | line-height: 1.5rem; 568 | text-align: center; 569 | color: #fff; 570 | margin: auto; 571 | transition-duration: 500ms; 572 | transition-timing-function: ease-in-out; 573 | } 574 | 575 | .resume_btn:hover { 576 | box-shadow: 0 8px 16px rgba(54, 179, 127, 0.24); 577 | display: flex; 578 | align-items: center; 579 | transform: scale(1.2); 580 | } 581 | 582 | .resume_btn:active { 583 | display: flex; 584 | flex-direction: row; 585 | align-items: center; 586 | padding: 0.7rem; 587 | background-color: #36b37e; 588 | transform: scale(1.2); 589 | } 590 | 591 | /* Languages, Frameworks and Skills Cards Styling */ 592 | 593 | /* Languages Card Syles */ 594 | .language_framework_skills { 595 | display: flex; 596 | flex-direction: column; 597 | align-items: center; 598 | width: 95%; 599 | height: auto; 600 | margin-top: 4rem; 601 | } 602 | 603 | .card { 604 | width: 95%; 605 | height: 352px; 606 | background-color: #ebf0ee; 607 | border: 1px solid #c1c7d0; 608 | border-radius: 8px; 609 | display: flex; 610 | flex-direction: column; 611 | justify-content: center; 612 | align-items: center; 613 | margin: 0 1rem 2rem; 614 | } 615 | 616 | .language-container, 617 | .framework-container, 618 | .skills-container { 619 | display: flex; 620 | flex-direction: column; 621 | align-items: center; 622 | } 623 | 624 | .heading { 625 | font-family: "Inter", sans-serif; 626 | font-style: normal; 627 | font-weight: 600; 628 | font-size: 1.5rem; 629 | line-height: 2rem; 630 | text-align: center; 631 | padding: 2rem 0; 632 | color: #344563; 633 | } 634 | 635 | .language_list, 636 | .frameworks_list, 637 | .skills_list { 638 | display: flex; 639 | justify-content: center; 640 | align-items: center; 641 | flex-wrap: wrap; 642 | gap: 8px; 643 | list-style-type: none; 644 | margin: 0 auto; 645 | } 646 | 647 | .language_list li, 648 | .frameworks_list li, 649 | .skills_list li { 650 | background-color: #fff; 651 | padding: 4px; 652 | border-radius: 8px; 653 | color: #36b37e; 654 | font-family: "Inter", sans-serif; 655 | font-style: normal; 656 | font-weight: 600; 657 | font-size: 0.7rem; 658 | line-height: 1rem; 659 | } 660 | 661 | /* Contact section styling */ 662 | .contact-form-container { 663 | display: flex; 664 | flex-direction: column; 665 | gap: 58px; 666 | } 667 | 668 | .contact_header { 669 | color: #172b4d; 670 | font-family: "Inter", sans-serif; 671 | font-weight: 700; 672 | font-size: 40px; 673 | line-height: 52px; 674 | text-align: center; 675 | margin-top: 4rem; 676 | } 677 | 678 | form { 679 | display: flex; 680 | flex-direction: column; 681 | gap: 24px; 682 | } 683 | 684 | .contact_btn { 685 | width: 50%; 686 | margin: 0 auto; 687 | font-size: 1rem; 688 | line-height: 1.5rem; 689 | font-weight: 500; 690 | font-family: "Inter", sans-serif; 691 | background-color: #36b37e; 692 | color: #fff; 693 | border: none; 694 | padding: 0.7rem; 695 | border-radius: 4px; 696 | transition-duration: 500ms; 697 | transition-timing-function: ease-in-out; 698 | } 699 | 700 | .contact_btn:hover { 701 | box-shadow: 0 8px 16px rgba(54, 179, 127, 0.24); 702 | transform: scale(1.2); 703 | } 704 | 705 | .contact_btn:active { 706 | background-color: #008552; 707 | transform: scale(1.2); 708 | } 709 | 710 | .contact-links { 711 | position: relative; 712 | } 713 | 714 | #error { 715 | color: rgb(206, 10, 10); 716 | font-family: "Inter", sans-serif; 717 | font-weight: 700; 718 | } 719 | 720 | .desktop-illustrations-container { 721 | display: none; 722 | } 723 | 724 | .social-media { 725 | padding-bottom: 1.25rem; 726 | } 727 | 728 | .email_link { 729 | text-decoration: none; 730 | display: flex; 731 | justify-content: center; 732 | align-items: center; 733 | padding-bottom: 1.25rem; 734 | color: #42526e; 735 | font-family: "Inter", sans-serif; 736 | font-style: normal; 737 | font-weight: 400; 738 | font-size: 1.25rem; 739 | line-height: 2rem; 740 | } 741 | 742 | input[type="text"], 743 | input[type="email"] { 744 | padding: 0.5rem; 745 | border-radius: 4px; 746 | border: 1px solid #d0d9d4; 747 | } 748 | 749 | textarea { 750 | border: 1px solid #36b37e; 751 | border-radius: 4px; 752 | font-style: normal; 753 | font-weight: 400; 754 | font-size: 1rem; 755 | line-height: 1.5rem; 756 | font-family: "Inter", sans-serif; 757 | padding: 0.5rem; 758 | } 759 | 760 | .form-image { 761 | position: absolute; 762 | left: 83%; 763 | top: -100px; 764 | } 765 | 766 | /* DESKTOP VERSION MEDIA QUERY */ 767 | 768 | @media (min-width: 768px) { 769 | /* Navigation bar */ 770 | .mobile-nav { 771 | display: none; 772 | } 773 | 774 | .desktop-nav { 775 | display: block; 776 | } 777 | 778 | .desktop-links { 779 | display: flex; 780 | justify-content: center; 781 | align-items: center; 782 | } 783 | 784 | .desktop-links li { 785 | list-style-type: none; 786 | text-decoration: none; 787 | padding: 1rem 0; 788 | } 789 | 790 | .desktop-links li a { 791 | text-decoration: none; 792 | padding: 0.6rem 0.7rem; 793 | color: #344563; 794 | font-family: "Inter", sans-serif; 795 | font-style: normal; 796 | font-weight: 600; 797 | font-size: 1rem; 798 | line-height: 1.25rem; 799 | transition-property: color font-size, text-decoration; 800 | transition-duration: 800ms; 801 | transition-timing-function: ease-in-out; 802 | } 803 | 804 | .desktop-links li a:hover { 805 | cursor: pointer; 806 | color: #36b37e; 807 | text-decoration: underline; 808 | font-size: 1.2rem; 809 | } 810 | 811 | .hamburger-menu-container { 812 | display: none; 813 | } 814 | 815 | /* Header section */ 816 | 817 | #headline-container { 818 | background-image: url("./images/Header-llustration-desktop.svg"); 819 | background-repeat: no-repeat; 820 | } 821 | 822 | .header-text { 823 | animation-duration: 2s; 824 | animation-name: slidein; 825 | } 826 | 827 | @keyframes slidein { 828 | 0% { 829 | margin-left: 100%; 830 | width: 300%; 831 | } 832 | 833 | 50% { 834 | font-size: 4rem; 835 | } 836 | 837 | 100% { 838 | margin-left: 0%; 839 | width: 100%; 840 | } 841 | } 842 | 843 | .profile-description { 844 | width: 60%; 845 | } 846 | 847 | /* Recent Works */ 848 | .works_heading { 849 | width: 100%; 850 | } 851 | 852 | .project_section { 853 | grid-template-columns: repeat(3, 1fr); 854 | grid-template-rows: repeat(2, 1fr); 855 | } 856 | 857 | .single_project_card { 858 | padding-bottom: 6.3rem; 859 | } 860 | 861 | .project-btn { 862 | height: 2.5rem; 863 | font-size: 0.8rem; 864 | } 865 | 866 | .technologies_container { 867 | width: 95%; 868 | justify-content: center; 869 | align-items: center; 870 | padding-inline-start: 1rem; 871 | } 872 | 873 | .technologies_container li { 874 | padding: 0 10px; 875 | } 876 | 877 | .technology { 878 | display: flex; 879 | align-items: center; 880 | height: 30px; 881 | background-color: #ebf0ee; 882 | font-style: normal; 883 | font-family: "Inter", sans-serif; 884 | font-weight: 600; 885 | font-size: 0.6rem; 886 | line-height: 1rem; 887 | letter-spacing: 0.03em; 888 | color: #3a4a42; 889 | border-radius: 4px; 890 | } 891 | 892 | /* Desktop Popup window */ 893 | .modal-desktop-overlay { 894 | background-color: rgb(193, 199, 208, 80%); 895 | display: none; 896 | align-items: center; 897 | justify-content: center; 898 | width: 100%; 899 | position: absolute; 900 | z-index: 1; 901 | overflow-y: auto; 902 | top: 0; 903 | } 904 | 905 | .popup { 906 | display: none; 907 | } 908 | 909 | .popuphide { 910 | display: flex; 911 | } 912 | 913 | .desktop-popup-container { 914 | background-color: #fff; 915 | border-radius: 8px; 916 | width: 80%; 917 | margin: 2rem 0; 918 | padding: 1.5rem; 919 | } 920 | 921 | .heading-button-container { 922 | margin-top: 1rem; 923 | display: flex; 924 | justify-content: space-between; 925 | } 926 | 927 | .desktop-popup-project-title { 928 | color: #172b4d; 929 | font-family: "Inter", sans-serif; 930 | font-weight: 700; 931 | font-size: 2rem; 932 | line-height: 44px; 933 | width: 75%; 934 | } 935 | 936 | .popup-desktop-img { 937 | width: 100%; 938 | } 939 | 940 | .desktop-live-source-button-container { 941 | width: 50%; 942 | display: flex; 943 | justify-content: flex-end; 944 | } 945 | 946 | .btn-live-desktop { 947 | display: flex; 948 | justify-content: center; 949 | align-items: center; 950 | text-decoration: none; 951 | background-color: #36b37e; 952 | color: white; 953 | border: none; 954 | font-family: "Inter", sans-serif; 955 | text-align: center; 956 | font-weight: 600; 957 | font-size: 15px; 958 | border-radius: 8px; 959 | transition-duration: 500ms; 960 | transition-timing-function: ease-in-out; 961 | } 962 | 963 | .btn-live-desktop:hover { 964 | box-shadow: 0 8px 16px rgba(54, 179, 127, 0.24); 965 | display: flex; 966 | align-items: center; 967 | transform: scale(1.2); 968 | } 969 | 970 | .btn-live-desktop:active { 971 | display: flex; 972 | flex-direction: row; 973 | align-items: center; 974 | background-color: #36b37e; 975 | transform: scale(1.2); 976 | } 977 | 978 | .live-link-desktop { 979 | margin-right: 1rem; 980 | padding-left: 1rem; 981 | } 982 | 983 | .source-link-desktop { 984 | padding-left: 1rem; 985 | } 986 | 987 | .desktop-project-description { 988 | color: #344563; 989 | font-family: "Inter", sans-serif; 990 | font-weight: 400; 991 | font-size: 1rem; 992 | line-height: 1.8rem; 993 | } 994 | 995 | .button-icons-desktop { 996 | padding: 0 12px 0 12px; 997 | } 998 | 999 | .cancel-icon-desktop { 1000 | float: right; 1001 | margin-bottom: 10px; 1002 | } 1003 | 1004 | /* About me section */ 1005 | 1006 | .about_me_description { 1007 | width: 57%; 1008 | } 1009 | 1010 | .top-illustration-mobile { 1011 | display: none; 1012 | } 1013 | 1014 | .bottom-illustration-mobile { 1015 | display: none; 1016 | } 1017 | 1018 | .top-illustration-desktop { 1019 | display: block; 1020 | position: absolute; 1021 | top: -30%; 1022 | left: 80%; 1023 | } 1024 | 1025 | .bottom-illustration-desktop { 1026 | display: block; 1027 | position: absolute; 1028 | bottom: 0; 1029 | right: 80%; 1030 | } 1031 | 1032 | .resume_btn { 1033 | width: 20%; 1034 | } 1035 | 1036 | /* Languages, Frameworks and Skills Cards Styling */ 1037 | .language_framework_skills { 1038 | flex-direction: row; 1039 | justify-content: center; 1040 | } 1041 | 1042 | .card { 1043 | width: 30%; 1044 | } 1045 | 1046 | /* Contact section styling */ 1047 | .contact-form-container { 1048 | width: 95%; 1049 | flex-direction: row; 1050 | align-items: flex-start; 1051 | justify-content: center; 1052 | margin-top: 4rem; 1053 | } 1054 | 1055 | .contact_header { 1056 | width: 35%; 1057 | font-size: 1.8rem; 1058 | display: flex; 1059 | align-items: center; 1060 | line-height: 2.5rem; 1061 | } 1062 | 1063 | form { 1064 | width: 50%; 1065 | } 1066 | 1067 | .contact_btn { 1068 | margin: 0; 1069 | width: 35%; 1070 | } 1071 | 1072 | .form-image { 1073 | display: none; 1074 | } 1075 | 1076 | .contact-links { 1077 | margin-top: 20rem; 1078 | position: relative; 1079 | border-top: 1px solid #dfe1e6; 1080 | } 1081 | 1082 | .social-media { 1083 | padding-top: 1rem; 1084 | } 1085 | 1086 | .desktop-illustrations-container { 1087 | display: block; 1088 | } 1089 | 1090 | .image-left-1 { 1091 | position: absolute; 1092 | bottom: 60%; 1093 | right: 83%; 1094 | } 1095 | 1096 | .image-middle-2 { 1097 | position: absolute; 1098 | bottom: 200%; 1099 | right: 70%; 1100 | } 1101 | 1102 | .image-right-3 { 1103 | position: absolute; 1104 | bottom: 98%; 1105 | left: 80%; 1106 | } 1107 | 1108 | .email_link { 1109 | display: none; 1110 | } 1111 | } 1112 | --------------------------------------------------------------------------------