├── assets ├── contact.jpg ├── hero.jpg ├── institutional.jpg ├── languages1.png ├── languages2.png ├── languages3.png ├── languages4.png ├── languages5.png ├── portfolio1.png ├── portfolio2.png └── portfolio3.png ├── index.html ├── scripts ├── animation.js └── script.js └── scss ├── _about.scss ├── _base.scss ├── _contact.scss ├── _footer.scss ├── _hero.scss ├── _languages.scss ├── _mediaQueries.scss ├── _mixins.scss ├── _navbar.scss ├── _portfolio.scss ├── _reusableStyles.scss ├── _scrollToTop.scss ├── _services.scss ├── _skills.scss ├── index.css ├── index.css.map └── index.scss /assets/contact.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/portfolio-website-html-css/4153569300c3c37d44f52f5bb9d13cdfc3880784/assets/contact.jpg -------------------------------------------------------------------------------- /assets/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/portfolio-website-html-css/4153569300c3c37d44f52f5bb9d13cdfc3880784/assets/hero.jpg -------------------------------------------------------------------------------- /assets/institutional.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/portfolio-website-html-css/4153569300c3c37d44f52f5bb9d13cdfc3880784/assets/institutional.jpg -------------------------------------------------------------------------------- /assets/languages1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/portfolio-website-html-css/4153569300c3c37d44f52f5bb9d13cdfc3880784/assets/languages1.png -------------------------------------------------------------------------------- /assets/languages2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/portfolio-website-html-css/4153569300c3c37d44f52f5bb9d13cdfc3880784/assets/languages2.png -------------------------------------------------------------------------------- /assets/languages3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/portfolio-website-html-css/4153569300c3c37d44f52f5bb9d13cdfc3880784/assets/languages3.png -------------------------------------------------------------------------------- /assets/languages4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/portfolio-website-html-css/4153569300c3c37d44f52f5bb9d13cdfc3880784/assets/languages4.png -------------------------------------------------------------------------------- /assets/languages5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/portfolio-website-html-css/4153569300c3c37d44f52f5bb9d13cdfc3880784/assets/languages5.png -------------------------------------------------------------------------------- /assets/portfolio1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/portfolio-website-html-css/4153569300c3c37d44f52f5bb9d13cdfc3880784/assets/portfolio1.png -------------------------------------------------------------------------------- /assets/portfolio2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/portfolio-website-html-css/4153569300c3c37d44f52f5bb9d13cdfc3880784/assets/portfolio2.png -------------------------------------------------------------------------------- /assets/portfolio3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/koolkishan/portfolio-website-html-css/4153569300c3c37d44f52f5bb9d13cdfc3880784/assets/portfolio3.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | Kishan Sheth 16 | 17 | 18 |
19 | 20 |
21 | 43 |
44 |
45 |

Web Developer 3.0

46 |
47 |
48 | 62 |
63 |
64 |
65 |
66 |
67 |

Hello Guys!

68 |

I'm Kishan.

69 |
70 | 71 |
72 |
73 | 74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |

Institutional

83 |

84 | Get to know a little of our history and the road we traveled that took 85 | us to the level we are today. 86 |

87 |
88 |
89 |
90 | 91 |
92 |
93 | 94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |

Main Skills

104 |

105 | We see all types of projects as if they were ours. This brings us 106 | closer to our client's projects with much more confidence and 107 | commitment. 108 |

109 |
110 |
111 |
112 |
113 |
114 |
115 |
42%
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |

Frontend Development

127 |
128 |
129 |
130 |
131 |
132 |
100%
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |

Backend Development

144 |
145 |
146 |
147 |
148 |
149 |
34%
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |

App Development

161 |
162 |
163 |
164 |
165 |
166 |
100%
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |

Fullstack Development

178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |

Our Portfolio

188 |

We have already built amazing things for our customers.

189 |
190 |
191 |
192 |
193 |
194 |

Agency Website

195 |

An impressive website for any kind of agency.

196 |
197 | 198 |
199 |
200 |
201 |
202 |

Portfloio Website

203 |

A portolio that lands you all the offers you need.

204 |
205 | 206 |
207 |
208 |
209 |
210 |
211 |

Agency Website

212 |

An impressive website for any kind of agency

213 |
214 | 215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |

Our Services

227 |

Focused on results we seek to raise the level of our customers.

228 |
229 |
230 |
231 |
232 |
233 | 234 |

Website Pro

235 |

236 | We build professional responsice websites optimized for the most 237 | populat search engines. 238 |

239 |
240 |
241 |
242 | 243 |

E-Commerce

244 |

245 | Increase your sales with an incredible online store, full of 246 | features and functionality. 247 |

248 |
249 |
250 | 251 |

Mobile Apps

252 |

253 | Follow the global trend and create your revolutionary mobile apps 254 | built with the best technologies. 255 |

256 |
257 |
258 | 259 |

Web Application

260 |

261 | We build applications for different purposed using technologies that 262 | allow you more security. 263 |

264 |
265 |
266 | 267 |

Digital Marketing

268 |

269 | We work to promote your brand in partnership with the best marketing 270 | platforms today. 271 |

272 |
273 |
274 |
275 |
276 | 277 |

Brand Creation

278 |

279 | We create your brand thinking about your target audience using 280 | design techniques. 281 |

282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 | 294 |
295 |
296 | 297 |
298 |
299 | 300 |
301 |
302 | 303 |
304 |
305 | 306 |
307 |
308 |
309 |
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |

Let's Talk?

318 |

319 | Don't wait until tommorow. Talk to one of our consultants today and 320 | learn how to start leveraging your business. 321 |

