Skip to content

Commit 1decd57

Browse files
committed
feat: add traditional nav for current and past projects
1 parent 64f1c17 commit 1decd57

File tree

12 files changed

+80
-38
lines changed

12 files changed

+80
-38
lines changed

_includes/footer.njk

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
<a class="text-link" href="https://www.buymeacoffee.com/samharp" target="_blank">Buy Me A Coffee</a>
7979
</div>
8080

81-
<a id="back-to-top-link" class="text-link show-with-jsx" href="#top">Back to top</a>
81+
{# <a id="back-to-top-link" class="text-link show-with-jsx" href="#top">Back to top</a> #}
8282
</div>
8383
</div>
8484
</section>

_includes/header.njk

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<header>
2+
<nav class="" data-au="flex-container justify-right">
3+
<div class="nav-item-container">
4+
<a class="nav-item" href="#top">Jump to Top</a>
5+
</div>
6+
<div class="nav-item-container">
7+
<a class="nav-item" href="#projects">Past Projects</a>
8+
</div>
9+
<div class="nav-item-container">
10+
<a class="nav-item" href="/now">Current Projects</a>
11+
</div>
12+
<div class="nav-item-container">
13+
<a class="nav-item" href="#contact">Contact &amp; More</a>
14+
</div>
15+
</nav>
16+
</header>

_includes/layouts/base.njk

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
<link href="/css/general-styles.css" rel="stylesheet" type="text/css" />
3232
<link href="/css/hero-styles.css" rel="stylesheet" type="text/css" />
3333
<link href="/css/section-styles.css" rel="stylesheet" type="text/css" />
34+
<link href="/css/header-styles.css" rel="stylesheet" type="text/css" />
3435
<link href="/css/footer-styles.css" rel="stylesheet" type="text/css" />
3536
{# page styles #}
3637
{% if stylesheets %}
@@ -96,8 +97,6 @@
9697

9798
<a name="top"></a>
9899

99-
{# <header>
100-
</header> #}
101100
{{ content | safe }}
102101

103102
{% include "footer.njk" %}

css/general-styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ body{
7878
}
7979

8080
/*shared native element attributes*/
81-
h1, h2, h3, h4{
81+
h1, h2, h3, h4, button{
8282
font-family: 'Poppins', sans-serif;
8383
}
8484
/*big intro text*/

css/header-styles.css

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,34 @@
11
header{
2-
max-width: 1200px;
2+
position:fixed;
3+
z-index:10;
4+
top:0;
5+
left:0;
6+
right:0;
7+
background-color:var(--site-background-color);
8+
/* only works if opacity is added through the bg color */
9+
/* backdrop-filter: blur(10px) opacity(50%); */
10+
box-shadow:0px 8px 22px -8px rgba(0,0,0,0.4);
11+
}
12+
header nav{
13+
padding:25px;
14+
max-width:1200px;
315
margin:0 auto;
4-
padding: 40px;
16+
font-size:14px;
17+
gap:25px;
18+
}
19+
20+
/* mobile nav */
21+
@media (max-width: 500px) {
22+
header nav{
23+
flex-wrap: wrap;
24+
gap:20px;
25+
}
26+
}
27+
28+
header .nav-item-container{
29+
transform:scale(1);
30+
transition: transform .15s;
31+
}
32+
.nav-item-container:hover{
33+
transform:scale(1.05);
534
}

css/hero-styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ h1.p-name{
5252

5353
/*responsive*/
5454
@media only screen and (max-width: 865px){
55-
#hero-section .picture-container{
55+
#hero .picture-container{
5656
display:none!important;
5757
background-color:red;
5858
}

css/now-styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
#now-section{
1+
#now{
22
padding-bottom:60px;
33
}
44

css/section-styles.css

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,13 @@ section:nth-child(odd) .item-images-container{
6161
order:2;
6262
padding:0;
6363
}
64-
#photography-section .item-description-container{
64+
#photography .item-description-container{
6565
order:1!important;
6666
}
6767
}
6868

6969

70-
/*filter portfolio section*/
70+
/*filter projects*/
7171
@media only screen and (max-width:650px){
7272
#filter-links-container{
7373
flex-wrap:wrap;
@@ -97,64 +97,64 @@ div.show-photo + section[data-filter~="photography"]{
9797
.about-pics-container{
9898
position:relative;
9999
}
100-
#more-about-me-section .picture-container img{
100+
#more-about-me .picture-container img{
101101
/* oslo image */
102102
width:250px;
103103
}
104104

105105
/*pixel planet*/
106-
#pixel-planet-today-section img{
106+
#pixel-planet-today img{
107107
width:275px;
108108
}
109109

110-
#wasted-space-section img{
110+
#wasted-space img{
111111
width:275px;
112112
}
113113

114114
/* ncbvi */
115-
#ncbvi-section img{
115+
#ncbvi img{
116116
width:275px;
117117
}
118118

