├── LICENSE ├── index.html ├── script.js └── style.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Sasan Moshirabadi 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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 14 | Sasan's Portfolio 15 | 16 | 17 | 18 |
19 |
20 |
21 | 27 |
28 | 45 |
46 | 47 |
48 | 49 |
50 |

I'm Sasan
Glad to see you!

51 |

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

55 |

LET'S CONNECT

56 | 74 |
75 | 76 | 77 |
78 | 79 |
80 | 81 | 82 | 83 |
84 |
85 |
86 |
87 | 88 | 89 |
90 |
91 |

About
Myself

92 |

Hello I’m a software developer! I can help you build a product , feature or 93 | website 94 | Look through some of my work and experience! If you like what you see and have a project you need coded, 95 | don’t 96 | hestiate to contact me.

97 |

LET'S CONNECT

98 | 116 | 117 |
118 | 119 | 120 |
    121 |
  • 122 |
    123 | Languages 124 | down arrow 125 |
    126 |
      127 |
    • 128 | javascript logoJavascript 129 |
      • 130 |
    • 131 | html logoHTML 132 |
      • 133 |
    • 134 | css logoCSS 135 |
      • 136 |
    137 |
    • 138 |
  • Framwork right arrow
    • 140 |
  • Skills right arrow
    • 142 |
143 |
144 | 145 | 146 |
147 |
148 |

Contact Me

149 |

150 | If you have an application you are interested in developing, a feature that you need built or a project that 151 | needs coding. I’d love to help with it 152 |

153 | 154 | 156 | 157 | 158 | 159 | 161 | error message 162 | 163 |
164 |
165 |
166 |
167 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // ----- Hamburger button pop up menu ------- // 2 | 3 | const hamburgerButton = document.querySelector('#hamburger-menu'); 4 | 5 | const overlayMenu = document.querySelector('.overlay-menu'); 6 | 7 | const close = document.querySelector('.close'); 8 | 9 | const portfolio = document.querySelector('#portfolio-link'); 10 | const about = document.querySelector('#about-link'); 11 | const contact = document.querySelector('#contact-link'); 12 | 13 | hamburgerButton.onclick = function () { 14 | overlayMenu.style.display = 'block'; 15 | }; 16 | 17 | close.onclick = function () { 18 | overlayMenu.style.display = 'none'; 19 | }; 20 | 21 | portfolio.onclick = function () { 22 | overlayMenu.style.display = 'none'; 23 | }; 24 | 25 | about.onclick = function () { 26 | overlayMenu.style.display = 'none'; 27 | }; 28 | 29 | contact.onclick = function () { 30 | overlayMenu.style.display = 'none'; 31 | }; 32 | 33 | // ----- Popup Card for projects ------- // 34 | 35 | const cardInfo = [ 36 | { 37 | name: 'Tonic', 38 | company: 'CANOPY', 39 | role: 'Back End Dev', 40 | year: '2015', 41 | desctiption: "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 to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent.", 42 | techstack: ['html', 'css', 'javasctipt'], 43 | imageUrl: 'src/images/card-cover1.png', 44 | }, 45 | { 46 | name: 'Multi-Post Stories', 47 | company: 'CANOPY', 48 | role: 'Back End Dev', 49 | year: '2015', 50 | desctiption: "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 to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent. ", 51 | techstack: ['html', 'css', 'javasctipt'], 52 | imageUrl: 'src/images/card-cover2.png', 53 | }, 54 | { 55 | name: 'Tonic', 56 | company: 'CANOPY', 57 | role: 'Back End Dev', 58 | year: '2015', 59 | desctiption: "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 to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent.", 60 | techstack: ['html', 'css', 'javasctipt'], 61 | imageUrl: 'src/images/card-cover3.png', 62 | }, 63 | { 64 | name: 'Multi-Post Stories', 65 | company: 'CANOPY', 66 | role: 'Back End Dev', 67 | year: '2015', 68 | desctiption: "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 to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent.", 69 | techstack: ['html', 'css', 'javasctipt'], 70 | imageUrl: 'src/images/card-cover4.png', 71 | }, 72 | ]; 73 | 74 | function loadCards(cardInfo) { 75 | const projects = document.querySelector('.projects'); 76 | for (let i = 0; i < cardInfo.length; i += 1) { 77 | const card = document.createElement('div'); 78 | card.classList.add('card'); 79 | const label = `card${i + 1}`; 80 | card.classList.add(label); 81 | if (i % 2 === 0) { 82 | card.classList.add('even'); 83 | } else { 84 | card.classList.add('odd'); 85 | } 86 | card.innerHTML = ` 87 | image of previous work example 88 |
89 |

