I feel like I’m trying to describe a person…
Sounds easy for a second but then the fact people are pretty complicated settles in and you’re left feeling a bit overwhelmed. That’s the feeling I’m having as I write this– I’m very familiar with my own site but figuring out what information people are really interested in is a bit of a challenge. For this reason, this description will be broken down into 2 sections, the first dealing with all of the conceptual things like basic organization structure, look, and feel while section 2 will deal with the notable bits of tech wich make this whole site go.
Conceptual
Functions
The goal of this site was to show people what I am capable of in regards to my profession which bounces between graphic designer, web developer, and web designer depending on client needs. For that reason, the site was pretty easy to break down into smaller, common sense areas of focus.
Look and Feel
Musicians always seem to have the most fun with what represents them visually– T-shirts, posters, album covers, and of course, websites. I wanted to have a bit of that fun while still acknowledging my non-musical profession and keeping things pretty sharp and intuitive to use.
With a general direction in mind, it was off to the internet to see if any musicians had put together something which fit the bill. After bouncing around a bit, I realized the middlepoint was music applications such as Spotify or Soundcloud– a place where people were showing off their creative side through a clean, functional, and intuitive interface!
I took that general concept and ran with it– looking over different album covers to get an idea of what my “logo” would be and how the site would lay out on each device. After bouncing my concpets off a few helpful friends and family, it was time for some coding!
Technical
Post Types
The first area I though would be interesting was in making each individual project I worked on into a custom post category– either web development, graphic design, or web design which was just a matter of adding the “add category” button in the post menu.
Where the posts got more technical was in making the front page display only a featured post in each category.
Here’s what one of the front page loops looks like
1,
'category_name' => 'featured+web-development'
);
$my_query = new WP_Query( $args );
while( $my_query->have_posts() ):
$my_query->the_post();
//the_title();
//the_post_thumbnail();
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
echo '';
endwhile;
wp_reset_postdata();
?>
The pages listing the projects specific to each category run off a similar loop displayed below:
'web-development'
);
$my_query = new WP_Query( $args );
while( $my_query->have_posts() ):
$my_query->the_post();
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
echo '
';
endwhile;
wp_reset_postdata();
?>
I included the row classes because it has to be one of the most handy features in Flex Foundation, the small-up-x, medium-up-x, …etc automatically wrap columns down a “row” when they overflow on one line and can do so indefinitely.
Desktop Navigation
I had some fun with the SCSS on this! If you dig around the internet, there are quite a few tutorials on how to make a box animate on hover but 99% of what I found out in the wild did not work if the box was filled in with a solid background color (common example). I did find some animations which used box-shadow as the colored background animation layer this effect had serious flicker issues.
In the end, I wrote the animation from scratch and you can see an example of it on https://jsfiddle.net/0d3cjzbq/. I also have the menu loop and scss I used down here:
SCSS
.logged-in{
.desk-nav{
padding-top:2rem;
}
}
.desk-nav{
position:absolute;
top:0;
left:0;
width:30%;
z-index:100;
@include mui-animation(slide(in,right));
animation-duration: .5s;
.menu .active > a{
background:#000;
}
ul{
list-style-type:none;
margin:0;
li{
margin:.5rem 0;
display:block;
a{
background-color:#000;
border-bottom:none;
color:#fff;
width:100%;
max-width:300px;
padding:.5rem 1rem;
display:block;
font-family:$serif;
text-transform:uppercase;
letter-spacing:.15rem;
position:relative;
overflow:hidden;
}
a:hover, .menu .active > a:hover{
// @include transition;
background-color:transparent;
}
a:after{
transition: left ease-out 0.4s;
content:" ";
width:100%;
height:40px;
display:flex;
position:absolute;
left:-100%;
top:0px;
z-index:-50;
}
&:nth-of-type(1) a:after{
background-color:$blue;
}
&:nth-of-type(2) a:after{
background-color: #2a20f7;
}
&:nth-of-type(3) a:after{
background-color: #6349ff;
}
&:nth-of-type(4) a:after{
background-color:#e95fff;
}
&:nth-of-type(5) a:after{
background-color: #ffb526;
}
&:nth-of-type(6) a:after{
background-color: #ffe200;
}
}
a:hover:after{
left:0;
}
}
}
Loop
'menu_order', 'container_class' => 'menu-header')); ?>
The finished product…
…Is right in front of you, let me know what you think!
