Skip to content

Commit d98bced

Browse files
samharpsamharp
authored
Merge pull request #27 from samharp/dev
Use Eleventy static site generator
2 parents e84007b + 084fcbd commit d98bced

24 files changed

+3321
-892
lines changed

‎.eleventy.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = function (eleventyConfig) {
2+
// Copy directories to the output
3+
eleventyConfig.addPassthroughCopy('css');
4+
eleventyConfig.addPassthroughCopy('js');
5+
eleventyConfig.addPassthroughCopy('img');
6+
// copy favicons
7+
eleventyConfig.addPassthroughCopy('site.webmanifest');
8+
eleventyConfig.addPassthroughCopy('*.ico');
9+
eleventyConfig.addPassthroughCopy('*.png');
10+
11+
12+
// Watch the `css` directory for changes
13+
eleventyConfig.addWatchTarget('css');
14+
eleventyConfig.addWatchTarget('js');
15+
eleventyConfig.addWatchTarget('img');
16+
eleventyConfig.addWatchTarget('site.webmanifest');
17+
};

‎.github/workflows/dev.yml‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ on:
22
push:
33
branches:
44
- dev
5-
name: Deploy website (dev) over SFTP
5+
name: Build and deploy website (dev)
66
jobs:
77
deploy_job:
88
name: Deploy
@@ -11,12 +11,23 @@ jobs:
1111
- name: Checkout
1212
uses: actions/checkout@v2
1313

14+
- name: Set up Node.js
15+
uses: actions/setup-node@v2
16+
with:
17+
node-version: '23'
18+
19+
- name: Install dependencies
20+
run: npm install
21+
22+
- name: Build site
23+
run: npx eleventy
24+
1425
- name: Deploy file(s)
1526
uses: wlixcc/SFTP-Deploy-Action@v1.2.4
1627
with:
1728
server: ${{ secrets.sftp_server }}
1829
username: ${{ secrets.sftp_username }}
1930
password: ${{ secrets.sftp_password }}
2031
port: 22
21-
local_path: './*'
32+
local_path: './_site/*'
2233
remote_path: ${{ secrets.sftp_remote_path_dev }}

‎.github/workflows/main.yml‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ on:
22
push:
33
branches:
44
- main
5-
name: Deploy website (prod) over SFTP
5+
name: Build and deploy website (prod)
66
jobs:
77
deploy_job:
88
name: Deploy
@@ -11,12 +11,23 @@ jobs:
1111
- name: Checkout
1212
uses: actions/checkout@v2
1313

14+
- name: Set up Node.js
15+
uses: actions/setup-node@v2
16+
with:
17+
node-version: '23'
18+
19+
- name: Install dependencies
20+
run: npm install
21+
22+
- name: Build site
23+
run: npx eleventy
24+
1425
- name: Deploy file(s)
1526
uses: wlixcc/SFTP-Deploy-Action@v1.2.4
1627
with:
1728
server: ${{ secrets.sftp_server }}
1829
username: ${{ secrets.sftp_username }}
1930
password: ${{ secrets.sftp_password }}
2031
port: 22
21-
local_path: './*'
32+
local_path: './_site/*'
2233
remote_path: ${{ secrets.sftp_remote_path_prod }}

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
_site

‎README.md‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
# personal-portfolio
22

3-
Portfolio hosted at sammyharper.com
3+
## Description
44

5-
A collection of personal projects ranging from 2016 to present in categories such as Graphic Design, Web Design, and Animation.
5+
A collection of personal projects ranging from 2016 to present in categories such as Graphic Design, Web Design, and Animation. Website is built using Eleventy (11ty), Nunjucks is used for templating markup.
6+
7+
8+
## Build
69

