<commit_before>@mixin flex-growth
  flex: 2.25

@mixin flex-growth-moblie
  flex: 9

@mixin flex-transition
  transition: all 0.50s ease-in-out
@mixin master-transition
  transition: all 0.60s ease-in-out
@mixin snappy-transition
  transition: all 0.23s ease-in

@keyframes project-fade
  80%
    transform: scale(1.15,1.15)
  100%
    transform: scale(1,1)

.flex-container
  display: flex
  flex-direction: column
  height: 100vh

.flex-row1
  display: flex
  flex: 1
  @include flex-transition
  &:hover
    @include flex-growth
    @include flex-transition
    @media (max-width: $screen-xs-min)
      @include flex-growth-moblie
.flex-row2
  display: flex
  flex: 1
  @include flex-transition
  &:hover
    @include flex-growth
    @include flex-transition
    @media (max-width: $screen-xs-min)
      @include flex-growth-moblie

.talent
  position: relative
  @include flex-transition
  &::after
    overflow: hidden
    content: ""
    background-size: cover
    background-repeat: no-repeat
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    opacity: 0.25
    z-index: -1
    @include flex-transition
  &:hover
    & >.talent-headline
      @include flex-transition
      background-color: rgba($dark-primary-color,0.75)
    @include flex-growth
    @media (max-width: $screen-xs-min)
      box-shadow: 0 0 50px 25px black
      @include flex-growth-moblie
      z-index: 999
    @include flex-transition
    &::after
      @include flex-transition
      opacity: 0

.guide
  display: none
  opacity: 0
  position: absolute
  z-index: 999
  font-size: 350%
  color: $offwhite
  pointer-events: none
  @media (max-width: $screen-sm-min)
    display: block

.guide-up
  top: 0
  left: 50%
  transform: translateY(-100%)translateX(-50%)

.guide-down
  bottom: 0
  left: 50%
  transform: translateY(100%)translateX(-50%)

.guide-right
  top: 50%
  right: 0
  transform: translateX(100%)translateY(-50%)

.guide-left
  top: 50%
  left: 0
  transform: translateX(-100%)translateY(-50%)


$titlepadding: 55px
$title-padding-mobile: 36.78px

.talent-1
  flex: 1
  &::after
    background: url("https://dl.dropboxusercontent.com/u/947851/portfolio/Portrait.jpg")
    background-repeat: no-repeat
    background-size: cover
  & > .talent-headline
    bottom: 0
    right: 0

.talent-2
  flex: 1.12
  &::after
    background: url("https://dl.dropboxusercontent.com/u/947851/portfolio/illustration.jpg")
    background-repeat: no-repeat
    background-size: cover
  & > .talent-headline
    bottom: 0
    left: 0

.talent-3
  flex: 1
  &::after
    background: url("https://dl.dropboxusercontent.com/u/947851/portfolio/ursala.jpg")
    background-repeat: no-repeat
    background-size: cover
  & > .talent-headline
    top: 0
    right: 0

.talent-4
  flex: 1.12
  &::after
    background: url("https://dl.dropboxusercontent.com/u/947851/portfolio/forms.jpg")
    background-repeat: no-repeat
    background-size: cover
  & > .talent-headline
    top: 0
    left: 0

.talent-headline
  @include flex-transition
  margin: 0
  padding: 1em
  position: absolute
  background-color: rgba($secondary-color,0.75)
  color: $offwhite
  @media (max-width: $screen-xs-min)
    font-size: 85%
  a
    color: $offwhite

.project-wrapper
  display: flex
  flex-wrap: wrap
  width: 100%
  height: 100%
  position: absolute
  top: 0
  left: 0
  bottom: 0
  right: 0
  @include flex-transition

.project-animation
  animation: project-fade .33s forwards

