admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(UI): Light / dark mode themes and toggle utility added.

Browse Source
This commit is contained in:
teddy
2025-03-05 16:33:32 +00:00
parent 3912506f24
commit bd58bd82ed
6 changed files with 337 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
content/images/dark-mode-icon.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

28
content/images/light-mode-icon.svg Normal file
View File

@@ -0,0 +1,28 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- Defaults to black background but can be styled with CSS -->
<rect width="24" height="24" fill="black" style="fill: var(--page-background-colour, black);" />
<!-- Sun icon with transparent fill to reveal what's behind the SVG -->
<mask id="sun-mask">
<!-- The white parts of this mask will be the visible parts -->
<rect width="24" height="24" fill="white"/>
<!-- Sun circle -->
<circle cx="12" cy="12" r="4" fill="black"/>
<!-- Sun rays -->
<rect x="11" y="4" width="2" height="3" fill="black"/>
<rect x="11" y="17" width="2" height="3" fill="black"/>
<rect x="4" y="11" width="3" height="2" fill="black"/>
<rect x="17" y="11" width="3" height="2" fill="black"/>
<!-- Diagonal rays -->
<rect x="6.1" y="6.1" width="2" height="3" transform="rotate(-45 7.1 7.6)" fill="black"/>
<rect x="15.9" y="15.9" width="2" height="3" transform="rotate(-45 16.9 17.4)" fill="black"/>
<rect x="15.9" y="6.1" width="2" height="3" transform="rotate(45 16.9 7.6)" fill="black"/>
<rect x="6.1" y="15.9" width="2" height="3" transform="rotate(45 7.1 17.4)" fill="black"/>
</mask>
<!-- This is the transparent part that reveals what's behind the SVG -->
<rect width="24" height="24" fill="transparent" mask="url(#sun-mask)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
content/images/light-mode-icon.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

18
index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-theme="light" data-hash="home">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -16,7 +16,7 @@
GitHub Contributions Calendar (light mode default)
- Statistics under calendar do not work.
-->
<link rel="stylesheet" href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css" />
<link rel="stylesheet" href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css" />
<!--
GitHub Contributions Calendar (dark mode default)
- Statistics under calendar do not work.
@@ -38,6 +38,14 @@
<li><a href="#experience">Experience</a></li>
<li><a href="#contact">Contact</a></li>
<li><div id="google_translate_element"></div></li>
<li>
<!-- <div id="theme-switch"></div> -->
<button class="theme-switch" aria-label="Toggle Dark Mode">
<img src="content/images/dark-mode-icon.webp" alt="Dark Mode" class="theme-icon dark-mode-icon">
<!-- Added with JavaScript
<img src="content/images/light-mode-icon.webp" alt="Light Mode" class="theme-icon light-mode-icon"> -->
</button>
</li>
</ul>
</nav>
@@ -248,12 +256,15 @@
<script>
// Basic implementation
// e - statistics are all 0
// GitHubCalendar(".github-calendar", "Teddy-1024");
GitHubCalendar(".github-calendar", "Teddy-1024");
// Or with responsive option enabled:
// e - statistics are all 0
// GitHubCalendar(".github-calendar", "Teddy-1024", { responsive: true });
/*
// Or with proxy option enabled:
// e - statistics are all 0
GitHubCalendar(".github-calendar", "Teddy-1024", {
responsive: true,
proxy: function(username) {
@@ -261,6 +272,7 @@
.then(response => response.text());
}
});
*/
</script>
<!--
GitHub Contributions Calendar (dark mode default)

155
scripts/scripts.js
View File

