├── public ├── images │ ├── menu-line.svg │ ├── black-circle.svg │ ├── line.svg │ ├── right-project-image-bg.svg │ ├── ellipse.svg │ ├── left-project-image-bg.svg │ ├── fb-logo.svg │ ├── linkedin-logo.svg │ ├── logo-red.svg │ ├── logo-black.svg │ ├── my-stacks-waves.svg │ ├── git-logo.svg │ ├── git-full-logo.svg │ ├── contact-form-bg.svg │ ├── main-services-second-card-img.svg │ └── main-services-first-card-img.svg ├── css │ ├── animations.css │ ├── main.css │ └── home.css └── javascript │ └── main.js ├── readme.md └── index.html /public/images/menu-line.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /public/images/black-circle.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /public/css/animations.css: -------------------------------------------------------------------------------- 1 | .first-line-mobile-menu-rotation { 2 | transform: rotate3d(0, 0, 1, 45deg); 3 | } 4 | 5 | .second-line-mobile-menu-rotation { 6 | transform: rotate3d(0, 0, 1, -45deg); 7 | } -------------------------------------------------------------------------------- /public/images/line.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /public/images/right-project-image-bg.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /public/images/ellipse.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /public/images/left-project-image-bg.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /public/images/fb-logo.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /public/css/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-size: 62.5%; 3 | --primary: #FF3233; 4 | --primary-hover: #db2c2c; 5 | } 6 | 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | color: black; 11 | text-decoration: none; 12 | font-family: 'Nunito Sans', sans-serif; 13 | list-style-type: none; 14 | box-sizing: border-box; 15 | outline: none; 16 | } 17 | 18 | .justify-center { 19 | width: 100%; 20 | display: flex; 21 | justify-content: center; 22 | } 23 | 24 | .container { 25 | width: 101rem; 26 | margin: 0rem 4rem; 27 | } 28 | 29 | .stop-scrolling { 30 | height: 100%; 31 | overflow: hidden; 32 | } -------------------------------------------------------------------------------- /public/images/linkedin-logo.svg: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /public/images/logo-red.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /public/images/logo-black.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /public/images/my-stacks-waves.svg: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # :house: My Portfolio 4 | ![](https://img.shields.io/github/followers/eliasbiondo?style=social) ![](https://img.shields.io/github/stars/eliasbiondo?style=social) ![](https://img.shields.io/github/languages/code-size/eliasbiondo/my-portfolio?style=social) ![](https://img.shields.io/github/languages/count/eliasbiondo/my-portfolio?style=social) 5 | 6 | ![enter image description here](https://i.imgur.com/9zjGO20.png) 7 | 8 | **Why?** I've created this portfolio to present my projects, my skills and myself to world. It translates a lot about me. I like flat and clean designs, usablity and minimalism. 9 | 10 | ## :rocket: Technologies 11 | This project was developed with the following technologies: 12 | 13 | - [HTML5](https://html5.org/) 14 | - [CSS3](https://www.w3.org/Style/CSS/Overview.en.html) 15 | - [JS](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 16 | ## :pushpin: Layout 17 | You can see this website layout [clicking here](https://www.figma.com/file/53b6GNkeBVOxwr1WlxYitx/My-Portfolio-eliasbiondo?node-id=0%3A1). You'll need a [Figma](https://www.figma.com/) account. 18 | 19 | ## 🕵‍♂ Website Sections 20 | 21 | - Main menu: the website's main menu 22 | - Banner: introduction about me and my services 23 | - Readme.md: who am I? 24 | - My Skills: my skills how computer engineer 25 | - Main services: my main services 26 | - Some projects: some apps that I made 27 | - Send me a message: a simple and flat form to contact me 28 | - Footer: copyright and social networks links 29 | 30 | ## ⏳ Pending Improvements 31 | 32 | - [ ] Preloading screen 33 | - [ ] Animations on scroll 34 | - [X] Contact form config 35 | 36 | ## 🇧🇷 Collaborators 37 | 38 | 39 | 47 | 48 |

40 | 41 | Elias Biondo profile image

42 | _{43 | Elias Biondo
44 |} 45 | 46 |