322 |
323 |
324 | 325 | 326 | 327 | 328 |
329 |
330 |
331 | 332 |
333 |
334 | 386 |
387 | Enjoy te low price. We are tracking any intention of piracy. 388 | © 2021 all rights reserved. 389 |
390 | 391 | 392 | 393 | 394 | 395 | -------------------------------------------------------------------------------- /scripts/animation.js: -------------------------------------------------------------------------------- 1 | const sr = ScrollReveal({ 2 | origin: "top", 3 | distance: "-80px", 4 | duration: 2000, 5 | reset: false, 6 | }); 7 | 8 | sr.reveal( 9 | ` 10 | nav,.hero,.about,.skills,.portfolio,.services,.languages,.contact,footer,.lower__footer 11 | `, 12 | { 13 | interval: 300, 14 | } 15 | ); 16 | 17 | const sr2 = ScrollReveal({ 18 | origin: "right", 19 | duration: 3000, 20 | reset: false, 21 | distance: "50%", 22 | }); 23 | 24 | sr2.reveal( 25 | ` 26 | #spring1, 27 | #spring2, 28 | #spring3 29 | ` 30 | ); 31 | 32 | const sr3 = ScrollReveal({ 33 | origin: "left", 34 | duration: 3000, 35 | reset: false, 36 | distance: "50%", 37 | }); 38 | 39 | sr3.reveal( 40 | ` 41 | #springL1, 42 | #springL2, 43 | #springL3 44 | ` 45 | ); 46 | -------------------------------------------------------------------------------- /scripts/script.js: -------------------------------------------------------------------------------- 1 | const scrollToTop = document.querySelector(".scrollToTop"); 2 | scrollToTop.addEventListener("click", () => { 3 | window.scrollTo({ top: 0 }); 4 | }); 5 | 6 | window.addEventListener("scroll", () => { 7 | window.pageYOffset > 100 8 | ? (scrollToTop.style.display = "block") 9 | : (scrollToTop.style.display = "none"); 10 | }); 11 | 12 | const html = document.querySelector("html"); 13 | 14 | const responsiveNavbar = document.querySelector(".responsive__navbar"); 15 | 16 | responsiveNavbar.addEventListener("click", (e) => e.stopPropagation()); 17 | html.addEventListener("click", () => responsiveNavbar.classList.remove("show")); 18 | 19 | const responsiveToggle = document.querySelector(".toggle"); 20 | 21 | const navLinks = document.querySelectorAll(".nav__link"); 22 | 23 | navLinks.forEach((link) => 24 | link.addEventListener("click", () => 25 | responsiveNavbar.classList.remove("show") 26 | ) 27 | ); 28 | 29 | responsiveToggle.addEventListener("click", (e) => { 30 | e.stopPropagation(); 31 | responsiveNavbar.classList.toggle("show"); 32 | }); 33 | -------------------------------------------------------------------------------- /scss/_about.scss: -------------------------------------------------------------------------------- 1 | .about { 2 | .container { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | position: relative; 7 | .image { 8 | img { 9 | height: 25rem; 10 | width: 50rem; 11 | object-fit: cover; 12 | } 13 | } 14 | .play { 15 | position: absolute; 16 | top: 30%; 17 | cursor: pointer; 18 | i { 19 | @include gradientText; 20 | font-size: 10rem; 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /scss/_base.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;300;400;500;700;900&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | html { 10 | scroll-behavior: smooth; 11 | overflow-x: hidden; 12 | } 13 | 14 | body { 15 | background-color: #0b0b0b; 16 | font-family: "Outfit", sans-serif; 17 | } 18 | 19 | ::-webkit-scrollbar { 20 | background-color: #0b0b0b; 21 | width: 0.3rem; 22 | } 23 | 24 | ::-webkit-scrollbar-thumb { 25 | background-color: #45b649; 26 | } 27 | 28 | ul { 29 | list-style-type: none; 30 | } 31 | 32 | :root { 33 | --gradient: linear-gradient(to right, #c5e35b, #45b649); 34 | } 35 | -------------------------------------------------------------------------------- /scss/_contact.scss: -------------------------------------------------------------------------------- 1 | .contact { 2 | display: flex; 3 | margin: 4rem 20rem; 4 | gap: 3rem; 5 | .left { 6 | .title { 7 | .bar { 8 | height: 0.5rem; 9 | width: 5rem; 10 | background: var(--gradient); 11 | margin-bottom: 1rem; 12 | } 13 | } 14 | .form { 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: flex-start; 19 | margin: 2rem 0; 20 | gap: 1rem; 21 | input { 22 | padding: 0.8rem 9rem 0.8rem 1rem; 23 | background-color: transparent; 24 | border: 1px solid rgb(129, 128, 128); 25 | color: white; 26 | } 27 | } 28 | } 29 | .right { 30 | img { 31 | height: 30rem; 32 | width: 26rem; 33 | object-fit: cover; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /scss/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | display: grid; 3 | grid-template-columns: repeat(4, 1fr); 4 | gap: 5rem; 5 | background-color: #181818; 6 | padding: 5rem 14rem; 7 | color: rgb(129, 128, 128); 8 | .section { 9 | h2 { 10 | @include gradientText; 11 | font-size: 3rem; 12 | margin-bottom: 1rem; 13 | } 14 | .title { 15 | color: white; 16 | margin-bottom: 1.3rem; 17 | } 18 | .social { 19 | flex-direction: row; 20 | margin-top: 1rem; 21 | gap: 1rem; 22 | i { 23 | font-size: 1.2rem; 24 | } 25 | } 26 | button { 27 | margin-top: 1rem; 28 | box-shadow: 2px 1000px 1px #181818 inset; 29 | } 30 | ul { 31 | display: flex; 32 | flex-direction: column; 33 | gap: 0.6rem; 34 | li { 35 | display: flex; 36 | gap: 1rem; 37 | transition: 0.5s ease-in-out; 38 | &:hover { 39 | @include gradientText; 40 | cursor: pointer; 41 | } 42 | } 43 | } 44 | .tags { 45 | // display: grid; 46 | // grid-template-columns: repeat(2, 1fr); 47 | display: flex; 48 | flex-direction: row; 49 | flex-wrap: wrap; 50 | li { 51 | padding: 0.5rem; 52 | border: 1px solid rgb(129, 128, 128); 53 | width: max-content; 54 | &:hover { 55 | color: white !important; 56 | @include gradientText; 57 | } 58 | } 59 | } 60 | } 61 | } 62 | 63 | .lower__footer { 64 | color: rgb(129, 128, 128); 65 | display: flex; 66 | justify-content: space-between; 67 | padding: 1rem 14rem; 68 | } 69 | -------------------------------------------------------------------------------- /scss/_hero.scss: -------------------------------------------------------------------------------- 1 | .hero { 2 | display: grid; 3 | grid-template-columns: 50% 50%; 4 | overflow: hidden; 5 | height: 60vh; 6 | .content { 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: flex-start; 11 | gap: 2rem; 12 | .title { 13 | h1 { 14 | @include gradientText; 15 | font-size: 6vw; 16 | } 17 | } 18 | } 19 | .image { 20 | position: relative; 21 | img { 22 | position: absolute; 23 | bottom: 0; 24 | height: 85vh; 25 | width: 50vw; 26 | object-fit: cover; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /scss/_languages.scss: -------------------------------------------------------------------------------- 1 | .languages { 2 | .container { 3 | display: flex; 4 | justify-content: center; 5 | gap: 4rem; 6 | .language { 7 | img { 8 | height: 7rem; 9 | filter: brightness(0) invert(1); 10 | transition: 0.5s ease-in-out; 11 | &:hover { 12 | filter: none; 13 | } 14 | } 15 | &:nth-of-type(4) { 16 | img { 17 | filter: grayscale(100) invert(1); 18 | transition: 0.5s ease-in-out; 19 | &:hover { 20 | filter: none; 21 | } 22 | } 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /scss/_mediaQueries.scss: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 280px) and (max-width: 1080px) { 2 | body { 3 | overflow-x: hidden; 4 | } 5 | .defaultMargin { 6 | margin: 0 10vw; 7 | } 8 | .navbar { 9 | .brand__container { 10 | display: flex; 11 | justify-content: space-between; 12 | align-items: center; 13 | gap: 2rem; 14 | width: 100%; 15 | .toggle { 16 | display: block; 17 | } 18 | } 19 | .links { 20 | display: none; 21 | } 22 | } 23 | 24 | .hero { 25 | margin: 0 10vw; 26 | display: flex; 27 | flex-direction: column-reverse; 28 | height: 100%; 29 | gap: 2rem; 30 | .content { 31 | align-items: center; 32 | .title { 33 | h1 { 34 | font-size: 3rem; 35 | } 36 | } 37 | } 38 | .image { 39 | position: initial; 40 | img { 41 | position: initial; 42 | height: 100%; 43 | width: 100%; 44 | } 45 | } 46 | } 47 | 48 | .about { 49 | margin: 0 10vw; 50 | img { 51 | width: 100% !important; 52 | } 53 | } 54 | 55 | .skills { 56 | .content { 57 | flex-direction: column; 58 | } 59 | .skill { 60 | } 61 | } 62 | 63 | .portfolio { 64 | .container { 65 | grid-template-columns: 1fr; 66 | .portfolio__container { 67 | padding: 1rem; 68 | .image { 69 | width: 200px; 70 | img { 71 | &:hover { 72 | top: -240% !important; 73 | } 74 | } 75 | } 76 | &:nth-of-type(2) { 77 | .image { 78 | img { 79 | &:hover { 80 | top: -260%; 81 | } 82 | } 83 | } 84 | } 85 | } 86 | } 87 | } 88 | .services { 89 | .container { 90 | grid-template-columns: 1fr; 91 | .service { 92 | } 93 | } 94 | } 95 | .languages { 96 | .container { 97 | flex-direction: column; 98 | align-items: center; 99 | } 100 | } 101 | .contact { 102 | flex-direction: column; 103 | margin: 2rem 10vw; 104 | gap: 5vw; 105 | .left { 106 | .form { 107 | input { 108 | padding-right: 10vw; 109 | } 110 | } 111 | } 112 | .right { 113 | img { 114 | width: 100%; 115 | } 116 | } 117 | } 118 | footer { 119 | padding: 5vw 10vw; 120 | grid-template-columns: 1fr; 121 | gap: 10vw; 122 | } 123 | .lower__footer { 124 | flex-direction: column; 125 | text-align: center; 126 | padding: 5vw; 127 | gap: 1rem; 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin gradientText { 2 | background: var(--gradient); 3 | -webkit-background-clip: text; 4 | -webkit-text-fill-color: transparent; 5 | } 6 | -------------------------------------------------------------------------------- /scss/_navbar.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | color: white; 6 | padding: 2rem 0; 7 | .brand__container { 8 | display: flex; 9 | .brand { 10 | h2 { 11 | span { 12 | margin-left: 0.5rem; 13 | font-size: 0.9rem; 14 | letter-spacing: 0.1rem; 15 | color: #45b649; 16 | } 17 | } 18 | } 19 | .toggle { 20 | display: none; 21 | } 22 | } 23 | .links { 24 | ul { 25 | display: flex; 26 | align-items: center; 27 | gap: 3rem; 28 | li { 29 | a { 30 | text-decoration: none; 31 | color: inherit; 32 | &:hover { 33 | @include gradientText; 34 | } 35 | } 36 | i { 37 | &:hover { 38 | @include gradientText; 39 | } 40 | } 41 | } 42 | button { 43 | padding: 0.5rem; 44 | } 45 | } 46 | } 47 | } 48 | 49 | .show { 50 | opacity: 1 !important; 51 | visibility: visible !important; 52 | right: 0 !important; 53 | } 54 | 55 | .responsive__navbar { 56 | position: fixed; 57 | top: 0; 58 | right: -350px; 59 | height: 100%; 60 | width: 70%; 61 | background-color: black; 62 | z-index: 100; 63 | display: flex; 64 | flex-direction: column; 65 | align-items: center; 66 | opacity: 0; 67 | visibility: hidden; 68 | transition: 0.4s ease-in-out; 69 | color: white; 70 | padding: 3rem 0; 71 | .brand { 72 | display: flex; 73 | margin-bottom: 2rem; 74 | h2 { 75 | font-size: 1.2rem; 76 | span { 77 | margin-left: 0.5rem; 78 | font-size: 0.9rem; 79 | letter-spacing: 0.1rem; 80 | color: #45b649; 81 | } 82 | } 83 | } 84 | .links { 85 | ul { 86 | margin: 2vw; 87 | li { 88 | margin: 2vh; 89 | a { 90 | text-decoration: none; 91 | color: inherit; 92 | } 93 | font-size: 2.5vh; 94 | cursor: pointer; 95 | } 96 | ul { 97 | display: flex; 98 | } 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /scss/_portfolio.scss: -------------------------------------------------------------------------------- 1 | .portfolio { 2 | position: relative; 3 | .container { 4 | display: grid; 5 | grid-template-columns: repeat(3, 1fr); 6 | color: white; 7 | gap: 2rem; 8 | .portfolio__container { 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | gap: 1rem; 13 | background-color: #181818; 14 | padding: 2rem; 15 | text-align: center; 16 | 17 | .image { 18 | display: block; 19 | width: 250px; 20 | height: 150px; 21 | overflow: hidden; 22 | 23 | position: relative; 24 | border-radius: 1px; 25 | margin: 0 auto; 26 | img { 27 | left: 0; 28 | top: 0%; 29 | width: 100%; 30 | height: auto; 31 | position: absolute; 32 | z-index: 0; 33 | margin: 0; 34 | padding: 0; 35 | -webkit-transition: bottom 3s; 36 | -moz-transition: bottom 3s; 37 | -ms-transition: bottom 3s; 38 | -o-transition: bottom 3s; 39 | transition: top 3s; 40 | &:hover { 41 | top: -300%; 42 | -webkit-transition: all 3s; 43 | -moz-transition: all 3s; 44 | -ms-transition: all 3s; 45 | -o-transition: all 3s; 46 | transition: all 3s; 47 | } 48 | } 49 | } 50 | &:nth-of-type(2) { 51 | .image { 52 | img { 53 | &:hover { 54 | top: -345%; 55 | } 56 | } 57 | } 58 | } 59 | &:nth-of-type(3) { 60 | .image { 61 | img { 62 | &:hover { 63 | top: -390%; 64 | } 65 | } 66 | } 67 | } 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /scss/_reusableStyles.scss: -------------------------------------------------------------------------------- 1 | .gradient { 2 | background: var(--gradient); 3 | } 4 | 5 | button { 6 | color: white; 7 | padding: 1rem 1.8rem; 8 | text-transform: uppercase; 9 | display: flex; 10 | gap: 1rem; 11 | align-items: center; 12 | border: solid 4px transparent; 13 | cursor: pointer; 14 | background-image: linear-gradient( 15 | rgba(255, 255, 255, 0), 16 | rgba(255, 255, 255, 0) 17 | ), 18 | linear-gradient(to right, #dce35b, #45b649); 19 | background-origin: border-box; 20 | background-clip: content-box, border-box; 21 | box-shadow: 2px 1000px 1px #0b0b0b inset; 22 | } 23 | 24 | .title__container { 25 | display: flex; 26 | flex-direction: column; 27 | align-items: center; 28 | margin-bottom: 6rem; 29 | text-align: center; 30 | h2 { 31 | color: white; 32 | } 33 | p { 34 | color: rgb(153, 153, 153); 35 | } 36 | } 37 | 38 | .spring { 39 | display: flex; 40 | align-items: center; 41 | margin: 6rem 0; 42 | .coil { 43 | border-top: white dashed 0.01rem; 44 | width: 49.75%; 45 | } 46 | .bar { 47 | width: 0.5%; 48 | height: 7rem; 49 | } 50 | } 51 | .spring.right { 52 | flex-direction: row-reverse; 53 | } 54 | 55 | .design { 56 | position: relative; 57 | .background { 58 | height: 10rem; 59 | width: 12rem; 60 | background: linear-gradient(to right, #c5e35b, #45b649); 61 | position: absolute; 62 | z-index: -1; 63 | left: -10px; 64 | top: -8px; 65 | } 66 | } 67 | .right { 68 | .background { 69 | top: auto; 70 | left: auto; 71 | right: -10px; 72 | bottom: -8px; 73 | } 74 | } 75 | 76 | .defaultMargin { 77 | margin: 0 14rem; 78 | } 79 | 80 | h3 { 81 | color: white; 82 | } 83 | p { 84 | color: rgb(129, 128, 128); 85 | } 86 | -------------------------------------------------------------------------------- /scss/_scrollToTop.scss: -------------------------------------------------------------------------------- 1 | .scrollToTop { 2 | position: fixed; 3 | bottom: 40px; 4 | right: 40px; 5 | background-color: #303030; 6 | padding: 1rem 1.3rem; 7 | border-radius: 5rem; 8 | cursor: pointer; 9 | z-index: 10; 10 | i { 11 | @include gradientText; 12 | font-size: 1.5rem; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /scss/_services.scss: -------------------------------------------------------------------------------- 1 | .services { 2 | .container { 3 | display: grid; 4 | grid-template-columns: repeat(3, 1fr); 5 | gap: 2rem; 6 | .design { 7 | position: relative; 8 | .background { 9 | height: 10rem; 10 | width: 12rem; 11 | background: var(--gradient); 12 | position: absolute; 13 | z-index: -1; 14 | left: -10px; 15 | top: -8px; 16 | } 17 | } 18 | .right { 19 | .background { 20 | top: auto; 21 | left: auto; 22 | right: -10px; 23 | bottom: -8px; 24 | } 25 | } 26 | 27 | .service { 28 | background-color: #181818; 29 | padding: 2rem; 30 | display: flex; 31 | flex-direction: column; 32 | gap: 1rem; 33 | align-items: center; 34 | text-align: center; 35 | i { 36 | @include gradientText; 37 | font-size: 2.5rem; 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /scss/_skills.scss: -------------------------------------------------------------------------------- 1 | .skills { 2 | .content { 3 | display: flex; 4 | justify-content: center; 5 | gap: 2rem; 6 | 7 | .skill { 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | gap: 2rem; 12 | } 13 | } 14 | } 15 | 16 | .circular { 17 | height: 100px; 18 | width: 100px; 19 | position: relative; 20 | .inner { 21 | position: absolute; 22 | z-index: 6; 23 | top: 50%; 24 | left: 50%; 25 | height: 80px; 26 | width: 80px; 27 | margin: -40px 0 0 -40px; 28 | background: #0b0b0b; 29 | border-radius: 100%; 30 | } 31 | .number { 32 | position: absolute; 33 | top: 50%; 34 | left: 50%; 35 | transform: translate(-50%, -50%); 36 | z-index: 10; 37 | font-size: 18px; 38 | font-weight: 500; 39 | color: rgb(153, 153, 153); 40 | font-weight: 700; 41 | font-size: 1.3rem; 42 | } 43 | .bar { 44 | position: absolute; 45 | height: 100%; 46 | width: 100%; 47 | background: var(--gradient); 48 | -webkit-border-radius: 100%; 49 | clip: rect(0px, 100px, 100px, 50px); 50 | transform: rotate(250deg); 51 | } 52 | } 53 | 54 | .three { 55 | .bar { 56 | clip: rect(40px, 100px, 100px, 30px); 57 | } 58 | } 59 | 60 | .two { 61 | .bar { 62 | clip: unset; 63 | } 64 | } 65 | 66 | .four { 67 | .bar { 68 | clip: unset; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /scss/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;300;400;500;700;900&display=swap"); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | -webkit-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | 9 | html { 10 | scroll-behavior: smooth; 11 | overflow-x: hidden; 12 | } 13 | 14 | body { 15 | background-color: #0b0b0b; 16 | font-family: "Outfit", sans-serif; 17 | } 18 | 19 | ::-webkit-scrollbar { 20 | background-color: #0b0b0b; 21 | width: 0.3rem; 22 | } 23 | 24 | ::-webkit-scrollbar-thumb { 25 | background-color: #45b649; 26 | } 27 | 28 | ul { 29 | list-style-type: none; 30 | } 31 | 32 | :root { 33 | --gradient: linear-gradient(to right, #c5e35b, #45b649); 34 | } 35 | 36 | .gradient { 37 | background: var(--gradient); 38 | } 39 | 40 | button { 41 | color: white; 42 | padding: 1rem 1.8rem; 43 | text-transform: uppercase; 44 | display: -webkit-box; 45 | display: -ms-flexbox; 46 | display: flex; 47 | gap: 1rem; 48 | -webkit-box-align: center; 49 | -ms-flex-align: center; 50 | align-items: center; 51 | border: solid 4px transparent; 52 | cursor: pointer; 53 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, left top, right top, from(#dce35b), to(#45b649)); 54 | background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(to right, #dce35b, #45b649); 55 | background-origin: border-box; 56 | background-clip: content-box, border-box; 57 | -webkit-box-shadow: 2px 1000px 1px #0b0b0b inset; 58 | box-shadow: 2px 1000px 1px #0b0b0b inset; 59 | } 60 | 61 | .title__container { 62 | display: -webkit-box; 63 | display: -ms-flexbox; 64 | display: flex; 65 | -webkit-box-orient: vertical; 66 | -webkit-box-direction: normal; 67 | -ms-flex-direction: column; 68 | flex-direction: column; 69 | -webkit-box-align: center; 70 | -ms-flex-align: center; 71 | align-items: center; 72 | margin-bottom: 6rem; 73 | text-align: center; 74 | } 75 | 76 | .title__container h2 { 77 | color: white; 78 | } 79 | 80 | .title__container p { 81 | color: #999999; 82 | } 83 | 84 | .spring { 85 | display: -webkit-box; 86 | display: -ms-flexbox; 87 | display: flex; 88 | -webkit-box-align: center; 89 | -ms-flex-align: center; 90 | align-items: center; 91 | margin: 6rem 0; 92 | } 93 | 94 | .spring .coil { 95 | border-top: white dashed 0.01rem; 96 | width: 49.75%; 97 | } 98 | 99 | .spring .bar { 100 | width: 0.5%; 101 | height: 7rem; 102 | } 103 | 104 | .spring.right { 105 | -webkit-box-orient: horizontal; 106 | -webkit-box-direction: reverse; 107 | -ms-flex-direction: row-reverse; 108 | flex-direction: row-reverse; 109 | } 110 | 111 | .design { 112 | position: relative; 113 | } 114 | 115 | .design .background { 116 | height: 10rem; 117 | width: 12rem; 118 | background: -webkit-gradient(linear, left top, right top, from(#c5e35b), to(#45b649)); 119 | background: linear-gradient(to right, #c5e35b, #45b649); 120 | position: absolute; 121 | z-index: -1; 122 | left: -10px; 123 | top: -8px; 124 | } 125 | 126 | .right .background { 127 | top: auto; 128 | left: auto; 129 | right: -10px; 130 | bottom: -8px; 131 | } 132 | 133 | .defaultMargin { 134 | margin: 0 14rem; 135 | } 136 | 137 | h3 { 138 | color: white; 139 | } 140 | 141 | p { 142 | color: #818080; 143 | } 144 | 145 | .scrollToTop { 146 | position: fixed; 147 | bottom: 40px; 148 | right: 40px; 149 | background-color: #303030; 150 | padding: 1rem 1.3rem; 151 | border-radius: 5rem; 152 | cursor: pointer; 153 | z-index: 10; 154 | } 155 | 156 | .scrollToTop i { 157 | background: var(--gradient); 158 | -webkit-background-clip: text; 159 | -webkit-text-fill-color: transparent; 160 | font-size: 1.5rem; 161 | } 162 | 163 | .navbar { 164 | display: -webkit-box; 165 | display: -ms-flexbox; 166 | display: flex; 167 | -webkit-box-pack: justify; 168 | -ms-flex-pack: justify; 169 | justify-content: space-between; 170 | -webkit-box-align: center; 171 | -ms-flex-align: center; 172 | align-items: center; 173 | color: white; 174 | padding: 2rem 0; 175 | } 176 | 177 | .navbar .brand__container { 178 | display: -webkit-box; 179 | display: -ms-flexbox; 180 | display: flex; 181 | } 182 | 183 | .navbar .brand__container .brand h2 span { 184 | margin-left: 0.5rem; 185 | font-size: 0.9rem; 186 | letter-spacing: 0.1rem; 187 | color: #45b649; 188 | } 189 | 190 | .navbar .brand__container .toggle { 191 | display: none; 192 | } 193 | 194 | .navbar .links ul { 195 | display: -webkit-box; 196 | display: -ms-flexbox; 197 | display: flex; 198 | -webkit-box-align: center; 199 | -ms-flex-align: center; 200 | align-items: center; 201 | gap: 3rem; 202 | } 203 | 204 | .navbar .links ul li a { 205 | text-decoration: none; 206 | color: inherit; 207 | } 208 | 209 | .navbar .links ul li a:hover { 210 | background: var(--gradient); 211 | -webkit-background-clip: text; 212 | -webkit-text-fill-color: transparent; 213 | } 214 | 215 | .navbar .links ul li i:hover { 216 | background: var(--gradient); 217 | -webkit-background-clip: text; 218 | -webkit-text-fill-color: transparent; 219 | } 220 | 221 | .navbar .links ul button { 222 | padding: 0.5rem; 223 | } 224 | 225 | .show { 226 | opacity: 1 !important; 227 | visibility: visible !important; 228 | right: 0 !important; 229 | } 230 | 231 | .responsive__navbar { 232 | position: fixed; 233 | top: 0; 234 | right: -350px; 235 | height: 100%; 236 | width: 70%; 237 | background-color: black; 238 | z-index: 100; 239 | display: -webkit-box; 240 | display: -ms-flexbox; 241 | display: flex; 242 | -webkit-box-orient: vertical; 243 | -webkit-box-direction: normal; 244 | -ms-flex-direction: column; 245 | flex-direction: column; 246 | -webkit-box-align: center; 247 | -ms-flex-align: center; 248 | align-items: center; 249 | opacity: 0; 250 | visibility: hidden; 251 | -webkit-transition: 0.4s ease-in-out; 252 | transition: 0.4s ease-in-out; 253 | color: white; 254 | padding: 3rem 0; 255 | } 256 | 257 | .responsive__navbar .brand { 258 | display: -webkit-box; 259 | display: -ms-flexbox; 260 | display: flex; 261 | margin-bottom: 2rem; 262 | } 263 | 264 | .responsive__navbar .brand h2 { 265 | font-size: 1.2rem; 266 | } 267 | 268 | .responsive__navbar .brand h2 span { 269 | margin-left: 0.5rem; 270 | font-size: 0.9rem; 271 | letter-spacing: 0.1rem; 272 | color: #45b649; 273 | } 274 | 275 | .responsive__navbar .links ul { 276 | margin: 2vw; 277 | } 278 | 279 | .responsive__navbar .links ul li { 280 | margin: 2vh; 281 | font-size: 2.5vh; 282 | cursor: pointer; 283 | } 284 | 285 | .responsive__navbar .links ul li a { 286 | text-decoration: none; 287 | color: inherit; 288 | } 289 | 290 | .responsive__navbar .links ul ul { 291 | display: -webkit-box; 292 | display: -ms-flexbox; 293 | display: flex; 294 | } 295 | 296 | .hero { 297 | display: -ms-grid; 298 | display: grid; 299 | -ms-grid-columns: 50% 50%; 300 | grid-template-columns: 50% 50%; 301 | overflow: hidden; 302 | height: 60vh; 303 | } 304 | 305 | .hero .content { 306 | display: -webkit-box; 307 | display: -ms-flexbox; 308 | display: flex; 309 | -webkit-box-orient: vertical; 310 | -webkit-box-direction: normal; 311 | -ms-flex-direction: column; 312 | flex-direction: column; 313 | -webkit-box-pack: center; 314 | -ms-flex-pack: center; 315 | justify-content: center; 316 | -webkit-box-align: start; 317 | -ms-flex-align: start; 318 | align-items: flex-start; 319 | gap: 2rem; 320 | } 321 | 322 | .hero .content .title h1 { 323 | background: var(--gradient); 324 | -webkit-background-clip: text; 325 | -webkit-text-fill-color: transparent; 326 | font-size: 6vw; 327 | } 328 | 329 | .hero .image { 330 | position: relative; 331 | } 332 | 333 | .hero .image img { 334 | position: absolute; 335 | bottom: 0; 336 | height: 85vh; 337 | width: 50vw; 338 | -o-object-fit: cover; 339 | object-fit: cover; 340 | } 341 | 342 | .about .container { 343 | display: -webkit-box; 344 | display: -ms-flexbox; 345 | display: flex; 346 | -webkit-box-orient: vertical; 347 | -webkit-box-direction: normal; 348 | -ms-flex-direction: column; 349 | flex-direction: column; 350 | -webkit-box-align: center; 351 | -ms-flex-align: center; 352 | align-items: center; 353 | position: relative; 354 | } 355 | 356 | .about .container .image img { 357 | height: 25rem; 358 | width: 50rem; 359 | -o-object-fit: cover; 360 | object-fit: cover; 361 | } 362 | 363 | .about .container .play { 364 | position: absolute; 365 | top: 30%; 366 | cursor: pointer; 367 | } 368 | 369 | .about .container .play i { 370 | background: var(--gradient); 371 | -webkit-background-clip: text; 372 | -webkit-text-fill-color: transparent; 373 | font-size: 10rem; 374 | } 375 | 376 | .skills .content { 377 | display: -webkit-box; 378 | display: -ms-flexbox; 379 | display: flex; 380 | -webkit-box-pack: center; 381 | -ms-flex-pack: center; 382 | justify-content: center; 383 | gap: 2rem; 384 | } 385 | 386 | .skills .content .skill { 387 | display: -webkit-box; 388 | display: -ms-flexbox; 389 | display: flex; 390 | -webkit-box-orient: vertical; 391 | -webkit-box-direction: normal; 392 | -ms-flex-direction: column; 393 | flex-direction: column; 394 | -webkit-box-align: center; 395 | -ms-flex-align: center; 396 | align-items: center; 397 | gap: 2rem; 398 | } 399 | 400 | .circular { 401 | height: 100px; 402 | width: 100px; 403 | position: relative; 404 | } 405 | 406 | .circular .inner { 407 | position: absolute; 408 | z-index: 6; 409 | top: 50%; 410 | left: 50%; 411 | height: 80px; 412 | width: 80px; 413 | margin: -40px 0 0 -40px; 414 | background: #0b0b0b; 415 | border-radius: 100%; 416 | } 417 | 418 | .circular .number { 419 | position: absolute; 420 | top: 50%; 421 | left: 50%; 422 | -webkit-transform: translate(-50%, -50%); 423 | transform: translate(-50%, -50%); 424 | z-index: 10; 425 | font-size: 18px; 426 | font-weight: 500; 427 | color: #999999; 428 | font-weight: 700; 429 | font-size: 1.3rem; 430 | } 431 | 432 | .circular .bar { 433 | position: absolute; 434 | height: 100%; 435 | width: 100%; 436 | background: var(--gradient); 437 | -webkit-border-radius: 100%; 438 | clip: rect(0px, 100px, 100px, 50px); 439 | -webkit-transform: rotate(250deg); 440 | transform: rotate(250deg); 441 | } 442 | 443 | .three .bar { 444 | clip: rect(40px, 100px, 100px, 30px); 445 | } 446 | 447 | .two .bar { 448 | clip: unset; 449 | } 450 | 451 | .four .bar { 452 | clip: unset; 453 | } 454 | 455 | .portfolio { 456 | position: relative; 457 | } 458 | 459 | .portfolio .container { 460 | display: -ms-grid; 461 | display: grid; 462 | -ms-grid-columns: (1fr)[3]; 463 | grid-template-columns: repeat(3, 1fr); 464 | color: white; 465 | gap: 2rem; 466 | } 467 | 468 | .portfolio .container .portfolio__container { 469 | display: -webkit-box; 470 | display: -ms-flexbox; 471 | display: flex; 472 | -webkit-box-orient: vertical; 473 | -webkit-box-direction: normal; 474 | -ms-flex-direction: column; 475 | flex-direction: column; 476 | -webkit-box-align: center; 477 | -ms-flex-align: center; 478 | align-items: center; 479 | gap: 1rem; 480 | background-color: #181818; 481 | padding: 2rem; 482 | text-align: center; 483 | } 484 | 485 | .portfolio .container .portfolio__container .image { 486 | display: block; 487 | width: 250px; 488 | height: 150px; 489 | overflow: hidden; 490 | position: relative; 491 | border-radius: 1px; 492 | margin: 0 auto; 493 | } 494 | 495 | .portfolio .container .portfolio__container .image img { 496 | left: 0; 497 | top: 0%; 498 | width: 100%; 499 | height: auto; 500 | position: absolute; 501 | z-index: 0; 502 | margin: 0; 503 | padding: 0; 504 | -webkit-transition: bottom 3s; 505 | -webkit-transition: top 3s; 506 | transition: top 3s; 507 | } 508 | 509 | .portfolio .container .portfolio__container .image img:hover { 510 | top: -300%; 511 | -webkit-transition: all 3s; 512 | transition: all 3s; 513 | } 514 | 515 | .portfolio .container .portfolio__container:nth-of-type(2) .image img:hover { 516 | top: -345%; 517 | } 518 | 519 | .portfolio .container .portfolio__container:nth-of-type(3) .image img:hover { 520 | top: -390%; 521 | } 522 | 523 | .services .container { 524 | display: -ms-grid; 525 | display: grid; 526 | -ms-grid-columns: (1fr)[3]; 527 | grid-template-columns: repeat(3, 1fr); 528 | gap: 2rem; 529 | } 530 | 531 | .services .container .design { 532 | position: relative; 533 | } 534 | 535 | .services .container .design .background { 536 | height: 10rem; 537 | width: 12rem; 538 | background: var(--gradient); 539 | position: absolute; 540 | z-index: -1; 541 | left: -10px; 542 | top: -8px; 543 | } 544 | 545 | .services .container .right .background { 546 | top: auto; 547 | left: auto; 548 | right: -10px; 549 | bottom: -8px; 550 | } 551 | 552 | .services .container .service { 553 | background-color: #181818; 554 | padding: 2rem; 555 | display: -webkit-box; 556 | display: -ms-flexbox; 557 | display: flex; 558 | -webkit-box-orient: vertical; 559 | -webkit-box-direction: normal; 560 | -ms-flex-direction: column; 561 | flex-direction: column; 562 | gap: 1rem; 563 | -webkit-box-align: center; 564 | -ms-flex-align: center; 565 | align-items: center; 566 | text-align: center; 567 | } 568 | 569 | .services .container .service i { 570 | background: var(--gradient); 571 | -webkit-background-clip: text; 572 | -webkit-text-fill-color: transparent; 573 | font-size: 2.5rem; 574 | } 575 | 576 | .languages .container { 577 | display: -webkit-box; 578 | display: -ms-flexbox; 579 | display: flex; 580 | -webkit-box-pack: center; 581 | -ms-flex-pack: center; 582 | justify-content: center; 583 | gap: 4rem; 584 | } 585 | 586 | .languages .container .language img { 587 | height: 7rem; 588 | -webkit-filter: brightness(0) invert(1); 589 | filter: brightness(0) invert(1); 590 | -webkit-transition: 0.5s ease-in-out; 591 | transition: 0.5s ease-in-out; 592 | } 593 | 594 | .languages .container .language img:hover { 595 | -webkit-filter: none; 596 | filter: none; 597 | } 598 | 599 | .languages .container .language:nth-of-type(4) img { 600 | -webkit-filter: grayscale(100) invert(1); 601 | filter: grayscale(100) invert(1); 602 | -webkit-transition: 0.5s ease-in-out; 603 | transition: 0.5s ease-in-out; 604 | } 605 | 606 | .languages .container .language:nth-of-type(4) img:hover { 607 | -webkit-filter: none; 608 | filter: none; 609 | } 610 | 611 | .contact { 612 | display: -webkit-box; 613 | display: -ms-flexbox; 614 | display: flex; 615 | margin: 4rem 20rem; 616 | gap: 3rem; 617 | } 618 | 619 | .contact .left .title .bar { 620 | height: 0.5rem; 621 | width: 5rem; 622 | background: var(--gradient); 623 | margin-bottom: 1rem; 624 | } 625 | 626 | .contact .left .form { 627 | display: -webkit-box; 628 | display: -ms-flexbox; 629 | display: flex; 630 | -webkit-box-orient: vertical; 631 | -webkit-box-direction: normal; 632 | -ms-flex-direction: column; 633 | flex-direction: column; 634 | -webkit-box-pack: center; 635 | -ms-flex-pack: center; 636 | justify-content: center; 637 | -webkit-box-align: start; 638 | -ms-flex-align: start; 639 | align-items: flex-start; 640 | margin: 2rem 0; 641 | gap: 1rem; 642 | } 643 | 644 | .contact .left .form input { 645 | padding: 0.8rem 9rem 0.8rem 1rem; 646 | background-color: transparent; 647 | border: 1px solid #818080; 648 | color: white; 649 | } 650 | 651 | .contact .right img { 652 | height: 30rem; 653 | width: 26rem; 654 | -o-object-fit: cover; 655 | object-fit: cover; 656 | } 657 | 658 | footer { 659 | display: -ms-grid; 660 | display: grid; 661 | -ms-grid-columns: (1fr)[4]; 662 | grid-template-columns: repeat(4, 1fr); 663 | gap: 5rem; 664 | background-color: #181818; 665 | padding: 5rem 14rem; 666 | color: #818080; 667 | } 668 | 669 | footer .section h2 { 670 | background: var(--gradient); 671 | -webkit-background-clip: text; 672 | -webkit-text-fill-color: transparent; 673 | font-size: 3rem; 674 | margin-bottom: 1rem; 675 | } 676 | 677 | footer .section .title { 678 | color: white; 679 | margin-bottom: 1.3rem; 680 | } 681 | 682 | footer .section .social { 683 | -webkit-box-orient: horizontal; 684 | -webkit-box-direction: normal; 685 | -ms-flex-direction: row; 686 | flex-direction: row; 687 | margin-top: 1rem; 688 | gap: 1rem; 689 | } 690 | 691 | footer .section .social i { 692 | font-size: 1.2rem; 693 | } 694 | 695 | footer .section button { 696 | margin-top: 1rem; 697 | -webkit-box-shadow: 2px 1000px 1px #181818 inset; 698 | box-shadow: 2px 1000px 1px #181818 inset; 699 | } 700 | 701 | footer .section ul { 702 | display: -webkit-box; 703 | display: -ms-flexbox; 704 | display: flex; 705 | -webkit-box-orient: vertical; 706 | -webkit-box-direction: normal; 707 | -ms-flex-direction: column; 708 | flex-direction: column; 709 | gap: 0.6rem; 710 | } 711 | 712 | footer .section ul li { 713 | display: -webkit-box; 714 | display: -ms-flexbox; 715 | display: flex; 716 | gap: 1rem; 717 | -webkit-transition: 0.5s ease-in-out; 718 | transition: 0.5s ease-in-out; 719 | } 720 | 721 | footer .section ul li:hover { 722 | background: var(--gradient); 723 | -webkit-background-clip: text; 724 | -webkit-text-fill-color: transparent; 725 | cursor: pointer; 726 | } 727 | 728 | footer .section .tags { 729 | display: -webkit-box; 730 | display: -ms-flexbox; 731 | display: flex; 732 | -webkit-box-orient: horizontal; 733 | -webkit-box-direction: normal; 734 | -ms-flex-direction: row; 735 | flex-direction: row; 736 | -ms-flex-wrap: wrap; 737 | flex-wrap: wrap; 738 | } 739 | 740 | footer .section .tags li { 741 | padding: 0.5rem; 742 | border: 1px solid #818080; 743 | width: -webkit-max-content; 744 | width: -moz-max-content; 745 | width: max-content; 746 | } 747 | 748 | footer .section .tags li:hover { 749 | color: white !important; 750 | background: var(--gradient); 751 | -webkit-background-clip: text; 752 | -webkit-text-fill-color: transparent; 753 | } 754 | 755 | .lower__footer { 756 | color: #818080; 757 | display: -webkit-box; 758 | display: -ms-flexbox; 759 | display: flex; 760 | -webkit-box-pack: justify; 761 | -ms-flex-pack: justify; 762 | justify-content: space-between; 763 | padding: 1rem 14rem; 764 | } 765 | 766 | @media screen and (min-width: 280px) and (max-width: 1080px) { 767 | body { 768 | overflow-x: hidden; 769 | } 770 | .defaultMargin { 771 | margin: 0 10vw; 772 | } 773 | .navbar .brand__container { 774 | display: -webkit-box; 775 | display: -ms-flexbox; 776 | display: flex; 777 | -webkit-box-pack: justify; 778 | -ms-flex-pack: justify; 779 | justify-content: space-between; 780 | -webkit-box-align: center; 781 | -ms-flex-align: center; 782 | align-items: center; 783 | gap: 2rem; 784 | width: 100%; 785 | } 786 | .navbar .brand__container .toggle { 787 | display: block; 788 | } 789 | .navbar .links { 790 | display: none; 791 | } 792 | .hero { 793 | margin: 0 10vw; 794 | display: -webkit-box; 795 | display: -ms-flexbox; 796 | display: flex; 797 | -webkit-box-orient: vertical; 798 | -webkit-box-direction: reverse; 799 | -ms-flex-direction: column-reverse; 800 | flex-direction: column-reverse; 801 | height: 100%; 802 | gap: 2rem; 803 | } 804 | .hero .content { 805 | -webkit-box-align: center; 806 | -ms-flex-align: center; 807 | align-items: center; 808 | } 809 | .hero .content .title h1 { 810 | font-size: 3rem; 811 | } 812 | .hero .image { 813 | position: initial; 814 | } 815 | .hero .image img { 816 | position: initial; 817 | height: 100%; 818 | width: 100%; 819 | } 820 | .about { 821 | margin: 0 10vw; 822 | } 823 | .about img { 824 | width: 100% !important; 825 | } 826 | .skills .content { 827 | -webkit-box-orient: vertical; 828 | -webkit-box-direction: normal; 829 | -ms-flex-direction: column; 830 | flex-direction: column; 831 | } 832 | .portfolio .container { 833 | -ms-grid-columns: 1fr; 834 | grid-template-columns: 1fr; 835 | } 836 | .portfolio .container .portfolio__container { 837 | padding: 1rem; 838 | } 839 | .portfolio .container .portfolio__container .image { 840 | width: 200px; 841 | } 842 | .portfolio .container .portfolio__container .image img:hover { 843 | top: -240% !important; 844 | } 845 | .portfolio .container .portfolio__container:nth-of-type(2) .image img:hover { 846 | top: -260%; 847 | } 848 | .services .container { 849 | -ms-grid-columns: 1fr; 850 | grid-template-columns: 1fr; 851 | } 852 | .languages .container { 853 | -webkit-box-orient: vertical; 854 | -webkit-box-direction: normal; 855 | -ms-flex-direction: column; 856 | flex-direction: column; 857 | -webkit-box-align: center; 858 | -ms-flex-align: center; 859 | align-items: center; 860 | } 861 | .contact { 862 | -webkit-box-orient: vertical; 863 | -webkit-box-direction: normal; 864 | -ms-flex-direction: column; 865 | flex-direction: column; 866 | margin: 2rem 10vw; 867 | gap: 5vw; 868 | } 869 | .contact .left .form input { 870 | padding-right: 10vw; 871 | } 872 | .contact .right img { 873 | width: 100%; 874 | } 875 | footer { 876 | padding: 5vw 10vw; 877 | -ms-grid-columns: 1fr; 878 | grid-template-columns: 1fr; 879 | gap: 10vw; 880 | } 881 | .lower__footer { 882 | -webkit-box-orient: vertical; 883 | -webkit-box-direction: normal; 884 | -ms-flex-direction: column; 885 | flex-direction: column; 886 | text-align: center; 887 | padding: 5vw; 888 | gap: 1rem; 889 | } 890 | } 891 | /*# sourceMappingURL=index.css.map */ -------------------------------------------------------------------------------- /scss/index.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "index.scss", 6 | "_mixins.scss", 7 | "_base.scss", 8 | "_reusableStyles.scss", 9 | "_scrollToTop.scss", 10 | "_navbar.scss", 11 | "_hero.scss", 12 | "_about.scss", 13 | "_skills.scss", 14 | "_portfolio.scss", 15 | "_services.scss", 16 | "_languages.scss", 17 | "_contact.scss", 18 | "_footer.scss", 19 | "_mediaQueries.scss" 20 | ], 21 | "names": [], 22 | "file": "index.css" 23 | } -------------------------------------------------------------------------------- /scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "mixins"; 2 | @import "base"; 3 | @import "reusableStyles"; 4 | @import "scrollToTop"; 5 | @import "navbar"; 6 | @import "hero"; 7 | @import "about"; 8 | @import "skills"; 9 | @import "portfolio"; 10 | @import "services"; 11 | @import "languages"; 12 | @import "contact"; 13 | @import "footer"; 14 | @import "mediaQueries"; 15 | --------------------------------------------------------------------------------