CodePen 코드리뷰

template

<div class="wrapper">
  <div id="title" class="scene">
    <div id="logo">
      <transition-group name="logo-magic" appear>
      <img id="title_sleeping" key="title_sleeping" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/title_sleeping.png" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/title_sleeping2x.png 2x">
      <img id="title_duty" key="title_duty" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/title_duty.png" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/title_duty2x.png 2x">
      <img id="title_shading" key="title_shading" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/title_shading.png" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/title_shading2x.png 2x">
      <img id="title_sparkles" key="title_sparkles" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/title_sparkles.png" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/title_sparkles2x.png 2x">
        <p key="author" id="title_author">as retold in CSS and Vue.js by <a href="https://twitter.com/rachelnabors">@RachelNabors</a></p>
        <p key="sleeping-beauty" id="title_sb" class="inline">It's <em>Sleeping Beauty.</em> </p>
        <p key="in-space" id="title_in-space" class="inline">In space.</p>        
        </transition-group>
    </div>
  </div>
</div>

Script

export default {
  data: {
    state: "loaded"
  }
}

style

@import url('https://fonts.googleapis.com/css?family=Kalam|Nova+Mono');

/* Animations up top, woo woo! */
.logo-magic-enter-active {
  transition: 
    opacity 2s,
    transform 2s;
}

.logo-magic-enter {
  opacity: 0;
}

#title_duty.logo-magic-enter {
  transform: translateY(20%);
}

#title_duty.logo-magic-enter-active {
  transition-delay: 1s;
}

#title_shading.logo-magic-enter-active {
  transition-delay: 3s;
}

#title_sparkles.logo-magic-enter-active,
p.logo-magic-enter-active {
  transition-delay: 4s;
  transition-duration: 1s;
}

#title_sb.logo-magic-enter-active {
  transition-delay: 5.5s;
}

#title_in-space.logo-magic-enter-active {
  transition-delay: 7s;
}


/* Boring stuff here. */
#logo {
  position: absolute;
  top: 50%; left: 50%;
  text-align: center; 
  transform: translate(-50%, -50%);
  width: 493px;
}

#logo img {
  position: absolute;
  top: 0; left: 0;
}

#logo #title_sleeping {
  position: relative;
}

p {
  color: #eed2fc;
  font-family: 'Kalam', cursive;
  margin: .5em 0;
}

a:link {
  color: #4dcce4;
}

a:visited {
  color: #8e56ca;
}

a:hover, a:active, a:focus {
  color: #5152e4;
}

.inline { 
  display: inline-block;
  margin-right: .5em;
}

body {
  background: #000;
}

.wrapper {
  max-width: 683px;
  margin: 0 auto;
}

.scene {
  overflow: hidden;
  position: relative;  
}

#title {
  background: 
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg_stars1.png) fixed,
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg_stars2.png) fixed,
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg_cloud1.png) -50% -50% fixed,
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg_cloud2.png) 0 -70% fixed, 
    #000;
  min-height: 100vh; width: 100%;
  position: relative;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx) {
  #starfield {
    background: 
      url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg_stars1_2x.png) fixed,
      url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg_stars2_2x.png) fixed,
      url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg_cloud1_2x.png) -50% -50% fixed,
      url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/bg_cloud2_2x.png) 0 -70% fixed, 
      #000;
    background-size: 683px 512px, 683px 512px, 750px 600px, 400px 600px, 50% 50%;
  }
}

 

이걸 토대로 포트폴리오에 들어갈 나의 메인페이지를 구상해보자