710
Below are some more involved sections/aspects of this website (things that maybe aren't as self-explanatory).
811

9-
## Portfolio generation
12+
### Portfolio generation
1013

1114
To better handle sorting/filtering and to allow for easier management, portfolio items/projects are generated from JSON. The JSON file outlines an item's title, description, image source, and link (if applicable). Some styles require generating HTML each time, meaning that an easier show/hide toggle approach wouldn't work (as seen in previous website builds).
1215

13-
## `/now` page
16+
### `/now` page
17+
18+
For easier management/updating, the items on the `/now` page are generated from JSON. The JSON file outlines different aspects of each item, including a title, description, and link (if applicable). Then, on page load, `build-projects-scripts.js` generates sections for each JSON item.
19+
20+
21+
## Contributions
1422

15-
For easier management/updating, the items on the `/now` page are generated from JSON. The JSON file outlines different aspects of each item, including a title, description, and link (if applicable). Then, on page load, `build-projects-scripts.js` generates sections for each JSON item.
23+
As this is a personal portfolio, only small contributions will be accepted and merged into main. Thank you for your interest in contributing, but this project is demonstrative of past projects AND my own abilities to build the portfolio itself. Feedback will be happily accepted through Issues, social media, or email.

‎_data/site.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"title": "Sammy Harper",
3+
"url": "https://sammyharper.com",
4+
"author": "Sammy Harper",
5+
"language": "en-US",
6+
"description": ""
7+
}