@for $i from 1 through 5
  .project
    &:nth-child(#{$i})
      animation-delay: (0.27s * $i)

.project
  display: none
  flex-basis: 50%
  background-size: cover
  background-repeat: no-repeat
  overflow: hidden
  position: relative<commit_msg>faster snappier animations<commit_after>@mixin flex-growth
  flex: 2.25

@mixin flex-growth-moblie
  flex: 9

@mixin flex-transition
  transition: all 0.50s ease-in-out
@mixin master-transition
  transition: all 0.60s ease-in-out
@mixin snappy-transition
  transition: all 0.23s ease-in

@keyframes project-fade
  80%
    transform: scale(1.10,1.10)
  100%
    transform: scale(1,1)

.flex-container
  display: flex
  flex-direction: column
  height: 100vh

.flex-row1
  display: flex
  flex: 1
  @include flex-transition
  &:hover
    @include flex-growth
    @include flex-transition
    @media (max-width: $screen-xs-min)
      @include flex-growth-moblie
.flex-row2
  display: flex
  flex: 1
  @include flex-transition
  &:hover
    @include flex-growth
    @include flex-transition
    @media (max-width: $screen-xs-min)
      @include flex-growth-moblie

.talent
  position: relative
  @include flex-transition
  &::after
    overflow: hidden
    content: ""
    background-size: cover
    background-repeat: no-repeat
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    opacity: 0.25
    z-index: -1
    @include flex-transition
  &:hover
    & >.talent-headline
      @include flex-transition
      background-color: rgba($dark-primary-color,0.75)
    @include flex-growth
    @media (max-width: $screen-xs-min)
      box-shadow: 0 0 50px 25px black
      @include flex-growth-moblie
      z-index: 999
    @include flex-transition
    &::after
      @include flex-transition
      opacity: 0

.guide
  display: none
  opacity: 0
  position: absolute
  z-index: 999
  font-size: 350%
  color: $offwhite
  pointer-events: none
  @media (max-width: $screen-sm-min)
    display: block

.guide-up
  top: 0
  left: 50%
  transform: translateY(-100%)translateX(-50%)

.guide-down
  bottom: 0
  left: 50%
  transform: translateY(100%)translateX(-50%)

.guide-right
  top: 50%
  right: 0
  transform: translateX(100%)translateY(-50%)

.guide-left
  top: 50%
  left: 0
  transform: translateX(-100%)translateY(-50%)


$titlepadding: 55px
$title-padding-mobile: 36.78px

.talent-1
  flex: 1
  &::after
    background: url("https://dl.dropboxusercontent.com/u/947851/portfolio/Portrait.jpg")
    background-repeat: no-repeat
    background-size: cover
  & > .talent-headline
    bottom: 0
    right: 0

.talent-2
  flex: 1.12
  &::after
    background: url("https://dl.dropboxusercontent.com/u/947851/portfolio/illustration.jpg")
    background-repeat: no-repeat
    background-size: cover
  & > .talent-headline
    bottom: 0
    left: 0

.talent-3
  flex: 1
  &::after
    background: url("https://dl.dropboxusercontent.com/u/947851/portfolio/ursala.jpg")
    background-repeat: no-repeat
    background-size: cover
  & > .talent-headline
    top: 0
    right: 0

.talent-4
  flex: 1.12
  &::after
    background: url("https://dl.dropboxusercontent.com/u/947851/portfolio/forms.jpg")
    background-repeat: no-repeat
    background-size: cover
  & > .talent-headline
    top: 0
    left: 0

.talent-headline
  @include flex-transition
  margin: 0
  padding: 1em
  position: absolute
  background-color: rgba($secondary-color,0.75)
  color: $offwhite
  @media (max-width: $screen-xs-min)
    font-size: 85%
  a
    color: $offwhite

.project-wrapper
  display: flex
  flex-wrap: wrap
  width: 100%
  height: 100%
  position: absolute
  top: 0
  left: 0
  bottom: 0
  right: 0
  @include flex-transition

.project-animation
  animation: project-fade .20s forwards

@for $i from 1 through 5
  .project
    &:nth-child(#{$i})
      animation-delay: (0.10s * $i)

.project
  display: none
  flex-basis: 50%
  background-size: cover
  background-repeat: no-repeat
  overflow: hidden
  position: relative
{'fraction_non_alphanumeric': 0.12356979405034325, 'fraction_numerical': 0.045497375151433574, 'mean_word_length': 2.9167105956773853, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1074514', 'n_tokens_mistral': 2925, 'n_tokens_neox': 2636, 'n_words': 631}