119119
/*undergrad research*/
120-
#undergraduate-research-section img{
120+
#undergraduate-research img{
121121
width:420px;
122122
}
123123

124124
/*eva*/
125-
#eva-section img{
125+
#eva img{
126126
width:420px;
127127
}
128128

129129
/*bcm*/
130-
#bcm-section img{
130+
#bcm img{
131131
width:350px;
132132
}
133133

134134
/*glitch section*/
135-
#glitch-section img{
135+
#glitch img{
136136
width:400px;
137137
}
138138

139139
/*startup week section*/
140-
#startup-week-section img{
140+
#startup-week img{
141141
width:400px;
142142
}
143143

144144

145145
/*******************/
146146
/*photography section*/
147-
#photography-section .mosaic-gallery{
147+
#photography .mosaic-gallery{
148148
margin:40px 0;
149149
}
150-
#photography-section .mosaic-gallery img{
150+
#photography .mosaic-gallery img{
151151
max-height:250px;
152152
max-width:100%;
153153
/* margin:0 auto 40px auto; */
154154
margin-bottom:40px;
155155
}
156156
@media only screen and (max-width:1160px){
157-
#photography-section .mosaic-gallery img{
157+
#photography .mosaic-gallery img{
158158
margin:0 auto 40px auto;
159159
}
160160
}
@@ -209,7 +209,7 @@ div.show-photo + section[data-filter~="photography"]{
209209
}
210210

211211
/*photography items*/
212-
#photography-section .slideshow .photo-gallery-thumb{
212+
#photography .slideshow .photo-gallery-thumb{
213213
/* max-height:250px; */
214214
/* margin-bottom:40px; */
215215
display:none;

index.njk

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ layout: layouts/base.njk
55
scripts: /js/build-projects-scripts.js
66
---
77

