├── img ├── about.png ├── perfil.png ├── work1.png ├── work2.png ├── work3.png ├── work4.png ├── work5.png ├── work6.png ├── work7.png ├── projectmind.png └── Javohir's Resume.pdf ├── sass ├── abstact │ ├── _mixins.scss │ └── _variables.scss ├── base │ └── _base.scss ├── layout │ ├── _footer.scss │ ├── _header.scss │ └── index.scss └── main.scss ├── js └── main.js ├── css ├── main.css.map └── main.css └── index.html /img/about.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/harris-portfolio/HEAD/img/about.png -------------------------------------------------------------------------------- /img/perfil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/harris-portfolio/HEAD/img/perfil.png -------------------------------------------------------------------------------- /img/work1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/harris-portfolio/HEAD/img/work1.png -------------------------------------------------------------------------------- /img/work2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/harris-portfolio/HEAD/img/work2.png -------------------------------------------------------------------------------- /img/work3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/harris-portfolio/HEAD/img/work3.png -------------------------------------------------------------------------------- /img/work4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/harris-portfolio/HEAD/img/work4.png -------------------------------------------------------------------------------- /img/work5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/harris-portfolio/HEAD/img/work5.png -------------------------------------------------------------------------------- /img/work6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/harris-portfolio/HEAD/img/work6.png -------------------------------------------------------------------------------- /img/work7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/harris-portfolio/HEAD/img/work7.png -------------------------------------------------------------------------------- /img/projectmind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/harris-portfolio/HEAD/img/projectmind.png -------------------------------------------------------------------------------- /img/Javohir's Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/harris-portfolio/HEAD/img/Javohir's Resume.pdf -------------------------------------------------------------------------------- /sass/abstact/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin media-sm { 2 | @media screen and (min-width: 576px) { 3 | @content; 4 | } 5 | } 6 | 7 | @mixin media-md { 8 | @media screen and (min-width: 768px) { 9 | @content; 10 | } 11 | } 12 | 13 | @mixin media-lg { 14 | @media screen and (min-width: 992px) { 15 | @content; 16 | } 17 | } 18 | 19 | @mixin media-xl { 20 | @media screen and (min-width: 1024px) { 21 | @content; 22 | } 23 | } -------------------------------------------------------------------------------- /sass/abstact/_variables.scss: -------------------------------------------------------------------------------- 1 | @use 'mixins'; 2 | 3 | $header-height: 3rem; 4 | $nav-width: 324px; 5 | 6 | $font-medium: 500; 7 | $font-semi-bold: 600; 8 | $font-bold: 700; 9 | 10 | $first-color: #cc4b2c; 11 | $first-color-dark: #662616; 12 | $first-color-darken: #290f09; 13 | $text-color: #54423d; 14 | $text-color-light: #eae7e6; 15 | $first-color-lighten: #fffafa; 16 | 17 | $body-font: 'Poppins', sans-serif; 18 | $h1-font-size: 1.5rem; 19 | $h2-font-size: 1.25rem; 20 | $h3-font-size: 1rem; 21 | $normal-font-size: .938rem; 22 | $small-font-size: 0.813rem; 23 | $smaller-font-size: .75rem; 24 | 25 | $mb-1: .5rem; 26 | $mb-2: 1rem; 27 | $mb-3: 1.5rem; 28 | $mb-4: 2rem; 29 | $mb-5: 2.5rem; 30 | 31 | $z-fixed: 100; 32 | 33 | @include mixins.media-md { 34 | $h1-font-size: 2.25rem; 35 | $h2-font-size: 1.5rem; 36 | $h3-font-size: 1.25rem; 37 | $normal-font-size: 1rem; 38 | $small-font-size: 0.875rem; 39 | $smaller-font-size: .813rem; 40 | } -------------------------------------------------------------------------------- /sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | @use '../abstact/mixins'; 2 | @use '../abstact/variables' as vars; 3 | 4 | /*===== BASE =====*/ 5 | *, 6 | ::before, 7 | ::after { 8 | box-sizing: border-box; 9 | } 10 | 11 | html { 12 | scroll-behavior: smooth; 13 | } 14 | 15 | body { 16 | margin: vars.$header-height 0 0 0; 17 | font-family: vars.$body-font; 18 | font-size: vars.$normal-font-size; 19 | font-weight: vars.$font-medium; 20 | background-color: vars.$first-color-lighten; 21 | color: vars.$text-color; 22 | line-height: 1.6; 23 | } 24 | 25 | h1, 26 | h2, 27 | h3, 28 | p { 29 | margin: 0; 30 | } 31 | 32 | h3 { 33 | font-weight: vars.$font-semi-bold; 34 | } 35 | 36 | ul { 37 | margin: 0; 38 | padding: 0; 39 | list-style: none; 40 | } 41 | 42 | a { 43 | text-decoration: none; 44 | color: vars.$text-color; 45 | } 46 | 47 | img { 48 | height: auto; 49 | display: block; 50 | } 51 | 52 | ::-webkit-scrollbar { 53 | width: 12px; 54 | &-thumb { 55 | background: vars.$first-color; 56 | border-radius: 10px; 57 | &:hover { 58 | background: vars.$first-color-dark; 59 | } 60 | } 61 | } 62 | 63 | @include mixins.media-xl { 64 | body { 65 | margin: 0; 66 | padding-left: vars.$nav-width; 67 | } 68 | } -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | /*===== MENU SHOW Y HIDDEN =====*/ 2 | const navMenu = document.getElementById('nav-menu'), 3 | toggleMenu = document.getElementById('nav-toggle'), 4 | closeMenu = document.getElementById('nav-close') 5 | 6 | // SHOW 7 | toggleMenu.addEventListener('click', () => { 8 | navMenu.classList.toggle('show') 9 | }) 10 | 11 | // HIDDEN 12 | closeMenu.addEventListener('click', () => { 13 | navMenu.classList.remove('show') 14 | }) 15 | 16 | /*===== ACTIVE AND REMOVE MENU =====*/ 17 | const navLink = document.querySelectorAll('.nav__link') 18 | 19 | function linkAction() { 20 | navMenu.classList.remove('show') 21 | } 22 | navLink.forEach(n => n.addEventListener('click', linkAction)) 23 | 24 | /*===== SCROLL SECTIONS ACTIVE LINK =====*/ 25 | const section = document.querySelectorAll('section[id]') 26 | 27 | window.addEventListener('scroll', scrollActive) 28 | 29 | function scrollActive() { 30 | const scrollY = window.pageYOffset 31 | 32 | section.forEach(current => { 33 | const sectionHeight = current.offsetHeight 34 | const sectionTap = current.offsetTop - 50 35 | sectionId = current.getAttribute('id') 36 | 37 | if (scrollY > sectionTap && scrollY <= sectionTap + sectionHeight) { 38 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active') 39 | } else { 40 | document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active') 41 | } 42 | }) 43 | } -------------------------------------------------------------------------------- /sass/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | @use '../abstact/variables' as vars; 2 | @use '../abstact/mixins'; 3 | 4 | /* ===== FOOTER =====*/ 5 | .footer { 6 | background-color: vars.$first-color-darken; 7 | color: vars.$first-color-lighten; 8 | text-align: center; 9 | 10 | &__title { 11 | font-size: vars.$h1-font-size; 12 | margin-bottom: vars.$mb-2; 13 | } 14 | 15 | &__description { 16 | margin-bottom: vars.$mb-2; 17 | } 18 | 19 | &__social { 20 | margin-bottom: 3rem; 21 | } 22 | 23 | &__link { 24 | display: inline-flex; 25 | background-color: vars.$first-color; 26 | color: vars.$first-color-lighten; 27 | font-size: 1.1rem; 28 | border-radius: 50%; 29 | padding: 0.4rem; 30 | margin: 0 vars.$mb-1; 31 | transition: .3s; 32 | 33 | &:hover { 34 | background-color: vars.$first-color-lighten; 35 | color: vars.$first-color; 36 | } 37 | } 38 | 39 | &__copy { 40 | font-size: vars.$smaller-font-size; 41 | color: vars.$text-color; 42 | 43 | a { 44 | transition: .4s; 45 | 46 | &:hover { 47 | color: vars.$first-color-lighten; 48 | } 49 | } 50 | } 51 | } 52 | 53 | @include mixins.media-md { 54 | .footer { 55 | background: none; 56 | &__container { 57 | background-color: vars.$first-color-darken; 58 | padding: 3rem; 59 | border-radius: 0.5rem; 60 | } 61 | } 62 | } -------------------------------------------------------------------------------- /sass/layout/_header.scss: -------------------------------------------------------------------------------- 1 | @use '../abstact/mixins'; 2 | @use '../abstact/variables' as vars; 3 | 4 | /*===== NAV =====*/ 5 | .nav { 6 | height: vars.$header-height; 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | width: calc(100% - 2rem); 11 | margin-left: vars.$mb-2; 12 | margin-right: vars.$mb-2; 13 | max-width: 1024px; 14 | 15 | &__menu { 16 | position: fixed; 17 | top: 0; 18 | left: -100%; 19 | width: 100%; 20 | height: 100vh; 21 | padding: 3rem; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | background-color: vars.$first-color; 26 | transition: .5s; 27 | } 28 | 29 | &__close { 30 | position: absolute; 31 | top: 1rem; 32 | right: 1rem; 33 | font-size: 2rem; 34 | color: vars.$first-color-lighten; 35 | cursor: pointer; 36 | } 37 | 38 | &__item { 39 | margin-bottom: vars.$mb-4; 40 | } 41 | 42 | &__link { 43 | font-size: 1rem; 44 | text-transform: uppercase; 45 | color: vars.$first-color-lighten; 46 | font-weight: vars.$font-bold; 47 | transition: .3s; 48 | 49 | &:hover { 50 | color: vars.$text-color; 51 | } 52 | } 53 | 54 | &__toggle { 55 | color: vars.$first-color-dark; 56 | font-size: 1.3rem; 57 | cursor: pointer; 58 | } 59 | } 60 | 61 | 62 | @include mixins.media-xl { 63 | .nav { 64 | &__close { 65 | display: none; 66 | } 67 | 68 | &__menu { 69 | left: 0; 70 | } 71 | } 72 | } -------------------------------------------------------------------------------- /sass/layout/index.scss: -------------------------------------------------------------------------------- 1 | @use "header"; 2 | @use "footer"; 3 | @use '../abstact/variables' as vars; 4 | @use '../abstact/mixins'; 5 | 6 | /*===== CLASS CSS ===== */ 7 | .section { 8 | padding: 4rem 0 2rem; 9 | 10 | &-title { 11 | font-size: vars.$h1-font-size; 12 | color: vars.$first-color; 13 | margin-bottom: vars.$mb-3; 14 | text-align: center; 15 | } 16 | 17 | &-subtitle { 18 | display: block; 19 | font-size: vars.$small-font-size; 20 | color: vars.$first-color-darken; 21 | text-align: center; 22 | font-weight: vars.$font-bold; 23 | margin-bottom: .25rem; 24 | } 25 | } 26 | 27 | /*===== LAYOUT =====*/ 28 | .bd-grid { 29 | max-width: 1024px; 30 | display: grid; 31 | grid-template-columns: 100%; 32 | column-gap: 2rem; 33 | width: calc(100% - 2rem); 34 | margin-left: vars.$mb-2; 35 | margin-right: vars.$mb-2; 36 | } 37 | 38 | .l-header { 39 | width: 100%; 40 | position: fixed; 41 | top: 0; 42 | left: 0; 43 | z-index: vars.$z-fixed; 44 | background-color: vars.$first-color-lighten; 45 | box-shadow: 0 2px 4px rgba(0, 0, 0, .1); 46 | } 47 | 48 | /*=== Show menu ===*/ 49 | .show { 50 | left: 0; 51 | } 52 | 53 | /*Active menu*/ 54 | .active { 55 | color: vars.$text-color; 56 | margin-left: vars.$mb-2; 57 | } 58 | 59 | @include mixins.media-xl { 60 | .l-header { 61 | width: 0; 62 | } 63 | 64 | .section { 65 | padding: 3rem 0 2rem; 66 | } 67 | 68 | .bd-grid { 69 | margin-left: auto; 70 | margin-right: auto; 71 | } 72 | } -------------------------------------------------------------------------------- /css/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../sass/base/_base.scss","../sass/abstact/_variables.scss","../sass/abstact/_mixins.scss","../sass/layout/_header.scss","../sass/layout/_footer.scss","../sass/layout/index.scss","../sass/main.scss"],"names":[],"mappings":"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","file":"main.css"} -------------------------------------------------------------------------------- /sass/main.scss: -------------------------------------------------------------------------------- 1 | @use 'abstact/mixins'; 2 | @use 'abstact/variables' as vars; 3 | @use 'base/base'; 4 | @use 'layout/index.scss'; 5 | 6 | /*===== HOME =====*/ 7 | .home { 8 | &__container { 9 | height: calc(100vh - vars.$header-height); 10 | align-items: center; 11 | } 12 | 13 | &__data { 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | height: max-content; 18 | text-align: center; 19 | } 20 | 21 | &__img { 22 | padding-top: 1.3rem; 23 | padding-left: 0.8rem; 24 | width: 160px; 25 | height: 160px; 26 | background-color: vars.$first-color; 27 | border-radius: 50%; 28 | overflow: hidden; 29 | margin-bottom: vars.$mb-2; 30 | 31 | img { 32 | width: 155px; 33 | } 34 | } 35 | 36 | &__title { 37 | font-size: vars.$h1-font-size; 38 | color: vars.$first-color; 39 | font-weight: vars.$font-semi-bold; 40 | } 41 | 42 | &__profession { 43 | font-size: vars.$small-font-size; 44 | color: vars.$first-color-dark; 45 | margin-bottom: vars.$mb-5; 46 | } 47 | 48 | &__social { 49 | margin-bottom: 5rem; 50 | 51 | &-link { 52 | display: inline-flex; 53 | background-color: vars.$first-color; 54 | color: vars.$first-color-lighten; 55 | font-size: 1.1rem; 56 | border-radius: 50%; 57 | padding: 0.4rem; 58 | margin: 0 vars.$mb-1; 59 | transition: .3s; 60 | 61 | &:hover { 62 | background-color: vars.$first-color-dark; 63 | } 64 | } 65 | } 66 | 67 | &__button { 68 | width: 100%; 69 | } 70 | } 71 | 72 | 73 | /*BUTTONS*/ 74 | .button { 75 | display: inline-block; 76 | background-color: vars.$first-color; 77 | color: vars.$first-color-lighten; 78 | padding: 1rem 2rem; 79 | font-weight: vars.$font-semi-bold; 80 | border-radius: .5rem; 81 | transition: .3s; 82 | 83 | &:hover { 84 | background-color: vars.$first-color-dark; 85 | } 86 | 87 | &__light { 88 | background-color: vars.$first-color-lighten; 89 | color: vars.$first-color; 90 | 91 | &:hover { 92 | color: vars.$first-color-lighten; 93 | } 94 | } 95 | } 96 | 97 | 98 | /* ===== ABOUT =====*/ 99 | .about { 100 | &__container { 101 | row-gap: 2rem; 102 | } 103 | 104 | &__data { 105 | text-align: center; 106 | } 107 | 108 | &__description { 109 | margin-bottom: vars.$mb-4; 110 | } 111 | 112 | &__img { 113 | width: 220px; 114 | border-radius: 0.5rem; 115 | margin: 0 auto; 116 | } 117 | 118 | &__information { 119 | margin-bottom: vars.$mb-4; 120 | 121 | &-title { 122 | font-size: vars.$h3-font-size; 123 | color: vars.$first-color-dark; 124 | margin-bottom: vars.$mb-2; 125 | } 126 | 127 | &-data { 128 | display: flex; 129 | align-items: center; 130 | padding-left: 1.5rem; 131 | margin-bottom: vars.$mb-3; 132 | } 133 | 134 | &-icon { 135 | font-size: 1.5rem; 136 | color: vars.$first-color; 137 | margin-right: vars.$mb-4; 138 | } 139 | 140 | &-subtitle { 141 | display: block; 142 | font-weight: vars.$font-semi-bold; 143 | 144 | &-small { 145 | font-size: vars.$small-font-size; 146 | } 147 | } 148 | } 149 | 150 | } 151 | 152 | 153 | /* ===== SKILLS =====*/ 154 | .skills { 155 | &__container { 156 | row-gap: 2rem; 157 | } 158 | 159 | &__subtitle { 160 | font-size: vars.$h3-font-size; 161 | color: vars.$first-color-dark; 162 | margin-bottom: vars.$mb-2; 163 | } 164 | 165 | &__data { 166 | position: relative; 167 | display: flex; 168 | justify-content: space-between; 169 | margin: 0 vars.$mb-2; 170 | margin-bottom: vars.$mb-4; 171 | } 172 | 173 | &__name { 174 | text-transform: uppercase; 175 | } 176 | 177 | &__bar { 178 | position: absolute; 179 | bottom: -0.75rem; 180 | height: 0.25rem; 181 | background-color: vars.$first-color; 182 | } 183 | 184 | &__html { 185 | width: 80%; 186 | } 187 | 188 | &__js { 189 | width: 90%; 190 | } 191 | 192 | &__react { 193 | width: 70%; 194 | } 195 | 196 | &__angular { 197 | width: 60%; 198 | } 199 | 200 | &__php { 201 | width: 80%; 202 | } 203 | 204 | &__node { 205 | width: 70%; 206 | } 207 | 208 | &__firebase { 209 | width: 90%; 210 | } 211 | 212 | &__python { 213 | width: 80%; 214 | } 215 | } 216 | 217 | 218 | /* ===== EDUCATION =====*/ 219 | .education { 220 | &__container { 221 | row-gap: 2rem; 222 | } 223 | 224 | &__content { 225 | display: grid; 226 | grid-template-columns: 1fr max-content 1fr; 227 | } 228 | 229 | &__race, 230 | &__year { 231 | font-size: vars.$h3-font-size; 232 | margin-bottom: 0.25rem; 233 | } 234 | 235 | &__specialty, 236 | &__university { 237 | display: block; 238 | font-size: vars.$smaller-font-size; 239 | } 240 | 241 | &__university, 242 | &__year { 243 | text-align: right; 244 | } 245 | 246 | &__time { 247 | padding: 0 1rem; 248 | justify-self: center; 249 | } 250 | 251 | &__rounder { 252 | position: relative; 253 | display: inline-block; 254 | width: 12px; 255 | height: 12px; 256 | background-color: vars.$first-color; 257 | border-radius: 50%; 258 | 259 | &::before { 260 | content: ''; 261 | position: absolute; 262 | transform: translate(-4px, -4px); 263 | width: 20px; 264 | height: 20px; 265 | border: 1px solid vars.$first-color; 266 | border-radius: 50%; 267 | } 268 | } 269 | 270 | &__line { 271 | display: block; 272 | height: 90%; 273 | width: 2px; 274 | background-color: vars.$first-color; 275 | transform: translate(5px, -4px); 276 | } 277 | } 278 | 279 | 280 | /* ===== SERVICES =====*/ 281 | .services { 282 | &__container { 283 | row-gap: 2rem; 284 | } 285 | 286 | &__content { 287 | padding: 1.5rem 0.5rem; 288 | border: 2px solid vars.$first-color; 289 | border-radius: 0.5rem; 290 | text-align: center; 291 | 292 | &:hover { 293 | background-color: vars.$first-color; 294 | 295 | .services__icon { 296 | background-color: vars.$first-color-lighten; 297 | color: vars.$first-color; 298 | } 299 | 300 | .services__title { 301 | color: vars.$first-color-lighten; 302 | } 303 | 304 | .services__description { 305 | color: vars.$first-color-lighten; 306 | } 307 | } 308 | } 309 | 310 | &__icon { 311 | font-size: 2rem; 312 | padding: 0.5rem; 313 | background-color: vars.$first-color; 314 | color: vars.$first-color-lighten; 315 | border-radius: 50%; 316 | margin-bottom: vars.$mb-2; 317 | } 318 | 319 | &__title { 320 | font-size: 1.25rem; 321 | color: vars.$first-color-dark; 322 | margin-bottom: vars.$mb-1; 323 | } 324 | 325 | &__title, 326 | &__description, 327 | &__icon, 328 | &__content { 329 | transition: .5s; 330 | } 331 | } 332 | 333 | /* ===== PROJECT IN MIND =====*/ 334 | .project { 335 | background-color: vars.$first-color; 336 | padding-bottom: 0; 337 | 338 | &__container { 339 | row-gap: 2rem; 340 | } 341 | 342 | &__data { 343 | text-align: center; 344 | } 345 | 346 | &__description, 347 | &__title { 348 | color: vars.$first-color-lighten; 349 | } 350 | 351 | &__description { 352 | margin-bottom: vars.$mb-4; 353 | } 354 | 355 | &__img { 356 | width: 220px; 357 | justify-self: center; 358 | } 359 | } 360 | 361 | 362 | /* ===== WORKS =====*/ 363 | .works { 364 | &__container { 365 | justify-items: center; 366 | row-gap: 2rem; 367 | } 368 | 369 | &__img { 370 | position: relative; 371 | overflow: hidden; 372 | border-radius: .5rem; 373 | 374 | img { 375 | width: 100%; 376 | } 377 | 378 | &:hover .works__data { 379 | bottom: 0; 380 | } 381 | } 382 | 383 | &__data { 384 | position: absolute; 385 | bottom: -100%; 386 | width: 100%; 387 | height: 100%; 388 | display: flex; 389 | flex-direction: column; 390 | justify-content: center; 391 | align-items: center; 392 | background: rgba(204, 75, 44, .7); 393 | border-radius: 0.5rem; 394 | transition: .3s; 395 | } 396 | 397 | &__link { 398 | display: inline-flex; 399 | font-size: 1.5rem; 400 | background-color: vars.$first-color-lighten; 401 | color: vars.$first-color; 402 | padding: 0.25rem; 403 | border-radius: 0.25rem; 404 | margin-bottom: vars.$mb-2; 405 | } 406 | 407 | &__title { 408 | font-size: vars.$h2-font-size; 409 | color: vars.$first-color-lighten; 410 | } 411 | } 412 | 413 | 414 | /* ===== CONTACT =====*/ 415 | .contact { 416 | &__container { 417 | row-gap: 3rem; 418 | } 419 | 420 | &__input { 421 | width: 100%; 422 | padding: 1rem; 423 | outline: none; 424 | border: none; 425 | background-color: vars.$text-color-light; 426 | font-size: vars.$normal-font-size; 427 | margin-bottom: vars.$mb-2; 428 | border-radius: 0.5rem; 429 | resize: vertical; 430 | } 431 | 432 | & ::placeholder { 433 | color: vars.$first-color-dark; 434 | font-family: vars.$body-font; 435 | font-weight: vars.$font-medium; 436 | } 437 | 438 | &__button { 439 | outline: none; 440 | border: none; 441 | font-family: vars.$body-font; 442 | font-size: vars.$normal-font-size; 443 | cursor: pointer; 444 | } 445 | 446 | &__info { 447 | margin-bottom: vars.$mb-3; 448 | } 449 | 450 | &__subtitle { 451 | font-size: vars.$h3-font-size; 452 | color: vars.$first-color-dark; 453 | margin-bottom: vars.$mb-1; 454 | } 455 | 456 | &__text { 457 | display: block; 458 | padding-left: 1rem; 459 | } 460 | } 461 | 462 | @include mixins.media-md { 463 | 464 | .home__button { 465 | width: initial; 466 | } 467 | 468 | .nav__menu { 469 | width: vars.$nav-width; 470 | } 471 | 472 | .about__container, 473 | .skills__container, 474 | .services__container, 475 | .works__container, 476 | .contact__container, 477 | .contact__inputs { 478 | grid-template-columns: repeat(2, 1fr); 479 | } 480 | 481 | .about { 482 | &__data { 483 | text-align: initial; 484 | } 485 | 486 | &__description { 487 | margin-bottom: vars.$mb-5; 488 | } 489 | 490 | &__img { 491 | width: 100%; 492 | } 493 | 494 | &__information { 495 | padding-left: 4rem; 496 | } 497 | } 498 | 499 | .education__time { 500 | padding: 0 2rem; 501 | } 502 | 503 | .project { 504 | background: none; 505 | 506 | &__container { 507 | background-color: vars.$first-color; 508 | grid-template-columns: 2fr 1.2fr; 509 | padding: 0 2rem; 510 | border-radius: 0.5rem; 511 | } 512 | 513 | &__data { 514 | padding: 3rem 0; 515 | } 516 | 517 | &__data, 518 | &__title { 519 | text-align: initial; 520 | } 521 | 522 | &__img { 523 | min-width: 100%; 524 | align-self: flex-end; 525 | } 526 | } 527 | 528 | .contact { 529 | &__inputs { 530 | display: grid; 531 | column-gap: 1.5rem; 532 | } 533 | 534 | &__info { 535 | padding-left: 3rem; 536 | } 537 | } 538 | } 539 | 540 | @include mixins.media-xl { 541 | .home__container { 542 | height: 100vh; 543 | } 544 | 545 | .services__container, 546 | .works__container { 547 | grid-template-columns: repeat(3, 1fr); 548 | } 549 | } -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | /*===== BASE =====*/ 2 | *, 3 | ::before, 4 | ::after { 5 | box-sizing: border-box; 6 | } 7 | 8 | html { 9 | scroll-behavior: smooth; 10 | } 11 | 12 | body { 13 | margin: 3rem 0 0 0; 14 | font-family: "Poppins", sans-serif; 15 | font-size: 0.938rem; 16 | font-weight: 500; 17 | background-color: #fffafa; 18 | color: #54423d; 19 | line-height: 1.6; 20 | } 21 | 22 | h1, 23 | h2, 24 | h3, 25 | p { 26 | margin: 0; 27 | } 28 | 29 | h3 { 30 | font-weight: 600; 31 | } 32 | 33 | ul { 34 | margin: 0; 35 | padding: 0; 36 | list-style: none; 37 | } 38 | 39 | a { 40 | text-decoration: none; 41 | color: #54423d; 42 | } 43 | 44 | img { 45 | height: auto; 46 | display: block; 47 | } 48 | 49 | ::-webkit-scrollbar { 50 | width: 12px; 51 | } 52 | ::-webkit-scrollbar-thumb { 53 | background: #cc4b2c; 54 | border-radius: 10px; 55 | } 56 | ::-webkit-scrollbar-thumb:hover { 57 | background: #662616; 58 | } 59 | 60 | @media screen and (min-width: 1024px) { 61 | body { 62 | margin: 0; 63 | padding-left: 324px; 64 | } 65 | } 66 | /*===== NAV =====*/ 67 | .nav { 68 | height: 3rem; 69 | display: flex; 70 | justify-content: space-between; 71 | align-items: center; 72 | width: calc(100% - 2rem); 73 | margin-left: 1rem; 74 | margin-right: 1rem; 75 | max-width: 1024px; 76 | } 77 | .nav__menu { 78 | position: fixed; 79 | top: 0; 80 | left: -100%; 81 | width: 100%; 82 | height: 100vh; 83 | padding: 3rem; 84 | display: flex; 85 | align-items: center; 86 | justify-content: center; 87 | background-color: #cc4b2c; 88 | transition: 0.5s; 89 | } 90 | .nav__close { 91 | position: absolute; 92 | top: 1rem; 93 | right: 1rem; 94 | font-size: 2rem; 95 | color: #fffafa; 96 | cursor: pointer; 97 | } 98 | .nav__item { 99 | margin-bottom: 2rem; 100 | } 101 | .nav__link { 102 | font-size: 1rem; 103 | text-transform: uppercase; 104 | color: #fffafa; 105 | font-weight: 700; 106 | transition: 0.3s; 107 | } 108 | .nav__link:hover { 109 | color: #54423d; 110 | } 111 | .nav__toggle { 112 | color: #662616; 113 | font-size: 1.3rem; 114 | cursor: pointer; 115 | } 116 | 117 | @media screen and (min-width: 1024px) { 118 | .nav__close { 119 | display: none; 120 | } 121 | .nav__menu { 122 | left: 0; 123 | } 124 | } 125 | /* ===== FOOTER =====*/ 126 | .footer { 127 | background-color: #290f09; 128 | color: #fffafa; 129 | text-align: center; 130 | } 131 | .footer__title { 132 | font-size: 1.5rem; 133 | margin-bottom: 1rem; 134 | } 135 | .footer__description { 136 | margin-bottom: 1rem; 137 | } 138 | .footer__social { 139 | margin-bottom: 3rem; 140 | } 141 | .footer__link { 142 | display: inline-flex; 143 | background-color: #cc4b2c; 144 | color: #fffafa; 145 | font-size: 1.1rem; 146 | border-radius: 50%; 147 | padding: 0.4rem; 148 | margin: 0 0.5rem; 149 | transition: 0.3s; 150 | } 151 | .footer__link:hover { 152 | background-color: #fffafa; 153 | color: #cc4b2c; 154 | } 155 | .footer__copy { 156 | font-size: 0.75rem; 157 | color: #54423d; 158 | } 159 | .footer__copy a { 160 | transition: 0.4s; 161 | } 162 | .footer__copy a:hover { 163 | color: #fffafa; 164 | } 165 | 166 | @media screen and (min-width: 768px) { 167 | .footer { 168 | background: none; 169 | } 170 | .footer__container { 171 | background-color: #290f09; 172 | padding: 3rem; 173 | border-radius: 0.5rem; 174 | } 175 | } 176 | /*===== CLASS CSS ===== */ 177 | .section { 178 | padding: 4rem 0 2rem; 179 | } 180 | .section-title { 181 | font-size: 1.5rem; 182 | color: #cc4b2c; 183 | margin-bottom: 1.5rem; 184 | text-align: center; 185 | } 186 | .section-subtitle { 187 | display: block; 188 | font-size: 0.813rem; 189 | color: #290f09; 190 | text-align: center; 191 | font-weight: 700; 192 | margin-bottom: 0.25rem; 193 | } 194 | 195 | /*===== LAYOUT =====*/ 196 | .bd-grid { 197 | max-width: 1024px; 198 | display: grid; 199 | grid-template-columns: 100%; 200 | column-gap: 2rem; 201 | width: calc(100% - 2rem); 202 | margin-left: 1rem; 203 | margin-right: 1rem; 204 | } 205 | 206 | .l-header { 207 | width: 100%; 208 | position: fixed; 209 | top: 0; 210 | left: 0; 211 | z-index: 100; 212 | background-color: #fffafa; 213 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 214 | } 215 | 216 | /*=== Show menu ===*/ 217 | .show { 218 | left: 0; 219 | } 220 | 221 | /*Active menu*/ 222 | .active { 223 | color: #54423d; 224 | margin-left: 1rem; 225 | } 226 | 227 | @media screen and (min-width: 1024px) { 228 | .l-header { 229 | width: 0; 230 | } 231 | .section { 232 | padding: 3rem 0 2rem; 233 | } 234 | .bd-grid { 235 | margin-left: auto; 236 | margin-right: auto; 237 | } 238 | } 239 | /*===== HOME =====*/ 240 | .home__container { 241 | height: calc(100vh - 3rem); 242 | align-items: center; 243 | } 244 | .home__data { 245 | display: flex; 246 | flex-direction: column; 247 | align-items: center; 248 | height: max-content; 249 | text-align: center; 250 | } 251 | .home__img { 252 | padding-top: 1.3rem; 253 | padding-left: 0.8rem; 254 | width: 160px; 255 | height: 160px; 256 | background-color: #cc4b2c; 257 | border-radius: 50%; 258 | overflow: hidden; 259 | margin-bottom: 1rem; 260 | } 261 | .home__img img { 262 | width: 155px; 263 | } 264 | .home__title { 265 | font-size: 1.5rem; 266 | color: #cc4b2c; 267 | font-weight: 600; 268 | } 269 | .home__profession { 270 | font-size: 0.813rem; 271 | color: #662616; 272 | margin-bottom: 2.5rem; 273 | } 274 | .home__social { 275 | margin-bottom: 5rem; 276 | } 277 | .home__social-link { 278 | display: inline-flex; 279 | background-color: #cc4b2c; 280 | color: #fffafa; 281 | font-size: 1.1rem; 282 | border-radius: 50%; 283 | padding: 0.4rem; 284 | margin: 0 0.5rem; 285 | transition: 0.3s; 286 | } 287 | .home__social-link:hover { 288 | background-color: #662616; 289 | } 290 | .home__button { 291 | width: 100%; 292 | } 293 | 294 | /*BUTTONS*/ 295 | .button { 296 | display: inline-block; 297 | background-color: #cc4b2c; 298 | color: #fffafa; 299 | padding: 1rem 2rem; 300 | font-weight: 600; 301 | border-radius: 0.5rem; 302 | transition: 0.3s; 303 | } 304 | .button:hover { 305 | background-color: #662616; 306 | } 307 | .button__light { 308 | background-color: #fffafa; 309 | color: #cc4b2c; 310 | } 311 | .button__light:hover { 312 | color: #fffafa; 313 | } 314 | 315 | /* ===== ABOUT =====*/ 316 | .about__container { 317 | row-gap: 2rem; 318 | } 319 | .about__data { 320 | text-align: center; 321 | } 322 | .about__description { 323 | margin-bottom: 2rem; 324 | } 325 | .about__img { 326 | width: 220px; 327 | border-radius: 0.5rem; 328 | margin: 0 auto; 329 | } 330 | .about__information { 331 | margin-bottom: 2rem; 332 | } 333 | .about__information-title { 334 | font-size: 1rem; 335 | color: #662616; 336 | margin-bottom: 1rem; 337 | } 338 | .about__information-data { 339 | display: flex; 340 | align-items: center; 341 | padding-left: 1.5rem; 342 | margin-bottom: 1.5rem; 343 | } 344 | .about__information-icon { 345 | font-size: 1.5rem; 346 | color: #cc4b2c; 347 | margin-right: 2rem; 348 | } 349 | .about__information-subtitle { 350 | display: block; 351 | font-weight: 600; 352 | } 353 | .about__information-subtitle-small { 354 | font-size: 0.813rem; 355 | } 356 | 357 | /* ===== SKILLS =====*/ 358 | .skills__container { 359 | row-gap: 2rem; 360 | } 361 | .skills__subtitle { 362 | font-size: 1rem; 363 | color: #662616; 364 | margin-bottom: 1rem; 365 | } 366 | .skills__data { 367 | position: relative; 368 | display: flex; 369 | justify-content: space-between; 370 | margin: 0 1rem; 371 | margin-bottom: 2rem; 372 | } 373 | .skills__name { 374 | text-transform: uppercase; 375 | } 376 | .skills__bar { 377 | position: absolute; 378 | bottom: -0.75rem; 379 | height: 0.25rem; 380 | background-color: #cc4b2c; 381 | } 382 | .skills__html { 383 | width: 80%; 384 | } 385 | .skills__js { 386 | width: 90%; 387 | } 388 | .skills__react { 389 | width: 70%; 390 | } 391 | .skills__angular { 392 | width: 60%; 393 | } 394 | .skills__php { 395 | width: 80%; 396 | } 397 | .skills__node { 398 | width: 70%; 399 | } 400 | .skills__firebase { 401 | width: 90%; 402 | } 403 | .skills__python { 404 | width: 80%; 405 | } 406 | 407 | /* ===== EDUCATION =====*/ 408 | .education__container { 409 | row-gap: 2rem; 410 | } 411 | .education__content { 412 | display: grid; 413 | grid-template-columns: 1fr max-content 1fr; 414 | } 415 | .education__race, .education__year { 416 | font-size: 1rem; 417 | margin-bottom: 0.25rem; 418 | } 419 | .education__specialty, .education__university { 420 | display: block; 421 | font-size: 0.75rem; 422 | } 423 | .education__university, .education__year { 424 | text-align: right; 425 | } 426 | .education__time { 427 | padding: 0 1rem; 428 | justify-self: center; 429 | } 430 | .education__rounder { 431 | position: relative; 432 | display: inline-block; 433 | width: 12px; 434 | height: 12px; 435 | background-color: #cc4b2c; 436 | border-radius: 50%; 437 | } 438 | .education__rounder::before { 439 | content: ""; 440 | position: absolute; 441 | transform: translate(-4px, -4px); 442 | width: 20px; 443 | height: 20px; 444 | border: 1px solid #cc4b2c; 445 | border-radius: 50%; 446 | } 447 | .education__line { 448 | display: block; 449 | height: 90%; 450 | width: 2px; 451 | background-color: #cc4b2c; 452 | transform: translate(5px, -4px); 453 | } 454 | 455 | /* ===== SERVICES =====*/ 456 | .services__container { 457 | row-gap: 2rem; 458 | } 459 | .services__content { 460 | padding: 1.5rem 0.5rem; 461 | border: 2px solid #cc4b2c; 462 | border-radius: 0.5rem; 463 | text-align: center; 464 | } 465 | .services__content:hover { 466 | background-color: #cc4b2c; 467 | } 468 | .services__content:hover .services__icon { 469 | background-color: #fffafa; 470 | color: #cc4b2c; 471 | } 472 | .services__content:hover .services__title { 473 | color: #fffafa; 474 | } 475 | .services__content:hover .services__description { 476 | color: #fffafa; 477 | } 478 | .services__icon { 479 | font-size: 2rem; 480 | padding: 0.5rem; 481 | background-color: #cc4b2c; 482 | color: #fffafa; 483 | border-radius: 50%; 484 | margin-bottom: 1rem; 485 | } 486 | .services__title { 487 | font-size: 1.25rem; 488 | color: #662616; 489 | margin-bottom: 0.5rem; 490 | } 491 | .services__title, .services__description, .services__icon, .services__content { 492 | transition: 0.5s; 493 | } 494 | 495 | /* ===== PROJECT IN MIND =====*/ 496 | .project { 497 | background-color: #cc4b2c; 498 | padding-bottom: 0; 499 | } 500 | .project__container { 501 | row-gap: 2rem; 502 | } 503 | .project__data { 504 | text-align: center; 505 | } 506 | .project__description, .project__title { 507 | color: #fffafa; 508 | } 509 | .project__description { 510 | margin-bottom: 2rem; 511 | } 512 | .project__img { 513 | width: 220px; 514 | justify-self: center; 515 | } 516 | 517 | /* ===== WORKS =====*/ 518 | .works__container { 519 | justify-items: center; 520 | row-gap: 2rem; 521 | } 522 | .works__img { 523 | position: relative; 524 | overflow: hidden; 525 | border-radius: 0.5rem; 526 | } 527 | .works__img img { 528 | width: 100%; 529 | } 530 | .works__img:hover .works__data { 531 | bottom: 0; 532 | } 533 | .works__data { 534 | position: absolute; 535 | bottom: -100%; 536 | width: 100%; 537 | height: 100%; 538 | display: flex; 539 | flex-direction: column; 540 | justify-content: center; 541 | align-items: center; 542 | background: rgba(204, 75, 44, 0.7); 543 | border-radius: 0.5rem; 544 | transition: 0.3s; 545 | } 546 | .works__link { 547 | display: inline-flex; 548 | font-size: 1.5rem; 549 | background-color: #fffafa; 550 | color: #cc4b2c; 551 | padding: 0.25rem; 552 | border-radius: 0.25rem; 553 | margin-bottom: 1rem; 554 | } 555 | .works__title { 556 | font-size: 1.25rem; 557 | color: #fffafa; 558 | } 559 | 560 | /* ===== CONTACT =====*/ 561 | .contact__container { 562 | row-gap: 3rem; 563 | } 564 | .contact__input { 565 | width: 100%; 566 | padding: 1rem; 567 | outline: none; 568 | border: none; 569 | background-color: #eae7e6; 570 | font-size: 0.938rem; 571 | margin-bottom: 1rem; 572 | border-radius: 0.5rem; 573 | resize: vertical; 574 | } 575 | .contact ::placeholder { 576 | color: #662616; 577 | font-family: "Poppins", sans-serif; 578 | font-weight: 500; 579 | } 580 | .contact__button { 581 | outline: none; 582 | border: none; 583 | font-family: "Poppins", sans-serif; 584 | font-size: 0.938rem; 585 | cursor: pointer; 586 | } 587 | .contact__info { 588 | margin-bottom: 1.5rem; 589 | } 590 | .contact__subtitle { 591 | font-size: 1rem; 592 | color: #662616; 593 | margin-bottom: 0.5rem; 594 | } 595 | .contact__text { 596 | display: block; 597 | padding-left: 1rem; 598 | } 599 | 600 | @media screen and (min-width: 768px) { 601 | .home__button { 602 | width: initial; 603 | } 604 | .nav__menu { 605 | width: 324px; 606 | } 607 | .about__container, 608 | .skills__container, 609 | .services__container, 610 | .works__container, 611 | .contact__container, 612 | .contact__inputs { 613 | grid-template-columns: repeat(2, 1fr); 614 | } 615 | .about__data { 616 | text-align: initial; 617 | } 618 | .about__description { 619 | margin-bottom: 2.5rem; 620 | } 621 | .about__img { 622 | width: 100%; 623 | } 624 | .about__information { 625 | padding-left: 4rem; 626 | } 627 | .education__time { 628 | padding: 0 2rem; 629 | } 630 | .project { 631 | background: none; 632 | } 633 | .project__container { 634 | background-color: #cc4b2c; 635 | grid-template-columns: 2fr 1.2fr; 636 | padding: 0 2rem; 637 | border-radius: 0.5rem; 638 | } 639 | .project__data { 640 | padding: 3rem 0; 641 | } 642 | .project__data, .project__title { 643 | text-align: initial; 644 | } 645 | .project__img { 646 | min-width: 100%; 647 | align-self: flex-end; 648 | } 649 | .contact__inputs { 650 | display: grid; 651 | column-gap: 1.5rem; 652 | } 653 | .contact__info { 654 | padding-left: 3rem; 655 | } 656 | } 657 | @media screen and (min-width: 1024px) { 658 | .home__container { 659 | height: 100vh; 660 | } 661 | .services__container, 662 | .works__container { 663 | grid-template-columns: repeat(3, 1fr); 664 | } 665 | } 666 | 667 | /*# sourceMappingURL=main.css.map */ 668 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Responsive personal portfolio | Harris 15 | 16 | 17 | 18 | 19 |
20 | 54 |
55 | 56 |
57 | 58 |
59 |
60 |
61 |
62 | 63 |
64 | 65 |

Javohir To'xtasinov

66 | Frontend Developer 67 | 68 | 74 | 75 | Download Resume 77 |
78 |
79 |
80 | 81 | 82 |
83 | My Intro 84 |

About Me

85 | 86 |
87 |
88 |

Hi, I'm a frontend developer, passionate about 89 | creating and developing 90 | web interfaces. I have many years of experience in this area of work, widh multiple quality 91 | projects.

92 | 93 |
94 | 95 |
96 |
97 |

Information

98 |
99 | 100 | Javohir To'xtasinov 101 |
102 |
103 | 104 | +998 91 141 56 42 105 |
106 |
107 | 108 | javohirtoxtasinov0001@gmail.com 109 |
110 |
111 |
112 |

Experience and Support

113 |
114 | 115 |
116 | 2 Years Job 117 | Experience 118 |
119 |
120 |
121 | 122 |
123 | 30 Project 124 | Completed 125 |
126 |
127 |
128 | 129 |
130 | Support 131 | Online 24/7 132 |
133 |
134 |
135 |
136 |
137 |
138 | 139 | 140 |
141 | Why Choose Me 142 |

My expertise Area

143 | 144 |
145 |
146 |

Frontend

147 | 148 |
149 | HTML/CSS 150 | 80% 151 | 152 |
153 | 154 |
155 | JavaScript 156 | 90% 157 | 158 |
159 | 160 |
161 | React 162 | 70% 163 | 164 |
165 | 166 |
167 | Angular 168 | 60% 169 | 170 |
171 |
172 | 173 |
174 |

Backend

175 | 176 |
177 | Php 178 | 80% 179 | 180 |
181 | 182 |
183 | Node Js 184 | 70% 185 | 186 |
187 | 188 |
189 | FireBase 190 | 90% 191 | 192 |
193 | 194 |
195 | Python 196 | 80% 197 | 198 |
199 |
200 |
201 |
202 | 203 | 204 |
205 | Qualification 206 |

My Education

207 | 208 |
209 |
210 |
211 |

2019 - 2020

212 | University of Studies 213 |
214 | 215 |
216 | 217 | 218 |
219 | 220 |
221 |

Diploma Development

222 | Frontend 223 |
224 |
225 | 226 |
227 |
228 |

2014 - 2017

229 | University of Studies 230 |
231 | 232 |
233 | 234 | 235 |
236 | 237 |
238 |

Diploma Development

239 | Backend 240 |
241 |
242 | 243 |
244 |
245 |

2018 - 2020

246 | University of Studies 247 |
248 | 249 |
250 | 251 | 252 |
253 | 254 |
255 |

Diploma Design

256 | UI/UX 257 |
258 |
259 |
260 |
261 | 262 | 263 |
264 | What I Offer 265 |

My Services

266 | 267 |
268 |
269 | 270 |

Web Design

271 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis 272 | autem pariatur eum ratione ea quisquam.

273 |
274 | 275 |
276 | 277 |

Graphic Design

278 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis 279 | autem pariatur 280 | eum ratione ea quisquam.

281 |
282 | 283 |
284 | 285 |

UI/UX

286 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis 287 | autem pariatur 288 | eum ratione ea quisquam.

289 |
290 | 291 |
292 | 293 |

Backend Development

294 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis 295 | autem pariatur 296 | eum ratione ea quisquam.

297 |
298 | 299 |
300 | 301 |

Content Writing

302 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis 303 | autem pariatur 304 | eum ratione ea quisquam.

305 |
306 | 307 |
308 | 309 |

Interface Mobile

310 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis 311 | autem pariatur 312 | eum ratione ea quisquam.

313 |
314 |
315 |
316 | 317 | 318 |
319 |
320 |
321 |

Do you have a project in mind

322 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias 323 | voluptatum aliquid distinctio, iste veritatis vel minus corrupti dolore porro. Dolor?

324 | Contact Me 325 |
326 | 327 | 328 |
329 |
330 | 331 | 332 |
333 | My Portfolio 334 |

Recent Works

335 | 336 |
337 |
338 | 339 | 340 |
341 | 343 | Work 1 344 |
345 |
346 |
347 | 348 | 349 |
350 | 352 | Work 2 353 |
354 |
355 |
356 | 357 | 358 |
359 | 361 | Work 3 362 |
363 |
364 |
365 | 366 | 367 |
368 | 370 | Work 4 371 |
372 |
373 |
374 | 375 | 376 |
377 | 379 | Work 5 380 |
381 |
382 |
383 | 384 | 385 |
386 | 388 | Work 6 389 |
390 |
391 |
392 |
393 | 394 | 395 |
396 | Contact Me 397 |

Get In Touch

398 | 399 |
400 |
401 |
402 | 403 | 404 |
405 | 406 | 407 | 408 | 409 | 410 | 411 |
412 | 413 |
414 |
415 |

Call Me

416 | +998 91 141 56 42 417 | +998 94 456 78 69 418 |
419 | 420 |
421 |

E-mail

422 | javohirtoxtasinov0001@gmail.com 423 |
424 | 425 |
426 |

Location

427 | Uzbekistan, Fergana 428 | Fergana - Baghdad 429 |
430 |
431 |
432 |
433 | 434 |
435 | 436 | 437 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | --------------------------------------------------------------------------------