Skip to content

Commit f8bf62f

Browse files
samharpsamharp
committed
feat: rebalance socials shown
1 parent 084fcbd commit f8bf62f

File tree

5 files changed

+91
-62
lines changed

5 files changed

+91
-62
lines changed

‎_includes/footer.njk‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
<!-- social media links -->
1717
<div id="footer-socials-container" class="flex-container align-center">
18-
<!-- instagram, Mastodon -->
18+
<!-- instagram, etc. -->
1919
<div class="social-link-container">
2020
<a href="https://instagram.com/OfficialSamHarp" class="icon-link" target="_blank">
2121
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
@@ -24,9 +24,9 @@
2424
</a>
2525
</div>
2626
<div class="social-link-container">
27-
<a href="https://github.com/samharp" class="icon-link" target="_blank">
27+
<a href="https://www.linkedin.com/in/harpersj/" class="icon-link" target="_blank">
2828
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
29-
<use href="#github-icon"/>
29+
<use href="#linkedin-icon"/>
3030
</svg>
3131
</a>
3232
</div>
@@ -41,15 +41,6 @@
4141
</div>
4242
<div id="footer-link-cols-container" class="flex-width flex-container">
4343
<!-- columns of links -->
44-
<div class="footer-col-section flex-width">
45-
<h3>Company</h3>
46-
<div class="footer-link-container">
47-
<a class="standard-link" href="https://terrabyte.eco" target="_blank">Terrabyte</a>
48-
</div>
49-
<div class="footer-link-container">
50-
<a class="standard-link" href="https://goldenharpmedia.com" target="_blank">Golden Harp Media</a>
51-
</div>
52-
</div>
5344
<div class="footer-col-section flex-width">
5445
<h3>Projects</h3>
5546
<div class="footer-link-container">
@@ -65,7 +56,24 @@
6556
<a class="standard-link" href="https://pinekeepers.com" target="_blank">Pinekeepers</a>
6657
</div>
6758
</div>
68-
<div class="footer-col-section set-width text-right">
59+
<div class="footer-col-section flex-width">
60+
<h3>Company</h3>
61+
<div class="footer-link-container">
62+
<a class="standard-link" href="https://terrabyte.eco" target="_blank">Terrabyte</a>
63+
</div>
64+
<div class="footer-link-container">
65+
<a class="standard-link" href="https://goldenharpmedia.com" target="_blank">Golden Harp Media</a>
66+
</div>
67+
</div>
68+
<div class="footer-col-section flex-width">
69+
<h3>Other</h3>
70+
<div class="footer-link-container">
71+
<a class="standard-link" href="https://github.com/samharp" target="_blank">GitHub</a>
72+
</div>
73+
<div class="footer-link-container">
74+
<a class="standard-link" href="https://www.buymeacoffee.com/samharp" target="_blank">Buy Me A Coffee</a>
75+
</div>
76+
6977
<a id="back-to-top-link" class="standard-link show-with-jsx" href="#top">Back to top</a>
7078
</div>
7179
</div>

‎_includes/svgs.njk‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@
3838
<g id="mastodon-icon">
3939
<path d="M47.41,11.8c-.7-5.09-5.21-9.11-10.55-9.88-.9-.13-4.32-.61-12.23-.61h-.06c-7.92,0-9.62,.48-10.52,.61C8.85,2.67,4.11,6.27,2.96,11.43c-.55,2.54-.61,5.35-.51,7.93,.15,3.7,.18,7.4,.52,11.08,.24,2.45,.65,4.88,1.23,7.27,1.09,4.42,5.53,8.09,9.87,9.59,4.65,1.56,9.65,1.82,14.43,.75,.53-.12,1.05-.26,1.56-.42,1.16-.36,2.53-.77,3.53-1.49,.01-.01,.03-.02,.03-.04,0-.01,.01-.03,.01-.05v-3.57s0-.03-.01-.05c0-.01-.02-.03-.03-.04-.01,0-.03-.02-.04-.02-.02,0-.03,0-.05,0-3.07,.72-6.21,1.08-9.37,1.08-5.43,0-6.89-2.54-7.31-3.59-.34-.91-.55-1.86-.63-2.83,0-.02,0-.03,0-.05,0-.01,.02-.03,.03-.04,.01-.01,.03-.02,.04-.02,.02,0,.03,0,.05,0,3.02,.72,6.11,1.08,9.21,1.08,.75,0,1.49,0,2.24-.02,3.12-.09,6.41-.24,9.48-.83,.08-.02,.15-.03,.22-.05,4.84-.92,9.45-3.79,9.92-11.07,.02-.29,.06-3,.06-3.3,0-1.01,.33-7.17-.05-10.95Zm-7.46,18.16h-5.09v-12.28c0-2.58-1.09-3.9-3.32-3.9-2.45,0-3.67,1.56-3.67,4.64v6.72h-5.06v-6.72c0-3.08-1.23-4.64-3.68-4.64-2.21,0-3.32,1.32-3.32,3.9v12.28h-5.09v-12.65c0-2.58,.67-4.64,2.01-6.16,1.38-1.52,3.2-2.3,5.45-2.3,2.61,0,4.58,.99,5.89,2.96l1.27,2.09,1.27-2.09c1.31-1.97,3.28-2.96,5.89-2.96,2.25,0,4.06,.78,5.45,2.3,1.34,1.52,2.01,3.57,2.01,6.16v12.65Z"/>
4040
</g>
41+
<g id="linkedin-icon">
42+
<path d="M38.11,2.52H11.89C6.71,2.52,2.52,6.71,2.52,11.89v26.23c0,5.17,4.19,9.37,9.37,9.37h26.23c5.17,0,9.37-4.19,9.37-9.37V11.89c0-5.17-4.19-9.37-9.37-9.37ZM17.51,38.11h-5.62v-20.61h5.62v20.61ZM14.7,15.13c-1.81,0-3.28-1.48-3.28-3.3s1.47-3.3,3.28-3.3,3.28,1.48,3.28,3.3-1.47,3.3-3.28,3.3ZM39.99,38.11h-5.62v-10.5c0-6.31-7.49-5.83-7.49,0v10.5h-5.62v-20.61h5.62v3.31c2.62-4.84,13.11-5.2,13.11,4.64v12.66Z"/>
43+
</g>
4144
<!-- -->
4245
</defs>
4346
</svg>

