DEV Community

Cover image for It's Just Pretentious Enough - An Update to My Parallax
JaredHarbison
JaredHarbison

Posted on

2 1

It's Just Pretentious Enough - An Update to My Parallax

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!


That's All Folks!


Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more