‎_includes/footer.njk‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<footer>
2+
{# carbon footer #}
3+
<div class="reg-footer">
4+
<section class="flex-container">
5+
<!-- logo col -->
6+
<div class="flex-width">
7+
<h2 class="p-name">
8+
<span class="highlighter-container">
9+
<span>Sammy</span>
10+
</span><br>
11+
<span class="highlighter-container">
12+
<span>Harper</span>
13+
</span>
14+
</h2>
15+
16+
<!-- social media links -->
17+
<div id="footer-socials-container" class="flex-container align-center">
18+
<!-- instagram, Mastodon -->
19+
<div class="social-link-container">
20+
<a href="https://instagram.com/OfficialSamHarp" class="icon-link" target="_blank">
21+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
22+
<use href="#instagram-icon"/>
23+
</svg>
24+
</a>
25+
</div>
26+
<div class="social-link-container">
27+
<a href="https://github.com/samharp" class="icon-link" target="_blank">
28+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
29+
<use href="#github-icon"/>
30+
</svg>
31+
</a>
32+
</div>
33+
<div class="social-link-container">
34+
<a rel="me" href="https://climatejustice.social/@samharp" class="icon-link" target="_blank">
35+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
36+
<use href="#mastodon-icon"/>
37+
</svg>
38+
</a>
39+
</div>
40+
</div>
41+
</div>
42+
<div id="footer-link-cols-container" class="flex-width flex-container">
43+
<!-- 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>
53+
<div class="footer-col-section flex-width">
54+
<h3>Projects</h3>
55+
<div class="footer-link-container">
56+
<a class="standard-link" href="https://pixelplanettoday.com" target="_blank">Pixel Planet Today</a>
57+
</div>
58+
<div class="footer-link-container">
59+
<a class="standard-link" href="https://wastedspace.fun" target="_blank">Wasted Space</a>
60+
</div>
61+
<div class="footer-link-container">
62+
<a class="standard-link" href="https://play.google.com/store/apps/details?id=com.terrabyte.byteosnotes" target="_blank">byteOS: Notes</a>
63+
</div>
64+
<div class="footer-link-container">
65+
<a class="standard-link" href="https://pinekeepers.com" target="_blank">Pinekeepers</a>
66+
</div>
67+
</div>
68+
<div class="footer-col-section set-width text-right">
69+
<a id="back-to-top-link" class="standard-link show-with-jsx" href="#top">Back to top</a>
70+
</div>
71+
</div>
72+
</section>
73+
<section class="flex-container align-center">
74+
<div class="flex-width">
75+
<p>Copyright &copy; <span id="copyright-year"></span>, Sammy Harper. All Rights Reserved.</p>
76+
<p>Website hosted by <a class="standard-link" href="https://goldenharpmedia.com" target="_blank">Golden Harp Media</a>.</p>
77+
</div>
78+
<div id="footer-badges-container" class="set-width flex-container align-center">
79+
<!-- website carbon -->
80+
<div class="footer-badge">
81+
<div id="wcb" class="carbonbadge"></div>
82+
<script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
83+
</div>
84+
<!-- clean creatives -->
85+
<div class="clean-creatives-badge footer-badge">
86+
<a href="https://www.cleancreatives.org" target="_blank">
87+
<div class="clean-creatives-img"></div>
88+
</a>
89+
</div>
90+
</div>
91+
</section>
92+
</div>
93+
</footer>

‎_includes/layouts/base.njk‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>{{ site.title }}
7+
{% if subtitle %}
8+
: {{ subtitle }}
9+
{% endif %}
10+
</title>
11+
<meta name="description" content="{{ description }}">
12+
<meta name="author" content="{{ site.author }}">
13+
14+
{# favicons #}
15+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
16+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
17+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
18+
<link rel="manifest" href="/site.webmanifest">
19+
20+
{# css #}
21+
{# fonts #}
22+
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@600&display=swap" rel="stylesheet">
23+
24+
{# shared styles #}
25+
{# site styles #}
26+
<link href="/css/general-styles.css" rel="stylesheet" type="text/css" />
27+
<link href="/css/hero-styles.css" rel="stylesheet" type="text/css" />
28+
<link href="/css/section-styles.css" rel="stylesheet" type="text/css" />
29+
<link href="/css/footer-styles.css" rel="stylesheet" type="text/css" />
30+
{# page styles #}
31+
{% if stylesheets %}
32+
<link href="{{ stylesheets }}" rel="stylesheet" type="text/css" />
33+
{% endif %}
34+
35+
{# shared scripts #}
36+
<script src="/js/shared-scripts.js"></script>
37+
{# page scripts will be in HTML? #}
38+
{% if scripts %}
39+
<script src="{{ scripts }}"></script>
40+
{% endif %}
41+
42+
{# initial load transition #}
43+
{# <style>
44+
.loading{
45+
opacity:0;
46+
}
47+
</style>
48+
<script>
49+
window.addEventListener("load", function(){
50+
document.body.classList.remove("loading");
51+
})
52+
</script> #}
53+
54+
{# <noscript>
55+
<style>
56+
.loading{
57+
opacity:1;
58+
}
59+
</style>
60+
</noscript> #}
61+
62+
{# hide JS only items when there isn't js #}
63+
{# <noscript>
64+
<style>
65+
.show-with-js{
66+
display:none;
67+
}
68+
</style>
69+
</noscript> #}
70+
71+
{# other metadata #}
72+
{# mastodon #}
73+
<link rel="me" href="https://climatejustice.social/@samharp"/>
74+
{# indieauth login #}
75+
<link rel="me" href="https://github.com/samharp"/>
76+
{# webmentions #}
77+
<link rel="webmention" href="https://webmention.io/www.sammyharper.com/webmention" />
78+
79+
{# analytics #}
80+
<script data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
81+
82+
</head>
83+
<body>
84+
{# svg container component #}
85+
{% include "svgs.njk" %}
86+
87+
{# noscript banner component #}
88+
{# <noscript> #}
89+
{% include "noscript-banner.njk" %}
90+
{# </noscript> #}
91+
92+
<a name="top"></a>
93+
94+
{# <header>
95+
</header> #}
96+
{{ content | safe }}
97+
98+
{% include "footer.njk" %}
99+
</body>
100+
</html>

‎_includes/noscript-banner.njk‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<noscript>
2+
<div class="banner">
3+
<p>It looks like JavaScript is currently disabled for your browser. We recommend enabling JavaScript in order for the site to function as anticipated.</p>
4+
</div>
5+
</noscript>

0 commit comments

Comments
 (0)