cameron/cmziuk
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Implement Game of Life feature with card flip UI and simulation controls
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 2m30s
Details

Browse source
This commit is contained in:
Cameron Redmore 2025-08-12 11:48:59 +01:00
parent 7e6195eb2c
commit 412fbc37f7
No known key found for this signature in database
4 changed files with 816 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

221
index.html
View file

@ -26,6 +26,8 @@
<script type="module">
import '~icons/mdi/github'
import '~icons/mdi/git'
import '~icons/mdi/orbit-variant'
import '/src/gameoflife.ts'
import '/src/client.ts'
</script>
@ -35,109 +37,150 @@
<div class="shape shape-3"></div>
<!-- Main container -->
<main class="min-h-screen w-full flex items-center justify-center p-4 sm:p-6 lg:p-8">
<main class="min-h-screen w-full flex items-center justify-center p-4 sm:p-6 lg:p-8 card-container">
<!-- The Glass Card -->
<div class="glass-card w-full max-w-4xl rounded-2xl p-6 sm:p-8 md:p-10">
<div class="flex flex-col md:flex-row items-center md:space-x-10">
<div class="card-flipper w-full max-w-4xl">
<div class="card-front glass-card w-full max-w-4xl rounded-2xl p-6 sm:p-8 md:p-10">
<icon-mdi-orbit-variant
class="absolute top-0 right-0 m-3 p-1 text-3xl rounded-full cursor-pointer hover-glass"></icon-mdi-orbit-variant>
<div class="flex flex-col md:flex-row items-center md:space-x-10">
<!-- Left Column: Profile Picture and Social Links -->
<div class="flex-shrink-0 text-center mb-6 md:mb-0">
<img src="/avatar.webp" alt="Cameron B. R. Redmore"
class="rounded-full w-32 h-32 md:w-40 md:h-40 mx-auto border-4 border-white/20 shadow-lg hover-glass"
loading="lazy" decoding="async">
<div class="mt-6 flex justify-center space-x-4">
<a href="https://github.com/CameronRedmore" target="_blank"
class="hover-glass hover:text-cyan-200 p-2 rounded-full" aria-label="GitHub Profile">
<icon-mdi-github class="text-3xl" />
</a>
<a href="https://git.cmzi.uk/" target="_blank"
class="hover-glass hover:text-cyan-200 p-2 rounded-full" aria-label="Personal Git Hosting">
<icon-mdi-git class="text-3xl" />
</a>
<!-- Left Column: Profile Picture and Social Links -->
<div class="flex-shrink-0 text-center mb-6 md:mb-0">
<img src="/avatar.webp" alt="Cameron B. R. Redmore"
class="rounded-full w-32 h-32 md:w-40 md:h-40 mx-auto border-4 border-white/20 shadow-lg hover-glass"
loading="lazy" decoding="async">
<div class="mt-6 flex justify-center space-x-4">
<a href="https://github.com/CameronRedmore" target="_blank"
class="hover-glass hover:text-cyan-200 p-2 rounded-full" aria-label="GitHub Profile">
<icon-mdi-github class="text-3xl" />
</a>
<a href="https://git.cmzi.uk/" target="_blank"
class="hover-glass hover:text-cyan-200 p-2 rounded-full"
aria-label="Personal Git Hosting">
<icon-mdi-git class="text-3xl" />
</a>
</div>
<!-- Last.fm Now Playing Section -->
<div class="mt-6 md:mt-8 hidden md:block text-center">
<div class="p-4 rounded-lg hover-glass">
<div id="last-song-container">
<div class="text-white-400 text-sm animate-pulse">
Loading music data...
</div>
</div>
</div>
</div>
</div>
<!-- Last.fm Now Playing Section -->
<div class="mt-6 md:mt-8 hidden md:block text-center">
<div class="p-4 rounded-lg hover-glass">
<div id="last-song-container">
<div class="text-white-400 text-sm animate-pulse">
Loading music data...
<!-- Right Column: Main Content -->
<div class="w-full text-center md:text-left">
<h1 class="text-4xl md:text-5xl font-bold text-white animated-gradient">Cameron B. R. Redmore
</h1>
<p class="mt-2 text-lg text-cyan-200">Software Developer from Kingston-Upon-Hull, UK</p>
<p class="mt-6 text-gray-200 leading-relaxed">
With 8 years of professional experience and over 15 years of passion-driven coding, I build
robust and efficient software solutions. My journey has taken me from recreational projects
to
developing complex professional applications.
</p>
<!-- Interests & Hobbies Section -->
<div class="mt-8">
<h2 class="text-xl font-semibold text-white mb-3">Interests & Hobbies</h2>
<p class="text-gray-200 leading-relaxed">
Beyond my core work, I have a deep interest in the broader field of computing and
programming. I'm particularly passionate about the AI and Machine Learning space,
focusing
on integrating Large Language Models (LLMs) in novel ways. In my spare time, I also
enjoy
the logical challenge of puzzles like Sudoku and Nonograms.
</p>
</div>
<div class="mt-8">
<h2 class="text-xl font-semibold text-white mb-3">Programming Skills</h2>
<div class="flex flex-wrap gap-2 items-center justify-center">
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">HTML</span>
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">CSS</span>
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">JavaScript</span>
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">TypeScript</span>
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">C#</span>
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">C++</span>
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">C</span>
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">Java</span>
</div>
</div>
<!-- Current Project Section -->
<div class="mt-8">
<h2 class="text-xl font-semibold text-white mb-3">Current Hobby Project</h2>
<a href="https://weaver.cmzi.uk/" target="_blank"
class="block p-4 rounded-lg hover-glass transition-all duration-300 ease-in-out hover:bg-white/30">
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1">
</path>
</svg>
</div>
<div>
<p class="font-bold text-white">Word Weaver</p>
<p class="text-sm text-cyan-200">An AI-powered web game of "Alchemy" with
infinite,
wacky combinations.</p>
</div>
</div>
</a>
</div>
<!-- Last.fm Now Playing Section - Mobile Only -->
<div class="mt-8 md:hidden">
<h2 class="text-xl font-semibold text-white mb-3">Music</h2>
<div class="p-4 rounded-lg hover-glass">
<div id="last-song-container-mobile">
<div class="text-white-400 text-sm animate-pulse">
Loading music data...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-back glass-card w-full max-w-4xl rounded-2xl p-6 sm:p-8 md:p-10">
<icon-mdi-orbit-variant
class="absolute top-0 right-0 m-3 p-1 text-3xl rounded-full cursor-pointer hover-glass"></icon-mdi-orbit-variant>
<!-- Right Column: Main Content -->
<div class="w-full text-center md:text-left">
<h1 class="text-4xl md:text-5xl font-bold text-white animated-gradient">Cameron B. R. Redmore</h1>
<p class="mt-2 text-lg text-cyan-200">Software Developer from Kingston-Upon-Hull, UK</p>
<!-- Game Of Life Implementation -->
<div id="game-of-life-container" class="mt-4">
<canvas id="game-of-life-canvas" class="border border-white"></canvas>
</div>
<p class="mt-6 text-gray-200 leading-relaxed">
With 8 years of professional experience and over 15 years of passion-driven coding, I build
robust and efficient software solutions. My journey has taken me from recreational projects to
developing complex professional applications.
</p>
<!-- Interests & Hobbies Section -->
<div class="mt-8">
<h2 class="text-xl font-semibold text-white mb-3">Interests & Hobbies</h2>
<p class="text-gray-200 leading-relaxed">
Beyond my core work, I have a deep interest in the broader field of computing and
programming. I'm particularly passionate about the AI and Machine Learning space, focusing
on integrating Large Language Models (LLMs) in novel ways. In my spare time, I also enjoy
the logical challenge of puzzles like Sudoku and Nonograms.
</p>
<!-- Save/Load Controls -->
<div class="mt-4 flex flex-col space-y-4">
<div class="flex space-x-4">
<button id="save-pattern"
class="flex-1 px-4 py-2 bg-cyan-600/20 hover:bg-cyan-600/40 text-white rounded-lg border border-cyan-500/50 hover-glass transition-all">
Save Pattern
</button>
<button id="load-pattern"
class="flex-1 px-4 py-2 bg-green-600/20 hover:bg-green-600/40 text-white rounded-lg border border-green-500/50 hover-glass transition-all">
Load Pattern
</button>
</div>
<div class="mt-8">
<h2 class="text-xl font-semibold text-white mb-3">Programming Skills</h2>
<div class="flex flex-wrap gap-2 items-center justify-center">
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">HTML</span>
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">CSS</span>
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">JavaScript</span>
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">TypeScript</span>
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">C#</span>
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">C++</span>
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">C</span>
<span class="hover-glass text-sm font-medium px-4 py-1 rounded-full">Java</span>
</div>
</div>
<!-- Current Project Section -->
<div class="mt-8">
<h2 class="text-xl font-semibold text-white mb-3">Current Hobby Project</h2>
<a href="https://weaver.cmzi.uk/" target="_blank"
class="block p-4 rounded-lg hover-glass transition-all duration-300 ease-in-out hover:bg-white/30">
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<svg class="w-8 h-8 text-cyan-300" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1">
</path>
</svg>
</div>
<div>
<p class="font-bold text-white">Word Weaver</p>
<p class="text-sm text-cyan-200">An AI-powered web game of "Alchemy" with infinite,
wacky combinations.</p>
</div>
</div>
</a>
</div>
<!-- Last.fm Now Playing Section - Mobile Only -->
<div class="mt-8 md:hidden">
<h2 class="text-xl font-semibold text-white mb-3">Music</h2>
<div class="p-4 rounded-lg hover-glass">
<div id="last-song-container-mobile">
<div class="text-white-400 text-sm animate-pulse">
Loading music data...
</div>
</div>
</div>
<!-- Simulation Speed Control -->
<div class="mb-4 flex items-center space-x-4">
<label for="simulation-speed" class="text-white font-medium">Simulation Speed:</label>
<input type="range" id="simulation-speed" min="1" max="30" value="10"
class="flex-1 h-2 bg-white/20 rounded-lg appearance-none cursor-pointer slider">
<span id="speed-display" class="text-cyan-200 font-mono min-w-[3rem]">10 Hz</span>
</div>
</div>
</div>