Skip to content

Max updates refactor layout/header #511

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
BaseMax merged 8 commits into from
Jun 6, 2026
Merged

Max updates refactor layout/header #511

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c4e0b35
Create layout directory
BaseMax Jun 6, 2026
d1e6bd4
Change to integrate into base layout
BaseMax Jun 6, 2026
b1a1af1
Update bio and fix AI feedback
BaseMax Jun 6, 2026
1485c20
Copy email
BaseMax Jun 6, 2026
32fde34
update base.njk
BaseMax Jun 6, 2026
2e26ec9
Fix AI feedbacks
BaseMax Jun 6, 2026
9f51855
update to fix ai issues
BaseMax Jun 6, 2026
ba45217
update src and fix some bugs
BaseMax Jun 6, 2026
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
232 changes: 99 additions & 133 deletions src/_includes/bio.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,155 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% set seoBioDescription = bio
and (bio
| replace('\r', ' ')
| replace('\n', ' ')
| replace('\t', ' ')
| replace('"', "'")
| trim
| truncate(160))
or "" %}
{% set seo = {
title: name + " | " + role + " | NextCommunity",
description: (seoBioDescription or ("Explore " + name + "'s developer profile, skills, and social links on NextCommunity.")),
keywords: "developer profile, " + name + ", " + role + ", github profile, software developer portfolio",
type: "profile",
image: site.defaultImage,
person: {
name: name,
role: role,
github: github,
linkedin: linkedin
}
} %}
{% include "seo-meta.njk" %}
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body class="min-h-screen scroll-smooth bg-[var(--bg-page)] text-[var(--text-main)] transition-colors duration-300">
---
layout: layouts/base.njk
---
<main id="profile-data" data-name="{{ name }}" data-skills="{{ languages }}" data-email="{{ email }}" class="max-w-5xl mx-auto px-4 py-12">
Comment thread
BaseMax marked this conversation as resolved.
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

{% include "github-ribbon.njk" %}
<div class="lg:col-span-1 space-y-6">
<div class="user-card p-8 rounded-3xl sticky top-24">
<div class="mb-6">
<h1 class="text-3xl font-black leading-tight">{{ name }}</h1>
<p class="text-accent font-bold mt-1">{{ role }}</p>
</div>

{% include "header.njk" %}
<div class="space-y-4 text-sm border-t border-[var(--border-color)] pt-6">
{% if location or country %}
<div class="flex items-center gap-3">
<span class="text-lg">📍</span>
<span class="text-[var(--text-muted)]">{{ location }}{% if location and country %}, {% endif %}{{ country }}</span>
</div>
{% endif %}

<main class="max-w-5xl mx-auto px-4 py-12">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
{% if email %}
<div class="flex items-center gap-3 group cursor-pointer copy-email-btn" data-email="{{ email }}">
<span class="text-lg">✉️</span>
<span class="text-[var(--text-muted)] group-hover:text-accent truncate">{{ email }}</span>
<span class="hidden group-hover:inline text-[10px] bg-accent text-white px-2 py-0.5 rounded">Copy</span>
</div>
{% endif %}
Comment thread
BaseMax marked this conversation as resolved.

<div class="lg:col-span-1 space-y-6">
<div class="user-card p-8 rounded-3xl sticky top-24">
<div class="mb-6">
<h1 class="text-3xl font-black leading-tight">{{ name }}</h1>
<p class="text-accent font-bold mt-1">{{ role }}</p>
{% if website %}
<div class="flex items-center gap-3">
<span class="text-lg">🔗</span>
<a href="{{ website }}" target="_blank" rel="noopener noreferrer" class="text-accent font-bold hover:underline truncate">{{ website | replace("https://", "") }}</a>
Comment thread
BaseMax marked this conversation as resolved.
</div>
{% endif %}
</div>

<div class="space-y-4 text-sm border-t border-[var(--border-color)] pt-6">
{% if location or country %}
<div class="flex items-center gap-3">
<span class="text-lg">📍</span>
<span class="text-[var(--text-muted)]">{{ location }}{% if location and country %}, {% endif %}{{ country }}</span>
</div>
<div class="mt-8 pt-8 border-t border-[var(--border-color)]">
<h3 class="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] mb-4">Connect</h3>
<div class="grid grid-cols-2 gap-3">
{% if github %}
<a href="https://github.com/{{ github }}" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
<span class="font-bold text-xs">GitHub</span>
</a>
{% endif %}

