1616[ ![ CodePen] ( https://img.shields.io/badge/CodePen-Follow-1e1e1e?style=for-the-badge&logo=codepen&logoColor=white )] ( https://codepen.io/thomasbutler )
1717[ ![ 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 )
1818
19- <p align =" center " >
20- <img width =" 1005 " src =" https://raw.githubusercontent.com/ThomasJButler/ThomasJButler/output/snake/github-contribution-grid-snake.svg " alt =" snake " />
21- </p >
22-
23- ---
24-
25- ## 🚀 About Me
19+ ## About Me
2620
2721Hey! I'm a ** Full-Stack Developer** and ** AI Integration Specialist** originally from Liverpool, and I'm genuinely passionate about ** making technology more human** . You know that feeling when you use an app and it just feels natural? That's what I'm after.
2822
2923I've got this slightly obsessive thing about building tech that actually empowers people rather than replacing them. It has to be a joyful experience too. Whether I'm working on AI applications for neurodiversity support (which I'm really excited about) or creating those Matrix-themed interfaces, I'm always asking: "Will this actually make someone's day better? Is it safe and designed purely with the end user in mind?"
3024
31- The truth is, I love the technical challenges too and solving problems with code. Diving deep into React, Python, AI integration - but what really gets me up in the morning is knowing that something I built might help someone feel more confident, more included, or just have a bit more fun with technology.
32-
33- ### 💫 Key Strengths
34- - 🎯 ** Live Project Portfolio** : Multiple deployed applications serving real users
35- - 🤖 ** AI Integration Expertise** : Custom GPT development and LLM implementation
36- - 🎨 ** Unique Design Aesthetic** : Matrix-themed interfaces with advanced CSS animations
37- - 🔧 ** Full-Stack Proficiency** : From Python backends to React frontends
38- - 🌍 ** Professional UK Base** : Liverpool-based developer ready for collaboration
39-
40- ---
41-
42- ## 🚀 Featured Live Projects
43-
44- ### 🤖 [ AI Model Comparison Showcase] ( https://ai-comparison-showcase.vercel.app )
45- ** AI Neurodiversity Applications Suite (In Development)**
46- - ** Tech Stack** : TypeScript, React, Python, Human-Centered Design
47- - ** Mission** : demonstrating advanced AI model comparison capabilities
48- - ** Status** : Working prototype with custom API routing.
49-
50-
51- - AI Comparison Showcase is a portfolio project demonstrating advanced AI model comparison capabilities.
52-
53- ### 🎨 [ CSS Showcase] ( https://thomasjbutler.github.io/css-showcase/ )
54- ** Advanced CSS Demonstrations**
55- - ** Tech Stack** : Pure CSS3, Advanced Animations, Modern Layouts
56- - ** Features** : Complex animations, interactive components, cutting-edge CSS techniques
57- - ** Status** : Active Development Repository
58- - ** Impact** : Showcasing the artistic potential of modern CSS
59-
60- ### 🎮 [ The Matrix Arcade] ( https://www.tomatic.tech/ )
61- ** Interactive Gaming Platform**
62- - ** Tech Stack** : Vite, React, Python, Interactive Canvas
63- - ** Features** : Playable mini-games, responsive design, Matrix theming
64- - ** Status** : Live & Continuously Updated
65- - ** Impact** : Showcasing creative game development skills
25+ The truth is, I love the technical challenges too and solving problems with code. Diving deep into React, Python, AI integration - but what really gets me up in the morning is knowing that something I built one day might help someone feel more confident, more included, or just have a bit more fun with technology.
6626
67- ### 🚀 [ Portfolio v3.0 - Vite/React Migration] ( https://thomasjbutler.co.uk/index.html )
68- ** Modern React Portfolio with Anime.js**
69- - ** Tech Stack** : React 19, TypeScript, Vite 7, Anime.js v4
70- - ** Features** : Component architecture, smooth animations, Matrix rain effect
71- - ** Status** : Migration Complete - React Components Live
72- - ** Impact** : Showcasing modern React development skills
73-
74- ### 🎨 [ Big Bang Art Gallery] ( https://thomasjbutler.github.io/bigbang-gallery/ ) - Website coming soon.
75- ** 3D Interactive CSS Experience**
76- - ** Tech Stack** : React, TypeScript, CSS3, JavaScript, GSAP Animations
77- - ** Features** : 3D hover effects, perspective tracking, immersive gallery
78- - ** Status** : Live Interactive Gallery
79- - ** Impact** : Award-worthy CSS animation showcase
80-
81- ### ⏰ [ Version TimeTravel] ( https://thomasjbutler.github.io/version-timetravel/ ) - Website coming soon.
82- ** Design Evolution Showcase**
83- - ** Tech Stack** : React, Vite, TypeScript, HTML5, CSS3, Interactive Timeline
84- - ** Features** : Website version history, before/after comparisons
85- - ** Status** : Live Documentation Platform
86- - ** Impact** : Transparent development journey showcase
87-
88- ### 🧮 [ Dotnet React Calculator] ( https://dotnet-react-calendar.vercel.app/ )
89- ** Full-Stack .NET Application**
90- - ** Tech Stack** : .NET, React, C#, TypeScript, API Development
91- - ** Features** : Custom API endpoints, React frontend integration, calendar functionality
92- - ** Status** : Live & Continuously Enhanced
93- - ** Impact** : Demonstrating full-stack .NET expertise and API customization
94-
95- ### ⚽ [ Premier League Oracle] ( https://premier-league-oracle.vercel.app/ )
96- ** ML-Powered Football Predictions**
97- - ** Tech Stack** : Svelte, TypeScript, Python, Machine Learning, Supabase
98- - ** Features** : Historical data analysis, statistical predictions, real-time updates
99- - ** Status** : Live Prediction Platform
100- - ** Impact** : Showcasing data science and ML implementation skills
27+ <p align =" center " >
28+ <img width =" 1005 " src =" https://raw.githubusercontent.com/ThomasJButler/ThomasJButler/output/snake/github-contribution-grid-snake.svg " alt =" snake " />
29+ </p >
10130
102- ### 🐍 [ Python Projects] ( https://github.com/ThomasJButler/PythonProjects )
103- ** Algorithm & ML Repository**
104- - ** Tech Stack** : Python, Mathematical Algorithms, Machine Learning, Games
105- - ** Features** : Fractals, Fibonacci calculations, model predictions, mini-games
106- - ** Status** : Active Development Repository
107- - ** Impact** : Demonstrating Python proficiency across diverse applications
31+ <div align =" center " >
32+ <img src =" https://capsule-render.vercel.app/api?type=waving&color=00FF00&height=100§ ion=footer " width =" 100% " />
33+ </div >
10834
109- ### 💼 [ Commercial Portfolio v2.0] ( https://thomasjbutler.me )
110- ** Professional Work Showcase**
111- - ** Tech Stack** : React, Notion API, CMS Integration, Responsive Design
112- - ** Features** : Dynamic content management, commercial project gallery, client work
113- - ** Status** : Complete Platform Overhaul - Version 2.0 Live
114- - ** Impact** : Professional portfolio with real client projects
35+ ## ⚡ My Tech Stacks & Credentials
11536
116- ### 🎨 [ Creative CodePen Collection] ( https://codepen.io/thomasbutler )
117- ** Interactive Web Experiments**
118- - ** Tech Stack** : JavaScript, CSS3, HTML5, SVG, Canvas, Animation
119- - ** Features** : Creative frontend experiments, UI components, interactive animations
120- - ** Status** : Continuously Updated Collection
121- - ** Impact** : Showcasing creative coding and experimental web development
37+ ### ** Modern Web Stack**
38+ React | Vite | TypeScript | Supabase | Vercel | Tailwind
12239
123- ### 🚀 [ Landing Page] ( https://thomasjbutler.github.io/version-timetravel/viewer.html?version=landingpage.html&id=landing&num=Landing+Page&date=November+2024 )
124- ** Interactive Portfolio Entry**
125- - ** Tech Stack** : HTML5, CSS3, JavaScript, Responsive Design, Animations
126- - ** Features** : CV showcase, CodePen integration, animated UI elements
127- - ** Status** : Live Interactive Experience
128- - ** Impact** : Creative entry point to portfolio ecosystem
12940---
13041
131- ## 🚀 Recent Updates
132-
133- ### 📅 2025-07-20 - React Migration Complete - Portfolio v3.0 Live!
134-
135- Just shipped a ** complete React migration** of my portfolio! 🎉
136-
137- ** What's New:**
138- - ✅ ** Full React + TypeScript** implementation - type-safe components throughout
139- - ✅ ** Anime.js v4 Integration** - smooth, performant animations that respect the Matrix aesthetic
140- - ✅ ** Modern Vite Build System** - lightning-fast HMR and optimized production builds
141- - ✅ ** Component Architecture** - modular, maintainable, and scalable
142- - ✅ ** CSS Modules** - scoped styling with zero conflicts
143- - ✅ ** Custom Animation Hooks** - ` useMatrixAnimation ` , ` useScrollAnimation ` for reusable effects
144- - ✅ ** Maintained Matrix Theme** - kept the iconic green-on-black aesthetic during migration
145-
146- ** Technical Highlights:**
147- - Migrated from static HTML/JS to React 19 with TypeScript
148- - Implemented React Router for seamless SPA navigation
149- - Created reusable component library aligned with design system
150- - Achieved 100% type coverage with strict mode enabled
151-
152- ** Impact:** Showcasing modern React development skills while maintaining the unique visual identity that sets my portfolio apart.
153-
154- 🔗 ** [ Check out the live React version →] ( https://github.com/ThomasJButler/ThomasJButler ) **
155-
156- * From Liverpool with love.* 💚
42+ ### ** AI-Powered Applications, Automations, MCP**
43+ Python | Django | PostgreSQL | OpenAI API | Docker | AWS
15744
15845---
15946
160- ## 🛠️ Technical Arsenal
161-
162- ### ** Advanced Proficiency**
163- | Technology | | Technology | | Technology |
164- | :----------:| :--:| :----------:| :--:| :----------:|
165- | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg " alt =" javascript " width =" 40 " height =" 40 " /><br />** JavaScript** | | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg " alt =" python " width =" 40 " height =" 40 " /><br />** Python** | | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg " alt =" react " width =" 40 " height =" 40 " /><br />** React** |
166- | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg " alt =" html5 " width =" 40 " height =" 40 " /><br />** HTML5** | | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg " alt =" css3 " width =" 40 " height =" 40 " /><br />** CSS3** | | |
167-
168- ### ** Proficient**
169- | Technology | | Technology | | Technology |
170- | :----------:| :--:| :----------:| :--:| :----------:|
171- | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg " alt =" csharp " width =" 40 " height =" 40 " /><br />** C#** | | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/dot-net/dot-net-original.svg " alt =" dotnet " width =" 40 " height =" 40 " /><br />** .NET** | | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original-wordmark.svg " alt =" nodejs " width =" 40 " height =" 40 " /><br />** Node.js** |
172- | <img src =" https://cdn.worldvectorlogo.com/logos/django.svg " alt =" django " width =" 40 " height =" 40 " /><br />** Django** | | <img src =" https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg " alt =" tailwind " width =" 40 " height =" 40 " /><br />** Tailwind CSS** | | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg " alt =" php " width =" 40 " height =" 40 " /><br />** PHP** |
173-
174- ### ** Databases**
175- | Technology | | Technology | | Technology |
176- | :----------:| :--:| :----------:| :--:| :----------:|
177- | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/postgresql/postgresql-original-wordmark.svg " alt =" postgresql " width =" 40 " height =" 40 " /><br />** PostgreSQL** | | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/mongodb/mongodb-original-wordmark.svg " alt =" mongodb " width =" 40 " height =" 40 " /><br />** MongoDB** | | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/mysql/mysql-original-wordmark.svg " alt =" mysql " width =" 40 " height =" 40 " /><br />** MySQL** |
178- | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/microsoftsqlserver/microsoftsqlserver-plain.svg " alt =" sqlserver " width =" 40 " height =" 40 " /><br />** SQL Server** | | <img src =" https://github.com/supabase/supabase/blob/master/apps/www/public/images/logo-dark.png?raw=true " alt =" supabase " width =" 40 " height =" 40 " /><br />** Supabase** | | |
179-
180- ### ** Cloud & DevOps (Qualified)**
181- | Technology | | Technology | | Technology |
182- | :----------:| :--:| :----------:| :--:| :----------:|
183- | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/amazonwebservices/amazonwebservices-original-wordmark.svg " alt =" aws " width =" 40 " height =" 40 " /><br />** AWS** | | <img src =" https://www.vectorlogo.zone/logos/microsoft_azure/microsoft_azure-icon.svg " alt =" azure " width =" 40 " height =" 40 " /><br />** Azure** | | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/docker/docker-original-wordmark.svg " alt =" docker " width =" 40 " height =" 40 " /><br />** Docker** |
184- | <img src =" https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg " alt =" git " width =" 40 " height =" 40 " /><br />** Git** | | <img src =" https://www.vectorlogo.zone/logos/cisco/cisco-icon.svg " alt =" cisco " width =" 40 " height =" 40 " /><br />** Cisco** | | |
185-
186- ### ** Tools & Platforms**
187- | Technology | | Technology | | Technology |
188- | :----------:| :--:| :----------:| :--:| :----------:|
189- | <img src =" https://vitejs.dev/logo.svg " alt =" vite " width =" 40 " height =" 40 " /><br />** Vite** | | <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/svelte/svelte-original.svg " alt =" svelte " width =" 40 " height =" 40 " /><br />** Svelte** | | <img src =" https://www.vectorlogo.zone/logos/vercel/vercel-icon.svg " alt =" vercel " width =" 40 " height =" 40 " /><br />** Vercel** |
190- | <img src =" https://www.vectorlogo.zone/logos/netlify/netlify-icon.svg " alt =" netlify " width =" 40 " height =" 40 " /><br />** Netlify** | | <img src =" https://docs.n8n.io/assets/images/n8n-logo-5a2fae5e2cce14141b9a17a6fa7e49a7.png " alt =" n8n " width =" 40 " height =" 40 " /><br />** n8n** | | <img src =" https://www.hubspot.com/hubfs/HubSpot_Logos/HubSpot-Inversed-Favicon.png " alt =" hubspot " width =" 40 " height =" 40 " /><br />** HubSpot** |
191-
192- ### ** Certified & Learning**
193- - 🏆 ** AWS Qualified** | ** Azure Qualified** | ** Cisco Qualified** | ** HubSpot Qualified**
194- - 🎓 ** Level 4 Software Developer Apprenticeship** (Completed)
195- - 📜 ** City & Guilds Level 2 ICT Systems Support** (2024)
196- - 🤖 ** Machine Learning** : Mastering Generative AI & Agents (August 2025)
197-
198- ### ** Specialisations**
199- - 🤖 ** AI Model Building** : Custom model creation, prompt engineering (weird hobby!), performance testing
200- - 🎨 ** Advanced CSS** : GSAP Animations, 3D Transforms, Matrix Effects
201- - 🔧 ** Full-Stack Architecture** : End-to-end application development
202- - 📱 ** Cross-Platform Development** : Mac, Windows, iOS (learning)
203- - ⚡ ** Automation** : n8n workflows, API integrations
47+ ### ** Enterprise Solutions**
48+ C# | .NET | Azure | SQL Server | Umbraco | AWS
20449
20550---
20651
207- ## ⚡ My Tech Stacks
208-
209- ### ** 🌟 Modern Web Stack**
210- ** React + Vite + TypeScript + Supabase + Vercel + Tailwind**
211- - Lightning-fast development with Vite
212- - Type-safe with TypeScript
213- - Real-time data with Supabase
214- - Instant deployment via Vercel
215-
216- ### ** 🤖 AI-Powered Applications**
217- ** Python + Django + PostgreSQL + OpenAI API + Docker + AWS**
218- - Robust backend with Django
219- - Scalable database solutions
220- - AI integration for intelligent features
221- - Cloud deployment ready
222-
223- ### ** 🏢 Enterprise Solutions**
224- ** C# + .NET + Azure + SQL Server + Umbraco**
225- - Enterprise-grade architecture
226- - Microsoft ecosystem integration
227- - Content management capabilities
228- - Cloud-native design
52+ ## ** Qualifications**
53+ - AWS Qualified | Azure Qualified | Cisco Qualified | HubSpot Qualified
54+ - Level 4 Software Developer Apprenticeship (✅ Completed 2024)
55+ - City & Guilds Level 2 ICT Systems Support (July 2025)
56+ - * Machine Learning: Mastering Generative AI & Agents* (Aug–Sep 2025)
22957
230- ### ** ⚡ Automation & Workflows**
231- ** n8n + Python + APIs + Cloud Functions**
232- - Visual workflow automation
233- - Custom integrations
234- - Event-driven architecture
235- - Serverless efficiency
58+ ---
23659
237- ### ** 🚀 Static & Performance **
238- ** Vite + Vanilla JS + Netlify + Headless CMS **
239- - Maximum performance
240- - SEO optimised
241- - Edge deployment
242- - Content flexibility
60+ ## ** Specialisations **
61+ - ** AI Model Building ** → custom models, LLM training, prompt engineering (weird hobby), performance testing
62+ - ** Advanced CSS ** → GSAP animations, 3D transforms, matrix effects
63+ - ** Full-Stack Architecture ** → end-to-end application development
64+ - ** Cross-Platform Development ** → Mac, Windows, iOS (currently learning)
65+ - ** Automation ** → n8n workflows + API integrations + MCP creation
24366
24467---
24568
@@ -249,14 +72,6 @@ Just shipped a **complete React migration** of my portfolio! 🎉
24972
25073![ Thomas's GitHub stats] ( https://github-readme-stats.vercel.app/api?username=ThomasJButler&show_icons=true&theme=chartreuse-dark&border_color=00FF00&bg_color=0D1117&title_color=00FF00&icon_color=00FF00&text_color=FFFFFF )
25174
252- ![ GitHub Streak] ( https://streak-stats.demolab.com?user=ThomasJButler&theme=chartreuse-dark&border=00FF00&background=0D1117&ring=00FF00&fire=00FF00&currStreakLabel=00FF00 )
253-
254- </div >
255-
256- <div align =" center " >
257-
258- ![ Top Languages] ( https://github-readme-stats.vercel.app/api/top-langs/?username=ThomasJButler&layout=compact&theme=chartreuse-dark&border_color=00FF00&bg_color=0D1117&title_color=00FF00&text_color=FFFFFF )
259-
26075</div >
26176
26277<div align =" center " >
@@ -273,22 +88,6 @@ Just shipped a **complete React migration** of my portfolio! 🎉
27388
27489---
27590
276- ## 🤝 Professional Network
277-
278- <div align =" center " >
279-
280- [ ![ Portfolio] ( https://img.shields.io/badge/Portfolio-Visit-00FF00?style=for-the-badge&logo=google-chrome&logoColor=black )] ( https://thomasjbutler.me )
281- [ ![ LinkedIn] ( https://img.shields.io/badge/LinkedIn-Connect-0077B5?style=for-the-badge&logo=linkedin&logoColor=white )] ( https://www.linkedin.com/in/thomasbutleruk/ )
282- [ ![ Email
] ( https://img.shields.io/badge/Email-Contact-D14836?style=for-the-badge&logo=gmail&logoColor=white )] ( mailto:[email protected] ) 283- [ ![ CodePen] ( https://img.shields.io/badge/CodePen-Follow-1e1e1e?style=for-the-badge&logo=codepen&logoColor=white )] ( https://codepen.io/thomasbutler )
284-
285- </div >
286- ``
287- ### 📍 Location: York, England, UK 🇬🇧
288- ### 💼 Available for: Freelance Projects | Collaboration | Full-time Opportunities
289-
290- ---
291-
29291<div align =" center " >
29392 <img src =" https://capsule-render.vercel.app/api?type=waving&color=00FF00&height=100§ ion=footer " width =" 100% " />
29493</div >
0 commit comments