Skip to content

Commit 24ba2c0

Browse files
ThomasJButlerThomasJButler
authored
Merge pull request #53 from ThomasJButler/v3.6-UX
v3.6 UX Complete Overhaul
2 parents f3384f7 + 90b5567 commit 24ba2c0

55 files changed

Lines changed: 4512 additions & 1678 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,9 @@
55
[![Commercial Portfolio](https://img.shields.io/badge/Commercial%20Portfolio-View-006400?style=for-the-badge&logo=matrix&logoColor=white)](https://thomasjbutler.me)
66
[![Personal Portfolio](https://img.shields.io/badge/Personal%20Portfolio-View-006400?style=for-the-badge&logo=matrix&logoColor=white)](https://thomasjbutler.github.io/ThomasJButler/)
77

8-
9-
</div>
10-
11-
<div align="center">
12-
<pre>
13-
███╗ ███╗ █████╗ ████████╗██████╗ ██╗██╗ ██╗
14-
████╗ ████║██╔══██╗╚══██╔══╝██╔══██╗██║╚██╗██╔╝
15-
██╔████╔██║███████║ ██║ ██████╔╝██║ ╚███╔╝
16-
██║╚██╔╝██║██╔══██║ ██║ ██╔══██╗██║ ██╔██╗
17-
██║ ╚═╝ ██║██║ ██║ ██║ ██║ ██║██║██╔╝ ██╗
18-
╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝╚═╝ ╚═╝
19-
</pre>
20-
<img width="2680" height="1790" alt="image" src="https://github.com/user-attachments/assets/4289282d-3724-494a-94b1-4e676dfb3588" />
21-
</div>
22-
238
## About Me
249

25-
A Full-stack web developer and AI Engineer from York, UK.
10+
A Full-stack web developer and AI Engineer from the UK.
2611

2712
My passion is to build human orientated applications that feel natural and joyful to use, and empower humanity by harnessing the power of AI, by saving time and energy on day to day tasks.
2813

@@ -174,7 +159,7 @@ I'm currently focused on creating AI integrated systems, building ethical AI mod
174159
<div align="center">
175160

176161
[![LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/thomasbutleruk/)
177-
[![CodePen](https://img.shields.io/badge/CodePen-Follow-1e1e1e?style=for-the-badge&logo=codepen&logoColor=white)](https://codepen.io/thomasbutler)
162+
[![CodePen](https://img.shields.io/badge/CodePen-Follow-1e1e1e?style=for-the-badge&logo=codepen&logoColor=white)](https://codepen.io/thomasjbutler)
178163
[![Buy Me a Coffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-Support-FFB000?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://buymeacoffee.com/ojrwoqkgmv)
179164

180165
</div>

‎claude.md‎

Lines changed: 0 additions & 119 deletions
This file was deleted.

‎index-react.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Thomas J Butler - Full Stack Developer | AI Integration Specialist</title>
6+
<title>Personal Portfolio</title>
77
<meta name="description" content="Liverpool-based Full Stack Developer specializing in AI integration, web development, and innovative digital solutions. Transform your ideas into reality.">
88
<meta name="keywords" content="web developer, full stack developer, AI integration, Liverpool, UK, React, TypeScript, Python">
99
<meta name="author" content="Thomas J Butler">
1010

1111
<!-- Open Graph -->
12-
<meta property="og:title" content="Thomas J Butler - Full Stack Developer">
12+
<meta property="og:title" content="Personal Portfolio">
1313
<meta property="og:description" content="Liverpool-based Full Stack Developer specializing in AI integration and innovative web solutions.">
1414
<meta property="og:type" content="website">
1515
<meta property="og:url" content="https://thomasjbutler.me">

‎index.html‎

Lines changed: 17 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Thomas J Butler - Portfolio | Full-Stack Developer | Liverpool</title>
7-
7+
88
<!-- Immediate redirect to React app -->
99
<meta http-equiv="refresh" content="0; url=/react.html">
10-
10+
1111
<!-- Basic Meta Tags -->
1212
<meta name="description" content="Thomas J Butler - Full-Stack Developer specializing in React, TypeScript, AI integration, and neurodiversity applications. Liverpool-based tech innovator with expertise in modern web development.">
1313
<meta name="keywords" content="Thomas J Butler, full-stack developer, React developer, TypeScript, Liverpool developer, AI integration, neurodiversity tech, portfolio, web development">
1414
<meta name="author" content="Thomas J Butler">
1515
<meta name="robots" content="index, follow">
1616
<meta name="language" content="English">
17-
17+
1818
<!-- Open Graph / Facebook -->
1919
<meta property="og:type" content="website">
2020
<meta property="og:url" content="https://thomasjbutler.github.io/">
@@ -23,20 +23,20 @@
2323
<meta property="og:image" content="https://thomasjbutler.github.io/logo.svg">
2424
<meta property="og:site_name" content="Thomas J Butler Portfolio">
2525
<meta property="og:locale" content="en_GB">
26-
26+
2727
<!-- Twitter Card -->
2828
<meta name="twitter:card" content="summary_large_image">
2929
<meta name="twitter:url" content="https://thomasjbutler.github.io/">
3030
<meta name="twitter:title" content="Thomas J Butler - Full-Stack Developer Portfolio">
3131
<meta name="twitter:description" content="Liverpool-based full-stack developer specializing in React, TypeScript, and AI integration. View my projects and expertise.">
3232
<meta name="twitter:image" content="https://thomasjbutler.github.io/logo.svg">
33-
33+
3434
<!-- Canonical URL -->
3535
<link rel="canonical" href="https://thomasjbutler.github.io/">
36-
36+
3737
<!-- Theme Color -->
3838
<meta name="theme-color" content="#00FF00">
39-
39+
4040
<!-- Structured Data / JSON-LD -->
4141
<script type="application/ld+json">
4242
{
@@ -52,11 +52,11 @@
5252
},
5353
"sameAs": [
5454
"https://github.com/ThomasJButler",
55-
"https://linkedin.com/in/thomasjbutler"
55+
"https://linkedin.com/in/thomasbutleruk"
5656
],
5757
"address": {
5858
"@type": "PostalAddress",
59-
"addressLocality": "Liverpool",
59+
"addressLocality": "Yorkshire",
6060
"addressCountry": "UK"
6161
},
6262
"knowsAbout": [
@@ -70,126 +70,16 @@
7070
]
7171
}
7272
</script>
73-
74-
<style>
75-
body {
76-
background: #000;
77-
color: #00ff00;
78-
font-family: 'Courier New', monospace;
79-
display: flex;
80-
justify-content: center;
81-
align-items: center;
82-
height: 100vh;
83-
margin: 0;
84-
text-align: center;
85-
overflow: hidden;
86-
}
87-
88-
.redirect-container {
89-
padding: 2rem;
90-
position: relative;
91-
z-index: 2;
92-
}
93-
94-
.matrix-text {
95-
color: #00ff00;
96-
text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
97-
animation: pulse 2s infinite;
98-
font-size: 2rem;
99-
margin-bottom: 1rem;
100-
}
101-
102-
.loading-bar {
103-
width: 300px;
104-
height: 4px;
105-
background: #001100;
106-
border: 1px solid #00ff00;
107-
margin: 2rem auto;
108-
position: relative;
109-
overflow: hidden;
110-
}
111-
112-
.loading-progress {
113-
height: 100%;
114-
background: linear-gradient(90deg, transparent, #00ff00, transparent);
115-
animation: loading 1s linear infinite;
116-
position: absolute;
117-
width: 100%;
118-
}
119-
120-
@keyframes pulse {
121-
0%, 100% { opacity: 1; }
122-
50% { opacity: 0.7; }
123-
}
124-
125-
@keyframes loading {
126-
0% { transform: translateX(-100%); }
127-
100% { transform: translateX(100%); }
128-
}
129-
130-
a {
131-
color: #00ff00;
132-
text-decoration: none;
133-
border-bottom: 1px solid #00ff00;
134-
transition: all 0.3s;
135-
}
136-
137-
a:hover {
138-
text-shadow: 0 0 10px #00ff00;
139-
}
140-
141-
/* Matrix rain effect */
142-
.matrix-rain {
143-
position: fixed;
144-
top: 0;
145-
left: 0;
146-
width: 100%;
147-
height: 100%;
148-
pointer-events: none;
149-
opacity: 0.1;
150-
}
151-
152-
.matrix-rain::before {
153-
content: "10101010 11001100 01010101 10011001 11110000 00001111";
154-
position: absolute;
155-
color: #00ff00;
156-
font-size: 10px;
157-
animation: rain 5s linear infinite;
158-
white-space: pre;
159-
line-height: 1.5;
160-
}
161-
162-
@keyframes rain {
163-
0% { transform: translateY(-100%); }
164-
100% { transform: translateY(100%); }
165-
}
166-
</style>
167-
73+
16874
<script>
169-
// JavaScript redirect to React app
170-
window.onload = function() {
171-
// Redirect to React app homepage
172-
window.location.replace('/react.html');
173-
};
174-
175-
// Fallback redirect after 3 seconds
176-
setTimeout(function() {
177-
if (window.location.pathname === '/' ||
178-
window.location.pathname === '/index.html') {
179-
window.location.replace('/react.html');
180-
}
181-
}, 3000);
75+
// Immediate redirect to React app
76+
window.location.replace('/react.html');
18277
</script>
18378
</head>
18479
<body>
185-
<div class="matrix-rain"></div>
186-
<div class="redirect-container">
187-
<h1 class="matrix-text">[ INITIALIZING ]</h1>
188-
<p>Redirecting to Thomas J Butler Portfolio...</p>
189-
<div class="loading-bar">
190-
<div class="loading-progress"></div>
191-
</div>
192-
<p>If you are not redirected automatically, <a href="/react.html">click here</a>.</p>
193-
</div>
80+
<!-- Redirecting to React app... -->
81+
<noscript>
82+
<p>Redirecting to <a href="/react.html">Thomas J Butler Portfolio</a>...</p>
83+
</noscript>
19484
</body>
195-
</html>
85+
</html>

0 commit comments

Comments
 (0)