Skip to content

Commit 80ec897

Browse files
BenJetsonBenJetson
authored
Merge pull request #139 from BenJetson/#134-link-stack
#134 link stack
2 parents a3d367f + 6a086d5 commit 80ec897

File tree

11 files changed

+213
-37
lines changed

11 files changed

+213
-37
lines changed

‎_config.yml

+9-2
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,19 @@ email: [email protected]
1111
description: The internet home for all of my personal projects and thoughts.
1212
baseurl: "" # the subpath of your site, e.g. /blog
1313
url: "https://www.bengodfrey.net" #interwebz
14-
twitter_username: BenJetson
15-
github_username: BenJetson
1614
repository: BenJetson/benjetson.github.io
1715
profileIMG: https://avatars1.githubusercontent.com/u/10427974?s=460&v=4
1816
brand_color: "#01579b"
1917

18+
# Social Links
19+
# If these are updates, you might want to check _data/stack.yml for entries that
20+
# need updating.
21+
social_urls:
22+
twitter: https://twitter.com/BenJetson
23+
instagram: https://instagram.com/bfgodfr
24+
github: https://github.com/BenJetson
25+
linkedin: https://linkedin.com/in/bfgodfrey
26+
2027
# Build settings
2128
tier: prod
2229
recaptcha_site_id: 6LfaaLQZAAAAAFqauKWQA3LRGVvHvnl-JJ99tEJI

‎_data/stack.yml

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
message: >
2+
Here's a convenient stack of my personal internet links.
3+
4+
links:
5+
- title: My Website
6+
icon: globe2
7+
url: /
8+
- title: Twitter
9+
icon: twitter
10+
social_key: twitter
11+
- title: Instagram
12+
icon: instagram
13+
social_key: instagram
14+
- title: GitHub
15+
icon: github
16+
social_key: github
17+
- title: LinkedIn
18+
icon: linkedin
19+
social_key: linkedin
20+
- title: My Resume
21+
icon: file-earmark-person
22+
url: /resume
23+
- title: Contact Me
24+
icon: envelope
25+
url: /contact

‎_includes/footer.html

+10-6
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,22 @@ <h4>{{site.title}}</h4>
88
<div class="col-sm-12 col-md-3 d-print-none">
99
<h5>Follow me!</h5>
1010
<div class="social-grid">
11-
<a class="social-icon" href="https://github.com/benjetson">
12-
<i class="bi bi-github"></i>
13-
<span class="visually-hidden">GitHub</span>
14-
</a>
15-
<a class="social-icon" href="https://twitter.com/benjetson">
11+
<a class="social-icon" href="{{site.social_urls.twitter}}">
1612
<i class="bi bi-twitter"></i>
1713
<span class="visually-hidden">Twitter</span>
1814
</a>
19-
<a class="social-icon" href="https://www.linkedin.com/in/bfgodfrey">
15+
<a class="social-icon" href="{{site.social_urls.instagram}}">
16+
<i class="bi bi-instagram"></i>
17+
<span class="visually-hidden">Instagram</span>
18+
</a>
19+
<a class="social-icon" href="{{site.social_urls.linkedin}}">
2020
<i class="bi bi-linkedin"></i>
2121
<span class="visually-hidden">LinkedIn</span>
2222
</a>
23+
<a class="social-icon" href="{{site.social_urls.github}}">
24+
<i class="bi bi-github"></i>
25+
<span class="visually-hidden">GitHub</span>
26+
</a>
2327
</div>
2428
</div>
2529
<div class="col-sm-12 col-md-3 d-print-none">

‎_includes/introduction.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{% comment %}
2+
<!-- prettier-ignore -->
3+
{% endcomment %}
4+
5+
{% assign intro_class = "" %}
6+
7+
{% if include.size %}
8+
{% assign intro_class = "intro-" | append: include.size %}
9+
{% endif %}
10+
11+
{% comment %}
12+
<!-- prettier-ignore -->
13+
{% endcomment %}
14+
15+
<section class="introduction {{intro_class}}">
16+
<div class="container">
17+
<div class="d-flex w-100 justify-content-center pb-3">
18+
<img
19+
class="img-responsive rounded-circle justify-content-center"
20+
src="{{ site.github.owner_gravatar_url }}"
21+
/>
22+
</div>
23+
<div class="d-flex w-100 justify-content-center">
24+
<h1 class="center">Hi! I'm Ben.</h1>
25+
</div>
26+
</div>
27+
</section>

‎_sass/custom/overrides/vars.scss

+5-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,11 @@ $primary: $brand-color;
1818
$chip-size: 30px;
1919