49 | 50 | ## 💬 Any suggestions? 51 | Feel free to suggest new features or make your own changes. 52 | 53 | ___ 54 | Coded with :heart: by [Elias Biondo](https://github.com/eliasbiondo) 55 | -------------------------------------------------------------------------------- /public/javascript/main.js: -------------------------------------------------------------------------------- 1 | /* Mobile Menu */ 2 | 3 | const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); 4 | const modalMenu = document.querySelector('.mobile-menu'); 5 | 6 | window.onload = function() { 7 | mobileMenuBtn.addEventListener("click", menuPopup, false); 8 | } 9 | 10 | let isTheMenuOpened = false; 11 | 12 | function menuPopup() { 13 | 14 | if(isTheMenuOpened == false) { 15 | mobileMenuBtn.firstElementChild.classList.add('first-line-mobile-menu-rotation'); 16 | mobileMenuBtn.lastElementChild.classList.add('second-line-mobile-menu-rotation'); 17 | mobileMenuBtn.lastElementChild.style.marginTop = '0'; 18 | 19 | modalMenu.style.display = 'flex'; 20 | document.body.classList.add('stop-scrolling'); 21 | 22 | isTheMenuOpened = true; 23 | } else { 24 | mobileMenuBtn.firstElementChild.classList.remove('first-line-mobile-menu-rotation'); 25 | mobileMenuBtn.lastElementChild.classList.remove('second-line-mobile-menu-rotation'); 26 | mobileMenuBtn.lastElementChild.style.marginTop = '1.5rem'; 27 | 28 | modalMenu.style.display = 'none'; 29 | document.body.classList.remove('stop-scrolling'); 30 | 31 | isTheMenuOpened = false; 32 | } 33 | 34 | } 35 | 36 | 37 | /* Desktop Menu */ 38 | 39 | const menuLinks = document.querySelectorAll('.container .menu-navigation ul a') 40 | const menuListItems = document.querySelectorAll('.container .menu-navigation ul a li') 41 | 42 | menuLinks.forEach(link => { 43 | link.addEventListener("click", activeBtn, false) 44 | }) 45 | 46 | function activeBtn(event) { 47 | const clickedLink = event.target; 48 | 49 | menuListItems.forEach(link => { 50 | link.classList.remove('active'); 51 | }) 52 | 53 | clickedLink.classList.add('active'); 54 | } 55 | 56 | /* Smooth Scroll */ 57 | 58 | const internalLinks = document.querySelectorAll('.menu-navigation ul a[href^="#"], .contact-me-btn'); 59 | 60 | internalLinks.forEach(link => { 61 | link.addEventListener("click", softScroll, false); 62 | } ) 63 | 64 | function softScroll(event) { 65 | 66 | event.preventDefault(); 67 | 68 | let link = event.target.parentNode; 69 | 70 | if (event.target.getAttribute('href') == '#contact-me') { 71 | link = event.target; 72 | } 73 | 74 | const id = link.getAttribute('href'); 75 | const section = document.querySelector(id); 76 | const distanceFromTop = section.offsetTop; 77 | 78 | window.scroll({ 79 | top: distanceFromTop - 50, 80 | behavior: "smooth" 81 | }) 82 | 83 | 84 | } 85 | -------------------------------------------------------------------------------- /public/images/git-logo.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /public/images/git-full-logo.svg: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 20 | 21 | 25 | 26 | 30 | 31 | 35 | 36 | 37 | 38 | Elias Biondo | Web developer 39 | 40 | 41 | 42 |

43 | 44 | 45 | 46 | 61 | 62 |

63 |

elias
biondo

67 | 68 | 81 | 82 | contact me 83 | 84 | 88 |

89 |

90 | 91 | 92 | 104 | 105 | 106 |

107 |

108 |

109 |

Readme.md

110 |

My name is Elias and I’m 18 years old. Currently, student of Computer Engineering at Federal University of Technology (Brazil)

111 |

112 |

113 | 114 | 115 |

116 |

117 |

118 |

My Skills

119 |

120 |

121 |

html
bootstrap
node.js
php
javascript
git
mongo db
mysql
css
vue.js
react
figma

135 |

136 |

137 |

138 |

beginner / learning
intermediate / upper
advanced / expert

143 |

144 |

145 |

146 | 147 | 148 |

149 |

150 |

main services

151 |

152 |

153 |

154 |

People making software adjustments

155 |

156 |

web development

157 |

158 |

159 |

160 |

161 |

162 |

social marketing

163 |

164 |

165 |

166 |

People making design adjustments

167 |

168 |

bespoke design and +

169 |

170 |

171 |

172 |

173 | 174 | 175 |

176 |

177 |

some projects

178 |

179 |

