Merge pull request #34 from ThomasJButler/v3.5-CSS-Enhance-Final

V3.5 - Final Release

Author: ThomasJButler

.DS_Store

@@ -9,18 +9,44 @@
   },
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
   ],
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "env": {
     "browser": true,
     "es2020": true,
     "node": true
   },
   "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
     "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
-    "no-console": ["warn", { "allow": ["warn", "error"] }]
-  }
+    "@typescript-eslint/no-unused-vars": ["warn", { 
+      "argsIgnorePattern": "^_",
+      "varsIgnorePattern": "^_|revealText|glitchInterval|hoverAnimation"
+    }],
+    "@typescript-eslint/no-unused-expressions": "warn",
+    "no-console": ["warn", { "allow": ["warn", "error", "log"] }],
+    "no-empty": "warn",
+    "prefer-const": "warn",
+    "no-alert": "off",
+    "react-hooks/exhaustive-deps": "warn"
+  },
+  "ignorePatterns": [
+    "dist/",
+    "build/",
+    "node_modules/",
+    "*.config.js",
+    "*.config.ts",
+    "vite.config.js",
+    "vitest.config.ts"
+  ]
 }

.eslintrc.json

@@ -0,0 +1,31 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to GitHub Pages
+        run: npm run deploy
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/deploy.yml

@@ -24,6 +24,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
       - name: Generate GitHub Contribution Snake
         uses: Platane/snk/svg-only@v3
@@ -33,10 +35,11 @@ jobs:
             snake/github-contribution-grid-snake.svg
             snake/github-contribution-grid-snake-dark.svg?palette=github-dark
 
-      - name: Push to GitHub
-        uses: EndBug/add-and-commit@v9
-        with:
-          new_branch: output
-          add: 'snake'
-          message: 'Generate contribution snake'
-          default_author: github_actions
+      - name: Push snake to output branch
+        run: |
+          git config --local user.email "[email protected]"
+          git config --local user.name "GitHub Action"
+          git checkout -B output
+          git add snake/
+          git commit -m "Generate contribution snake" || exit 0
+          git push --force origin output

.github/workflows/snake.yml

@@ -23,19 +23,7 @@
 .DS_Store
 Thumbs.db
 
-# Project specific
-/tommyprompts website
-/add to website
-CLAUDE.md
-/Website Video mp4 Banners 
-
 # Temporary files
 *.log
 *.tmp
 *.temp
-improvements.md
-animejssetup.md
-projectcheck.md
-v3.0-content-update-plan.md
-plan.md
-/.claude

.gitignore

@@ -1,93 +1,190 @@
-# 🌌 Thomas J Butler
-```
+# Thomas J Butler
+<div align="center">
+<pre>
 ███╗   ███╗ █████╗ ████████╗██████╗ ██╗██╗  ██╗
 ████╗ ████║██╔══██╗╚══██╔══╝██╔══██╗██║╚██╗██╔╝
 ██╔████╔██║███████║   ██║   ██████╔╝██║ ╚███╔╝ 
 ██║╚██╔╝██║██╔══██║   ██║   ██╔══██╗██║ ██╔██╗ 
 ██║ ╚═╝ ██║██║  ██║   ██║   ██║  ██║██║██╔╝ ██╗
 ╚═╝     ╚═╝╚═╝  ╚═╝   ╚═╝   ╚═╝  ╚═╝╚═╝╚═╝  ╚═╝
-```
+</pre>
+</div>
 
-**`Full-Stack Developer | AI Integration Specialist | York, UK 🇬🇧`**
+<div align="center">
 