2020
// Enable background gradient classes.
21+
$gradient-max: rgba(#fff, 15%);
22+
$gradient-min: rgba(#fff, 0%);
23+
2124
$gradient: linear-gradient(
2225
0deg /* must be 0deg for home page gradient */,
23-
rgba(#fff, 0.15),
24-
rgba(#fff, 0)
26+
$gradient-max,
27+
$gradient-min
2528
);

‎_sass/custom/styles/_homepage.scss

-5
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,3 @@ img.index-project-img {
88
height: 200px;
99
object-fit: cover;
1010
}
11-
12-
img#home-profile-img {
13-
max-width: 250px;
14-
max-height: 250px;
15-
}

‎_sass/custom/styles/_introduction.scss

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.introduction {
2+
@extend .bg-primary;
3+
@extend .bg-gradient;
4+
@extend .text-light;
5+
@extend .py-3;
6+
7+
$size: 150px;
8+
$size-sm: $size - 50px;
9+
$size-lg: $size + 100px;
10+
11+
img {
12+
max-width: $size;
13+
max-height: $size;
14+
}
15+
16+
&.intro-sm img {
17+
max-width: $size-sm;
18+
max-height: $size-sm;
19+
}
20+
21+
&.intro-lg img {
22+
max-width: $size-lg;
23+
max-height: $size-lg;
24+
}
25+
}

‎_sass/custom/styles/_stack.scss

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.stack {
2+
@extend .bg-primary;
3+
@extend .text-light;
4+
@extend .p-3;
5+
6+
text-align: center;
7+
padding-top: 0 !important;
8+
9+
// Make the stack have the same color as the bottom of the gradient from the
10+
// introduction banner at the top of the viewport.
11+
//
12+
// Using a linear gradient here to ensure:
13+
// - the color is a perfect match since browser gradient calculation
14+
// algorithms might differ, best to use same algorithm to calc.
15+
// - ensure that browsers that do not support the gradient for the banner
16+
// will have the same color as banner for the stack.
17+
background-image: linear-gradient(0deg, $gradient-max, $gradient-max);
18+
}
19+
20+
.stack-item {
21+
@extend .my-3;
22+
@extend .mx-auto;
23+
@extend .p-3;
24+
@extend .text-dark;
25+
26+
position: relative;
27+
28+
a {
29+
color: inherit;
30+
text-decoration: none;
31+
}
32+
33+
&:focus-within,
34+
&:hover {
35+
box-shadow: inset 0px 0px 0px 4px #000;
36+
}
37+
38+
max-width: 400px;
39+
40+
text-align: center;
41+
42+
border: 1px solid #fff;
43+
border-radius: 15px;
44+
45+
background-color: rgba($white, 85%);
46+
47+
font-weight: bold;
48+
font-size: $font-size-lg;
49+
}

‎_sass/custom/styles/styles.scss

+2
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@
1111
@import "footer";
1212
@import "forms";
1313
@import "homepage";
14+
@import "introduction";
1415
@import "layout";
1516
@import "notfound";
1617
@import "octicons";
1718
@import "preview";
1819
@import "projects";
20+
@import "stack";
1921
@import "usercontent";
2022
@import "utilities";

‎index.html

+1-22
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,8 @@
22
layout: boilerplate
33
---
44

5-
<!-- index update -->
5+
{% include introduction.html size="lg" %}
66

7-
<section class="bg-primary bg-gradient text-light py-3">
8-
<div class="container">
9-
<div class="d-flex w-100 justify-content-center pb-3">
10-
{% comment %}
11-
<img
12-
class="img-responsive rounded-circle justify-content-center"
13-
id="home-profile-img"
14-
src="{{ site.github.owner_gravatar_url }}"
15-
/>
16-
{% endcomment %}
17-
<img
18-
class="img-responsive rounded-circle justify-content-center"
19-
id="home-profile-img"
20-
src="{{site.profileIMG}}"
21-
/>
22-
</div>
23-
<div class="d-flex w-100 justify-content-center">
24-
<h1 class="center">Hi! I'm Ben.</h1>
25-
</div>
26-
</div>
27-
</section>
287
<section class="bg-light py-3">
298
<div class="container">
309
<p>

‎stack/index.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
layout: boilerplate
3+
title: Links
4+
---
5+
6+
{% include introduction.html %}
7+
8+
<section class="stack">
9+
{%- assign stack = site.data.stack -%}
10+
11+
<div class="message">{{stack.message | strip_newlines | markdownify}}</div>
12+
13+
{% comment %}
14+
<!-- prettier-ignore -->
15+
{% endcomment %}
16+
17+
{% for item in stack.links %}
18+
19+
{% assign url = "#" %}
20+
{% if item.url %}
21+
{% assign url = item.url %}
22+
{% elsif item.social_key %}
23+
{% assign url = site.social_urls[item.social_key] %}
24+
{% endif %}
25+
26+
27+
{% comment %}
28+
<!-- prettier-ignore -->
29+
{% endcomment %}
30+
31+
<div class="stack-item">
32+
<a href="{{url}}" class="stretched-link">
33+
{% comment %}
34+
<!-- prettier-ignore -->
35+
{% endcomment %}
36+
37+
{% if item.icon %}
38+
39+
{% comment %}
40+
<!-- prettier-ignore -->
41+
{% endcomment %}
42+
43+
<i class="bi bi-{{item.icon}}"></i>
44+
45+
{% comment %}
46+
<!-- prettier-ignore -->
47+
{% endcomment %}
48+
49+
{% endif %}
50+
51+
{{item.title}}
52+
53+
{% comment %}
54+
<!-- prettier-ignore -->
55+
{% endcomment %}
56+
</a>
57+
</div>
58+
59+
{% endfor %}
60+
</section>

0 commit comments

Comments
 (0)