Brosef/Website
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Added tabs

Browse Source
This commit is contained in:
Brosef
2026-02-08 01:32:24 +00:00
parent b188e5143b
commit e0060bd1fe
6 changed files with 115 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
icons/house.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house-icon lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 401 B

1
icons/image.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image-icon lucide-image"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 371 B

1
icons/spanner.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench-icon lucide-wrench"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 440 B

17
index.html
View File

@ -12,11 +12,24 @@
<body>
<header><div>
<button id="button-home" onclick="switchTab(this);"><img src="/icons/house.svg"> Home</button>
<button id="button-pics" onclick="switchTab(this);"><img src="/icons/image.svg"> Pictures</button>
<button id="button-projects" onclick="switchTab(this);"><img src="/icons/spanner.svg"> Cool things I've done</button>
</div></header>
<main>
<h1 id="helloText"><noscript>Hewwo!</noscript></h1>
<h2><span id="imaText"><noscript>I'm a <span class="textHighlight">dumbass</span></noscript></span>.</h2>
<article id="tab-home" default>
<h1 id="helloText"><noscript>Hewwo!</noscript></h1>
<h2><span id="imaText"><noscript>I'm a <span class="textHighlight">dumbass</span></noscript></span>.</h2>
</article>
<article id="tab-pics">
</article>
<article id="tab-projects">
</article>
</main>
<footer>

57
main.js
View File

@ -28,7 +28,64 @@ function pickRandom(array) {
return array[Maths.floor(Maths.random() * array.length)];
}
function switchTab(tabID, playAnimation=true) {
// Get tab ID from button
if (typeof(tabID) == 'object') {
tabID = tabID.id.split('button-')[1];
}
let tabs = document.getElementsByTagName('main')[0].children;
let tab = document.getElementById(`tab-${tabID}`);
let buttons = document.getElementsByTagName('header')[0].getElementsByTagName('button');
let button = document.getElementById(`button-${tabID}`)
// Error checking
if (tab == undefined) {
console.error(`Error switching tab: Tab ID "${tabID}" not found.`);
return;
}
// Hide all tabs
for (let i = 0; i < tabs.length; i++) {
if (tabs[i] == tab) { continue; }
tabs[i].classList.add('hiddenTab');
if (playAnimation) {
setTimeout(() => { tabs[i].style.display = 'none'; }, 500);
} else {
tabs[i].style.display = 'none';
}
if (button != null) {
button.classList.remove('buttonHighlight');
}
}
// Un-highlight all buttons
for (let i = 0; i < buttons.length; i++) {
buttons[i].classList.remove('buttonHighlight');
}
// Show selected tab
if (playAnimation) {
setTimeout(() => { tab.style.display = 'unset'; }, 500);
} else {
tab.style.display = 'unset';
}
// Required for animation to play
let intervalID = setInterval(() => {
if (tab.checkVisibility()) {
tab.classList.remove('hiddenTab');
clearInterval(intervalID);
}
}, 10);
// Highlight button
button.classList.add('buttonHighlight');
}
window.addEventListener('load', (e) => {
switchTab('home', false);
// ----- Hellos section -----
const helloEl = document.getElementById('helloText');
helloEl.innerText = pickRandom(hellos);

41
styles.css
View File

@ -4,8 +4,10 @@
--footer-colour: #00000031;
--text-colour: #f6f7eb;
--text-accent-colour: #e94f37;
--button-border-colour: var(--text-accent-colour);
--button-border-highlight-colour: #f7b3a9;
--header-size: 100px;
--header-size: 50px;
}
@ -40,6 +42,11 @@ header {
header > div {
width: 100vw;
height: var(--header-size);
backdrop-filter: blur(10px);
}
header > div > * {
height: var(--header-size);
}
main {
@ -49,6 +56,16 @@ main {
background-color: var(--main-colour);
}
main > article {
display: unset;
transition: filter 0.5s, opacity 0.5s;
}
.hiddenTab {
filter: blur(10px);
opacity: 0;
}
footer {
flex: 0 1 auto;
display: flex;
@ -68,6 +85,28 @@ footer > div > * {
}
button {
display: inline-flex;
padding: 5px;
border: none;
border-bottom: 2px solid var(--text-accent-colour);
background-color: #212425;
color: var(--text-colour);
align-items: center;
cursor: pointer;
transition: border-bottom-color 0.5s;
}
button > img {
filter: invert();
margin-right: 5px;
}
button:hover, .buttonHighlight {
border-bottom-color: var(--button-border-highlight-colour);
}
.textHighlight {
color: var(--text-accent-colour);