{% if email %}
<div class="flex items-center gap-3 group cursor-pointer" onclick="copyToClipboard('{{ email }}', this)">
<span class="text-lg">✉️</span>
<span class="text-[var(--text-muted)] group-hover:text-accent truncate">{{ email }}</span>
<span class="hidden group-hover:inline text-[10px] bg-accent text-white px-2 py-0.5 rounded">Copy</span>
</div>
{% if linkedin %}
<a href="{{ linkedin }}" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
<span class="font-bold text-xs text-[#0077b5]">LinkedIn</span>
</a>
{% endif %}

{% if website %}
<div class="flex items-center gap-3">
<span class="text-lg">🔗</span>
<a href="{{ website }}" target="_blank" class="text-accent font-bold hover:underline truncate">{{ website | replace("https://", "") }}</a>
</div>
{% if twitter %}
<a href="{{ twitter }}" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
<span class="font-bold text-xs">Twitter</span>
</a>
{% endif %}
{% if instagram %}
<a href="{{ instagram }}" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
<span class="font-bold text-xs text-pink-500">Instagram</span>
</a>
{% endif %}
</div>

<div class="mt-8 pt-8 border-t border-[var(--border-color)]">
<h3 class="text-[10px] font-black uppercase tracking-widest text-[var(--text-muted)] mb-4">Connect</h3>
<div class="grid grid-cols-2 gap-3">
{% if github %}
<a href="https://github.com/{{ github }}" target="_blank" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
<span class="font-bold text-xs">GitHub</span>
</a>
{% endif %}
{% if linkedin %}
<a href="{{ linkedin }}" target="_blank" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
<span class="font-bold text-xs text-[#0077b5]">LinkedIn</span>
</a>
{% endif %}
{% if twitter %}
<a href="{{ twitter }}" target="_blank" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
<span class="font-bold text-xs">Twitter</span>
</a>
{% endif %}
{% if instagram %}
<a href="{{ instagram }}" target="_blank" class="flex items-center justify-center p-3 rounded-xl bg-[var(--bg-footer)] border border-[var(--border-color)] hover:border-accent transition-colors">
<span class="font-bold text-xs text-pink-500">Instagram</span>
</a>
{% endif %}
</div>
</div>
Comment thread
BaseMax marked this conversation as resolved.
</div>
</div>
</div>

<div class="lg:col-span-2 space-y-8">
{% if bio %}
<div class="user-card p-8 sm:p-12 rounded-3xl">
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
<span class="w-8 h-[2px] bg-accent" aria-hidden="true"></span> Professional Bio
</h2>
<div class="text-[var(--text-main)] text-lg leading-relaxed whitespace-pre-line">
{{ bio }}
</div>
<div class="lg:col-span-2 space-y-8">
{% if bio %}
<div class="user-card p-8 sm:p-12 rounded-3xl">
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
<span class="w-8 h-[2px] bg-accent" aria-hidden="true"></span> Professional Bio
</h2>
<div class="text-[var(--text-main)] text-lg leading-relaxed whitespace-pre-line">
{{ bio }}
</div>
{% endif %}
</div>
{% endif %}

{% if languages is defined and languages is not null %}
<div class="user-card p-8 sm:p-12 rounded-3xl">
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
<span class="w-8 h-[2px] bg-accent" aria-hidden="true"></span> Technologies
</h2>
<div class="flex flex-wrap gap-3">
{% set skills = languages.split(' ') %}
{% include "skills-list.njk" %}
</div>
{% if languages is defined and languages is not null %}
<div class="user-card p-8 sm:p-12 rounded-3xl">
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
<span class="w-8 h-[2px] bg-accent" aria-hidden="true"></span> Technologies
</h2>
<div class="flex flex-wrap gap-3">
{% set skills = languages.split(' ') %}
{% include "skills-list.njk" %}
</div>
{% endif %}
</div>
{% endif %}

