Cameron Redmore
412fbc37f7
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 2m30s
191 lines
No EOL
11 KiB
HTML
191 lines
No EOL
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cameron B. R. Redmore - Software Developer</title>
|
|
|
|
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<link rel="shortcut icon" href="/favicon.ico" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
|
<meta name="apple-mobile-web-app-title" content="cmzi.uk" />
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
<!-- Performance hints: preconnect / dns-prefetch for Last.fm API/CDN -->
|
|
<link rel="preconnect" href="https://lastfm.freetls.fastly.net" crossorigin>
|
|
<link rel="dns-prefetch" href="//lastfm.freetls.fastly.net">
|
|
<link rel="preconnect" href="https://lastfm-img2.akamaized.net" crossorigin>
|
|
<link rel="dns-prefetch" href="//lastfm-img2.akamaized.net">
|
|
|
|
<link rel="stylesheet" href="/src/style.css">
|
|
</head>
|
|
|
|
<body class="text-gray-200">
|
|
|
|
<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>
|
|
|
|
<!-- Decorative background shapes -->
|
|
<div class="shape shape-1"></div>
|
|
<div class="shape shape-2"></div>
|
|
<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 card-container">
|
|
|
|
<!-- The Glass Card -->
|
|
<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>
|
|
</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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
|
|
</html> |