-[![Portfolio](https://img.shields.io/badge/Portfolio-thomasjbutler.me-00FF00?style=for-the-badge&logo=matrix&logoColor=black)](https://thomasjbutler.me)
-[![LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/thomasbutleruk/)
-[![GitHub followers](https://img.shields.io/github/followers/ThomasJButler?style=for-the-badge&color=00FF00)](https://github.com/ThomasJButler)
-[![CodePen](https://img.shields.io/badge/CodePen-Follow-1e1e1e?style=for-the-badge&logo=codepen&logoColor=white)](https://codepen.io/thomasbutler)
-[![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)
+**Full-Stack Web Developer | AI Engineer | York, UK**
+
+[![Commercial Portfolio](https://img.shields.io/badge/Commercial%20Portfolio-thomasjbutler.me-006400?style=for-the-badge&logo=matrix&logoColor=white)](https://thomasjbutler.me)
+[![Personal Portfolio](https://img.shields.io/badge/Personal%20Portfolio-thomasjbutler.github.io-006400?style=for-the-badge&logo=matrix&logoColor=white)](https://thomasjbutler.github.io/ThomasJButler/)
 
-<div align="center">
-  
-![Trophy](https://github-profile-trophy.vercel.app/?username=ThomasJButler&theme=matrix&no-frame=true&row=1&column=6)
 
 </div>
 
+<!-- Table of Contents -->
+- [About Me](#about-me)
+- [My Tech Stacks](#my-tech-stacks)
+- [Credentials & Specialisations](#credentials--specialisations)
+- [Focus Areas](#focus-areas)
+- [Featured Projects](#featured-projects)
+- [Get in Touch](#get-in-touch)
+
 ## About Me
 
-Hey! 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.
+A Full-stack web developer and AI Engineer from York, UK. 
 
-I've got this slightly obsessive thing about building tech to empower 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's UX in mind?"
+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.
 
-I love the technical challenges too and solving problems with code but what really gets me up in the morning is knowing that something I built one day, may help someone feel more confident, more included, or just have a bit more fun with technology. In an AI world, it's more important than ever to build friendly tech to make life easier for humans.
+I'm currently focused on creating AI integrated systems, building ethical AI models, and Next.js/React web applications as a secure front-end.
 
 <p align="center">
  <img width="1005" src="https://raw.githubusercontent.com/ThomasJButler/ThomasJButler/output/snake/github-contribution-grid-snake.svg" alt="snake"/>
 </p>
 
-<div align="center">
-  <img src="https://capsule-render.vercel.app/api?type=waving&color=00FF00&height=100&section=footer" width="100%" />
-</div>
-
-## ⚡ My Tech Stacks & Credentials
-
-### **Modern Web Stack**
-React | Vite | TypeScript | Supabase | Vercel | Tailwind 
-
----
-
-### **AI-Powered Applications, Automations, MCP**
-Python | Django | PostgreSQL | OpenAI API | Docker | AWS 
-
----
-
-### **Enterprise Solutions**
-C# | .NET | Azure | SQL Server | Umbraco | AWS
-
----
-
-## **Qualifications**
-- AWS Qualified | Azure Qualified | Cisco Qualified | HubSpot Qualified  
-- Level 4 Software Developer Apprenticeship (Completed 2024)  
-- City & Guilds Level 2 ICT Systems Support (July 2025)  
-- *Machine Learning: Mastering Generative AI & Agents* (Aug–Sep 2025)  
-
----
-
-## **Specialisations**
-- **AI Model Building** → custom models, LLM training, prompt engineering (weird hobby), performance testing  
-- **Advanced CSS** → GSAP animations, 3D transforms, matrix effects  
-- **Full-Stack Architecture** → end-to-end application development  
-- **Cross-Platform Development** → Mac, Windows, iOS (currently learning)  
-- **Automation** → n8n workflows + API integrations + MCP creation   
-
----
-
-## 📊 GitHub Statistics
+## My Tech Stacks
+
+<table align="center">
+<tr>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=react" width="48" height="48" alt="React" />
+<br>React
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=typescript" width="48" height="48" alt="TypeScript" />
+<br>TypeScript
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=vite" width="48" height="48" alt="Vite" />
+<br>Vite
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=python" width="48" height="48" alt="Python" />
+<br>Python
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=django" width="48" height="48" alt="Django" />
+<br>Django
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=nodejs" width="48" height="48" alt="Node.js" />
+<br>Node.js
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=dotnet" width="48" height="48" alt=".NET" />
+<br>.NET
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=cs" width="48" height="48" alt="C#" />
+<br>C#
+</td>
+</tr>
+<tr>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=postgresql" width="48" height="48" alt="PostgreSQL" />
+<br>PostgreSQL
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=mongodb" width="48" height="48" alt="MongoDB" />
+<br>MongoDB
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=supabase" width="48" height="48" alt="Supabase" />
+<br>Supabase
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=docker" width="48" height="48" alt="Docker" />
+<br>Docker
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=aws" width="48" height="48" alt="AWS" />
+<br>AWS
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=azure" width="48" height="48" alt="Azure" />
+<br>Azure
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=vercel" width="48" height="48" alt="Vercel" />
+<br>Vercel
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=tailwind" width="48" height="48" alt="Tailwind" />
+<br>Tailwind
+</td>
+</tr>
+<tr>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=tensorflow" width="48" height="48" alt="TensorFlow" />
+<br>TensorFlow
+</td>
+<td align="center" width="96">
+<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/scikitlearn/scikitlearn-original.svg" width="48" height="48" alt="Scikit-learn" />
+<br>Scikit-learn
+</td>
+<td align="center" width="96">
+<img src="https://www.svgrepo.com/show/306500/openai.svg" width="48" height="48" alt="OpenAI" />
+<br>OpenAI
+</td>
+<td align="center" width="96">
+<img src="https://cdn.worldvectorlogo.com/logos/langchain.svg" width="48" height="48" alt="LangChain" />
+<br>LangChain
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=css" width="48" height="48" alt="CSS3" />
+<br>CSS3
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=html" width="48" height="48" alt="HTML5" />
+<br>HTML5
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=git" width="48" height="48" alt="Git" />
+<br>Git
+</td>
+<td align="center" width="96">
+<img src="https://skillicons.dev/icons?i=vscode" width="48" height="48" alt="VS Code" />
+<br>VS Code
+</td>
+</tr>
+</table>
+
+## Credentials & Specialisations
+
+### Qualifications
+- **AWS Qualified** | **Azure Qualified** | **Cisco Qualified** | **HubSpot Qualified**
+- Level 4 Software Developer Apprenticeship (2023-2024)
+- City & Guilds Level 2 ICT Systems Support (May 2025)
+- Machine Learning: Mastering Generative AI & Agents (September 2025)
+
+### Areas of Focus
+- **AI & ML** → Custom models, LLM training, prompt engineering, performance testing
+- **Automation** → n8n workflows, API integrations, MCP creation, custom AI models
+- **CSS** → GSAP animations, 3D transforms, Matrix effects
+- **Full-Stack** → End-to-end application development  
+
+## Featured Projects
+
+- **SQL-Ball** – RAG-powered NL-to-SQL using a custom collated dataset of European football results. [GitHub →](https://github.com/ThomasJButler/SQL-Ball)
+- **AgenticAICoursePortfolio** – Portfolio of web apps from the Generative AI & Agents Bootcamp. [GitHub →](https://github.com/ThomasJButler/AgenticAICoursePortfolio)
+- **The Matrix Arcade** – Collection of custom-built games in the style of “The Matrix.” [GitHub →](https://github.com/ThomasJButler/The-Matrix-Arcade)
+
+## GitHub Stats
 
 <div align="center">
 
 ![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)
 
-</div>
-
-<div align="center">
-  
 ![Activity Graph](https://github-readme-activity-graph.vercel.app/graph?username=ThomasJButler&theme=react-dark&bg_color=0D1117&color=00FF00&line=00FF00&point=FFFFFF&area_color=00FF00&area=true&hide_border=true)
 
 </div>
 
----
+[![LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/thomasbutleruk/)
+[![CodePen](https://img.shields.io/badge/CodePen-Follow-1e1e1e?style=for-the-badge&logo=codepen&logoColor=white)](https://codepen.io/thomasbutler)
+[![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)
+
+## Get in Touch
+
+- **Email:** [[email protected]](mailto:[email protected])
+- **Resume:** [Download Resume (PDF)](https://cvgenius.com/uk/cv-link/ca1e2690-125c-4422-804d-b68c1935f598/449d6614-8209-4741-bd30-2fc12fe4f8e8)
 
 <div align="center">
   <img src="https://capsule-render.vercel.app/api?type=waving&color=00FF00&height=100&section=footer" width="100%" />