<div class="user-card p-8 sm:p-12 rounded-3xl">
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
<span class="w-8 h-[2px] bg-accent" aria-hidden="true"></span> Mini-Game
</h2>
<p class="text-sm text-[var(--text-muted)] mb-4">Catch the skill tiles before they fall! Collect enough to win XP.</p>
<button
onclick="CodeBreaker.launch(window.PROFILE_SKILLS, window.PROFILE_NAME)"
class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-accent text-white font-black uppercase tracking-wider text-sm hover:opacity-90 active:scale-95 transition-all shadow-lg shadow-accent/30">
⌨️ Play Code Breaker
</button>
</div>
<div class="user-card p-8 sm:p-12 rounded-3xl">
<h2 class="text-xs font-black uppercase tracking-[0.3em] text-[var(--text-muted)] mb-6 flex items-center gap-2">
<span class="w-8 h-[2px] bg-accent" aria-hidden="true"></span> Mini-Game
</h2>
<p class="text-sm text-[var(--text-muted)] mb-4">Catch the skill tiles before they fall! Collect enough to win XP.</p>
<button
onclick="CodeBreaker.launch(window.PROFILE_SKILLS, window.PROFILE_NAME)"
class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-accent text-white font-black uppercase tracking-wider text-sm hover:opacity-90 active:scale-95 transition-all shadow-lg shadow-accent/30">
⌨️ Play Code Breaker
</button>
</div>
</div>
</main>
</div>
</main>

{% include "footer.njk" %}
<script>
function copyToClipboard(text, el) {
navigator.clipboard.writeText(text);
const span = el.querySelector('span:last-child');
span.innerText = 'Copied!';
setTimeout(() => span.innerText = 'Copy', 2000);
}
Comment thread
BaseMax marked this conversation as resolved.
Comment thread
BaseMax marked this conversation as resolved.

<script>
// Specific helper for the bio page email copy
function copyToClipboard(text, el) {
navigator.clipboard.writeText(text);
const span = el.querySelector('span:last-child');
span.innerText = 'Copied!';
setTimeout(() => span.innerText = 'Copy', 2000);
}
document.querySelector('.copy-email-btn')?.addEventListener('click', function() {
copyToClipboard(this.getAttribute('data-email'), this);
});

// Pass profile data to game modules
window.PROFILE_NAME = "{{ name }}";
window.PROFILE_SKILLS = "{{ languages | default('') }}".trim().split(/\s+/).filter(Boolean);
</script>
</body>
</html>
// Pass profile data to game modules
const profileData = document.getElementById('profile-data');
window.PROFILE_NAME = profileData ? profileData.dataset.name : "";
window.PROFILE_SKILLS = profileData && profileData.dataset.skills ? profileData.dataset.skills.trim().split(/\s+/).filter(Boolean) : [];
</script>
Comment thread
BaseMax marked this conversation as resolved.
2 changes: 1 addition & 1 deletion src/_includes/footer-details.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@

<a href="{{ build.repoUrl }}/commit/{{ build.hash }}"
target="_blank"
rel="noopener"
rel="noopener noreferrer"
class="px-3 py-1.5 border-l border-[var(--border-color)] bg-[var(--bg-footer)] hover:text-accent transition-colors"
title="View Commit on GitHub">
<span>↗</span>
Expand Down
43 changes: 43 additions & 0 deletions src/_includes/layouts/base.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% set seo = seo or {} %}
{% if not seo.title and name %}
{% set seoBioDescription = (bio or "")
| replace('\r', ' ')
| replace('\n', ' ')
| replace('\t', ' ')
| replace('"', "'")
| trim
| truncate(160) %}
Comment thread
BaseMax marked this conversation as resolved.
{% set seo = {
title: (name or '') + " | " + (role or '') + " | NextCommunity",
description: (seoBioDescription or ("Explore " + (name or '') + "'s developer profile, skills, and social links on NextCommunity.")),
keywords: "developer profile, " + (name or '') + ", " + (role or '') + ", github profile, software developer portfolio",
type: "profile",
image: site.defaultImage,
person: {
name: name,
role: role,
github: github,
linkedin: linkedin
}
} %}
Comment thread
BaseMax marked this conversation as resolved.
Comment thread
BaseMax marked this conversation as resolved.
{% endif %}
{% include "seo-meta.njk" %}
<link rel="stylesheet" href="/assets/css/tailwind.css">
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body class="min-h-screen scroll-smooth bg-[var(--bg-page)] text-[var(--text-main)] transition-colors duration-300">

{% include "github-ribbon.njk" %}

{% include "header.njk" %}

{{ content | safe }}

{% include "footer.njk" %}
</body>
</html>
Loading
Loading