Skip to content

Some small adjustments #232

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
FaceFTW merged 5 commits into from
Aug 25, 2025
Merged

Some small adjustments #232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eecd539
Add some hover animations to social btns
FaceFTW Aug 14, 2025
3397e29
Minify the little JS I have
FaceFTW Aug 16, 2025
4a4761a
Unify Button and Badge Class Defs
FaceFTW Aug 22, 2025
b88720f
Close to primetime I feel
FaceFTW Aug 23, 2025
80cd1ea
Remove Unused Things
FaceFTW Aug 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion eleventy.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,9 @@ export default async function (eleventyConfig) {
removeComments: true,
collapseWhitespace: true,
minifyJS: {
mangle: {},
mangle: {
toplevel: true,
},
},
minifiyCSS: true,
sortClassName: true,
Expand Down Expand Up @@ -214,6 +216,24 @@ export default async function (eleventyConfig) {
// }
// }
// });
/************************
* Shared Tailwind Classlists
************************/
//Sure, it's still alot, but at least it is in one place and not a bajillion
eleventyConfig.addGlobalData(
'buttonStyle',
'has-[>svg]:px-3 inline-flex h-9 shrink-0 items-center justify-center ' +
'gap-2 rounded-md border border-input bg-input/30 px-4 py-2 text-sm ' +
'font-medium whitespace-nowrap shadow-xs transition-all outline-none ' +
'hover:bg-accent hover:text-accent-foreground'
);

eleventyConfig.addGlobalData(
'badgeStyle',
'inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-md ' +
'border border-transparent bg-primary px-2 py-0.5 text-xs font-medium ' +
'whitespace-nowrap text-primary-foreground'
);

/************************
* Custom Filters + Collections
Expand Down
20 changes: 0 additions & 20 deletions src/_includes/icons/moon_star.njk
View file
Open in desktop

This file was deleted.

20 changes: 9 additions & 11 deletions src/_includes/layouts/base.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,10 @@
<div class="absolute top-full left-0 isolate z-50 flex justify-center"></div>
</nav>
<button
id="mobileNavButton"
class="justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none
disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 shrink-0
[&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:text-accent-foreground hover:bg-accent/50 h-9 py-4 px-3 ml-4 flex items-center space-x-2
id="mNB"
class="justify-center gap-2 whitespace-nowrap rounded-md transition-all [&amp;_svg]:pointer-events-none
[&amp;_svg]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
hover:text-accent-foreground hover:bg-accent h-15 py-4 px-3 ml-4 flex items-center space-x-2
md:hidden animate-fade-in">
{% include 'icons/menu.njk' %}
<div class="flex flex-col my-2">
Expand All @@ -79,8 +78,8 @@
</div>
</button>
<div
id="mobileNavMenu"
class="hidden slide-in-from-bottom-80 fixed inset-0 top-10 z-50 h-[calc(100vh-4rem)] animate-in grid-flow-row
id="mNM"
class="hidden fixed inset-0 top-13 z-150 h-[calc(100vh-4rem)] animate-in grid-flow-row
auto-rows-max overflow-auto p-6 pb-32 shadow-md md:hidden">
<div class="relative z-20 grid gap-6 rounded-md bg-popover p-4 text-popover-foreground shadow-lg">
<nav class="grid grid-flow-row auto-rows-max text-sm">
Expand All @@ -107,21 +106,20 @@
<span class="w-max-10"></span>
</div>
<script>
const mobileNavMenu = document.getElementById('mobileNavMenu');
const mobileNavMenu = document.getElementById('mNM');
let isMenuOpen = false;
const menuToggle = () => {
if (isMenuOpen) {
mobileNavMenu.classList.add('hidden')
{# mobileNavMenu.classList.add() #}
mobileNavMenu.classList.remove('grid');
mobileNavMenu.classList.remove('grid');

} else {
mobileNavMenu.classList.add('grid')
mobileNavMenu.classList.remove('hidden');
}
isMenuOpen = !isMenuOpen;
};
document.getElementById('mobileNavButton').onclick = () => menuToggle();
document.getElementById('mNB').onclick = () => menuToggle();
</script>
</header>
<main class="container mx-auto flex flex-col md:w-[80%]">
Expand Down
42 changes: 21 additions & 21 deletions src/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,28 +17,28 @@ description: "The website of Alex Westerman. Checkout the blog for very cool (ra
src="assets/pfp.webp"/>
</div>
<div class="mb-8 self-center">
<h1 class="text-6xl animated-gradient mx-auto bg-gradient-one delay-500 lg:mx-0">Software Engineer;</h1>
<h1 class="text-6xl animated-gradient mx-auto bg-gradient-two delay-1000 lg:mx-0">Power User;</h1>
<h1 class="text-6xl animated-gradient mx-auto bg-gradient-three lg:mx-0">Problem Solver;</h1>
<h1 class="text-3xl md:text-6xl animated-gradient mx-auto bg-gradient-one delay-500 lg:mx-0">Software Engineer;</h1>
<h1 class="text-3xl md:text-6xl animated-gradient mx-auto bg-gradient-two delay-1000 lg:mx-0">Power User;</h1>
<h1 class="text-3xl md:text-6xl animated-gradient mx-auto bg-gradient-three lg:mx-0">Problem Solver;</h1>
</div>
</div>
</div>
<div class="flex flex-row items-center gap-8">
<div class="mx-auto"></div>

<button title="Twitter" id="twitterBtn" class="p-1">{% include 'icons/twitter.njk'%}</button>
{%- set socialBtn="text-md shrink-0 animate-fade-in justify-center gap-2 space-x-2 rounded-md p-2 transition-all outline-none hover:bg-accent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50" %}
<button title="Twitter" id="twitterBtn" class="{{socialBtn}}">{% include 'icons/twitter.njk'%}</button>
<script>document.getElementById('twitterBtn').onclick = () => window.open("https://twitter.com/_FaceFTW")</script>

<button title="Bluesky" id="bskyBtn" class="p-1">{% include 'icons/bluesky.njk'%}</button>
<button title="Bluesky" id="bskyBtn" class="{{socialBtn}}">{% include 'icons/bluesky.njk'%}</button>
<script>document.getElementById('bskyBtn').onclick = () => window.open("https://bsky.app/profile/faceftw.dev")</script>

<button title="GitHub" id="ghBtn" class="p-1">{% include 'icons/github.njk'%}</button>
<button title="GitHub" id="ghBtn" class="{{socialBtn}}">{% include 'icons/github.njk'%}</button>
<script>document.getElementById('ghBtn').onclick = () => window.open("https://github.com/FaceFTW")</script>

<button title="Email" id="mailBtn" class="p-1">{% include 'icons/mail.njk'%}</button>
<button title="Email" id="mailBtn" class="{{socialBtn}}">{% include 'icons/mail.njk'%}</button>
<script>document.getElementById('mailBtn').onclick = () => window.open("mailto:alex@faceftw.dev")</script>

<button title="LinkedIn" id="linkedInBtn" class="p-1">{% include 'icons/linkedin.njk'%}</button>
<button title="LinkedIn" id="linkedInBtn" class="{{socialBtn}}">{% include 'icons/linkedin.njk'%}</button>
<script>document.getElementById('linkedInBtn').onclick = () => window.open("https://linkedin.com/in/faceftw")</script>

<div class="mx-auto"></div>
Expand Down Expand Up @@ -68,15 +68,14 @@ description: "The website of Alex Westerman. Checkout the blog for very cool (ra
</a>
{% endfor %}
</div>
<a href="/blog" class="inline-flex text-primary items-center">
{% include 'icons/rss.njk' %}<span class="pl-4 text-xl">More Blog Posts</span>
</a>
<button id="mbb" class="{{ buttonStyle }} **:text-primary" aria-label="More Blog Posts">
{% include 'icons/rss.njk' %}<span class="pl-4 text-xl">More Blog Posts</span>
</button>
<script>document.getElementById("mbb").onclick = () => window.location.assign("/blog")</script>
</section>
<section class="flex flex-col items-center">
<h1 class="mx-4 mb-4 text-5xl">Featured Projects</h1>

{% set badge_style = "inline-flex items-center justify-center font-medium rounded-md border px-2 py-0.5 text-xs w-fit whitespace-nowrap shrink-0 gap-1 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-[color,box-shadow] overflow-hidden border-transparent bg-primary text-primary-foreground" %}
{% set button_style = "inline-flex items-center justify-center font-medium gap-2 whitespace-nowrap rounded-md text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border shadow-xs hover:bg-accent hover:text-accent-foreground bg-input/30 border-input hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3" %}
{% for project in featuredProjects %}
<div
data-slot="card"
Expand All @@ -91,29 +90,29 @@ description: "The website of Alex Westerman. Checkout the blog for very cool (ra
<div data-slot="card-content" class="px-6">
<div class="space-x-1">
{% for projectTag in project.projectTags %}
<span class="{{ badge_style }}">{{ projectTag }}</span>
<span class="{{ badgeStyle }}">{{ projectTag }}</span>
{% endfor %}
</div>
</div>
<div data-slot="card-footer" class="flex-wrap items-center px-6 [.border-t]:pt-4 flex gap-4 mb-8">
{% for link in project.projectLinks %}
{% if link.linkType ==="github" %}

<button id="{{ link.linkType }}{{ project.projectId }}" class="{{ button_style }}" aria-label="GitHub Repository">
<button id="{{ link.linkType }}{{ project.projectId }}" class="{{ buttonStyle }}" aria-label="GitHub Repository">
{% include 'icons/code_xml.njk' %}<span>Source Code</span>
</button>
<script>document.getElementById("{{ link.linkType }}{{ project.projectId }}").onclick = () => window.open("{{ link.linkURL }}")</script>

{% elif link.linkType==="demo" %}

<button id="{{ link.linkType }}{{ project.projectId }}" class="{{ button_style }}" aria-label="Online Demo">
<button id="{{ link.linkType }}{{ project.projectId }}" class="{{ buttonStyle }}" aria-label="Online Demo">
{% include 'icons/app_window.njk' %}<span>Demo</span>
</button>
<script>document.getElementById("{{ link.linkType }}{{ project.projectId }}").onclick = () => window.open("{{ link.linkURL }}")</script>

{% elif link.linkType==="misc" %}

<button id="{{ link.linkType }}{{ project.projectId }}-{{ link.linkDesc | slugify }}" class="{{ button_style }}" aria-label="{{ link.linkDesc }}">
<button id="{{ link.linkType }}{{ project.projectId }}-{{ link.linkDesc | slugify }}" class="{{ buttonStyle }}" aria-label="{{ link.linkDesc }}">
{% include 'icons/link.njk' %}<span>{{ link.linkDesc }}</span>
</button>
<script>document.getElementById("{{ link.linkType }}{{ project.projectId }}-{{ link.linkDesc|slugify }}").onclick = () => window.open("{{ link.linkURL }}")</script>
Expand All @@ -124,8 +123,9 @@ description: "The website of Alex Westerman. Checkout the blog for very cool (ra
</div>
</div>
{% endfor %}
<a href="/projects/" class="inline-flex text-primary items-center">
{% include 'icons/code_xml.njk' %}<span class="pl-4 text-xl">More Projects</span>
</a>
<button id="mpb" class="{{ buttonStyle }} **:text-primary" aria-label="More Projects">
{% include 'icons/code_xml.njk' %}<span class="pl-4 text-xl">More Projects</span>
</button>
<script>document.getElementById("mpb").onclick = () => window.location.assign("/projects")</script>
</section>
</div>
10 changes: 4 additions & 6 deletions src/projects.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ layout: 'layouts/base.njk'
description: "List of projects created by Alex Westerman. Some are open source! Click the link and check them out!"
---

{% set badge_style = "inline-flex items-center justify-center font-medium rounded-md border px-2 py-0.5 text-xs w-fit whitespace-nowrap shrink-0 gap-1 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-[color,box-shadow] overflow-hidden border-transparent bg-primary text-primary-foreground" %}
{% set button_style = "inline-flex items-center justify-center font-medium gap-2 whitespace-nowrap rounded-md text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] border shadow-xs hover:bg-accent hover:text-accent-foreground bg-input/30 border-input hover:bg-input/50 h-9 px-4 py-2 has-[>svg]:px-3" %}
<h1 class="text-2xl">Projects</h1>
<div class="justify-content m-4 flex items-center">
<div class="grid grow grid-cols-1 gap-4 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
Expand All @@ -23,7 +21,7 @@ description: "List of projects created by Alex Westerman. Some are open source!
<div data-slot="card-content" class="px-6">
<div class="mb-4 space-x-1">
{% for projectTag in project.projectTags %}
<span class="{{ badge_style }}">{{ projectTag }}</span>
<span class="{{ badgeStyle }}">{{ projectTag }}</span>
{% endfor %}
</div>
<img
Expand All @@ -39,21 +37,21 @@ description: "List of projects created by Alex Westerman. Some are open source!
{% for link in project.projectLinks %}
{% if link.linkType ==="github" %}

<button id="{{ link.linkType }}{{ project.projectId }}" class="{{ button_style }}" aria-label="GitHub Repository">
<button id="{{ link.linkType }}{{ project.projectId }}" class="{{ buttonStyle }}" aria-label="GitHub Repository">
{% include 'icons/code_xml.njk' %}<span>Source Code</span>
</button>
<script>document.getElementById("{{ link.linkType }}{{ project.projectId }}").onclick = () => window.open("{{ link.linkURL }}")</script>

{% elif link.linkType==="demo" %}

<button id="{{ link.linkType }}{{ project.projectId }}" class="{{ button_style }}" aria-label="Online Demo">
<button id="{{ link.linkType }}{{ project.projectId }}" class="{{ buttonStyle }}" aria-label="Online Demo">
{% include 'icons/app_window.njk' %}<span>Demo</span>
</button>
<script>document.getElementById("{{ link.linkType }}{{ project.projectId }}").onclick = () => window.open("{{ link.linkURL }}")</script>

{% elif link.linkType==="misc" %}

<button id="{{ link.linkType }}{{ project.projectId }}-{{ link.linkDesc | slugify }}" class="{{ button_style }}" aria-label="{{ link.linkDesc }}">
<button id="{{ link.linkType }}{{ project.projectId }}-{{ link.linkDesc | slugify }}" class="{{ buttonStyle }}" aria-label="{{ link.linkDesc }}">
{% include 'icons/link.njk' %}<span>{{ link.linkDesc }}</span>
</button>
<script>document.getElementById("{{ link.linkType }}{{ project.projectId }}-{{ link.linkDesc|slugify }}").onclick = () => window.open("{{ link.linkURL }}")</script>
Expand Down
3 changes: 1 addition & 2 deletions src/resume.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@ title: Alex Westerman's Resume
layout: 'layouts/base.njk'
description: "Online (and most updated version) of Alex Westerman's Resume. Look here if you want to offer me a Software Engineer position!"
---
{% set badge_style = "inline-flex items-center justify-center font-medium rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 gap-1 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-[color,box-shadow] overflow-hidden border-transparent bg-primary text-primary-foreground" %}
<div class="m-4">
<h4 class="text-4xl underline">Skills</h4>
<div class="mb-4 space-x-1 space-y-2 ">
{% for skill in resume.skills %}
<span class="{{badge_style}}{% if skill.years < 2 %} text-md {% elif skill.years < 3 %} text-lg {%elif skill.years < 4 %} text-xl {% elif skill.years < 5 %} text-2xl {% elif skill.years < 6 %} text-3xl {% else %} text-4xl {% endif %}">
<span class="{{badgeStyle}}{% if skill.years < 2 %} text-md {% elif skill.years < 3 %} text-lg {%elif skill.years < 4 %} text-xl {% elif skill.years < 5 %} text-2xl {% elif skill.years < 6 %} text-3xl {% else %} text-4xl {% endif %}">
{{ skill.name }}
</span>
{% endfor %}
Expand Down