@@ -1,16 +1,60 @@
var activeFlag = 'active';
var darkThemeFlag = 'dark';
var darkThemeIconFlag = 'dark-mode-icon';
var hashAttribute = 'data-hash';
var homePageHash = 'home';
var lightThemeFlag = 'light';
var lightThemeIconFlag = 'light-mode-icon';
var themeAttribute = 'data-theme';
var themeFlag = 'theme';
var themeIconFlag = 'theme-icon';
var themeSwitchFlag = 'theme-switch';
function hookupPage() {
console.log("Hooking up home page...");
hookupPageLocalStorage();
hookupNav();
hookupThemeSwitch();
hookupScroll();
// hookupProjectThumbnails();
hookupProjectDetailButtons();
}
function hookupPageLocalStorage() {
let pageLocalStorage = getPageLocalStorage();
// Colour theme
let theme = pageLocalStorage[themeFlag];
if (!theme) {
let prefersDark = window.matchMedia(`(prefers-color-scheme: ${darkThemeFlag})`).matches;
theme = prefersDark ? darkThemeFlag : lightThemeFlag;
}
setPageTheme(theme);
}
function getPageLocalStorage() {
let pageHash = getPageHash();
let pageLocalStorage = localStorage.getItem(pageHash);
let decodedPageLocalStorage;
if (pageLocalStorage) {
decodedPageLocalStorage = JSON.parse(pageLocalStorage);
}
else {
decodedPageLocalStorage = {};
}
return decodedPageLocalStorage;
}
function getPageHash() {
return document.documentElement.getAttribute(hashAttribute) || homePageHash;
}
function setPageTheme(theme) {
document.documentElement.setAttribute(themeAttribute, theme);
let pageLocalStorage = getPageLocalStorage();
pageLocalStorage[themeFlag] = theme;
setPageLocalStorage(pageLocalStorage);
}
function setPageLocalStorage(pageLocalStorage) {
let pageHash = getPageHash();
localStorage.setItem(pageHash, JSON.stringify(pageLocalStorage));
}
function hookupNav() {
console.log("Hooking up nav...");
document.querySelectorAll('nav a').forEach(anchor => {
console.log("Hooking up nav anchor...");
anchor.addEventListener('click', function(e) {
e.preventDefault();
const section = document.querySelector(this.getAttribute('href'));
@@ -20,8 +64,104 @@ function hookupNav() {
});
});
}
function hookupThemeSwitch() {
makeLightThemeIcon();
/*
let themeSwitch = document.querySelector('#' + themeSwitchId);
themeSwitch.addEventListener('click', function() {
let theme = document.documentElement.getAttribute(themeAttribute);
let newTheme = theme === darkThemeFlag ? lightThemeFlag : darkThemeFlag;
setPageTheme(newTheme);
});
*/
let themeSwitch = getThemeSwitchButton();
themeSwitch.addEventListener('click', function() {
let theme = getPageTheme();
let newTheme = theme === darkThemeFlag ? lightThemeFlag : darkThemeFlag;
setPageTheme(newTheme);
});
}
function makeLightThemeIcon() {
let themeSwitch = getThemeSwitchButton();
const backgroundRadius = 500;
const sunRadius = 250;
// const sunColour = "var(--text-colour)"; // "var(--text-background-colour)";
// const backgroundColour = "var(--secondary-colour)";
// Create the SVG element
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svg.setAttribute("viewBox", "0 0 1000 1000");
svg.classList.add(themeIconFlag);
svg.classList.add(lightThemeIconFlag);
// Create the background circle
const background = document.createElementNS("http://www.w3.org/2000/svg", "circle");
background.setAttribute("cx", backgroundRadius);
background.setAttribute("cy", backgroundRadius);
background.setAttribute("r", backgroundRadius);
// background.setAttribute("fill", backgroundColour);
background.setAttribute("class", "background");
// Create the sun body
const sunBody = document.createElementNS("http://www.w3.org/2000/svg", "circle");
sunBody.setAttribute("cx", backgroundRadius);
sunBody.setAttribute("cy", backgroundRadius);
sunBody.setAttribute("r", sunRadius);
// sunBody.setAttribute("fill", sunColour);
sunBody.setAttribute("class", "sun");
// Add background and sun body to the SVG
svg.appendChild(background);
svg.appendChild(sunBody);
// Parameters for rays
const centerX = 500;
const centerY = 500;
const numberOfRays = 8;
const rayRadialSpacing = 75;
const innerRadius = sunRadius + rayRadialSpacing; // Where the sun body ends
const outerRadius = sunRadius + rayRadialSpacing + (backgroundRadius - sunRadius - rayRadialSpacing) * 0.5; // Where the rays extend to
const strokeWidth = 75;
// Create rays using a loop and trigonometry
for (let i = 0; i < numberOfRays; i++) {
// Calculate angle in radians
const angle = (i * 2 * Math.PI) / numberOfRays;
// Calculate start point (inner circle)
const startX = centerX + innerRadius * Math.cos(angle);
const startY = centerY + innerRadius * Math.sin(angle);
// Calculate end point (outer radius)
const endX = centerX + outerRadius * Math.cos(angle);
const endY = centerY + outerRadius * Math.sin(angle);
// Create the line element
const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
line.setAttribute("x1", startX);
line.setAttribute("y1", startY);
line.setAttribute("x2", endX);
line.setAttribute("y2", endY);
// line.setAttribute("stroke", sunColour);
line.setAttribute("class", "sun");
line.setAttribute("stroke-width", strokeWidth);
line.setAttribute("stroke-linecap", "round");
// Append the line to the SVG
svg.appendChild(line);
}
// Append the completed SVG to the container
themeSwitch.appendChild(svg);
}
function getThemeSwitchButton() {
return document.querySelector('button.' + themeSwitchFlag);
}
function getPageTheme() {
return document.documentElement.getAttribute(themeAttribute);
}
function hookupScroll() {
console.log("Hooking up scroll...");
window.addEventListener('scroll', function() {
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('nav a');
@@ -45,12 +185,9 @@ function hookupScroll() {
}
/*
function hookupProjectThumbnails() {
console.log("Hooking up project thumbnails...");
let demoButtonSelector = '.project-links .button';
document.querySelectorAll(demoButtonSelector).forEach(demoButton => {
console.log("Hooking up project thumbnail...");
let projectName = getProjectNameFromDemoButton(demoButton);
console.log({projectName});
demoButton.addEventListener('mouseover', function() {
let projectName = getProjectNameFromDemoButton(this);
let thumbnailContainer = getProjectThumbnailContainer(projectName);
@@ -65,20 +202,16 @@ function hookupProjectThumbnails() {
}
function getProjectNameFromDemoButton(demoButton) {
let projectName = demoButton.getAttribute('data-project');
console.log({projectName});
return projectName;
}
function getProjectThumbnailContainer(projectName) {
let container = document.querySelector(`div.project-thumbnail[data-project="${projectName}"]`);
console.log({container});
return container;
}
*/
function hookupProjectDetailButtons() {
console.log("Hooking up project detail buttons...");
let detailButtonSelector = '.project-detail-button';
document.querySelectorAll(detailButtonSelector).forEach(detailButton => {
console.log("Hooking up project detail button...");
detailButton.addEventListener('click', function() {
let projectDetailContainer = this.parentElement.querySelector('.project-detail-container');
let wasActive = projectDetailContainer.classList.contains(activeFlag);

187
styles/styles.css
View File

@@ -1,29 +1,60 @@
/* Modern CSS reset and variables */
:root {
/* Claude dark blue / grey theme
--text-color: #1a202c;
--primary-color: #2d3748;
--secondary-color: #4a5568;
--accent-color: #4299e1;
--background-color: #f7fafc;
*/
/* Claude dark blue / grey theme */
--text-colour: #1a202c;
--primary-colour: #2d3748;
--secondary-colour: #4a5568;
--accent-colour: #4299e1;
--page-background-colour: #f7fafc;
--text-background-colour: white;
}
:root[data-theme="purple"] {
/* Purple theme
- https://coolors.co/palette/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff
--text-color: #10002B; /* very dark * /
--primary-color: #240046; /* medium dark * /
--secondary-color: #3C096C; /* dark * /
--accent-color: #C77DFF; /* light * /
--background-color: #E0AAFF; /* very light * /
*/
--text-colour: #10002B; /* very dark */
--primary-colour: #240046; /* medium dark */
--secondary-colour: #3C096C; /* dark */
--accent-colour: #C77DFF; /* light */
--page-background-colour: #E0AAFF; /* very light */
--text-background-colour: white;
}
:root[data-theme="red"],
:root[data-theme="light"] {
/* Red theme
- https://coolors.co/palette/2b0000-4f0000-740000-980000-b50000-d30000-eb1d1d-f50f0f-ff0000
- https://coolors.co/palette/9c191b-ac1c1e-bd1f21-d02224-dd2c2f-e35053-e66063-ec8385-f1a7a9-f6cacc
*/
--text-color: #2B0000;
--primary-color: #740000;
--secondary-color: #B50000;
--accent-color: #E35053;
--background-color: #F6CACC;
--text-colour: #2B0000;
--primary-colour: #740000;
--secondary-colour: #B50000;
--accent-colour: #E35053;
--page-background-colour: #F6CACC;
--text-background-colour: white;
}
:root[data-theme="dark"] {
/*
--text-colour: #E0E0E0;
--primary-colour: #BB86FC;
--secondary-colour: #03DAC6;
--accent-colour: #FF4081;
--page-background-colour: #121212;
--text-background-colour: black;
*/
/*
--text-colour: #E0E0E0; /* Light * /
--primary-colour: #740000; /* Dark * /
--secondary-colour: #B50000; /* Medium * /
--accent-colour: #FF4081; /* Light-medium * /
--page-background-colour: #121212; /* Dark * /
--text-background-colour: black; /* Black * /
*/
--text-colour: #E0E0E0; /* Light Gray */
--primary-colour: #980000; /* Slightly lighter Dark Red */
--secondary-colour: #D30000; /* Slightly lighter Medium Red */
--accent-colour: #FF4081; /* Pink */
--page-background-colour: #121212; /* Dark Gray */
--text-background-colour: black; /* Dark Red */
}
* {
@@ -35,24 +66,24 @@
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--background-color);
color: var(--text-colour);
background-color: var(--page-background-colour);
}
/* Header styles */
header {
background-color: var(--primary-color);
color: white;
background-color: var(--primary-colour);
color: var(--text-background-colour);
padding: 2rem 1rem;
text-align: center;
}
header h1 {
color: white;
color: var(--text-background-colour);
}
nav {
background-color: var(--secondary-color);
background-color: var(--secondary-colour);
padding: 1rem;
position: sticky;
top: 0;
@@ -67,14 +98,14 @@ nav ul {
}
nav a {
color: white;
color: var(--text-background-colour);
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
nav a:hover {
color: var(--accent-color);
color: var(--accent-colour);
}
/* Google Translate styles
@@ -92,6 +123,83 @@ body {
top: 0px !important;
}
/* Toggle light mode / dark mode button */
.theme-switch {
background: none;
border: none;
cursor: pointer;
width: 5vh;
height: 5vh;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-top: auto;
border-radius: 2.5vh;
}
.theme-switch:hover {
background-color: var(--primary-colour);
}
.theme-switch img.theme-icon,
.theme-switch svg.theme-icon {
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 1s ease, transform 1s ease;
position: absolute;
margin-top: auto;
}
img.theme-icon.dark-mode-icon {
top: 0vh;
left: -0.1vh;
}
svg.theme-icon.light-mode-icon {
width: 4vh;
height: 4vh;
top: 0.55vh;
left: 0.45vh;
}
svg.theme-icon.light-mode-icon .background {
fill: var(--secondary-colour);
}
.theme-switch:hover svg.theme-icon.light-mode-icon .background {
fill: var(--primary-colour);
}
svg.theme-icon.light-mode-icon .sun {
fill: var(--text-colour);
stroke: var(--text-colour);
}
/*
svg.theme-icon {
width: 2vh;
height: 2vh;
}
*/
/* Hide the icon that doesn't match the current theme */
[data-theme="light"] .theme-switch .dark-mode-icon {
opacity: 1;
display: block;
transform: rotate(0deg);
}
[data-theme="light"] .theme-switch .light-mode-icon {
opacity: 0;
display: none;
transform: rotate(90deg);
}
[data-theme="dark"] .theme-switch .dark-mode-icon {
opacity: 0;
display: none;
transform: rotate(-90deg);
}
[data-theme="dark"] .theme-switch .light-mode-icon {
opacity: 1;
display: block;
transform: rotate(0deg);
}
/* Main content styles */
main {
max-width: 1200px;
@@ -104,7 +212,7 @@ section {
}
h1, h2, h3 {
color: var(--primary-color);
color: var(--primary-colour);
margin-bottom: 1rem;
}
@@ -119,7 +227,7 @@ ul, li {
}
.expertise-card {
background: white;
background: var(--text-background-colour);
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -137,7 +245,7 @@ ul, li {
.project-card-gridslot {
}
.project-card {
background: white;
background: var(--text-background-colour);
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -147,14 +255,14 @@ ul, li {
.expertise-card h3,
.project-card h3,
.experience-card h3 {
color: var(--secondary-color);
color: var(--secondary-colour);
}
.button {
display: inline-block;
padding: 0.5rem 1rem;
background-color: var(--accent-color);
color: white;
background-color: var(--accent-colour);
color: var(--text-background-colour);
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s;
@@ -230,7 +338,7 @@ ul, li {
/* Experience */
.experience-card {
background: white;
background: var(--text-background-colour);
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -241,7 +349,7 @@ ul, li {
margin-bottom: 0;
}
.experience-date {
color: var(--primary-color);
color: var(--primary-colour);
font-size: 0.9rem;
width: 50%;
min-width: 50%;
@@ -304,15 +412,15 @@ ul, li {
/* Footer styles */
footer {
background-color: var(--primary-color);
color: white;
background-color: var(--primary-colour);
color: var(--text-background-colour);
text-align: center;
padding: 2rem 1rem;
margin-top: 4rem;
}
footer a {
color: white;
color: var(--text-background-colour);
}
/* Responsive design */
@@ -331,6 +439,11 @@ footer a {
/* GitHub Contributions Calendar */
.github-calendar {
width: fit-content;
margin-left: auto;
margin-right: auto;
}
/* Hide broken statistics */
.github-calendar > :not(:first-child) {
display: none;
@@ -346,6 +459,6 @@ footer a {
}
.github-calendar table.js-calendar-graph-table > caption:first-child::before {
content: "GitHub Contributions Calendar";
color: var(--text-color);
color: var(--text-colour);
font-size: 1rem;
}