From f26f81d94169b3c17d579c09c1cd8cf77fad3ecd Mon Sep 17 00:00:00 2001 From: GeorgeWebberley Date: Mon, 26 Jan 2026 20:43:11 +0100 Subject: [PATCH] Brushed up on core sections of landing page. Laid our structure for web/mobile/devops pages --- .woodpecker.yaml | 3 +- app/page copy 2.tsx | 128 +++++++++++++++++ app/page copy.tsx | 195 +++++++++++++++++++++++++ app/page.tsx | 237 ++++++++++++++++++++++--------- app/projects/[category]/page.tsx | 116 +++++++++++++++ 5 files changed, 610 insertions(+), 69 deletions(-) create mode 100644 app/page copy 2.tsx create mode 100644 app/page copy.tsx create mode 100644 app/projects/[category]/page.tsx diff --git a/.woodpecker.yaml b/.woodpecker.yaml index 659deec..8002498 100644 --- a/.woodpecker.yaml +++ b/.woodpecker.yaml @@ -2,8 +2,7 @@ variables: - &app_name "portfolio" when: - - event: [release, push] - branch: main + - event: release steps: build-and-push: diff --git a/app/page copy 2.tsx b/app/page copy 2.tsx new file mode 100644 index 0000000..bfb3738 --- /dev/null +++ b/app/page copy 2.tsx @@ -0,0 +1,128 @@ +"use client"; +import Link from 'next/link'; +import { motion } from 'framer-motion'; +import { Globe, Smartphone, Server, Gamepad2, Activity } from 'lucide-react'; + +export default function Home() { + return ( +
+
+

George W.

+

Senior Full Stack Engineer & Tech Lead

+
+ +
+ + {/* Top Row: The Architect (Wide) */} +
+
+

The Architect

+

+ Bridging the gap between complex system architecture and fluid user experiences. + I specialize in designing distributed web systems and cross-platform mobile apps + with a relentless focus on performance, self-sovereign infrastructure, and automated delivery pipelines. +

+
+
+ {['#Architecture', '#SystemDesign', '#Automation', '#FullStack', '#Scalability'].map(tag => ( + {tag} + ))} +
+
+ + {/* Top Row: Hetzner Node (Narrow) */} +
+
+
+ Hetzner Node-01 +
+
+ Status: UP + +
+
+ + {/* Middle Row: Web Systems */} + + +
+ +

Web Systems

+

+ Architecting distributed platforms with a focus on high-availability, API design, and containerized deployment. +

+
+
+ {['Next.js', 'Python', 'Node.js', 'Caddy', 'PostgreSQL'].map(tech => ( + + {tech} + + ))} +
+ + + + {/* Middle Row: Mobile Apps */} + + +
+ +

Mobile Apps

+

+ Building fluid, cross-platform experiences using reactive state management and native hardware integration. +

+
+
+ {['Android', 'iOS', 'Flutter', 'Riverpod', 'Stores'].map(tech => ( + + {tech} + + ))} +
+ + + + {/* Middle Row: Infrastructure (The New Card) */} + + +
+ +

DevOps

+

+ Managing self-hosted cloud nodes with automated CI/CD pipelines, secure proxying, and proactive monitoring. +

+
+
+ {['Docker', 'Woodpecker', 'Hetzner', 'Linux', 'Uptime'].map(tech => ( + + {tech} + + ))} +
+ + + + {/* Bottom Row: The Forge (Wide) */} +
+
+ +
+
+

The Forge

+

Indie Game Dev & Creative Prototypes

+
+
+ +
+
+ ); +} \ No newline at end of file diff --git a/app/page copy.tsx b/app/page copy.tsx new file mode 100644 index 0000000..3b09234 --- /dev/null +++ b/app/page copy.tsx @@ -0,0 +1,195 @@ +"use client"; +import { motion } from "framer-motion"; +import { Server, Globe, Smartphone, Gamepad2, Activity } from "lucide-react"; +import Link from 'next/link'; + +export default function Home() { + return ( +
+ {/* Header section */} +
+

George W.

+

Senior Full Stack Engineer & Tech Lead

+
+ + {/* Bento Grid */} +
+ + {/* About Me - Large Card */} + +
+

The Architect

+

+ Bridging the gap between complex system architecture and fluid user experiences. I specialize in designing distributed web systems and cross-platform mobile apps with a relentless focus on performance, self-sovereign infrastructure, and automated delivery pipelines. +

+
+
+ #NextJS #Flutter #Typescript #Python #Node #Docker #Kubernetes #Serverless #CI/CD +
+ + + {/* Live Pulse Card */} + + {/* The Monitor Map (Easily editable) */} + {(() => { + const monitors = [ + { id: 2, name: "Datasaur" }, + { id: 6, name: "Audiobookshelf" }, + { id: 7, name: "Woodpecker CI" }, + { id: 8, name: "Forgejo Git" }, + { id: 9, name: "Server dashboard" }, + { id: 10, name: "Ratoong" }, + ]; + + return ( + <> + {/* Default View */} +
+
+
+
+ Hetzner Node-01 +
+
+

System Status:

+ Overall Status +
+
+ +
+ + {/* Hover View: Friendly Names */} +
+

Service Registry

+
+ {monitors.map((m) => ( +
+ {m.name} +
+ up + ms +
+
+ ))} +
+
+ + ); + })()} + + + {/* Project One */} + + + {/* Icon Container - Fixed size ensures it never disappears */} +
+ +
+ +
+

Web Systems

+

+ Architecting distributed platforms with a focus on high-availability, API design, and containerized deployment. +

+
+ + {/* Tech Pips - Use 'flex-wrap' and 'gap-y' to handle multiline safely */} +
+ {['Next.js', 'Node.js', 'Python', 'PostgreSQL', 'Docker'].map((tech) => ( + + {tech} + + ))} +
+ + {/* Hover Indicator */} +
+
+
+ + + + {/* Project Two */} + + +
+ +
+

Mobile Apps

+

+ Building fluid, cross-platform experiences using reactive state management and native hardware integration. +

+ + {/* Tech Pips */} +
+ {['Android', 'iOS', 'Flutter', 'Riverpod', 'Publishing'].map((tech) => ( + + {tech} + + ))} +
+ + +
+
+
+ + + + {/* Game Teaser / The Lab */} + +
+ +
+
+

The Forge

+

Indie Game Dev & Prototypes

+
+ + +
+ + {/* Deployment Footer */} +
+
+
+

Pipeline Status

+ Build Status +
+
+

Engine: Next.js 15 (Standalone)

+
+ +
+
+

+ Deploy: {process.env.NEXT_PUBLIC_APP_VERSION || 'v1.0.0-dev'} +

+
+
+
+ ); +} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 7533749..64d4cab 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,38 +1,96 @@ "use client"; -import { motion } from "framer-motion"; -import { Server, Globe, Smartphone, Gamepad2, Activity } from "lucide-react"; + +import Link from 'next/link'; +import { motion } from 'framer-motion'; +import { Globe, Smartphone, Server, Gamepad2, Activity } from 'lucide-react'; export default function Home() { return (
- {/* Header section */} -
-

George W.

-

Senior Full Stack Engineer & Tech Lead

-
- - {/* Bento Grid */} -
+
- {/* About Me - Large Card */} - -
-

The Architect

-

- Engineering high-scale web systems and mobile experiences. - Passionate about self-hosting, clean architecture, and performance. -

-
-
- #NextJS #Flutter #Typescript #Python #Node #Docker #Kubernetes #Serverless #CI/CD -
- +
+

George W.

+

Senior Full Stack Engineer & Tech Lead

+
- {/* Live Pulse Card */} - + + {/* Top Row Left: The Architect */} +
+ {/* Background Decoration: Subtle Grid or Blueprint */} +
+ {/* You could place a subtle SVG circuit or architectural grid here */} +
+ + {/* Left: Bio & Tags */} +
+
+

The Architect

+

+ Bridging the gap between rigid regulatory requirements and fluid user experiences. + I specialize in designing distributed systems and + cross-platform mobile apps with a focus on + automated delivery and high-integrity code. +

+
+ +
+ {['#Architecture', '#Regulatory Compliance', '#Agile Leadership', '#DevOps'].map(tag => ( + + {tag} + + ))} +
+
+ + {/* Vertical Divider */} +
+ + {/* Right: Seniority Specs */} +
+
+
+

Leadership

+

+ Tech Lead & Scrum Master. Orchestrating sprint cycles, system design, and cross-functional team growth. +

+
+ +
+

Integrity

+

+ Experienced in High-Stakes Environments (Medical/Regulatory), QMS, and Cyber Essentials. +

+
+ +
+

Infrastructure

+

+ Kubernetes, GCP, and automated CI/CD pipelines. +

+
+
+
+
+ {/*
+
+

The Architect

+

+ Bridging the gap between complex system architecture and fluid user experiences. + I specialize in designing distributed web systems and cross-platform mobile apps + with a focus on performance and automated delivery. +

+
+
+ {['#Architecture', '#Regulatory', '#SystemDesign', '#Automation', '#FullStack', '#ProductOwner'].map(tag => ( + {tag} + ))} +
+
*/} + + {/* Top Row Right: The Service Registry (Restored) */} + @@ -70,14 +128,14 @@ export default function Home() { {/* Hover View: Friendly Names */}
-

Service Registry

-
+

Service Registry

+
{monitors.map((m) => (
{m.name}
- up - ms + up + ms
))} @@ -88,44 +146,87 @@ export default function Home() { })()} - {/* Project One */} - - -

Prod Website

-

Case Study 01

- + {/* Middle Row: Web Systems */} + + +
+ +

Web Systems

+

+ Architecting distributed platforms with a focus on high-availability and containerized deployment. +

+
+
+ {['Next.js', 'Python', 'Node.js', 'Caddy', 'PostgreSQL'].map(tech => ( + + {tech} + + ))} +
+ + - {/* Project Two */} - - -

Mobile App

-

Active Dev

- + {/* Middle Row: Mobile Apps */} + + +
+ +

Mobile Apps

+

+ Building fluid, cross-platform experiences using reactive state and native hardware integration. +

+
+
+ {['Android', 'iOS', 'Flutter', 'Riverpod', 'Stores'].map(tech => ( + + {tech} + + ))} +
+ + - {/* Game Teaser / The Lab */} - -
- + {/* Middle Row: DevOps */} + + +
+ +

DevOps

+

+ Managing self-hosted cloud nodes with automated CI/CD pipelines and proactive monitoring. +

+
+
+ {['Docker', 'Woodpecker', 'Hetzner', 'Linux', 'Uptime'].map(tech => ( + + {tech} + + ))} +
+ + + + {/* Bottom Row: The Forge */} +
+
+ +
+
+

The Forge

+

Indie Game Dev & Creative Prototypes

+
-
-

The Forge

-

Indie Game Dev & Prototypes

-
- - -
- - {/* Deployment Footer */} -
+
+

Pipeline Status

@@ -146,6 +247,8 @@ export default function Home() {

+
+
); } \ No newline at end of file diff --git a/app/projects/[category]/page.tsx b/app/projects/[category]/page.tsx new file mode 100644 index 0000000..2e0be7b --- /dev/null +++ b/app/projects/[category]/page.tsx @@ -0,0 +1,116 @@ +"use client"; +import { motion } from "framer-motion"; +import Link from "next/link"; +import { Globe, Smartphone, ArrowLeft } from "lucide-react"; +import { use } from "react"; + +const categories = { + web: { + title: "Web Systems", + icon: , + description: "Architecting scalable web applications and distributed systems.", + projects: [ + { + name: "Ratoong", + detail: "Professional production platform.", + stack: ["Node.js", "PostgreSQL", "Caddy"] + }, + { + name: "Datasaur", + detail: "Full-stack data science pipeline.", + stack: ["Python", "FastAPI", "Next.js"] + } + ] + }, + mobile: { + title: "Mobile Apps", + icon: , + description: "Building cross-platform experiences with Flutter and native integrations.", + projects: [ + { + name: "Flutter App 1", + detail: "Active Development - Coming Soon", + stack: ["Flutter", "Dart", "Firebase"] + }, + { + name: "Flutter App 2", + detail: "Internal R&D Prototype", + stack: ["Flutter", "Riverpod", "SQLite"] + } + ] + } +}; + +export default function CategoryPage({ params }: { params: Promise<{ category: string }> }) { + + + const resolvedParams = use(params); + const category = resolvedParams.category; + + const data = categories[category as keyof typeof categories]; + + if (!data) return
Category not found.
; + + + if (!data) { + return ( +
+

404: Category Not Found

+

Path: /projects/{category}

+ Return Home +
+ ); + } + + return ( +
+ + BACK TO DASHBOARD + + + +
+ {data.icon} +

{data.title}

+
+

{data.description}

+ +
+ {data.projects.map((project, index) => ( + +
+
+

{project.name}

+

{project.detail}

+
+
+ {project.stack.map(s => ( + + {s} + + ))} +
+
+ + ))} +
+ +
+ ); +} \ No newline at end of file