Add Docker support and implement Bun for dependency management
Some checks failed
Build and Push Docker Image / build-and-push (push) Failing after 1m25s
Some checks failed
Build and Push Docker Image / build-and-push (push) Failing after 1m25s
- Introduced .dockerignore to exclude unnecessary files from Docker context. - Updated Dockerfile to use Bun for building and running the application. - Removed entrypoint.sh as it is no longer needed. - Modified build-and-dockerise.yml to set up Bun and install dependencies. - Enhanced index.html with improved structure and hover effects. - Updated client.ts to include tooltips for music display. - Implemented caching in server.ts for Last.fm data. - Added custom styles for hover effects and tooltips in style.css.
This commit is contained in:
parent
be5a61185b
commit
214982649f
9 changed files with 272 additions and 107 deletions
74
index.html
74
index.html
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
@ -7,13 +8,14 @@
|
|||
|
||||
<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 '/src/client.ts'
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import '~icons/mdi/github'
|
||||
import '~icons/mdi/git'
|
||||
import '/src/client.ts'
|
||||
</script>
|
||||
|
||||
<!-- Decorative background shapes -->
|
||||
<div class="shape shape-1"></div>
|
||||
|
@ -29,19 +31,22 @@
|
|||
|
||||
<!-- Left Column: Profile Picture and Social Links -->
|
||||
<div class="flex-shrink-0 text-center mb-6 md:mb-0">
|
||||
<img src="https://avatars.githubusercontent.com/u/5846077?v=4" 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">
|
||||
<img src="https://avatars.githubusercontent.com/u/5846077?v=4" 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">
|
||||
<div class="mt-6 flex justify-center space-x-4">
|
||||
<a href="https://github.com/CameronRedmore" target="_blank" class="skill-tag p-3 rounded-full" aria-label="GitHub Profile">
|
||||
<icon-mdi-github class="w-8 h-8 text-2xl" />
|
||||
<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="skill-tag p-3 rounded-full" aria-label="Personal Git Hosting">
|
||||
<icon-mdi-git class="w-8 h-8 text-2xl" />
|
||||
<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 skill-tag">
|
||||
<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...
|
||||
|
@ -55,44 +60,56 @@
|
|||
<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.
|
||||
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.
|
||||
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="skill-tag text-sm font-medium px-4 py-1 rounded-full">HTML</span>
|
||||
<span class="skill-tag text-sm font-medium px-4 py-1 rounded-full">CSS</span>
|
||||
<span class="skill-tag text-sm font-medium px-4 py-1 rounded-full">JavaScript</span>
|
||||
<span class="skill-tag text-sm font-medium px-4 py-1 rounded-full">TypeScript</span>
|
||||
<span class="skill-tag text-sm font-medium px-4 py-1 rounded-full">C#</span>
|
||||
<span class="skill-tag text-sm font-medium px-4 py-1 rounded-full">C++</span>
|
||||
<span class="skill-tag text-sm font-medium px-4 py-1 rounded-full">C</span>
|
||||
<span class="skill-tag text-sm font-medium px-4 py-1 rounded-full">Java</span>
|
||||
<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 skill-tag transition-all duration-300 ease-in-out hover:bg-white/30">
|
||||
<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>
|
||||
<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>
|
||||
<p class="text-sm text-cyan-200">An AI-powered web game of "Alchemy" with infinite,
|
||||
wacky combinations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
@ -101,7 +118,7 @@
|
|||
<!-- 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 skill-tag">
|
||||
<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...
|
||||
|
@ -114,4 +131,5 @@
|
|||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue