Trying to keep things simple and minimalistic I still wanted my portfolio to be unique and memorable.
While doing #100DaysOfCode challenge and tracking my day-to-day progress on this project I got some positive feedback. That’s why I decided to share some of the techniques I used for building this portfolio.
To get this effect I used absolutely positioned images and CSS combinators. Let’s see how images appear for the Music Database link on the home page.
HTML:
<li class="projects__item">
<a
href="./pages/musicdb.html"
class="projects__link projects__link--musicdb"
>Music Database >></a
>
<img
class="projects__img projects__img--musicdb-1"
src="img/musicdb-mockup-1.png"
alt="iphone mockup"
/>
<img
class="projects__img projects__img--musicdb-2"
src="img/musicdb-mockup-2.png"
alt="iphone mockup"
/>
</li>
CSS for img initial state (who is not familiar with SCSS syntax "&" replaces parent selector, in this case ".projects" and ".projects__img" for nested elements):
&__img {
position: absolute;
z-index: -1;
height: 70vh;
opacity: 0;
transition: all 0.8s ease-out;
&--musicdb-1 {
left: -30vw;
bottom: 2rem;
}
&--musicdb-2 {
left: 75vw;
bottom: 100vh;
}
}
As images are the link’s siblings I used general sibling selector tilde (~). Thanks to Ladybug’s CSS Combinators Cheat Sheet!
Changing left and bottom values on hover give a visual effect of moving from respective sides.
CSS for link’s hover state:
&__link--musicdb:hover ~ &__img--musicdb-1 {
opacity: 0.2;
left: 40vw;
}
&__link--musicdb:hover ~ &__img--musicdb-2 {
opacity: 0.2;
bottom: 2rem;
}
And that’s it! Nothing fancy!
Having a white background and not possible to see images on links’ hover state for the mobile version I felt that I need to add something colorful and eyecatching.
Currently, I’m doing awesome SASS and CSS course by Jonas Schmedtmann. I learned a checkbox trick from him. Using a hidden checkbox allows creating a hamburger menu only by using CSS.
To make this work there are 4 elements inside hamburger div:
HTML
<div class="hamburger mobile">
<input type="checkbox" class="hamburger__checkbox" id="navi-toggle" />
<label for="navi-toggle" class="hamburger__button">
<span class="hamburger__icon">
</span>
</label>
<div class="hamburger__background"> </div>
<nav class="hamburger__menu">
<ul class="menu__list">
<li class="menu__item">
<a href="./pages/aboutme.html" class="menu__link">About me</a>
</li>
<li class="menu__item">
<a href="./pages/contact.html" class="menu__link">Contact</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">CV</a>
</li>
</ul>
</nav>
</div>
So there are two states for each of these elements, initial when the checkbox is unchecked and checked.
Initial state:
&__button {
width: 6.4rem;
height: 6.4rem;
position: fixed;
border-radius: 50%;
z-index: 10;
box-shadow: 0 1rem 3rem rgba($color-gray-dark, 0.3);
text-align: center;
cursor: pointer;
background-image: linear-gradient(
$color-primary-blue,
$color-primary-red
);
top: 4.8rem;
right: 4.8rem;
}
&__background {
height: 6rem;
width: 6rem;
border-radius: 50%;
position: fixed;
top: 5rem;
right: 5rem;
background-image: linear-gradient(
$color-primary-blue,
$color-primary-blue 50%,
$color-primary-red
);
z-index: 5;
transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1);
}
&__menu {
visibility: hidden;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 7;
opacity: 0;
width: 0;
transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
Checked state:
&__checkbox:checked ~ &__button {
background-image: none;
background-color: $color-white;
}
&__checkbox:checked ~ &__background {
transform: scale(65);
}
&__checkbox:checked ~ &__menu {
visibility: visible;
opacity: 1;
width: 100%;
}
Again, nothing really complicated.
To be honest when I found that CSS has no simple way to create a gradient for borders I was surprised. Luckily for all of us, we have https://css-tricks.com/. I used wrapper div for doing it, this article gives more examples.
That’s how I implemented it for Get in Touch button on the main page.
HTML
<div class="gradient-box">
<a href="mailto:uvrubel@gmail.com" class="btn">Get in touch</a>
</div>
CSS
.gradient-box {
display: inline-block;
position: relative;
padding: 1.2rem 1.6rem;
background: $color-white;
background-clip: padding-box;
border: solid 1px transparent;
border-radius: 15rem;
margin-top: 3.2rem;
cursor: pointer;
&:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
margin: -1px;
border-radius: inherit;
background: linear-gradient(
to right bottom,
$color-primary-blue,
$color-primary-red
);
}
}
The negative margin of the before pseudo-element is the required border.
Thanks for reading this far! You can find the complete source code for this project here.