; 34 | }); 35 | } 36 | } 37 | } 38 | return ( 39 | 46 | 47 | 48 | 49 |

50 |

51 |

52 | {" "} 58 | {" "} 59 | {" "} 64 | {" "} 65 | 70 |

71 | 76 | {img} 77 | 78 |

79 |

80 |

81 | {title} 82 | {url ? ( 83 | 89 | 93 | 94 | ) : null} 95 |

96 |

{description}

97 |

98 |

{tech} 99 |

100 |

101 |

102 | 103 | ); 104 | } 105 | } 106 | 107 | export default ProjectDetailsModal; 108 | -------------------------------------------------------------------------------- /src/components/Projects.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import ProjectDetailsModal from "./ProjectDetailsModal"; 3 | 4 | class Projects extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | deps: {}, 9 | detailsModalShow: false, 10 | }; 11 | } 12 | 13 | render() { 14 | let detailsModalShow = (data) => { 15 | this.setState({ detailsModalShow: true, deps: data }); 16 | }; 17 | 18 | let detailsModalClose = () => this.setState({ detailsModalShow: false }); 19 | if (this.props.resumeProjects && this.props.resumeBasicInfo) { 20 | var sectionName = this.props.resumeBasicInfo.section_name.projects; 21 | var projects = this.props.resumeProjects.map(function (projects) { 22 | return ( 23 |

28 | 29 |

detailsModalShow(projects)}> 30 |

31 |

37 | {projects.startDate} 38 |
39 |

40 | {projects.title} 41 |

42 |

43 |

44 | 45 |

46 | ); 47 | }); 48 | } 49 | 50 | return ( 51 |

52 |

53 |

54 | {sectionName} 55 |

56 |

57 |

{projects}

58 |

59 | 64 |

65 |

66 | ); 67 | } 68 | } 69 | 70 | export default Projects; 71 | -------------------------------------------------------------------------------- /src/components/Skills.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class Skills extends Component { 4 | render() { 5 | if (this.props.sharedSkills && this.props.resumeBasicInfo) { 6 | var sectionName = this.props.resumeBasicInfo.section_name.skills; 7 | var skills = this.props.sharedSkills.icons.map(function (skills, i) { 8 | return ( 9 |

10 | 11 |

12 | 13 |
17 | {skills.name} 18 |
19 | 20 |

21 | 22 |

23 | ); 24 | }); 25 | } 26 | 27 | return ( 28 |

29 |

30 |

31 |

32 | {sectionName} 33 |

34 |

35 |

36 |

{skills} 37 |

38 |

39 |

40 | ); 41 | } 42 | } 43 | 44 | export default Skills; 45 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.scss'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | import 'bootstrap/dist/css/bootstrap.min.css'; 7 | 8 | /* GLOBAL VARIABLES */ 9 | 10 | window.$primaryLanguage = 'en'; 11 | window.$secondaryLanguage = 'pl'; 12 | window.$primaryLanguageIconId = 'primary-lang-icon'; 13 | window.$secondaryLanguageIconId = 'secondary-lang-icon'; 14 | 15 | ReactDOM.render(, document.getElementById('root')); 16 | serviceWorker.register(); 17 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/scss/dark-slider.scss: -------------------------------------------------------------------------------- 1 | $root-element: 'awssld'; 2 | $cos45: 0.7071; 3 | $transition-bezier: cubic-bezier(0.5, 0.075, 0.25, 0.95); 4 | $slider-height-percentage: 60%; 5 | $slider-transition-duration: 575ms; 6 | $organic-arrow-color: #8C8C8C; 7 | $organic-arrow-thickness: 4px; 8 | $organic-arrow-height: 40px; 9 | $organic-arrow-border-radius: 0; 10 | $control-button-width: 10%; 11 | $control-button-height: 25%; 12 | $control-button-opacity: 0.5; 13 | $control-button-hover-opacity: 0.75; 14 | $control-button-background: transparent; 15 | $loader-bar-color: #656565; 16 | $loader-bar-height: 6px; 17 | $control-bullet-color: #8C8C8C; 18 | $control-bullet-active-color: #8C8C8C; 19 | $content-background-color: #8C8C8C; 20 | 21 | %fill-parent { 22 | display: block; 23 | position: absolute; 24 | width: 100%; 25 | height: 100%; 26 | top: 0; 27 | left: 0; 28 | } 29 | 30 | %clear-spacing { 31 | padding: 0; 32 | margin: 0; 33 | } 34 | 35 | %clear-focus { 36 | outline-color: 0; 37 | outline-style: none; 38 | outline-width: 0; 39 | } 40 | 41 | %clear-selection { 42 | user-select: none; 43 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 44 | -webkit-tap-highlight-color: transparent; 45 | } 46 | 47 | .#{$root-element} { 48 | --organic-arrow-thickness: #{$organic-arrow-thickness}; 49 | --organic-arrow-height: #{$organic-arrow-height}; 50 | --slider-height-percentage: #{$slider-height-percentage}; 51 | --loader-bar-color: #{$loader-bar-color}; 52 | --loader-bar-height: #{$loader-bar-height}; 53 | --control-button-width: #{$control-button-width}; 54 | --control-button-height: #{$control-button-height}; 55 | --control-button-opacity: #{$control-button-opacity}; 56 | --control-button-hover-opacity: #{$control-button-hover-opacity}; 57 | --control-button-background: #{$control-button-background}; 58 | --transition-bezier: #{$transition-bezier}; 59 | --slider-transition-duration: #{$slider-transition-duration}; 60 | --organic-arrow-color: #{$organic-arrow-color}; 61 | --organic-arrow-border-radius: #{$organic-arrow-border-radius}; 62 | --control-bullet-color: #{$control-bullet-color}; 63 | --control-bullet-active-color: #{$control-bullet-active-color}; 64 | --content-background-color: #{$content-background-color}; 65 | } 66 | 67 | .#{$root-element} { 68 | display: block; 69 | position: relative; 70 | width: 100%; 71 | max-width: 100%; 72 | 73 | &__wrapper { 74 | display: block; 75 | overflow: hidden; 76 | position: relative; 77 | height: 100%; 78 | width: 100%; 79 | } 80 | &__container { 81 | display: block; 82 | width: 100%; 83 | height: 0; 84 | padding-bottom: var(--slider-height-percentage); 85 | 86 | @media all and (max-width: 500px) { 87 | padding-bottom: calc(var(--slider-height-percentage) * 1.25); 88 | } 89 | 90 | figure { 91 | @extend %fill-parent; 92 | } 93 | } 94 | &__startUp { 95 | background-color: red; 96 | height: 100%; 97 | width: 100%; 98 | 99 | > div { 100 | height: 100%; 101 | width: 100%; 102 | display: flex; 103 | align-items: center; 104 | justify-content: center; 105 | } 106 | 107 | img { 108 | width: 35%; 109 | height: auto; 110 | } 111 | } 112 | &__content { 113 | @extend %fill-parent; 114 | background-color: var(--content-background-color); 115 | overflow: hidden; 116 | display: flex; 117 | align-items: center; 118 | justify-content: center; 119 | > img, 120 | > video { 121 | height: 100%; 122 | top: 0; 123 | left: 0; 124 | } 125 | } 126 | &__controls { 127 | button { 128 | @extend %clear-focus; 129 | display: flex; 130 | align-items: center; 131 | justify-content: center; 132 | width: var(--control-button-width); 133 | height: var(--control-button-height); 134 | position: absolute; 135 | z-index: 10; 136 | top: calc(50% - (0.5 * var(--control-button-height))); 137 | border: none; 138 | background-color: var(--control-button-background); 139 | color: #fff; 140 | cursor: pointer; 141 | .#{$root-element}__controls__arrow-left, 142 | .#{$root-element}__controls__arrow-right { 143 | opacity: var(--control-button-opacity); 144 | } 145 | &:hover { 146 | .#{$root-element}__controls__arrow-left, 147 | .#{$root-element}__controls__arrow-right { 148 | opacity: var(--control-button-opacity-hover); 149 | } 150 | } 151 | } 152 | &--active { 153 | .#{$root-element}__controls__arrow-left { 154 | opacity: var(--control-button-opacity-hover); 155 | transform: translate3d(-100%, 0, 0); 156 | } 157 | .#{$root-element}__controls__arrow-right { 158 | opacity: var(--control-button-opacity-hover); 159 | transform: translate3d(100%, 0, 0); 160 | } 161 | } 162 | &--hidden { 163 | display: none; 164 | } 165 | @media all and (max-width: 520px) { 166 | visibility: hidden; 167 | } 168 | } 169 | &__bar { 170 | display: block; 171 | width: 100%; 172 | height: var(--loader-bar-height); 173 | background-color: var(--loader-bar-color); 174 | position: absolute; 175 | top: 0; 176 | left: 0; 177 | z-index: 101; 178 | transition: transform 3000ms var(--transition-bezier); 179 | transform: translate3d(-100%, 0, 0); 180 | &--active { 181 | transform: translate3d(-20%, 0, 0); 182 | } 183 | &--end { 184 | transition-duration: 300ms; 185 | transform: translate3d(0, 0, 0); 186 | } 187 | } 188 | &__next { 189 | right: 0; 190 | } 191 | &__prev { 192 | left: 0; 193 | } 194 | &__box { 195 | z-index: 1; 196 | visibility: hidden; 197 | @extend %fill-parent; 198 | } 199 | &--animated { 200 | will-change: transform; 201 | visibility: visible; 202 | } 203 | &--animated-mobile { 204 | will-change: transform; 205 | transition: transform 325ms cubic-bezier(0.15, 0.65, 0.1, 1); 206 | } 207 | &--active { 208 | visibility: visible; 209 | z-index: 2; 210 | transform: translate3d(0, 0, 0); 211 | } 212 | &--moveRight, 213 | &--moveLeft { 214 | backface-visibility: hidden; 215 | } 216 | &--moveRight { 217 | // transform: translate3d(100%, 0, 0); 218 | animation: slideFromRight var(--slider-transition-duration) both 219 | var(--transition-bezier); 220 | } 221 | &--moveLeft { 222 | animation: slideFromLeft var(--slider-transition-duration) both 223 | var(--transition-bezier); 224 | } 225 | &--exit { 226 | z-index: 0; 227 | &.#{$root-element}--moveLeft { 228 | animation: slideToLeft var(--slider-transition-duration) both 229 | var(--transition-bezier); 230 | } 231 | &.#{$root-element}--moveRight { 232 | animation: slideToRight var(--slider-transition-duration) both 233 | var(--transition-bezier); 234 | } 235 | } 236 | &--first { 237 | .#{$root-element}__prev { 238 | visibility: hidden; 239 | } 240 | } 241 | &--last { 242 | .#{$root-element}__next { 243 | visibility: hidden; 244 | } 245 | } 246 | &--fill-parent { 247 | position: absolute !important; 248 | width: 100% !important; 249 | height: 100% !important; 250 | top: 0; 251 | left: 0; 252 | 253 | .#{$root-element}__container { 254 | height: 100%; 255 | padding: 0; 256 | } 257 | } 258 | &__bullets { 259 | position: absolute; 260 | bottom: -40px; 261 | width: 100%; 262 | display: flex; 263 | align-items: center; 264 | justify-content: center; 265 | button { 266 | @extend %clear-focus; 267 | padding: 0; 268 | display: block; 269 | width: 16px; 270 | height: 16px; 271 | margin: 5px; 272 | border-radius: 50%; 273 | background: var(--control-bullet-color); 274 | text-indent: -9999px; 275 | overflow: hidden; 276 | cursor: pointer; 277 | border: none; 278 | transition: transform 0.225s cubic-bezier(0.8, 1.35, 0.75, 1.45), 279 | background-color 0.175s ease-out; 280 | 281 | &:hover { 282 | transform: scale(1.2); 283 | } 284 | } 285 | .#{$root-element}__bullets--loading { 286 | transform: scale(1.2); 287 | } 288 | .#{$root-element}__bullets--active { 289 | transform: scale(1.5); 290 | background: var(--control-bullet-active-color); 291 | 292 | &:hover { 293 | transform: scale(1.5); 294 | } 295 | } 296 | } 297 | 298 | &__controls__arrow-left, 299 | &__controls__arrow-right { 300 | width: 100%; 301 | height: var(--organic-arrow-height); 302 | position: relative; 303 | display: block; 304 | transition: transform 0.2s ease-out 0.125s, opacity 0.2s ease-out; 305 | &:before, 306 | &:after { 307 | content: ' '; 308 | position: absolute; 309 | right: calc( 310 | 50% - 311 | ( 312 | #{$cos45} * (var(--organic-arrow-height) + 313 | var(--organic-arrow-thickness)) 314 | ) / 2 315 | ); 316 | height: 100%; 317 | border-radius: var(--organic-arrow-border-radius); 318 | width: var(--organic-arrow-thickness); 319 | background-color: var(--organic-arrow-color); 320 | transition: transform 0.15s ease-out, background-color 0.15s ease-out; 321 | } 322 | &:before { 323 | transform-origin: 100% 100% 0; 324 | // background-color: rgba(76, 177, 6, 0.75); 325 | top: -50%; 326 | transform: rotate(-45deg); 327 | } 328 | &:after { 329 | transform-origin: 100% 0% 0; 330 | // background-color: rgba(255, 247, 43, 0.75); 331 | top: 50%; 332 | transform: rotate(45deg); 333 | } 334 | } 335 | &__controls__arrow-right { 336 | &--active { 337 | transform: translate3d(100%, 0, 0); 338 | &:after { 339 | transform: rotate(90deg) translate3d(50%, 0, 0) !important; 340 | } 341 | &:before { 342 | transform: rotate(-90deg) translate3d(50%, 0, 0) !important; 343 | } 344 | } 345 | } 346 | &__controls__arrow-left { 347 | &:before, 348 | &:after { 349 | right: auto; 350 | left: calc( 351 | 50% - 352 | ( 353 | #{$cos45} * (var(--organic-arrow-height) + 354 | var(--organic-arrow-thickness)) 355 | ) / 2 356 | ); 357 | } 358 | &:before { 359 | transform-origin: 0 100% 0; 360 | top: -50%; 361 | transform: rotate(45deg); 362 | } 363 | &:after { 364 | transform-origin: 0 0 0; 365 | top: 50%; 366 | transform: rotate(-45deg); 367 | } 368 | &--active { 369 | transform: translate3d(-100%, 0, 0); 370 | &:after { 371 | transform: rotate(-90deg) translate3d(-50%, 0, 0) !important; 372 | } 373 | &:before { 374 | transform: rotate(90deg) translate3d(-50%, 0, 0) !important; 375 | } 376 | } 377 | } 378 | &__controls { 379 | button:hover { 380 | .#{$root-element}__controls__arrow-left { 381 | &:before { 382 | opacity: 1; 383 | transform: rotate(30deg); 384 | } 385 | 386 | &:after { 387 | opacity: 1; 388 | transform: rotate(-30deg); 389 | } 390 | } 391 | .#{$root-element}__controls__arrow-right { 392 | &:before { 393 | opacity: 1; 394 | transform: rotate(-30deg); 395 | } 396 | &:after { 397 | opacity: 1; 398 | transform: rotate(30deg); 399 | } 400 | } 401 | } 402 | } 403 | &__timer { 404 | --timer-delay: 2000ms; 405 | --timer-release: 200ms; 406 | --timer-height: 4px; 407 | --timer-background-color: rgba(0, 0, 0, 0.15); 408 | 409 | width: 100%; 410 | height: var(--timer-height); 411 | background-color: var(--timer-background-color); 412 | position: absolute; 413 | top: 0; 414 | left: 0; 415 | z-index: 100; 416 | transform: translateX(-100%); 417 | 418 | &--animated { 419 | will-change: transform; 420 | transition: transform var(--timer-delay) linear; 421 | } 422 | 423 | &--run { 424 | transform: translateX(0); 425 | } 426 | 427 | &--fast { 428 | transition: transform calc(var(--timer-release) / 2) linear; 429 | transform: translateX(-0.00001px); 430 | } 431 | 432 | &--end { 433 | transform: translateX(-0.0001px); 434 | transition: transform var(--timer-release) linear; 435 | } 436 | 437 | &--hidden { 438 | display: none; 439 | } 440 | } 441 | } 442 | 443 | @keyframes slideFromLeft { 444 | from { 445 | transform: translate3d(-100%, 0, 0); 446 | } 447 | to { 448 | transform: translate3d(0, 0, 0); 449 | } 450 | } 451 | 452 | @keyframes slideFromRight { 453 | from { 454 | transform: translate3d(100%, 0, 0); 455 | } 456 | to { 457 | transform: translate3d(0, 0, 0); 458 | } 459 | } 460 | 461 | @keyframes slideToLeft { 462 | from { 463 | transform: translate3d(0, 0, 0); 464 | } 465 | to { 466 | transform: translate3d(-100%, 0, 0); 467 | } 468 | } 469 | 470 | @keyframes slideToRight { 471 | from { 472 | transform: translate3d(0, 0, 0); 473 | } 474 | to { 475 | transform: translate3d(100%, 0, 0); 476 | } 477 | } -------------------------------------------------------------------------------- /src/scss/light-slider.scss: -------------------------------------------------------------------------------- 1 | $root-element: 'awssld'; 2 | $cos45: 0.7071; 3 | $transition-bezier: cubic-bezier(0.5, 0.075, 0.25, 0.95); 4 | $slider-height-percentage: 60%; 5 | $slider-transition-duration: 575ms; 6 | $organic-arrow-color: #D7CAAA; 7 | $organic-arrow-thickness: 4px; 8 | $organic-arrow-height: 40px; 9 | $organic-arrow-border-radius: 0; 10 | $control-button-width: 10%; 11 | $control-button-height: 25%; 12 | $control-button-opacity: 0.5; 13 | $control-button-hover-opacity: 0.75; 14 | $control-button-background: transparent; 15 | $loader-bar-color:#BFAA76; 16 | $loader-bar-height: 6px; 17 | $control-bullet-color: #D7CAAA; 18 | $control-bullet-active-color: #D7CAAA; 19 | $content-background-color: #D7CAAA; 20 | 21 | %fill-parent { 22 | display: block; 23 | position: absolute; 24 | width: 100%; 25 | height: 100%; 26 | top: 0; 27 | left: 0; 28 | } 29 | 30 | %clear-spacing { 31 | padding: 0; 32 | margin: 0; 33 | } 34 | 35 | %clear-focus { 36 | outline-color: 0; 37 | outline-style: none; 38 | outline-width: 0; 39 | } 40 | 41 | %clear-selection { 42 | user-select: none; 43 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 44 | -webkit-tap-highlight-color: transparent; 45 | } 46 | 47 | .#{$root-element} { 48 | --organic-arrow-thickness: #{$organic-arrow-thickness}; 49 | --organic-arrow-height: #{$organic-arrow-height}; 50 | --slider-height-percentage: #{$slider-height-percentage}; 51 | --loader-bar-color: #{$loader-bar-color}; 52 | --loader-bar-height: #{$loader-bar-height}; 53 | --control-button-width: #{$control-button-width}; 54 | --control-button-height: #{$control-button-height}; 55 | --control-button-opacity: #{$control-button-opacity}; 56 | --control-button-hover-opacity: #{$control-button-hover-opacity}; 57 | --control-button-background: #{$control-button-background}; 58 | --transition-bezier: #{$transition-bezier}; 59 | --slider-transition-duration: #{$slider-transition-duration}; 60 | --organic-arrow-color: #{$organic-arrow-color}; 61 | --organic-arrow-border-radius: #{$organic-arrow-border-radius}; 62 | --control-bullet-color: #{$control-bullet-color}; 63 | --control-bullet-active-color: #{$control-bullet-active-color}; 64 | --content-background-color: #{$content-background-color}; 65 | } 66 | 67 | .#{$root-element} { 68 | display: block; 69 | position: relative; 70 | width: 100%; 71 | max-width: 100%; 72 | 73 | &__wrapper { 74 | display: block; 75 | overflow: hidden; 76 | position: relative; 77 | height: 100%; 78 | width: 100%; 79 | } 80 | &__container { 81 | display: block; 82 | width: 100%; 83 | height: 0; 84 | padding-bottom: var(--slider-height-percentage); 85 | 86 | @media all and (max-width: 500px) { 87 | padding-bottom: calc(var(--slider-height-percentage) * 1.25); 88 | } 89 | 90 | figure { 91 | @extend %fill-parent; 92 | } 93 | } 94 | &__startUp { 95 | background-color: red; 96 | height: 100%; 97 | width: 100%; 98 | 99 | > div { 100 | height: 100%; 101 | width: 100%; 102 | display: flex; 103 | align-items: center; 104 | justify-content: center; 105 | } 106 | 107 | img { 108 | width: 35%; 109 | height: auto; 110 | } 111 | } 112 | &__content { 113 | @extend %fill-parent; 114 | background-color: var(--content-background-color); 115 | overflow: hidden; 116 | display: flex; 117 | align-items: center; 118 | justify-content: center; 119 | > img, 120 | > video { 121 | width: 100%; 122 | position: absolute; 123 | top: 0; 124 | left: 0; 125 | } 126 | } 127 | &__controls { 128 | button { 129 | @extend %clear-focus; 130 | display: flex; 131 | align-items: center; 132 | justify-content: center; 133 | width: var(--control-button-width); 134 | height: var(--control-button-height); 135 | position: absolute; 136 | z-index: 10; 137 | top: calc(50% - (0.5 * var(--control-button-height))); 138 | border: none; 139 | background-color: var(--control-button-background); 140 | color: #fff; 141 | cursor: pointer; 142 | .#{$root-element}__controls__arrow-left, 143 | .#{$root-element}__controls__arrow-right { 144 | opacity: var(--control-button-opacity); 145 | } 146 | &:hover { 147 | .#{$root-element}__controls__arrow-left, 148 | .#{$root-element}__controls__arrow-right { 149 | opacity: var(--control-button-opacity-hover); 150 | } 151 | } 152 | } 153 | &--active { 154 | .#{$root-element}__controls__arrow-left { 155 | opacity: var(--control-button-opacity-hover); 156 | transform: translate3d(-100%, 0, 0); 157 | } 158 | .#{$root-element}__controls__arrow-right { 159 | opacity: var(--control-button-opacity-hover); 160 | transform: translate3d(100%, 0, 0); 161 | } 162 | } 163 | &--hidden { 164 | display: none; 165 | } 166 | @media all and (max-width: 520px) { 167 | visibility: hidden; 168 | } 169 | } 170 | &__bar { 171 | display: block; 172 | width: 100%; 173 | height: var(--loader-bar-height); 174 | background-color: var(--loader-bar-color); 175 | position: absolute; 176 | top: 0; 177 | left: 0; 178 | z-index: 101; 179 | transition: transform 3000ms var(--transition-bezier); 180 | transform: translate3d(-100%, 0, 0); 181 | &--active { 182 | transform: translate3d(-20%, 0, 0); 183 | } 184 | &--end { 185 | transition-duration: 300ms; 186 | transform: translate3d(0, 0, 0); 187 | } 188 | } 189 | &__next { 190 | right: 0; 191 | } 192 | &__prev { 193 | left: 0; 194 | } 195 | &__box { 196 | z-index: 1; 197 | visibility: hidden; 198 | @extend %fill-parent; 199 | } 200 | &--animated { 201 | will-change: transform; 202 | visibility: visible; 203 | } 204 | &--animated-mobile { 205 | will-change: transform; 206 | transition: transform 325ms cubic-bezier(0.15, 0.65, 0.1, 1); 207 | } 208 | &--active { 209 | visibility: visible; 210 | z-index: 2; 211 | transform: translate3d(0, 0, 0); 212 | } 213 | &--moveRight, 214 | &--moveLeft { 215 | backface-visibility: hidden; 216 | } 217 | &--moveRight { 218 | // transform: translate3d(100%, 0, 0); 219 | animation: slideFromRight var(--slider-transition-duration) both 220 | var(--transition-bezier); 221 | } 222 | &--moveLeft { 223 | animation: slideFromLeft var(--slider-transition-duration) both 224 | var(--transition-bezier); 225 | } 226 | &--exit { 227 | z-index: 0; 228 | &.#{$root-element}--moveLeft { 229 | animation: slideToLeft var(--slider-transition-duration) both 230 | var(--transition-bezier); 231 | } 232 | &.#{$root-element}--moveRight { 233 | animation: slideToRight var(--slider-transition-duration) both 234 | var(--transition-bezier); 235 | } 236 | } 237 | &--first { 238 | .#{$root-element}__prev { 239 | visibility: hidden; 240 | } 241 | } 242 | &--last { 243 | .#{$root-element}__next { 244 | visibility: hidden; 245 | } 246 | } 247 | &--fill-parent { 248 | position: absolute !important; 249 | width: 100% !important; 250 | height: 100% !important; 251 | top: 0; 252 | left: 0; 253 | 254 | .#{$root-element}__container { 255 | height: 100%; 256 | padding: 0; 257 | } 258 | } 259 | &__bullets { 260 | position: absolute; 261 | bottom: -40px; 262 | width: 100%; 263 | display: flex; 264 | align-items: center; 265 | justify-content: center; 266 | button { 267 | @extend %clear-focus; 268 | padding: 0; 269 | display: block; 270 | width: 16px; 271 | height: 16px; 272 | margin: 5px; 273 | border-radius: 50%; 274 | background: var(--control-bullet-color); 275 | text-indent: -9999px; 276 | overflow: hidden; 277 | cursor: pointer; 278 | border: none; 279 | transition: transform 0.225s cubic-bezier(0.8, 1.35, 0.75, 1.45), 280 | background-color 0.175s ease-out; 281 | 282 | &:hover { 283 | transform: scale(1.2); 284 | } 285 | } 286 | .#{$root-element}__bullets--loading { 287 | transform: scale(1.2); 288 | } 289 | .#{$root-element}__bullets--active { 290 | transform: scale(1.5); 291 | background: var(--control-bullet-active-color); 292 | 293 | &:hover { 294 | transform: scale(1.5); 295 | } 296 | } 297 | } 298 | 299 | &__controls__arrow-left, 300 | &__controls__arrow-right { 301 | width: 100%; 302 | height: var(--organic-arrow-height); 303 | position: relative; 304 | display: block; 305 | transition: transform 0.2s ease-out 0.125s, opacity 0.2s ease-out; 306 | &:before, 307 | &:after { 308 | content: ' '; 309 | position: absolute; 310 | right: calc( 311 | 50% - 312 | ( 313 | #{$cos45} * (var(--organic-arrow-height) + 314 | var(--organic-arrow-thickness)) 315 | ) / 2 316 | ); 317 | height: 100%; 318 | border-radius: var(--organic-arrow-border-radius); 319 | width: var(--organic-arrow-thickness); 320 | background-color: var(--organic-arrow-color); 321 | transition: transform 0.15s ease-out, background-color 0.15s ease-out; 322 | } 323 | &:before { 324 | transform-origin: 100% 100% 0; 325 | // background-color: rgba(76, 177, 6, 0.75); 326 | top: -50%; 327 | transform: rotate(-45deg); 328 | } 329 | &:after { 330 | transform-origin: 100% 0% 0; 331 | // background-color: rgba(255, 247, 43, 0.75); 332 | top: 50%; 333 | transform: rotate(45deg); 334 | } 335 | } 336 | &__controls__arrow-right { 337 | &--active { 338 | transform: translate3d(100%, 0, 0); 339 | &:after { 340 | transform: rotate(90deg) translate3d(50%, 0, 0) !important; 341 | } 342 | &:before { 343 | transform: rotate(-90deg) translate3d(50%, 0, 0) !important; 344 | } 345 | } 346 | } 347 | &__controls__arrow-left { 348 | &:before, 349 | &:after { 350 | right: auto; 351 | left: calc( 352 | 50% - 353 | ( 354 | #{$cos45} * (var(--organic-arrow-height) + 355 | var(--organic-arrow-thickness)) 356 | ) / 2 357 | ); 358 | } 359 | &:before { 360 | transform-origin: 0 100% 0; 361 | top: -50%; 362 | transform: rotate(45deg); 363 | } 364 | &:after { 365 | transform-origin: 0 0 0; 366 | top: 50%; 367 | transform: rotate(-45deg); 368 | } 369 | &--active { 370 | transform: translate3d(-100%, 0, 0); 371 | &:after { 372 | transform: rotate(-90deg) translate3d(-50%, 0, 0) !important; 373 | } 374 | &:before { 375 | transform: rotate(90deg) translate3d(-50%, 0, 0) !important; 376 | } 377 | } 378 | } 379 | &__controls { 380 | button:hover { 381 | .#{$root-element}__controls__arrow-left { 382 | &:before { 383 | opacity: 1; 384 | transform: rotate(30deg); 385 | } 386 | 387 | &:after { 388 | opacity: 1; 389 | transform: rotate(-30deg); 390 | } 391 | } 392 | .#{$root-element}__controls__arrow-right { 393 | &:before { 394 | opacity: 1; 395 | transform: rotate(-30deg); 396 | } 397 | &:after { 398 | opacity: 1; 399 | transform: rotate(30deg); 400 | } 401 | } 402 | } 403 | } 404 | &__timer { 405 | --timer-delay: 2000ms; 406 | --timer-release: 200ms; 407 | --timer-height: 4px; 408 | --timer-background-color: rgba(0, 0, 0, 0.15); 409 | 410 | width: 100%; 411 | height: var(--timer-height); 412 | background-color: var(--timer-background-color); 413 | position: absolute; 414 | top: 0; 415 | left: 0; 416 | z-index: 100; 417 | transform: translateX(-100%); 418 | 419 | &--animated { 420 | will-change: transform; 421 | transition: transform var(--timer-delay) linear; 422 | } 423 | 424 | &--run { 425 | transform: translateX(0); 426 | } 427 | 428 | &--fast { 429 | transition: transform calc(var(--timer-release) / 2) linear; 430 | transform: translateX(-0.00001px); 431 | } 432 | 433 | &--end { 434 | transform: translateX(-0.0001px); 435 | transition: transform var(--timer-release) linear; 436 | } 437 | 438 | &--hidden { 439 | display: none; 440 | } 441 | } 442 | } 443 | 444 | @keyframes slideFromLeft { 445 | from { 446 | transform: translate3d(-100%, 0, 0); 447 | } 448 | to { 449 | transform: translate3d(0, 0, 0); 450 | } 451 | } 452 | 453 | @keyframes slideFromRight { 454 | from { 455 | transform: translate3d(100%, 0, 0); 456 | } 457 | to { 458 | transform: translate3d(0, 0, 0); 459 | } 460 | } 461 | 462 | @keyframes slideToLeft { 463 | from { 464 | transform: translate3d(0, 0, 0); 465 | } 466 | to { 467 | transform: translate3d(-100%, 0, 0); 468 | } 469 | } 470 | 471 | @keyframes slideToRight { 472 | from { 473 | transform: translate3d(0, 0, 0); 474 | } 475 | to { 476 | transform: translate3d(100%, 0, 0); 477 | } 478 | } -------------------------------------------------------------------------------- /src/scss/themes/theme-dark.scss: -------------------------------------------------------------------------------- 1 | body[data-theme="dark"] { 2 | 3 | @import '../src/scss/dark-slider.scss'; 4 | 5 | .slider-tab { 6 | background-color: #8C8C8C; 7 | } 8 | 9 | .title-styles { 10 | color: white; 11 | } 12 | 13 | .header-icon { 14 | color: #3C342C; 15 | opacity: 0.8; 16 | } 17 | 18 | .slider-image { 19 | border: 5px solid #8C8C8C; 20 | } 21 | 22 | .language { 23 | background-color: #494949; 24 | } 25 | 26 | .link-href { 27 | color: white; 28 | } 29 | 30 | .project-date { 31 | background-color: #918e97; 32 | color: white; 33 | } 34 | 35 | header { 36 | background-color: #494949; 37 | h1 { 38 | color: white; 39 | } 40 | } 41 | 42 | #about { 43 | background-color: #7f7f7f; 44 | h1 span { 45 | color: white; 46 | } 47 | .polaroid span { 48 | background: #6d6d6d; 49 | } 50 | .card { 51 | background: #6d6d6d; 52 | color: white; 53 | } 54 | } 55 | 56 | #portfolio { 57 | background: #5b5b5b; 58 | .section-title { 59 | color: white !important; 60 | } 61 | .foto div { 62 | background: #6d6d6d; 63 | } 64 | .project-title-settings { 65 | color: white; 66 | } 67 | } 68 | 69 | #resume { 70 | filter: brightness(80%); 71 | background: #5b5b5b; 72 | .section-title { 73 | color: white !important; 74 | } 75 | 76 | .experience-badge { 77 | background: #919191 !important; 78 | color: white; 79 | } 80 | 81 | .main-badge { 82 | background: #919191 !important; 83 | } 84 | 85 | .vertical-timeline-element-date { 86 | color: white; 87 | } 88 | 89 | .vertical-timeline-element-icon { 90 | background: #919191 !important; 91 | } 92 | @media only screen and (max-width: 1169px) { 93 | .vertical-timeline-element-date { 94 | color: black; 95 | } 96 | } 97 | } 98 | 99 | .modal-inside .modal-content { 100 | background: #5b5b5b; 101 | color: white; 102 | } 103 | 104 | .close-icon { 105 | color: white; 106 | } 107 | } -------------------------------------------------------------------------------- /src/scss/themes/theme-light.scss: -------------------------------------------------------------------------------- 1 | body[data-theme="light"] { 2 | @import '../src/scss/light-slider.scss'; 3 | 4 | .slider-tab { 5 | background-color: #D7CAAA; 6 | } 7 | } -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' }, 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready 134 | .then(registration => { 135 | registration.unregister(); 136 | }) 137 | .catch(error => { 138 | console.error(error.message); 139 | }); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | --------------------------------------------------------------------------------

Portfolio Template

:eye_speech_bubble: Live demo

:books: Getting started

:star: Inspirations

:memo: Changelog

:gear: Contribution

:camera: Credits(images)

22 | {sectionName} 23 |

51 | {work.title} 52 |

57 | {work.company} 58 |

70 | 71 | {sectionName} 72 | 73 |

45 | 46 |

81 | {title} 82 | {url ? ( 83 | 89 | 93 | 94 | ) : null} 95 |

54 | {sectionName} 55 |

32 | {sectionName} 33 |