Skip to content

Commit 0d65734

Browse files
committed
feat: better comply with heading hierarchy; implement projects through 11ty templating; begin implementing new filter buttons/checkboxes
1 parent 1decd57 commit 0d65734

File tree

10 files changed

+244
-335
lines changed

10 files changed

+244
-335
lines changed

_data/projects.json

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
{
2+
"projectItems": [
3+
{
4+
"itemID": "pixel-planet-today",
5+
"itemTitle": "Pixel Planet Today",
6+
"itemCompletionDate": "",
7+
"itemCaption": "This is my pride and joy. Pixel Planet Today is a passion-fueled 'Design 365' turned-daily project I decided to undertake in July 2019. The daily pixel designs highlight facts about the planet in order to help raise an appreciation for the planet. I have continued to post every day for over a year with no end in sight. On top of the daily posts, I have also wrote blog posts about my journey, created and sold stickers to raise money for environmental causes, and made animated versions of my posts to celebrate follower milestones.",
8+
"itemTags": ["illustration", "writing", "web-design", "animation", "environmental"],
9+
"linkTitle": "See the Pixel Planet Today website",
10+
"linkHref": "https://pixelplanettoday.com",
11+
"itemThumbnail": "./img/pixel-planet-today-logo-square.png"
12+
},
13+
{
14+
"itemID": "wasted-space",
15+
"itemTitle": "Wasted Space",
16+
"itemCompletionDate": "",
17+
"itemCaption": "My second art-and-tech-for-the-planet project, Wasted Space is a classic arcade game that drives home the idea of reusing and recycling. In the game, players fly a spaceship through endless enemies and collect materials from destroyed ships in order to upgrade their own. In pixel art fashion, environmental education in the game isn't as in your face as other projects, making it a lot more approachable to casual players.",
18+
"itemTags": ["illustration", "web-design", "animation", "environmental", "game-design", "sound-design"],
19+
"linkTitle": "See the Wasted Space website",
20+
"linkHref": "https://wastedspace.fun",
21+
"itemThumbnail": "./img/wasted-space-ship-title.png"
22+
},
23+
{
24+
"itemID": "ncbvi",
25+
"itemTitle": "Nebraska Commission for the Blind and Visually Impaired",
26+
"itemCompletionDate": "",
27+
"itemCaption": "The Nebraska Commission for the Blind and Visually Impaired initially reached out to me about redesigning their logo for their 20th anniversary, but has since led to additional design projects like business cards and social media images. I am incredibly fortunate to continue working with an agency that provides necessary services to those that need it.",
28+
"itemTags": ["graphic-design"],
29+
"linkTitle": "",
30+
"linkHref": "",
31+
"itemThumbnail": "./img/ncbvi-logo.png"
32+
},
33+
{
34+
"itemID": "undergraduate-research",
35+
"itemTitle": "Undergraduate Research",
36+
"itemCompletionDate": "",
37+
"itemCaption": "Between January 2016 and May of 2017, I combined two of my passions into one Undergraduate Research project. I am really passionate about the Earth and going green, and I wanted to use my skills in Web Design to help bring attention to the state of the environment. My study focused on the question 'Why do some college students recycle, and others don't?' I surveyed fellow students at the University of Nebraska at Kearney, and with the results I created an interactive website with the goal of reaching the audience that needed it: college students. For this project, I coded all of the HTML and CSS, created all the graphics, and coded most of the JavaScript.",
38+
"itemTags": ["illustration", "writing", "web-design", "animation", "environmental"],
39+
"linkTitle": "View the interactive results",
40+
"linkHref": "http://www.lopers.net/students/lopers/harpersj/urf/index.html",
41+
"itemThumbnail": "./img/undergrad-research-initial-thumbnail.png"
42+
},
43+
{
44+
"itemID": "eva",
45+
"itemTitle": "Eva Therapeutic Wellbeing",
46+
"itemCompletionDate": "",
47+
"itemCaption": "While I was working as a Multimedia Work Study Student in the Center for Entrepreneurship and Rural Development office at UNK, I was approached to build a website for a new small business, Eva Therapeutic Wellbeing. The owner, Eva, and I clicked very early on in the process, and she has been a joy of a client ever since. Since the initial build, I have worked with her on adding more content to the site, as well as keeping information up to date.",
48+
"itemTags": ["web-design"],
49+
"linkTitle": "View her company website",
50+
"linkHref": "https://www.evatherapyservices.com",
51+
"itemThumbnail": "./img/eva-thumbnail.png"
52+
},
53+
{
54+
"itemID": "bcm",
55+
"itemTitle": "Beavercreek Marketing",
56+
"itemCompletionDate": "2022-03-25",
57+
"itemCaption": "While I worked at Beavercreek Marketing between 2018 and 2021 as a full-time employee, my design-relationship with the company didn't stop there. After ending my employment, I became an independent contractor, designing and building internal tools for the design agency. The projects I have helped build may not be public facing, but are used both by the Beavercreek employees and their clients who use their financial sector software.",
58+
"itemTags": ["web-design", "graphic-design"],
59+
"linkTitle": "View their website",
60+
"linkHref": "https://bcm.io",
61+
"itemThumbnail": "./img/bcm-logo.png"
62+
}
63+
],
64+
"unusedProjectItems":[
65+
{
66+
"itemID": "startup-week",
67+
"itemTitle": "Startup Week 2017",
68+
"itemCompletionDate": "2017-09-25",
69+
"itemCaption": "Central Nebraska Startup Week 2017 was an entire week of events dedicated to entrepreneurship throughout the region. Events for all ages were held in Kearney, Grand Island, and Hastings, Nebraska. As a Multimedia Work Study Student in the Center for Entrepreneurship and Rural Development office at UNK, I created the Nebraska-themed banner using the pre-existing Techstars style guide. The style guide included colors that could be used, typefaces, and appropriate placement for the Techstars logo.",
70+
"itemTags": ["illustration", "graphic-design"],
71+
"linkTitle": "",
72+
"linkHref": "",
73+
"itemThumbnail": "./img/startupweek-banner.png"
74+
},
75+
{
76+
"itemID": "glitch",
77+
"itemTitle": "//glitch",
78+
"itemCompletionDate": "2017-09-25",
79+
"itemCaption": "You can only hide behind a computer screen for so long. //glitch, a concept Sci-Fi Thriller focuses on the dark side of the internet. In creating the animation, I used sounds that were a part of Creative Commons, and utilized open-use images to piece together the effects.",
80+
"itemTags": ["animation"],
81+
"linkTitle": "Watch the opening credits on Youtube",
82+
"linkHref": "https://www.youtube.com/watch?v=fIO23Xo0oXo",
83+
"itemThumbnail": "./img/glitch-thumbnail.png"
84+
},
85+
{
86+
"itemID": "go-for-launch",
87+
"itemTitle": "Go for Launch 2018",
88+
"itemCompletionDate": "2018-04-25",
89+
"itemCaption": "Go for Launch was a weekend-long workshop that brought startup business ideas to reality. As a Multimedia Work Study Student in the Center for Entrepreneurship and Rural Development office at UNK, I designed the majority of the promotional materials for the event, including the illustrations for postcards, flyers, and banners for email newsletters. The workshop had a limited 20 spots for attendees, and flyers were spread throughout the Kearney community and around the UNK campus.",
90+
"itemTags": ["illustration", "graphic-design"],
91+
"linkTitle": "",
92+
"linkHref": "",
93+
"itemThumbnail": ""
94+
}
95+
]
96+
}

_includes/footer.njk

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
<div id="footer-link-cols-container" data-au="flex-width flex-container">
4444
<!-- columns of links -->
4545
<div class="footer-col-section" data-au="flex-width">
46-
<h3>Projects</h3>
46+
<h2>Projects</h2>
4747
<div class="footer-link-container">
4848
<a class="text-link" href="https://www.pixelplanettoday.com" target="_blank">Pixel Planet Today</a>
4949
</div>
@@ -58,7 +58,7 @@
5858
</div>
5959
</div>
6060
<div class="footer-col-section" data-au="flex-width">
61-
<h3>Company</h3>
61+
<h2>Company</h2>
6262
<div class="footer-link-container">
6363
<a class="text-link" href="https://www.terrabyte.eco" target="_blank">Terrabyte</a>
6464
</div>
@@ -67,7 +67,7 @@
6767
</div>
6868
</div>
6969
<div class="footer-col-section" data-au="flex-width">
70-
<h3>Other</h3>
70+
<h2>Other</h2>
7171
<div class="footer-link-container">
7272
<a class="text-link" href="https://github.com/samharp" target="_blank">GitHub</a>
7373
</div>

css/footer-styles.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ footer section{
2828
/* footer logo text */
2929
footer .p-name{
3030
line-height:54px;
31+
font-size:58px;
3132
}
3233
footer .p-name .highlighter-container{
3334
margin-left:20px;

css/general-styles.css

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -86,21 +86,19 @@ h1{
8686
font-size:90px;
8787
line-height:80px;
8888
}
89-
/*medium intro text*/
89+
/* styles specific to hero h1 are found in the hero-styles.css */
90+
/*intro subtitle text and section titles*/
9091
h2{
91-
font-size:58px;
92-
line-height:100%;
93-
}
94-
/*intro subtitle text*/
95-
h3{
9692
font-size:20px;
9793
margin-bottom:20px;
9894
}
99-
/*section titles*/
100-
h4{
95+
96+
h3{
10197
font-size:32px;
10298
margin-bottom:30px;
10399
}
100+
h4{}
101+
104102
p{
105103
line-height: 1.7;
106104
margin-bottom:20px;
@@ -291,7 +289,7 @@ svg{
291289
line-height: 1em;
292290
}
293291
h2{
294-
font-size:2.5em;
292+
font-size:1.5em;
295293
}
296294
a.standard-link,
297295
a.text-link{
@@ -327,27 +325,30 @@ h1 .highlighter-container span{
327325
left:-28px;
328326
}
329327
h2 .highlighter-container{
330-
line-height: 80%;
328+
/* line-height: 80%; */
329+
margin-left:2px;
330+
line-height: 111%;
331+
top:10px;
331332
}
332333
h2 .highlighter-container span{
333-
top:20px;
334-
left:10px;
334+
/* top:20px;
335+
left:10px; */
336+
top: -10px;
337+
left: -2px;
335338
}
336339
h3 .highlighter-container{
337-
margin-left:2px;
338-
line-height: 111%;
339-
top:10px;
340+
line-height:111%;
340341
}
341342
h3 .highlighter-container span{
342-
top: -10px;
343-
left: -2px;
343+
top: -14px;
344+
left: 10px;
344345
}
345346
h4 .highlighter-container{
346-
line-height:111%;
347+
/* line-height:111%; */
347348
}
348349
h4 .highlighter-container span{
349-
top: -14px;
350-
left: 10px;
350+
/* top: -14px;
351+
left: 10px; */
351352
}
352353

353354
.material-shadow{

css/hero-styles.css

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,17 @@
3434
transform:none;
3535
}
3636

37-
/* text container(right) */
38-
h1.p-name{
37+
/* text container (right) */
38+
#hero h1 > *{
39+
display:block;
40+
}
41+
/*medium intro text*/
42+
#hero h1 .rel-smaller-text{
43+
font-size:58px;
44+
line-height:100%;
45+
}
46+
/* actual name */
47+
#hero h1 .p-name{
3948
margin-top:20px;
4049
}
4150

css/now-styles.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,10 @@
2828
}
2929
}
3030

31-
#now-info-container h2{
31+
#now-info-container h1{
3232
margin-bottom:50px;
33+
font-size: 58px;
34+
line-height: 100%;
3335
}
3436

3537
/* now page sections/items */

css/section-styles.css

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
/*page sections (full width/height sections)*/
22
section{
3-
min-height:100vh;
43
max-width:1200px;
54
margin:0 auto;
65
padding:40px;
76
overflow:hidden;
87
}
8+
section.full-section{
9+
min-height:100vh;
10+
}
911

1012

1113
/***************/
@@ -36,6 +38,9 @@ section:nth-child(odd) .item-images-container{
3638
.item-badges-container{
3739
text-transform:capitalize;
3840
}
41+
.filter-row{
42+
gap:10px;
43+
}
3944

4045
/*standard mobile styles*/
4146
@media only screen and (max-width:750px){

0 commit comments

Comments
 (0)