My Portfolio Site - Pt 4
I tend to gravitate to my portfolio site of all my side projects at the moment. I would like to make sure a viewer sees something different and unique to me before I hop into some of the functional features I have planned. With most of the more complicated visual features behind me, I can whip up some better styling for the content, push it, and move on. I've been eager to get back into DRAGnet!
Take a look at some code!
/*//////////////////////////////////////////////////////////////////// | |
////////// positioned and styled Royal Ontario Museum layers ///////// | |
////////////////////////////////////////////////////////////////////*/ | |
/*///////////////////////// full size image set to furthest z-index */ | |
.bg-rom-and-moon { | |
background-image: url(../../Assets/Images/rom-and-moon.png); | |
height: 200vh; width: 100%; top: 0px; left: 0px; | |
position: fixed; z-index: -1500; | |
background-attachment: fixed; | |
background-color: transparent; | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: cover; } | |
/*////// foreground of image removed and set to a mid-range z-index */ | |
.bg-rightside-up-rom-cutout { | |
background-image: url(../../Assets/Images/rom-cutout-downside.png); | |
height: 100vh; width: 100%; left: 0px; | |
position: fixed; | |
background-attachment: fixed; | |
background-color: transparent; | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: cover; } | |
/*///////////////// same foreground, flipped, and allowed to scroll */ | |
.bg-upside-down-rom-cutout { | |
background-image: url(../../Assets/Images/rom-cutout-upside.png); | |
height: 150%; width: 100%; opacity:.75; left: 0px; | |
position: absolute; z-index: -1000; | |
background-attachment: absolute; | |
background-color: transparent; | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: cover; } | |
/*//// gradient layer z-indexed behind fixed cutout for depth behind */ | |
.outer-faded-bg-layer { | |
background-image: linear-gradient( | |
to bottom, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,0)); | |
position: fixed; z-index: -500; | |
height: 100vh; width: 100%; | |
opacity: .9;} | |
/*//////////////////////////////////////////////////////////////////// | |
////////// SVG logo animation //////////////////////////////////////// | |
////////////////////////////////////////////////////////////////////*/ | |
/*////////// defined a container to initiate all SVG animations with the | |
////////////////// highest z-index, with an ease, after a short delay */ | |
.logo { | |
width: 85vw; margin: auto; height: 100vh; | |
animation: fill-logo 3s ease forwards 6s; | |
position: relative; z-index: 2500; will-change: transform;} | |
/*/////// defined the dasharray and dashoffset lengths of each SVG letter | |
(removing many for brevity- can be found in source site source code) */ | |
/* ... */ | |
.logo path:nth-child(2){ /* J */ | |
stroke-dasharray: 367.9700622558594px; | |
stroke-dashoffset: 367.9700622558594px; | |
animation: line-anim 2s ease forwards 1s} | |
.logo path:nth-child(3){ /* A */ | |
stroke-dasharray: 345.18603515625px; | |
stroke-dashoffset: 345.18603515625px; | |
animation: line-anim 2s ease forwards 1.25s} | |
.logo path:nth-child(4){ /* R */ | |
stroke-dasharray: 338.96588134765625px; | |
stroke-dashoffset: 338.96588134765625px; | |
animation: line-anim 2s ease forwards 1.5s} | |
.logo path:nth-child(5){ /* E */ | |
stroke-dasharray: 361.4064025878906px; | |
stroke-dashoffset: 361.4064025878906px; | |
animation: line-anim 2s ease forwards 1.75s} | |
.logo path:nth-child(6){ /* D */ | |
stroke-dasharray: 313.8856201171875px; | |
stroke-dashoffset: 313.8856201171875px; | |
animation: line-anim 2s ease forwards 2s} | |
/* ... */ | |
/*///////////// declared keyframes for the SVG strokes and fill effect */ | |
@keyframes line-anim{ | |
to{ stroke-dashoffset: 0; }} | |
@keyframes fill-logo{ | |
from{ fill: transparent; } | |
to{ fill: white; }} | |
.logo-background { | |
background-image: linear-gradient( | |
to bottom, rgba(0,0,0,0), 20%, rgba(0,0,0,1), 70%, rgba(0,0,0,0)); | |
position: relative; | |
} | |
/*//////////////////////////////////////////////////////////////////// | |
////////// cranes positioned and z-indexed /////////////////////////// | |
////////////////////////////////////////////////////////////////////*/ | |
/*///////////// transformed each crane to position for parallax layers */ | |
.rom-crane-one { | |
transform: translateZ(.25px) scale(.75); z-index:-100; | |
background-image: url(../../Assets/Images/rom-crane.png); | |
position: absolute; opacity: .9; | |
height: 100%; width: 100%; max-width:700px; left: 0px; | |
background-repeat: no-repeat; background-position: top; | |
background-size: contain;} | |
.rom-crane-mirror-one { | |
transform: translateZ(.4px) translateY(25%) scale(.6); | |
background-image: url(../../Assets/Images/rom-crane-mirror.png); | |
position: absolute; opacity: .9; | |
right: 0px; background-clip: padding-box; | |
height: 100%; width: 100%; max-width:700px; | |
background-repeat: no-repeat; bottom: -25%; | |
background-size: contain;} | |
/*//////////////////////////////////////////////////////////////////// | |
////////// cranes positioned and z-indexed /////////////////////////// | |
////////////////////////////////////////////////////////////////////*/ | |
/*////////// created a parent for any parallax child */////////////////// | |
.slide { | |
position: relative; | |
min-height: 100vh; | |
width: 100vw; | |
transform-style: inherit;} | |
/*////////// parallaxed a container for devicons behind the foreground */ | |
.tech-stack { | |
position: relative; | |
min-height: 100vh; | |
z-index: -50; | |
margin: auto; | |
width: 85vw; | |
transform: translateZ(-1px) translateY(25%) scale(2);} | |
/*/////////////// styled devicon svg icons *///////////////////////////*/ | |
.tech-stack .devicon { | |
margin-right: 2vw; | |
margin-left: 2vw; | |
max-width: 7.5vw; | |
margin-top: 2vh; | |
fill: white;} |
I hope to publish the updated version of the site this week!
Top comments (0)