Personal Projects

I run my own tech setup, manage the server, deploy local AI for research, and build my own website. I enjoy taking full control of the process to boost my productivity while keeping my work secure.

System Administraion

Managed and maintained a dedicated server environment for file storage, AI infrastructure, and website hosting.

AI

Ran local machine learning models to boost my productivity while studying.

Web Design

Designed, developed, and managed a personal website from concept to deployment.

Explore the original HTML of this website.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joshua Matthew Lee - Professional Portfolio</title>
<style>
/* General styling */
body {
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
margin: 0;
padding: 0;
background-image: url('https:jl5.co.uk/joshua/Pictures/20250108120245.jpg');
background-size: cover;
background-position: center;
background-color: #1a252f; /* Darker background */
color: #e0e0e0; /* Light gray text */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
line-height: 1.6;
}

.title {
font-size: 3em;
color: #fff; /* White text */
margin-bottom: 20px;
}

.description {
font-size: 1.2em;
max-width: calc(80% - 40px);
margin: 0 auto 30px;
}

/* Navigation links on the left */
.nav-container {
position: absolute;
top: 20px;
right: 0;
width: 200px; /* Adjust as needed for your layout */
background-color: rgba(255, 255, 255, 0.15);
padding: 20px;
border-radius: 8px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
overflow-wrap: break-word;
text-align: center;
display: flex;
flex-direction: column;
gap: 20px;
}

.nav-link {
font-size: 1em;
color: #e0e0e0; /* Light gray text */
text-decoration: none;
transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link:focus {
color: #4a90e2; /* Blue hover/focus effect */
}

/* Social buttons container and button styles */
.social-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
max-width: 900px;
margin: 0 auto;
}

.social-button {
background-color: #4a90e2; /* Blue button */
border-radius: 6px;
padding: 12px 24px;
text-decoration: none;
color: #fff; /* White link text */
font-weight: 500;
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
cursor: pointer;
margin: 5px;
border: 1px solid transparent;
min-width: 120px; /* Touch-friendly minimum width */
max-width: 150px; /* Ensure consistent size on all devices */
height: auto;
line-height: 2; /* Adjust for padding */
}

.social-button:hover,
.social-button:focus {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
border-color: #357ab8;
outline: none; /* Remove default focus ring */
}

.social-button:active {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* About box styling */
.about-box {
background-color: rgba(255, 255, 255, 0.15); /* Semi-transparent white */
border-radius: 8px;
padding: 20px;
max-width: calc(80% - 40px);
margin: 20px auto;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
overflow-wrap: break-word;
}

@media (max-width: 768px) {
.title {
font-size: 2.5em;
}

.description {
font-size: 1em;
}
}
</style>
</head>

<body>

<header>
<div class="container">
<a href="index.html" class="logo">
<img src="assets/images/logo.png" alt="Itamar’s Web Dev Logo">
</a>
<nav>
<ul>
<li><a href="index.html" class="current-page">Home</a></li>
<li><a href="/Cv.html" class="nav-link">CV</a></li>
<li><a href="https://www.mytutor.co.uk/tutors/10565807/" class="nav-link">Tutoring</a></li>
<li><a href="https://www.jl5.co.uk" class="nav-link">Modelling</a></li>
<li><a href="/photography.html" class="nav-link">Photography</a></li>
</ul>
</nav>
</div>
</header>
<header>
<hgroup class="title">
<h1>Joshua Matthew Lee</h1>
<p class="lead">A Cambridge HSPS student with a strong knowledge of political campaigning, project delivery, and event management.</p>
</hgroup>
</header>

<p class="description">Follow me on my social media platforms:</p>

<div class="social-buttons">
<a href="https://www.instagram.com/jl5_ad/" class="social-button">Instagram</a
>
<a href="https://www.threads.com/@jl5_ad" class="social-button">Threads</a
>
<a href="https://social.vivaldi.net/@joshual5ad" class="social-button">Mastodon</a
>
<a href="https://www.facebook.com/share/1BUKB6Rdm5/" class="social-button">Facebook</a
>
<a href="https://x.com/Jl5_ad" class="social-button">X or Twitter</a
>
<a href="https://www.linkedin.com/in/joshua-matthew-lee-77b99317a/" class="social-button">LinkedIn</a
>
</div>

<section id="personal-summary" class="mb-5">
<h2>Personal Summary</h2>
<p>A Cambridge HSPS student with a proven record in policy development, analysis, and event management. Skilled in qualitative research, campaign strategy, and safeguarding compliance. Seeking an engaging role in policy, consulting, or governance where I can apply analytical and strategic skills from day one.</p>
</section>

<footer style="text-align: center; background-color: #1a252f; color: #e0e0e0; padding: 15px; margin-top: 20px;">
<p>© 2026 Joshua Matthew Lee. All rights reserved.</p>
<small>Generated with assistance from IBM Granite AI.</small>
</footer>

</body>
</html>