‎css/footer-styles.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,9 @@ footer .p-name .highlighter-container span{
6666
.footer-link-container {
6767
margin-bottom: 10px;
6868
}
69+
#back-to-top-link{
70+
margin-top:30px;
71+
}
6972
@media only screen and (max-width: 500px){
7073
#footer-link-cols-container{
7174
flex-wrap: wrap;

‎css/now-styles.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@
2727
font-size:inherit;
2828
}
2929
}
30+
/*dark mode styles*/
31+
@media (prefers-color-scheme: dark) {
32+
#now-info-container{
33+
background-color:#333333;
34+
}
35+
}
3036

3137
#now-info-container h2{
3238
margin-bottom:50px;

‎index.njk‎

Lines changed: 58 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -9,55 +9,55 @@ scripts: /js/build-projects-scripts.js
99
{# <script src="/js/build-projects-scripts.js"></script> #}
1010

1111
<section id="hero-section" class="flex-container align-center h-card">
12-
<div class="hide other-h-card-data">
13-
<img class="u-photo" src="./img/self-pixel-portrait-summer-outfit-covid-centered.png">
14-
<a href="https://sammyharper.com" class="u-url u-uid">sammyharper.com</a>
12+
<div class="hide other-h-card-data">
13+
<img class="u-photo" src="./img/self-pixel-portrait-summer-outfit-covid-centered.png">
14+
<a href="https://sammyharper.com" class="u-url u-uid">sammyharper.com</a>
1515

16+
</div>
17+
<div class="picture-container flex-width flex-container all-center">
18+
<div class="picture-frame-container">
19+
<div class="picture-frame material-shadow"></div>
20+
<a id="contact-me-link" class="icon-link smiley-convo" href="#contact-section">
21+
<div class="smiley-icon"></div>
22+
<h3 class="icon-link-tooltip say-hi-text">Say hi!</h3>
23+
</a>
1624
</div>
17-
<div class="picture-container flex-width flex-container all-center">
18-
<div class="picture-frame-container">
19-
<div class="picture-frame material-shadow"></div>
20-
<a id="contact-me-link" class="icon-link smiley-convo" href="#contact-section">
21-
<div class="smiley-icon"></div>
22-
<h3 class="icon-link-tooltip say-hi-text">Say hi!</h3>
23-
</a>
24-
</div>
25-
</div>
26-
<div class="about-me-container flex-width">
27-
<div class="about-me-title">
28-
<h1>Hi,</h1>
29-
<h2>my name is</h2>
30-
<h1 class="p-name">
31-
<span class="highlighter-container p-nickname">
32-
<span>Sammy</span>
33-
</span><br>
34-
<span class="highlighter-container p-family-name">
35-
<span>Harper</span>
36-
</span></h1>
37-
</div>
38-
<div class="about-me-description p-note">
39-
<h3>I'm a <span class="highlighter-container"><span>green tech founder</span></span>, <span class="highlighter-container"><span>designer</span></span>, <span class="force-inlineb">and <span class="highlighter-container"><span>dreamer</span></span>.</span></h3>
40-
{# <p>I'm also known for driving skills .</p> #}
41-
</div>
42-
</div>
43-
</section>
44-
<section id="more-about-me-section" class="flex-container align-center">
45-
<div class="flex-width item-description-container">
46-
<h3>A little more about me&hellip;</h3>
47-
<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>
48-
<p>Professionally, I'm the Founder &amp; CEO of <a class="standard-link" target="_blank" href="https://terrabyte.eco">Terrabyte</a> and the President of <a class="standard-link" targer="_blank" href="https://www.goldenharpmedia.com">Golden Harp Media</a>.</p>
49-
<p>
50-
Keep scrolling to see some of my <a class="standard-link" href="#portfolio-filter-section">past projects</a> &mdash; or, read about what I'm up to <a class="standard-link" href="/now/index.html">now</a>.
51-
</p>
52-
</div>
53-
<div class="picture-container item-images-container flex-width flex-container all-center">
54-
<div class="about-pics-container">
55-
<!-- <img class="material-shadow" src="./img/self-pixel-portrait-summer-outfit-covid-centered.png"> -->
56-
<img class="material-shadow" src="./img/self-pixel-portrait_full_dark-wintery_some-snow_large-cropped.png">
57-
</div>
58-
59-
</div>
60-
</section>
25+
</div>
26+
<div class="about-me-container flex-width">
27+
<div class="about-me-title">
28+
<h1>Hi,</h1>
29+
<h2>my name is</h2>
30+
<h1 class="p-name">
31+
<span class="highlighter-container p-nickname">
32+
<span>Sammy</span>
33+
</span><br>
34+
<span class="highlighter-container p-family-name">
35+
<span>Harper</span>
36+
</span></h1>
37+
</div>
38+
<div class="about-me-description p-note">
39+
<h3>I'm a <span class="highlighter-container"><span>green tech founder</span></span>, <span class="highlighter-container"><span>designer</span></span>, <span class="force-inlineb">and <span class="highlighter-container"><span>dreamer</span></span>.</span></h3>
40+
{# <p>I'm also known for driving skills .</p> #}
41+
</div>
42+
</div>
43+
</section>
44+
<section id="more-about-me-section" class="flex-container align-center">
45+
<div class="flex-width item-description-container">
46+
<h3>A little more about me&hellip;</h3>
47+
<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>
48+
<p>Professionally, I'm the Founder &amp; CEO of <a class="standard-link" target="_blank" href="https://terrabyte.eco">Terrabyte</a> and the President of <a class="standard-link" targer="_blank" href="https://www.goldenharpmedia.com">Golden Harp Media</a>.</p>
49+
<p>
50+
Keep scrolling to see some of my <a class="standard-link" href="#portfolio-filter-section">past projects</a> &mdash; or, read about what I'm up to <a class="standard-link" href="/now/index.html">now</a>.
51+
</p>
52+
</div>
53+
<div class="picture-container item-images-container flex-width flex-container all-center">
54+
<div class="about-pics-container">
55+
<!-- <img class="material-shadow" src="./img/self-pixel-portrait-summer-outfit-covid-centered.png"> -->
56+
<img class="material-shadow" src="./img/self-pixel-portrait_full_dark-wintery_some-snow_large-cropped.png">
57+
</div>
58+
59+
</div>
60+
</section>
6161

6262
<a name="portfolio-filter-section"></a>
6363
<section id="portfolio-filter-section" class="show-with-js flex-container flex-vertical">
@@ -241,6 +241,15 @@ scripts: /js/build-projects-scripts.js
241241
<h3 class="icon-link-tooltip">Instagram</h3>
242242
</a>
243243
</div>
244+
<div class="contact-link-container flex-width text-center">
245+
<a href="https://www.linkedin.com/in/harpersj/" class="icon-link" target="_blank">
246+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
247+
<use href="#linkedin-icon"/>
248+
</svg>
249+
<h3 class="icon-link-tooltip">LinkedIn</h3>
250+
</a>
251+
</div>
252+
244253
<div class="contact-link-container flex-width text-center">
245254
<a rel="me" href="https://github.com/samharp" class="icon-link" target="_blank">
246255
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
@@ -257,14 +266,14 @@ scripts: /js/build-projects-scripts.js
257266
<h3 class="icon-link-tooltip">Mastodon</h3>
258267
</a>
259268
</div>
260-
<div class="contact-link-container flex-width text-center">
269+
{# <div class="contact-link-container flex-width text-center">
261270
<a href="https://www.buymeacoffee.com/samharp" class="icon-link" target="_blank">
262271
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
263272
<use href="#bmacoffee-icon"/>
264273
</svg>
265274
<h3 class="icon-link-tooltip">Buy Me A Coffee</h3>
266275
</a>
267-
</div>
276+
</div> #}
268277

269278
</div>
270279
</div>

0 commit comments

Comments
 (0)