8-
<section id="hero-section" class="h-card" data-au="flex-container align-center">
8+
{% include "header.njk" %}
9+
10+
<section id="hero" class="h-card" data-au="flex-container align-center">
911
<div class="hide other-h-card-data">
1012
<img class="u-photo" src="./img/self-pixel-portrait-summer-outfit-covid-centered.png">
1113
<a href="{{ site.url }}" class="u-url u-uid">{{ site.url }}</a>
@@ -44,14 +46,11 @@ scripts: /js/build-projects-scripts.js
4446
</div>
4547
</div>
4648
</section>
47-
<section id="more-about-me-section" data-au="flex-container align-center">
49+
<section id="more-about-me" data-au="flex-container align-center">
4850
<div class="item-description-container" data-au="flex-width">
4951
<h3>A little more about me&hellip;</h3>
5052
<p>I'm an imaginative and motivated designer with 7 years of professional experience in Web, Graphic, and UI/UX Design. I started coding in Batch at 12 years old, and quickly found my passion for computer and web-based design. Each of my projects have helped me learn and grow as a designer, as well as help set myself apart. I strive to not just show the world my creative ideas, but to change the world with them.</p>
5153
<p>Professionally, I'm the Founder &amp; CEO of <a class="text-link" target="_blank" href="https://www.terrabyte.eco">Terrabyte</a> and the President of <a class="text-link" targer="_blank" href="https://www.goldenharpmedia.com">Golden Harp Media</a>.</p>
52-
{# <p>
53-
Keep scrolling to see some of my <a class="text-link" href="#portfolio-filter-section">past projects</a> &mdash; or, read about what I'm up to <a class="text-link" href="/now">now</a>.
54-
</p> #}
5554
</div>
5655
<div class="picture-container item-images-container" data-au="flex-width flex-container all-center">
5756
<div class="about-pics-container">
@@ -61,8 +60,7 @@ scripts: /js/build-projects-scripts.js
6160
</div>
6261
</section>
6362

64-
<a name="portfolio-filter"></a>
65-
<section id="portfolio-filter-section" class="show-with-js" data-au="flex-container flex-vertical">
63+
<section id="projects-filter" class="show-with-js" data-au="flex-container flex-vertical">
6664
<div data-au="flex-container flex-width flex-vertical">
6765
<div data-au="set-width">
6866
<h4 class="middle-ish-header">
@@ -71,7 +69,7 @@ scripts: /js/build-projects-scripts.js
7169
</span>
7270
</h4>
7371
</div>
74-
<!-- <div class="filter-row flex-container align-center">
72+
<div class="filter-row flex-container align-center">
7573
<span>Category</span>
7674
<div data-au="flex-container flex-width">
7775
<div class="filter-button set-width">
@@ -81,7 +79,7 @@ scripts: /js/build-projects-scripts.js
8179
</div>
8280
<div class="set-width filter-row">
8381
<p>Focus</p>
84-
</div> -->
82+
</div>
8583
<div id="filter-links-container" data-au="flex-width all-center flex-container text-center">
8684
<div class="icon-link-container" data-au="flex-width text-center">
8785
<a class="filter-portfolio-link icon-link" data-filter-button data-filter="graphic-design">
@@ -144,7 +142,7 @@ scripts: /js/build-projects-scripts.js
144142
</div>
145143
</section>
146144

147-
<a name="portfolio"></a>
145+
<a name="projects"></a>
148146
<template id="section-template">
149147
<section data-project-section id="" data-au="flex-container align-center" data-filter="">
150148
<div class="item-images-container" data-au="flex-width flex-container all-center">
@@ -173,7 +171,7 @@ scripts: /js/build-projects-scripts.js
173171
</div>
174172

175173

176-
<section id="photography-section" data-au="flex-container flex-vertical justify-center" data-filter="photography">
174+
<section id="photography" data-au="flex-container flex-vertical justify-center" data-filter="photography">
177175
<div class="item-description-container">
178176
<h4>
179177
<span class="highlighter-container">
@@ -217,7 +215,7 @@ scripts: /js/build-projects-scripts.js
217215
</main>
218216

219217
{# <a name="contact"></a> #}
220-
{# <section id="contact-section" data-au="flex-container flex-vertical">
218+
{# <section id="contact" data-au="flex-container flex-vertical">
221219
<div data-au="flex-container flex-width flex-vertical">
222220
<div data-au="set-width">
223221
<h2 class="middle-ish-header">

js/build-projects-scripts.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ window.addEventListener("load", function(){
131131
createdSection = document.importNode(itemTemplateElem, true);
132132

133133
// set ID
134-
createdSection.id = projectsArray[x].projectID + "-section";
134+
createdSection.id = projectsArray[x].projectID;
135135

136136
// set innerHTML of title
137137
createdSection.querySelector("[data-project-title]").innerHTML = projectsArray[x].projectTitle;

0 commit comments

Comments
 (0)