${cardInfo[i].name}

90 | 97 |

98 | ${cardInfo[i].desctiption} 99 |

100 | 105 | 106 |
107 | `; 108 | projects.appendChild(card); 109 | } 110 | } 111 | loadCards(cardInfo); 112 | 113 | const cardModal = document.querySelector('.card-modal'); 114 | const cardModalContainer = document.querySelector('.card-modal-container'); 115 | 116 | const firstCardBtn = document.querySelector('#card-button-1'); 117 | const secondCardBtn = document.querySelector('#card-button-2'); 118 | const thirdCardBtn = document.querySelector('#card-button-3'); 119 | const forthCardBtn = document.querySelector('#card-button-4'); 120 | 121 | function generatePopup(cardNum) { 122 | cardModalContainer.style.display = 'block'; 123 | const info = cardInfo[cardNum]; 124 | cardModal.innerHTML = ` 125 |
126 |
127 |
128 |

${info.name}

129 | 130 |
131 | 138 |
139 | image of previous work example 140 |
141 |

142 | ${info.desctiption} 143 |

144 |
145 |
    146 |
  • ${info.techstack[0]}
    • 147 |
  • ${info.techstack[1]}
    • 148 |
  • ${info.techstack[2]}
    • 149 |
150 |
151 | 154 | 157 |
158 |
159 |
160 |
161 | `; 162 | const closeModal = document.querySelector('.close-modal'); 163 | function closeModalFunc() { 164 | cardModalContainer.style.display = 'none'; 165 | } 166 | closeModal.addEventListener('click', closeModalFunc); 167 | } 168 | 169 | firstCardBtn.addEventListener('click', () => { 170 | generatePopup(0); 171 | }); 172 | secondCardBtn.addEventListener('click', () => { 173 | generatePopup(1); 174 | }); 175 | thirdCardBtn.addEventListener('click', () => { 176 | generatePopup(2); 177 | }); 178 | forthCardBtn.addEventListener('click', () => { 179 | generatePopup(3); 180 | }); 181 | 182 | window.onclick = function (event) { 183 | if (event.target === cardModalContainer) { 184 | cardModalContainer.style.display = 'none'; 185 | } 186 | }; 187 | 188 | // ------ Contact Form validation -------- // 189 | const contactForm = document.querySelector('.contact-form'); 190 | const contactError = document.querySelector('.contact-error'); 191 | const emailInput = document.querySelector('#email'); 192 | 193 | window.addEventListener('load', () => { 194 | if (emailInput.value === '') { 195 | contactError.style.display = 'none'; 196 | } 197 | }); 198 | 199 | emailInput.addEventListener('input', () => { 200 | if (emailInput.value === '') { 201 | contactError.style.display = 'none'; 202 | } 203 | }); 204 | 205 | contactForm.addEventListener('submit', (event) => { 206 | if (emailInput.value !== emailInput.value.toLowerCase()) { 207 | contactError.style.display = 'block'; 208 | contactError.textContent = 'Email address should be lowercase'; 209 | 210 | event.preventDefault(); 211 | } 212 | }); 213 | 214 | // ------- Form Local Storage -------- // 215 | 216 | // error below this part 217 | const nameInput = document.querySelector('#name'); 218 | // emailInput declared before 219 | const messageInput = document.querySelector('$description'); 220 | 221 | let form = {}; 222 | function populateStorage() { 223 | form.name = nameInput.value; 224 | form.email = emailInput.value; 225 | form.message = messageInput.value; 226 | const formStr = JSON.stringify(form); 227 | localStorage.setItem('form', formStr); 228 | } 229 | 230 | function restoreForm() { 231 | const formStr = localStorage.getItem('form'); 232 | form = JSON.parse(formStr); 233 | nameInput.value = form.name; 234 | emailInput.value = form.email; 235 | messageInput.value = form.message; 236 | } 237 | 238 | if (localStorage.getItem('forms')) { 239 | restoreForm(); 240 | } else { 241 | populateStorage(); 242 | } 243 | 244 | nameInput.addEventListener('change', populateStorage); 245 | emailInput.addEventListener('change', populateStorage); 246 | messageInput.addEventListener('change', populateStorage); 247 | 248 | contactForm.addEventListener('submit', () => { 249 | localStorage.setItem('form', ''); 250 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | font-family: Poppins, Verdana, sans-serif; 6 | } 7 | 8 | a { 9 | text-decoration: none; 10 | } 11 | 12 | li { 13 | list-style: none; 14 | } 15 | 16 | .wrapper { 17 | font-family: Poppins, Verdana, sans-serif; 18 | } 19 | 20 | /* 21 | -----Header----- 22 | */ 23 | 24 | .overlay-menu { 25 | display: none; 26 | position: fixed; 27 | z-index: 1; 28 | width: 100%; 29 | height: 100%; 30 | color: white; 31 | background-color: rgba(64, 83, 252, 0.7); 32 | backdrop-filter: blur(7px); 33 | } 34 | 35 | .overlay-menu .content { 36 | display: flex; 37 | flex-direction: column; 38 | gap: 30px; 39 | margin: auto; 40 | width: 80%; 41 | font-size: 2rem; 42 | } 43 | 44 | .overlay-menu a { 45 | text-decoration: none; 46 | color: white; 47 | font-weight: 600; 48 | } 49 | 50 | .overlay-menu .close { 51 | align-self: flex-end; 52 | color: #fff; 53 | font-size: 50px; 54 | font-weight: bold; 55 | } 56 | 57 | .overlay-menu .close:hover, 58 | .overlay-menu .close:focus { 59 | color: #000; 60 | text-decoration: none; 61 | cursor: pointer; 62 | } 63 | 64 | nav { 65 | display: flex; 66 | justify-content: space-between; 67 | align-items: center; 68 | padding: 5% 8%; 69 | } 70 | 71 | nav .logo { 72 | color: #4053fc; 73 | font-size: 18px; 74 | font-weight: 700; 75 | line-height: 20px; 76 | } 77 | 78 | nav .menu { 79 | display: flex; 80 | justify-content: center; 81 | align-items: center; 82 | } 83 | 84 | nav .hamburger-menu { 85 | display: flex; 86 | align-items: center; 87 | justify-content: center; 88 | height: 24px; 89 | width: 30px; 90 | } 91 | 92 | @media screen and (max-width: 768px) { 93 | nav .desktop-menu { 94 | display: none; 95 | } 96 | } 97 | 98 | @media screen and (min-width: 768px) { 99 | nav { 100 | padding: 5% 8%; 101 | } 102 | 103 | nav .logo { 104 | color: #4053fc; 105 | font-size: 18px; 106 | font-weight: 700; 107 | line-height: 20px; 108 | 109 | /* Animations */ 110 | animation-name: rotate-logo; 111 | animation-duration: 2s; 112 | } 113 | 114 | @keyframes rotate-logo { 115 | from { 116 | transform: rotate(360deg); 117 | } 118 | 119 | to { 120 | transform: rotate(0); 121 | } 122 | } 123 | 124 | nav .hamburger-menu { 125 | display: none; 126 | } 127 | 128 | nav .desktop-menu { 129 | display: flex; 130 | justify-content: space-between; 131 | gap: 8px; 132 | } 133 | 134 | nav .desktop-menu li + li { 135 | margin-left: 24px; 136 | } 137 | 138 | nav .desktop-menu a { 139 | font-size: 15px; 140 | color: #344563; 141 | padding: 0; 142 | } 143 | } 144 | 145 | /* 146 | -----Main----- 147 | */ 148 | 149 | /* 150 | Headline Section 151 | */ 152 | 153 | .headline { 154 | display: flex; 155 | flex-direction: column; 156 | padding: 8%; 157 | padding-bottom: 25%; 158 | gap: 12px; 159 | background-image: url(src/backgrounds/background.svg); 160 | background-repeat: no-repeat; 161 | background-size: 100%; 162 | } 163 | 164 | .main-title { 165 | font-size: 40px; 166 | color: #172b4d; 167 | margin-top: 20%; 168 | } 169 | 170 | .main-description { 171 | font-size: 16px; 172 | font-weight: 400; 173 | color: #344563; 174 | line-height: 24px; 175 | } 176 | 177 | .connect { 178 | color: #7f8cff; 179 | font-size: 16px; 180 | font-weight: 500; 181 | line-height: 24px; 182 | } 183 | 184 | .connect-icons { 185 | display: flex; 186 | align-items: center; 187 | gap: 20px; 188 | color: #505f79; 189 | list-style: none; 190 | } 191 | 192 | .connect-icons a { 193 | display: flex; 194 | align-items: center; 195 | } 196 | 197 | .connect-icons a:hover { 198 | background-color: #babdda; 199 | } 200 | 201 | @media screen and (min-width: 768px) { 202 | .headline { 203 | background-image: url(src/backgrounds/headline-desktop.svg); 204 | background-size: 110%; 205 | background-position: 50% 30%; 206 | } 207 | 208 | .main-title { 209 | font-size: 48px; 210 | } 211 | 212 | .main-description { 213 | font-size: 20px; 214 | line-height: 28px; 215 | } 216 | } 217 | 218 | /* 219 | Projects Section 220 | */ 221 | 222 | .projects { 223 | display: flex; 224 | flex-direction: column; 225 | padding: 8%; 226 | padding-top: 20%; 227 | background-color: #e5e5e5; 228 | } 229 | 230 | .card { 231 | display: flex; 232 | flex-direction: column; 233 | align-items: flex-start; 234 | gap: 12px; 235 | background-color: #fff; 236 | margin: 15% 0; 237 | padding: 5%; 238 | border: 1px solid #dfe1e6; 239 | border-radius: 16px; 240 | } 241 | 242 | .card-cover { 243 | width: 100%; 244 | } 245 | 246 | .card-title { 247 | color: #172b4d; 248 | font-size: 32px; 249 | font-weight: 700; 250 | } 251 | 252 | .card-details { 253 | display: flex; 254 | align-items: center; 255 | gap: 12px; 256 | font-size: 13px; 257 | font-weight: 600; 258 | height: 32px; 259 | } 260 | 261 | .prim-detail-cap { 262 | color: #344563; 263 | } 264 | 265 | .sec-detail-cap { 266 | color: #7a869a; 267 | } 268 | 269 | .card .description { 270 | font-size: 15px; 271 | line-height: 24px; 272 | font-weight: 400; 273 | color: #344563; 274 | } 275 | 276 | .techstack { 277 | display: flex; 278 | align-items: center; 279 | gap: 8px; 280 | margin: 3% 0; 281 | } 282 | 283 | .techstack li { 284 | padding: 4px 12px; 285 | background-color: #ebebff; 286 | border-radius: 8px; 287 | font-size: 12px; 288 | color: #4053fc; 289 | } 290 | 291 | .techstack li:hover { 292 | box-shadow: 293 | 1px 1px 5px rgba(0, 0, 0, 0.1), 294 | -1px -1px 5px rgba(0, 0, 0, 0.1); 295 | } 296 | 297 | .card .card-button { 298 | color: #4053fc; 299 | background-color: #fff; 300 | border: 1px solid #4053fc; 301 | padding: 10px; 302 | border-radius: 8px; 303 | font-size: 17px; 304 | cursor: pointer; 305 | 306 | /* transition */ 307 | transition: background-color 0.5s ease-out, color 0.5s ease-out, box-shadow 0.5s ease-out; 308 | } 309 | 310 | .card .card-button:hover { 311 | background-color: #4053fc; 312 | color: #fff; 313 | box-shadow: 314 | 1px 1px 5px rgba(0, 0, 0, 0.3), 315 | -1px -1px 5px rgba(0, 0, 0, 0.3); 316 | } 317 | 318 | .card .card-button:active { 319 | background-color: #2230d2; 320 | color: #fff; 321 | box-shadow: 322 | 1px 1px 5px rgba(0, 0, 0, 0.3), 323 | -1px -1px 5px rgba(0, 0, 0, 0.3); 324 | } 325 | 326 | .card .card-button:disabled { 327 | background-color: #fff; 328 | color: #5e6c84; 329 | border-color: #5e6c84; 330 | } 331 | 332 | @media screen and (min-width: 768px) { 333 | .projects { 334 | padding: 3% 8%; 335 | padding-top: 10%; 336 | } 337 | 338 | .card { 339 | display: grid; 340 | align-items: center; 341 | grid-template-columns: 1fr 1fr; 342 | margin: 10% auto; 343 | padding: 24px; 344 | transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out; 345 | } 346 | 347 | .card:hover { 348 | transform: scale(1.02); 349 | box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), -3px -3px 5px rgba(0, 0, 0, 0.2); 350 | } 351 | 352 | .card1 .card-cover { 353 | content: url(src/images/card-cover1-desktop.png); 354 | width: 100%; 355 | } 356 | 357 | .card2 .card-cover { 358 | content: url(src/images/card-cover2-desktop.png); 359 | } 360 | 361 | .card3 .card-cover { 362 | content: url(src/images/card-cover3-desktop.png); 363 | } 364 | 365 | .card4 .card-cover { 366 | content: url(src/images/card-cover4-desktop.png); 367 | } 368 | 369 | .even .card-cover { 370 | order: 2; 371 | } 372 | 373 | .card-info { 374 | align-self: flex-start; 375 | display: flex; 376 | flex-direction: column; 377 | align-items: flex-start; 378 | justify-content: flex-start; 379 | gap: 10px; 380 | padding: 24px; 381 | } 382 | 383 | .even .card-info { 384 | order: 1; 385 | } 386 | 387 | .card-title { 388 | font-size: 40px; 389 | line-height: 52px; 390 | } 391 | 392 | .prim-detail-cap { 393 | font-size: 18px; 394 | } 395 | 396 | .sec-detail-cap { 397 | font-size: 18px; 398 | } 399 | 400 | .card .description { 401 | font-size: 16px; 402 | line-height: 24px; 403 | margin-top: 5%; 404 | } 405 | 406 | .card .card-button { 407 | margin-top: 5%; 408 | } 409 | } 410 | 411 | /* Popup Card for Projects */ 412 | 413 | .card-modal-container { 414 | position: fixed; 415 | display: none; 416 | flex-direction: column; 417 | align-items: center; 418 | z-index: 1; 419 | left: 0; 420 | top: 0; 421 | overflow: auto; 422 | width: 100%; 423 | height: 100%; 424 | background-color: rgba(193, 199, 208, 0.7); 425 | backdrop-filter: blur(5px); 426 | } 427 | 428 | .card-modal { 429 | background-color: #fff; 430 | margin: auto 5%; 431 | border-radius: 16px; 432 | } 433 | 434 | .card-modal .card { 435 | transition: none; 436 | } 437 | 438 | .card-modal .card:hover { 439 | transform: none; 440 | box-shadow: none; 441 | } 442 | 443 | .popup-header { 444 | display: flex; 445 | flex-direction: column; 446 | align-content: stretch; 447 | width: 100%; 448 | } 449 | 450 | .modal-title-container { 451 | display: flex; 452 | align-items: baseline; 453 | justify-content: space-between; 454 | width: 100%; 455 | } 456 | 457 | .popup-card .techstack { 458 | padding-bottom: 25px; 459 | margin-bottom: 0; 460 | border-bottom: 1px solid rgba(235, 236, 240, 1); 461 | } 462 | 463 | .close-modal { 464 | font-size: 2.5rem; 465 | cursor: pointer; 466 | border: none; 467 | background-color: #fff; 468 | line-height: 1.5rem; 469 | } 470 | 471 | .popup-buttons { 472 | display: flex; 473 | gap: 10px; 474 | width: 100%; 475 | padding-top: 25px; 476 | } 477 | 478 | .popup-buttons button.card-button { 479 | flex: 1; 480 | height: 50px; 481 | display: flex; 482 | padding: 0 10px; 483 | margin-top: 0; 484 | justify-content: center; 485 | align-items: center; 486 | gap: 8px; 487 | } 488 | 489 | @media screen and (min-width: 768px) { 490 | /* Popup Card for Projects - Desktop */ 491 | 492 | .card-modal { 493 | margin: auto 10%; 494 | } 495 | 496 | .popup-card .card-info { 497 | flex-direction: row; 498 | gap: 5%; 499 | padding: 1% 0 5%; 500 | } 501 | 502 | .popup-card .card-info-sub { 503 | display: flex; 504 | flex-direction: column; 505 | width: 100%; 506 | } 507 | 508 | .popup-card { 509 | grid-template-columns: 1fr; 510 | gap: 15px; 511 | } 512 | 513 | .popup-header { 514 | display: flex; 515 | align-content: stretch; 516 | justify-content: space-between; 517 | width: 100%; 518 | } 519 | 520 | .popup-card .card-cover { 521 | margin: 3% 0; 522 | aspect-ratio: 1108/586; 523 | object-fit: cover; 524 | } 525 | 526 | .popup-card .description { 527 | max-width: 60%; 528 | margin-top: 0; 529 | } 530 | } 531 | 532 | /* About Myself Section */ 533 | 534 | .about-myself { 535 | display: flex; 536 | flex-direction: column; 537 | } 538 | 539 | .about-container { 540 | display: flex; 541 | flex-direction: column; 542 | gap: 12px; 543 | align-items: flex-start; 544 | padding: 8%; 545 | background-color: #fff; 546 | padding-top: 30%; 547 | } 548 | 549 | .about-title { 550 | color: #172b4d; 551 | font-size: 40px; 552 | } 553 | 554 | .about-description { 555 | color: #344563; 556 | } 557 | 558 | .resume-link { 559 | cursor: pointer; 560 | color: #4053fc; 561 | background-color: #fff; 562 | border: 1px solid #4053fc; 563 | padding: 12px; 564 | border-radius: 8px; 565 | font-size: 17px; 566 | font-style: normal; 567 | 568 | /* transition */ 569 | transition: background-color 0.5s ease-out, color 0.5s ease-out, box-shadow 0.5s ease-out; 570 | } 571 | 572 | .resume-link:hover { 573 | background-color: #4053fc; 574 | color: #fff; 575 | box-shadow: 576 | 1px 1px 5px rgba(0, 0, 0, 0.3), 577 | -1px -1px 5px rgba(0, 0, 0, 0.3); 578 | } 579 | 580 | .resume-link:active { 581 | background-color: #2230d2; 582 | color: #fff; 583 | box-shadow: 584 | 1px 1px 5px rgba(0, 0, 0, 0.3), 585 | -1px -1px 5px rgba(0, 0, 0, 0.3); 586 | } 587 | 588 | .resume-link:disabled { 589 | background-color: #fff; 590 | color: #5e6c84; 591 | border-color: #5e6c84; 592 | } 593 | 594 | /* Categories */ 595 | 596 | .categories { 597 | align-self: stretch; 598 | display: flex; 599 | flex-direction: column; 600 | margin: 5% 0; 601 | } 602 | 603 | .cat-list-items { 604 | display: flex; 605 | justify-content: space-between; 606 | align-items: center; 607 | padding: 5%; 608 | font-size: 20px; 609 | border-bottom: 1px solid #dfe1e6; 610 | } 611 | 612 | .categories li.lang-open { 613 | display: flex; 614 | flex-direction: column; 615 | align-items: stretch; 616 | border-bottom: none; 617 | } 618 | 619 | .arrow { 620 | height: 18px; 621 | margin-right: 18px; 622 | } 623 | 624 | .cat-header { 625 | display: flex; 626 | justify-content: space-between; 627 | margin-bottom: 8%; 628 | } 629 | 630 | .lang-list { 631 | display: flex; 632 | flex-direction: column; 633 | } 634 | 635 | .lang-open .lang-list li { 636 | display: flex; 637 | align-items: center; 638 | background-color: #f7f7f9; 639 | border-radius: 8px; 640 | gap: 5px; 641 | margin: 2% 0; 642 | padding: 3%; 643 | font-size: 15px; 644 | } 645 | 646 | .lang-open .lang-list img { 647 | height: 18%; 648 | width: 18%; 649 | } 650 | 651 | @media screen and (min-width: 768px) { 652 | .about-myself { 653 | display: grid; 654 | grid-template-columns: 1fr 1fr; 655 | padding: 10% 8%; 656 | column-gap: 8px; 657 | } 658 | 659 | .about-container { 660 | padding: 0; 661 | gap: 3%; 662 | overflow: visible; 663 | min-width: 361px; 664 | } 665 | 666 | .categories { 667 | margin: 0; 668 | } 669 | 670 | .lang-list { 671 | flex-direction: row; 672 | gap: 8px; 673 | } 674 | 675 | .lang-open .lang-list li { 676 | flex-direction: column; 677 | gap: 15px; 678 | margin: 0; 679 | align-items: flex-start; 680 | flex-basis: 120px; 681 | min-height: 120px; 682 | } 683 | 684 | .lang-open .lang-list img { 685 | height: 48px; 686 | width: 48px; 687 | } 688 | } 689 | 690 | /* Contact Form */ 691 | 692 | .contact-section { 693 | padding: 8%; 694 | background-color: #4053fc; 695 | background-image: url(src/backgrounds/contact-background.svg); 696 | background-repeat: no-repeat; 697 | background-position: top right; 698 | color: #fff; 699 | border-top-left-radius: 100px; 700 | } 701 | 702 | .contact-section .contact-form { 703 | display: flex; 704 | flex-direction: column; 705 | gap: 12px; 706 | margin-top: 20%; 707 | } 708 | 709 | .contact-form label { 710 | display: none; 711 | } 712 | 713 | .message { 714 | text-align: center; 715 | font-size: 20px; 716 | margin-bottom: 10%; 717 | } 718 | 719 | .contacts-heading { 720 | text-align: center; 721 | font-size: 40px; 722 | } 723 | 724 | .contacts-input { 725 | padding: 16px; 726 | border: 1px solid #cfd8dc; 727 | border-radius: 8px; 728 | font-size: 17px; 729 | } 730 | 731 | .contact-error { 732 | display: none; 733 | align-self: flex-start; 734 | font-size: 17px; 735 | padding: 1% 3%; 736 | background-color: #900; 737 | color: #fff; 738 | border-radius: 8px; 739 | } 740 | 741 | .contact-submit { 742 | cursor: pointer; 743 | background-color: #fff; 744 | color: #4053fc; 745 | padding: 16px; 746 | border: 1px solid #4053fc; 747 | font-size: 17px; 748 | border-radius: 8px; 749 | width: 45%; 750 | 751 | /* transition */ 752 | transition: background-color 0.5s ease-out, color 0.5s ease-out, box-shadow 0.5s ease-out; 753 | } 754 | 755 | .contact-submit:hover { 756 | background-color: #4053fc; 757 | color: #fff; 758 | box-shadow: 759 | 1px 1px 5px rgba(0, 0, 0, 0.3), 760 | -1px -1px 5px rgba(0, 0, 0, 0.3); 761 | } 762 | 763 | .contact-submit:active { 764 | background-color: #2230d2; 765 | color: #fff; 766 | box-shadow: 767 | 1px 1px 5px rgba(0, 0, 0, 0.3), 768 | -1px -1px 5px rgba(0, 0, 0, 0.3); 769 | } 770 | 771 | .contact-submit:disabled { 772 | background-color: #fff; 773 | color: #5e6c84; 774 | border-color: #5e6c84; 775 | } 776 | 777 | @media screen and (min-width: 768px) { 778 | .contact-section { 779 | padding: 8%; 780 | background-color: #4053fc; 781 | background-image: url(src/backgrounds/contact-desktop.svg); 782 | background-repeat: no-repeat; 783 | background-position: center; 784 | background-size: 110%; 785 | color: #fff; 786 | border-top-left-radius: 100px; 787 | } 788 | 789 | .contact-section .contact-form { 790 | display: flex; 791 | flex-direction: column; 792 | gap: 30px; 793 | margin: 0 auto; 794 | max-width: 768px; 795 | margin-top: 8%; 796 | } 797 | 798 | .contact-form .message { 799 | font-size: 20px; 800 | margin-bottom: 5%; 801 | } 802 | 803 | .contact-error { 804 | margin: 0 10%; 805 | } 806 | 807 | .contact-submit { 808 | align-self: center; 809 | } 810 | 811 | .contacts-input { 812 | margin: 0 10%; 813 | } 814 | } 815 | --------------------------------------------------------------------------------