180 |

181 | Happy is a web application that aims to connect people with multiple Children's Homes, providing information about visiting hours, addresses and contact numbers. Note: this project is for study purposes only. It's not a real and active social-project (unfortunatelly). 182 |

183 |

Happy Project Image

184 |

185 |

186 |

187 | Bikecraft is a website that sells handmade bikes. With a clean design, it conveys elegancy, minimalism and modernity. The customers can ask an online budget, see made bikes, learn more about the business and send a message using a contact form. 188 |

189 |

Happy Project Image

190 |

191 |

192 |

193 |

194 | 195 | 196 |

197 |

198 |

199 |

send me a message

200 | 215 |

216 |

217 | 218 | 219 | 241 |

242 | 243 | 244 | 245 | -------------------------------------------------------------------------------- /public/css/home.css: -------------------------------------------------------------------------------- 1 | body { 2 | width: 100%; 3 | min-height: 100vh; 4 | } 5 | 6 | .main-menu { 7 | height: auto; 8 | } 9 | 10 | .main-menu .container { 11 | height: 15rem; 12 | display: flex; 13 | justify-content: space-between; 14 | align-items: center; 15 | } 16 | 17 | .main-menu .container .logo { 18 | width: clamp(15.5rem, 20vw, 20rem); 19 | display: flex; 20 | justify-content: space-between; 21 | 22 | transition: color 200ms linear; 23 | transition: transform 200ms linear; 24 | } 25 | 26 | .main-menu .container .logo:hover { 27 | color: var(--primary); 28 | transform: scale(1.20); 29 | } 30 | 31 | .main-menu .container img { 32 | width: clamp(6.5rem, 7vw, 7.2rem); 33 | } 34 | 35 | .main-menu .container .logo h1 { 36 | font-size: clamp(2.5rem, 3vw, 3.6rem); 37 | font-weight: bold; 38 | line-height: 3.6rem; 39 | color: inherit; 40 | } 41 | 42 | .main-menu .container .menu-navigation ul { 43 | width: clamp(20rem, 25vw, 29rem); 44 | display: flex; 45 | justify-content: space-between; 46 | } 47 | 48 | .main-menu .container .menu-navigation ul li { 49 | font-size: clamp(1.8rem, 2vw, 2.3rem); 50 | font-weight: 700; 51 | 52 | transition: color 200ms linear; 53 | transition: transform 200ms linear; 54 | } 55 | 56 | .main-menu .container .menu-navigation ul li:hover { 57 | color: var(--primary); 58 | transform: scale(1.20) 59 | } 60 | 61 | .main-menu .container .menu-navigation ul li.active { 62 | color: var(--primary); 63 | } 64 | 65 | .main-menu .container .contact-me-btn { 66 | width: clamp(16rem, 20vw, 20rem); 67 | height: 5rem; 68 | display: flex; 69 | justify-content: center; 70 | align-items: center; 71 | font-size: 2.4rem; 72 | font-weight: 600; 73 | color: var(--primary); 74 | background-color: white; 75 | border: 2px solid var(--primary); 76 | border-radius: 30px; 77 | cursor: pointer; 78 | 79 | transition: color 200ms linear; 80 | transition: background-color 200ms linear; 81 | transition: transform 200ms linear; 82 | } 83 | 84 | .main-menu .container .contact-me-btn:hover { 85 | color: white; 86 | background-color: var(--primary); 87 | transform: scale(1.15); 88 | } 89 | 90 | .main-menu .container .mobile-menu-btn { 91 | display: none; 92 | } 93 | 94 | .mobile-menu { 95 | display: none; 96 | } 97 | 98 | .banner-section { 99 | height: auto; 100 | margin: clamp(.5rem, 2.5vw, 8rem) 0rem; 101 | } 102 | 103 | .banner-section .container { 104 | display: flex; 105 | justify-content: flex-start; 106 | align-items: center; 107 | background: url(../images/banner-bg.svg) no-repeat right; 108 | background-size: clamp(32.5rem, 35vw, 50rem); 109 | padding: 2rem 0rem; 110 | } 111 | 112 | .banner-section .container header { 113 | width: clamp(30rem, 40vw, 51rem); 114 | } 115 | 116 | .banner-section .container header > img { 117 | display: none; 118 | } 119 | 120 | .banner-section .container header h1 { 121 | font-size: clamp(4.0rem, 5vw, 5.6rem); 122 | font-weight: bold; 123 | line-height: clamp(4.9rem, 5.9vw, 6.5rem); 124 | } 125 | 126 | .banner-section .container header h1 span { 127 | color: var(--primary); 128 | } 129 | 130 | .banner-section .container header p { 131 | font-size: clamp(2.8rem, 3vw, 4.2rem); 132 | font-weight: 400; 133 | line-height: clamp(3rem, 4vw, 5.2rem); 134 | } 135 | 136 | .banner-section .container header a img { 137 | width: clamp(15rem, 20vw, 25rem); 138 | margin-top: 5rem; 139 | margin-bottom: 5rem; 140 | } 141 | 142 | .banner-section .container header a img:hover { 143 | filter: invert(33%) sepia(51%) saturate(6924%) hue-rotate(341deg) brightness(99%) contrast(110%); 144 | } 145 | 146 | .readme-section { 147 | height: auto; 148 | margin: 12rem 0rem 2rem 0rem; 149 | } 150 | 151 | .readme-section .container { 152 | height: clamp(40rem, 50vw, 62rem); 153 | display: flex; 154 | flex-direction: column; 155 | justify-content: center; 156 | align-items: flex-end; 157 | background: url(../images/readme-bg.svg) no-repeat left; 158 | background-size: clamp(32.5rem, 35vw, 50rem); 159 | text-align: end; 160 | } 161 | 162 | .readme-section .container img { 163 | display: none; 164 | } 165 | 166 | .readme-section .container h2 { 167 | font-size: clamp(4.0rem, 5vw, 5.6rem); 168 | font-weight: bold; 169 | line-height: 6.5rem; 170 | } 171 | 172 | .readme-section .container h2 span { 173 | color: var(--primary); 174 | } 175 | 176 | .readme-section .container p { 177 | width: clamp(25rem, 40vw, 51rem); 178 | font-size: clamp(2.8rem, 3vw, 4.2rem); 179 | font-weight: normal; 180 | line-height: clamp(3rem, 4vw, 5.2rem); 181 | } 182 | 183 | .my-stacks-section { 184 | height: clamp(112rem, 78vw, 500rem); 185 | display: flex; 186 | justify-content: center; 187 | align-items: center; 188 | background: url(../images/my-stacks-waves.svg) no-repeat center; 189 | background-size: cover; 190 | } 191 | 192 | .my-stacks-section .container { 193 | display: flex; 194 | flex-direction: column; 195 | justify-content: flex-start; 196 | align-items: flex-start; 197 | height: 100%; 198 | } 199 | 200 | .my-stacks-section .container .section-title h2 { 201 | color: white; 202 | font-size: 7.2rem; 203 | font-weight: bold; 204 | line-height: 9.8rem; 205 | margin-top: clamp(30rem, 20vw, 80rem); 206 | } 207 | 208 | .my-stacks-section .container .stacks-section ul { 209 | display: flex; 210 | flex-direction: column; 211 | justify-content: center; 212 | align-items: flex-start; 213 | max-height: 31rem; 214 | flex-wrap: wrap; 215 | margin-top: 5rem; 216 | } 217 | 218 | .my-stacks-section .container .stacks-section ul li { 219 | font-size: clamp(3.0rem, 4.5vw, 7.0rem); 220 | font-weight: bold; 221 | line-height: clamp(4rem, 9vw, 7.6rem); 222 | margin-right: 5rem; 223 | color: white; 224 | } 225 | 226 | .my-stacks-section .container .stacks-section ul li img { 227 | margin-right: clamp(.5rem, 1vw, 2.5rem); 228 | width: clamp(1.5rem, 2vw, 2.5rem); 229 | } 230 | 231 | .green-elipse { 232 | filter: invert(79%) sepia(20%) saturate(6942%) hue-rotate(47deg) brightness(108%) contrast(106%); 233 | } 234 | 235 | .blue-elipse { 236 | filter: invert(34%) sepia(94%) saturate(1948%) hue-rotate(192deg) brightness(98%) contrast(113%); 237 | } 238 | 239 | .red-elipse { 240 | filter: invert(31%) sepia(52%) saturate(4089%) hue-rotate(341deg) brightness(100%) contrast(105%); 241 | } 242 | 243 | .my-stacks-section .container .red-line { 244 | margin-top: 5rem; 245 | } 246 | 247 | .my-stacks-section .container .stacks-caption { 248 | margin-top: 5rem; 249 | } 250 | 251 | .my-stacks-section .container .stacks-caption ul li { 252 | font-size: clamp(2.0rem, 3.5vw, 3.6rem); 253 | font-weight: bold; 254 | line-height: 4.9rem; 255 | color: white; 256 | } 257 | 258 | .my-stacks-section .container .stacks-caption ul li img { 259 | margin-right: clamp(.5rem, 1vw, 2.5rem); 260 | width: clamp(1.5rem, 2vw, 2.5rem); 261 | } 262 | 263 | .main-services-section { 264 | margin-top: 12rem; 265 | } 266 | 267 | 268 | .main-services-section .container h2 { 269 | font-size: clamp(4.0rem, 5vw, 5.6rem); 270 | font-weight: bold; 271 | line-height: 6.5rem; 272 | } 273 | 274 | .main-services-section .container h2 span { 275 | color: var(--primary); 276 | } 277 | 278 | .main-services-section .container .cards-set { 279 | display: flex; 280 | justify-content: space-between; 281 | align-items: center; 282 | margin: 4rem 0rem 8rem 0rem; 283 | } 284 | 285 | .main-services-section .container .cards-set .card { 286 | width: clamp(20rem, 25vw, 30.5rem); 287 | height: clamp(30rem, 36vw, 41.5rem); 288 | display: flex; 289 | flex-direction: column; 290 | border: 0.2rem solid #000; 291 | border-radius: 3.5rem; 292 | } 293 | 294 | .main-services-section .container .cards-set .card .card-image { 295 | width: 100%; 296 | height: 33rem; 297 | display: flex; 298 | justify-content: center; 299 | align-items: center; 300 | } 301 | 302 | .main-services-section .container .cards-set .card .card-image img { 303 | width: clamp(17rem, 20vw, 24rem); 304 | } 305 | 306 | .main-services-section .container .cards-set .card .card-description { 307 | width: 100%; 308 | height: 8.5rem; 309 | display: flex; 310 | justify-content: center; 311 | align-items: center; 312 | color: white; 313 | background-color: var(--primary); 314 | border-radius: 0px 0px 33px 33px; 315 | 316 | font-size: clamp(1.5rem, 2vw, 2.4rem); 317 | font-weight: bold; 318 | text-align: center; 319 | line-height: 2.4rem; 320 | } 321 | 322 | .some-projects-section { 323 | margin-top: 6rem; 324 | background: url(../images/right-project-image-bg.svg) no-repeat right 4%, url(../images/left-project-image-bg.svg) no-repeat left 88%; 325 | background-size: 52rem; 326 | } 327 | 328 | .some-projects-section .container h2 { 329 | font-size: 5.6rem; 330 | font-weight: bold; 331 | line-height: 6.5rem; 332 | } 333 | 334 | .some-projects-section .container h2 span { 335 | color: var(--primary); 336 | } 337 | 338 | .some-projects-section .container .text { 339 | display: flex; 340 | justify-content: flex-start; 341 | align-items: center; 342 | text-align: right; 343 | position: relative; 344 | } 345 | 346 | .some-projects-section .container .text:nth-child(even) { 347 | display: flex; 348 | flex-direction: row-reverse; 349 | justify-content: flex-start; 350 | text-align: left; 351 | } 352 | 353 | .some-projects-section .container .text p { 354 | margin-right: 10rem; 355 | } 356 | 357 | .some-projects-section .container .text:nth-child(even) p { 358 | margin-right: 0; 359 | margin-left: 10rem; 360 | } 361 | 362 | .some-projects-section .container .text img { 363 | position: absolute; 364 | right: clamp(-10rem, -3.7vw, 0rem); 365 | } 366 | 367 | .some-projects-section .container .text:nth-child(even) img { 368 | position: absolute; 369 | left: clamp(-10rem, -3.7vw, 0rem); 370 | } 371 | 372 | .text:first-child { 373 | margin-top: 5.5rem; 374 | } 375 | 376 | .text:last-child { 377 | margin-bottom: 18rem; 378 | } 379 | 380 | .text + .text { 381 | margin-top: 19.5rem; 382 | } 383 | 384 | .some-projects-section .container .texts .text p { 385 | width: 35rem; 386 | font-size: 2.4rem; 387 | font-weight: normal; 388 | line-height: 3.3rem; 389 | text-align: inherit; 390 | } 391 | 392 | .some-projects-section .container .texts .text p span { 393 | font-weight: bold; 394 | color: var(--primary); 395 | } 396 | 397 | .send-me-a-message-section { 398 | margin-top: 10rem; 399 | margin-bottom: 14rem; 400 | } 401 | 402 | .send-me-a-message-section .container { 403 | background: url(../images/contact-form-bg.svg) no-repeat right 60%; 404 | background-size: clamp(28rem, 35vw, 50rem); 405 | } 406 | 407 | .send-me-a-message-section .container img { 408 | display: none; 409 | } 410 | 411 | .send-me-a-message-section .container h2 { 412 | font-size: clamp(3.5rem, 5vw, 5.0rem); 413 | font-weight: bold; 414 | line-height: 6.5rem; 415 | margin-bottom: 3rem; 416 | } 417 | 418 | .send-me-a-message-section .container h2 span { 419 | color: var(--primary); 420 | } 421 | 422 | .send-me-a-message-section .container form label, 423 | .send-me-a-message-section .container form textarea { 424 | display: block; 425 | margin: 1.4rem 0rem 1rem 0rem; 426 | font-size: 1.8rem; 427 | font-weight: 200; 428 | line-height: 2.5rem; 429 | cursor: pointer; 430 | } 431 | 432 | .send-me-a-message-section .container form input:focus, 433 | .send-me-a-message-section .container form textarea:focus { 434 | border: 1px solid var(--primary); 435 | box-shadow: 0px 0px 2px var(--primary); 436 | } 437 | 438 | .send-me-a-message-section .container form input, 439 | .send-me-a-message-section .container form textarea, 440 | .send-me-a-message-section .container form button { 441 | width: clamp(32rem, 45vw, 45rem); 442 | height: 5rem; 443 | font-size: 1.8rem; 444 | font-weight: 200; 445 | line-height: 2.5rem; 446 | padding: 0rem 2.5rem; 447 | border: 1px solid #000; 448 | border-radius: 4rem; 449 | outline: none; 450 | } 451 | 452 | .send-me-a-message-section .container form textarea { 453 | height: 20rem; 454 | padding: 2rem 2.5rem; 455 | margin-bottom: 3rem; 456 | resize: none; 457 | cursor: initial; 458 | } 459 | 460 | .send-me-a-message-section .container form button { 461 | height: 6.4rem; 462 | font-size: 2.4rem; 463 | font-weight: 400; 464 | line-height: 2rem; 465 | color: white; 466 | background-color: var(--primary); 467 | border: none; 468 | outline: none; 469 | } 470 | 471 | .send-me-a-message-section .container form button:hover { 472 | background-color: var(--primary-hover); 473 | cursor: pointer; 474 | } 475 | 476 | .footer-section { 477 | margin-top: 1rem; 478 | margin-bottom: 7.2rem; 479 | } 480 | 481 | .footer-section .container { 482 | display: flex; 483 | flex-direction: column; 484 | justify-content: center; 485 | align-items: flex-start; 486 | } 487 | 488 | 489 | .footer-section .container .logo { 490 | width: 20rem; 491 | display: flex; 492 | justify-content: space-between; 493 | 494 | transition: color 200ms linear; 495 | transition: transform 200ms linear; 496 | } 497 | 498 | .footer-section .container .logo:hover { 499 | transform: scale(1.20); 500 | } 501 | 502 | .footer-section .container .logo img { 503 | width: 7.2rem; 504 | } 505 | 506 | .footer-section .container .logo h1 { 507 | font-size: 3.6rem; 508 | font-weight: bold; 509 | line-height: 3.6rem; 510 | color: inherit; 511 | } 512 | 513 | .footer-section .container .footer-final-box { 514 | width: 100%; 515 | display: flex; 516 | justify-content: space-between; 517 | margin-top: 2rem; 518 | } 519 | 520 | .footer-section .container .footer-final-box p { 521 | font-size: 2.4rem; 522 | font-weight: 200; 523 | line-height: 3.6rem; 524 | } 525 | 526 | .footer-section .container .footer-final-box .social-icons { 527 | width: 12rem; 528 | display: flex; 529 | justify-content: space-between; 530 | } 531 | 532 | .footer-section .container .footer-final-box .social-icons a { 533 | transition: transform 200ms linear; 534 | } 535 | 536 | .footer-section .container .footer-final-box .social-icons a:hover { 537 | transform: scale(1.20); 538 | } 539 | 540 | /* Tablet Responsivity Adjustments */ 541 | 542 | @media only screen and (max-width: 1159px) { 543 | .some-projects-section { 544 | background: none; 545 | } 546 | .some-projects-section .container .text { 547 | flex-direction: column-reverse; 548 | align-items: flex-start; 549 | } 550 | 551 | .some-projects-section .container .text:nth-child(even) { 552 | flex-direction: column-reverse; 553 | } 554 | 555 | .some-projects-section .container .texts .text p { 556 | width: 100%; 557 | margin: 4rem 0rem 0rem 0rem; 558 | text-align: left; 559 | } 560 | 561 | .some-projects-section .container .text:nth-child(even) p { 562 | margin-left: 0; 563 | } 564 | 565 | .some-projects-section .container .text img { 566 | width: 100%; 567 | position: initial; 568 | } 569 | 570 | .some-projects-section .container .text:nth-child(even) img { 571 | position: initial; 572 | } 573 | 574 | .text:first-child { 575 | margin-top: 8rem; 576 | } 577 | 578 | .text:last-child { 579 | margin-bottom: 0rem; 580 | } 581 | 582 | .text + .text { 583 | margin-top: 10rem; 584 | } 585 | .send-me-a-message-section { 586 | margin-top: 5rem; 587 | } 588 | } 589 | 590 | /* Mobile Version */ 591 | 592 | @media only screen and (max-width: 719px) { 593 | 594 | 595 | .main-menu .container .menu-navigation { 596 | display: none; 597 | } 598 | 599 | .main-menu .container .contact-me-btn { 600 | display: none; 601 | } 602 | 603 | .main-menu .container .mobile-menu-btn { 604 | display: flex; 605 | flex-direction: column; 606 | justify-content: center; 607 | width: 5rem; 608 | height: 5rem; 609 | cursor: pointer; 610 | z-index: 100; 611 | } 612 | 613 | .mobile-menu-btn .nav-line { 614 | width: 5rem; 615 | height: 0.1rem; 616 | background-color: #000; 617 | transition: transform 200ms linear; 618 | } 619 | 620 | .mobile-menu-btn .nav-line + .nav-line { 621 | margin-top: 1.5rem; 622 | } 623 | 624 | .mobile-menu { 625 | display: none; 626 | justify-content: center; 627 | align-items: center; 628 | position: fixed; 629 | z-index: 50; 630 | width: 100%; 631 | height: 100vh; 632 | background-color: #fff; 633 | transition: display 1s linear; 634 | } 635 | 636 | .mobile-menu .menu-navigation ul a li { 637 | font-size: clamp(3.5rem, 10vw, 4.5rem); 638 | font-weight: 700; 639 | text-align: center; 640 | transition: color 200ms linear; 641 | transition: transform 200ms linear; 642 | } 643 | 644 | .mobile-menu .menu-navigation ul a + a li { 645 | margin-top: 1.5rem; 646 | } 647 | 648 | .mobile-menu .menu-navigation ul li:hover { 649 | color: var(--primary); 650 | transform: scale(1.20) 651 | } 652 | 653 | .mobile-menu .menu-navigation ul li.active { 654 | color: var(--primary); 655 | } 656 | 657 | 658 | .banner-section { 659 | height: auto; 660 | } 661 | 662 | .banner-section .container { 663 | display: flex; 664 | justify-content: center; 665 | align-items: center; 666 | background: none; 667 | background-size: none; 668 | } 669 | 670 | .banner-section .container header { 671 | display: flex; 672 | flex-direction: column; 673 | justify-content: center; 674 | align-items: center; 675 | width: 100%; 676 | } 677 | 678 | .banner-section .container header img { 679 | display: flex; 680 | width: 100%; 681 | margin-bottom: 2rem; 682 | } 683 | 684 | .banner-section .container header h1 { 685 | text-align: center; 686 | } 687 | 688 | .banner-section .container header p { 689 | text-align: center; 690 | margin-top: 1.2rem; 691 | } 692 | 693 | .readme-section { 694 | height: clamp(50rem, 140vw, 100rem); 695 | display: flex; 696 | align-items: center; 697 | margin: clamp(5rem, -15vw, 20rem) 0 0 0; 698 | } 699 | 700 | .readme-section .container { 701 | display: flex; 702 | justify-content: center; 703 | align-items: center; 704 | background: none; 705 | } 706 | 707 | .readme-section .container img { 708 | display: flex; 709 | width: 100%; 710 | margin-bottom: 2rem; 711 | } 712 | 713 | .readme-section .container h1 { 714 | text-align: center; 715 | } 716 | 717 | .readme-section .container p { 718 | text-align: center; 719 | margin-top: 1.2rem; 720 | } 721 | 722 | .my-stacks-section { 723 | height: clamp(180rem, 78vw, 500rem); 724 | } 725 | 726 | .my-stacks-section .container { 727 | width: 100vw; 728 | align-items: center; 729 | } 730 | 731 | .my-stacks-section .container .section-title h2 { 732 | margin-top: 40rem; 733 | margin-left: 2rem; 734 | text-align: center; 735 | } 736 | 737 | .my-stacks-section .container .stacks-section ul { 738 | max-height: 80rem; 739 | margin-left: 2rem; 740 | } 741 | 742 | .my-stacks-section .container .stacks-section ul li { 743 | font-size: clamp(2.5rem, 4.5vw, 7.0rem); 744 | line-height: clamp(4rem, 9vw, 5.5rem); 745 | } 746 | 747 | .my-stacks-section .container .stacks-section ul li img { 748 | margin-right: clamp(2.5rem, 1vw, 3rem); 749 | } 750 | 751 | .my-stacks-section .container .red-line { 752 | width: 20rem; 753 | margin-left: 2rem; 754 | } 755 | 756 | .my-stacks-section .container .stacks-caption { 757 | margin-left: 2rem; 758 | } 759 | 760 | .main-services-section .container { 761 | width: 100%; 762 | display: flex; 763 | flex-direction: column; 764 | justify-content: center; 765 | align-items: center; 766 | } 767 | 768 | .main-services-section .container h2 { 769 | text-align: center; 770 | line-height: clamp(4.0rem, 5vw, 5.6rem); 771 | } 772 | 773 | .main-services-section .container .cards-set { 774 | display: flex; 775 | flex-direction: column; 776 | justify-content: center; 777 | align-items: center; 778 | } 779 | 780 | .main-services-section .container .cards-set .card { 781 | width: clamp(25rem, 25vw, 30.5rem); 782 | height: clamp(35rem, 36vw, 41.5rem); 783 | } 784 | 785 | .main-services-section .container .cards-set .card .card-image img { 786 | width: clamp(23rem, 20vw, 24rem); 787 | } 788 | 789 | .card + .card { 790 | margin-top: 4rem; 791 | } 792 | 793 | .some-projects-section .container h2 { 794 | font-size: clamp(4.0rem, 5vw, 5.6rem); 795 | line-height: clamp(3.5rem, 5vw, 5.0rem); 796 | text-align: center; 797 | } 798 | 799 | .some-projects-section .container .texts .text p { 800 | text-align: center; 801 | } 802 | 803 | .send-me-a-message-section .container { 804 | background: none; 805 | display: flex; 806 | flex-direction: column; 807 | justify-content: center; 808 | align-items: center; 809 | } 810 | 811 | .send-me-a-message-section .container h2 { 812 | text-align: center; 813 | line-height: clamp(3.5rem, 5vw, 5.0rem); 814 | } 815 | 816 | .send-me-a-message-section .container img { 817 | display: flex; 818 | width: 100%; 819 | margin-top: 8rem; 820 | } 821 | 822 | .send-me-a-message-section .container form input, 823 | .send-me-a-message-section .container form textarea, 824 | .send-me-a-message-section .container form button { 825 | width: clamp(20rem, 45vw, 45rem); 826 | } 827 | 828 | .footer-section .container { 829 | align-items: center; 830 | } 831 | 832 | .footer-section .container .footer-final-box { 833 | flex-direction: column-reverse; 834 | justify-content: center; 835 | align-items: center; 836 | } 837 | 838 | .footer-section .container .footer-final-box .social-icons { 839 | margin: 1rem 0rem 1rem 0rem; 840 | } 841 | 842 | .footer-section .container .footer-final-box p { 843 | text-align: center; 844 | } 845 | 846 | } -------------------------------------------------------------------------------- /public/images/contact-form-bg.svg: -------------------------------------------------------------------------------- 1 | 88 | -------------------------------------------------------------------------------- /public/images/main-services-second-card-img.svg: -------------------------------------------------------------------------------- 1 | 102 | -------------------------------------------------------------------------------- /public/images/main-services-first-card-img.svg: -------------------------------------------------------------------------------- 1 | 90 | --------------------------------------------------------------------------------