diff --git a/project.html b/project.html
deleted file mode 100755
index b400fb1..0000000
--- a/project.html
+++ /dev/null
@@ -1,112 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
Lew's Portfolio
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/project_pages/css/project1Style.css b/project_pages/css/project1Style.css
new file mode 100644
index 0000000..dd8734b
--- /dev/null
+++ b/project_pages/css/project1Style.css
@@ -0,0 +1,13 @@
+/* project1Style.css — Web Scraper / Discord Bot
+ Accent: Discord purple-ish teal, keeps primary blue family */
+@import "projectDetailStyle.css";
+
+.project-hero .hero-overlay {
+ background: linear-gradient(to top, rgba(10, 15, 40, 0.93) 0%, transparent 100%);
+}
+
+.project-tag {
+ color: #7EB8FF;
+ background: rgba(126, 184, 255, 0.12);
+ border-color: rgba(126, 184, 255, 0.4);
+}
diff --git a/project_pages/css/project2Style.css b/project_pages/css/project2Style.css
new file mode 100644
index 0000000..a147e32
--- /dev/null
+++ b/project_pages/css/project2Style.css
@@ -0,0 +1,27 @@
+/* project2Style.css — To-Do List
+ Warm green accent to evoke task completion */
+@import "projectDetailStyle.css";
+
+.project-hero .hero-overlay {
+ background: linear-gradient(to top, rgba(10, 30, 20, 0.93) 0%, transparent 100%);
+}
+
+.project-tag {
+ color: #7ED4A0;
+ background: rgba(126, 212, 160, 0.12);
+ border-color: rgba(126, 212, 160, 0.4);
+}
+
+.detail-section h2 {
+ color: #2a8a58;
+}
+
+.tech-pills span {
+ background-color: rgba(42, 138, 88, 0.1);
+ border-color: rgba(42, 138, 88, 0.3);
+ color: #1e6b42;
+}
+
+.feature-list li::before {
+ color: #2a8a58;
+}
diff --git a/project_pages/css/project3Style.css b/project_pages/css/project3Style.css
new file mode 100644
index 0000000..d4e028f
--- /dev/null
+++ b/project_pages/css/project3Style.css
@@ -0,0 +1,32 @@
+/* project3Style.css — API Accessing Practice (Go)
+ Golang's cyan/teal brand feel */
+@import "projectDetailStyle.css";
+
+.project-hero .hero-overlay {
+ background: linear-gradient(to top, rgba(0, 25, 35, 0.93) 0%, transparent 100%);
+}
+
+.project-tag {
+ color: #00D4CF;
+ background: rgba(0, 212, 207, 0.1);
+ border-color: rgba(0, 212, 207, 0.4);
+}
+
+.detail-section h2 {
+ color: #007a7a;
+}
+
+.tech-pills span {
+ background-color: rgba(0, 180, 175, 0.1);
+ border-color: rgba(0, 180, 175, 0.3);
+ color: #005f5e;
+}
+
+.feature-list li::before {
+ color: #00a8a4;
+}
+
+code {
+ background: rgba(0, 180, 175, 0.08);
+ color: #005f5e;
+}
diff --git a/project_pages/css/project4Style.css b/project_pages/css/project4Style.css
new file mode 100644
index 0000000..77fb5af
--- /dev/null
+++ b/project_pages/css/project4Style.css
@@ -0,0 +1,41 @@
+/* project4Style.css — Graph Theory: Flat Buffer
+ Deep indigo / data-structures feel */
+@import "projectDetailStyle.css";
+
+.project-hero .hero-overlay {
+ background: linear-gradient(to top, rgba(15, 10, 40, 0.95) 0%, transparent 100%);
+}
+
+.project-tag {
+ color: #B39DFF;
+ background: rgba(179, 157, 255, 0.1);
+ border-color: rgba(179, 157, 255, 0.4);
+}
+
+.detail-section h2 {
+ color: #5c35cc;
+}
+
+.tech-pills span {
+ background-color: rgba(92, 53, 204, 0.1);
+ border-color: rgba(92, 53, 204, 0.3);
+ color: #3e1f9e;
+}
+
+.feature-list li::before {
+ color: #5c35cc;
+}
+
+code {
+ background: rgba(92, 53, 204, 0.07);
+ color: #3e1f9e;
+}
+
+/* Animate the dashed SVG lines in the placeholder hero */
+.placeholder-graphic svg line {
+ animation: dash-flow 3s linear infinite;
+}
+
+@keyframes dash-flow {
+ to { stroke-dashoffset: -24; }
+}
diff --git a/project_pages/css/project5Style.css b/project_pages/css/project5Style.css
new file mode 100644
index 0000000..6281f31
--- /dev/null
+++ b/project_pages/css/project5Style.css
@@ -0,0 +1,12 @@
+/* project5Style.css — Coming Soon / Under Construction */
+@import "projectDetailStyle.css";
+
+/* Spin the dashed circle on the under-construction SVG */
+.coming-soon-icon svg circle {
+ animation: spin-ring 12s linear infinite;
+ transform-origin: 40px 40px;
+}
+
+@keyframes spin-ring {
+ to { transform: rotate(360deg); }
+}
diff --git a/project_pages/css/projectDetailStyle.css b/project_pages/css/projectDetailStyle.css
new file mode 100644
index 0000000..a54c37e
--- /dev/null
+++ b/project_pages/css/projectDetailStyle.css
@@ -0,0 +1,260 @@
+/* ============================================================
+ Shared Project Detail Styles
+ Include AFTER projectStyle.css
+ ============================================================ */
+
+/* --- Hero -------------------------------------------------- */
+.project-detail {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 3rem;
+ max-width: 1000px;
+ margin: 0 auto;
+ width: 100%;
+ padding: 2rem 2rem 4rem;
+}
+
+.project-hero {
+ position: relative;
+ border-radius: 20px;
+ overflow: hidden;
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+ min-height: 320px;
+}
+
+.hero-image {
+ width: 100%;
+ height: 360px;
+}
+
+.hero-image img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+}
+
+/* Placeholder hero for projects without an image */
+.hero-image--placeholder {
+ background: linear-gradient(135deg, #1B3A4B 0%, #0d2233 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.placeholder-graphic {
+ width: 280px;
+ opacity: 0.7;
+}
+
+.placeholder-graphic svg {
+ width: 100%;
+ height: auto;
+}
+
+/* Gradient overlay + text on hero */
+.hero-overlay {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 2rem 2rem 2rem;
+ background: linear-gradient(to top, rgba(10, 20, 30, 0.92) 0%, transparent 100%);
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.project-tag {
+ font-family: 'Quicksand', sans-serif;
+ font-size: 0.78rem;
+ font-weight: 600;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--clr-accent-light);
+ background: rgba(240, 155, 0, 0.15);
+ border: 1px solid rgba(240, 155, 0, 0.4);
+ border-radius: 20px;
+ padding: 0.2rem 0.8rem;
+ width: fit-content;
+}
+
+.hero-overlay h1 {
+ font-family: 'Oswald', sans-serif;
+ font-size: clamp(1.6rem, 4vw, 2.6rem);
+ font-weight: 600;
+ color: #fff;
+ line-height: 1.15;
+ margin: 0;
+}
+
+.hero-sub {
+ color: rgba(255, 255, 255, 0.75);
+ font-size: 1rem;
+ margin: 0;
+}
+
+/* --- Buttons ----------------------------------------------- */
+.btn-primary {
+ display: inline-block;
+ margin-top: 0.5rem;
+ padding: 0.55rem 1.4rem;
+ background-color: var(--clr-primary);
+ color: #fff;
+ font-weight: 700;
+ font-size: 0.9rem;
+ border-radius: 10px;
+ text-decoration: none;
+ transition: background-color 0.25s ease, transform 0.2s ease;
+ width: fit-content;
+}
+
+.btn-primary:hover {
+ background-color: #007ec0;
+ transform: translateY(-2px);
+}
+
+.btn-secondary {
+ display: inline-block;
+ padding: 0.55rem 1.4rem;
+ border: 2px solid var(--clr-primary);
+ color: var(--clr-primary);
+ font-weight: 700;
+ font-size: 0.9rem;
+ border-radius: 10px;
+ text-decoration: none;
+ transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
+}
+
+.btn-secondary:hover {
+ background-color: var(--clr-primary);
+ color: #fff;
+ transform: translateY(-2px);
+}
+
+/* --- Detail grid ------------------------------------------- */
+.detail-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 2rem;
+}
+
+.detail-section {
+ background-color: var(--clr-card-background);
+ border-radius: 16px;
+ padding: 1.75rem;
+ box-shadow: 0 2px 10px rgba(91, 127, 161, 0.18);
+}
+
+.detail-section h2 {
+ font-family: 'Oswald', sans-serif;
+ font-size: 1.25rem;
+ font-weight: 500;
+ color: var(--clr-primary);
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ margin-bottom: 0.9rem;
+}
+
+.detail-section p {
+ color: var(--clr-text-light);
+ line-height: 1.7;
+}
+
+/* Feature list */
+.feature-list {
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ gap: 0.6rem;
+ padding: 0;
+}
+
+.feature-list li {
+ color: var(--clr-text-light);
+ padding-left: 1.4rem;
+ position: relative;
+ line-height: 1.6;
+}
+
+.feature-list li::before {
+ content: "▸";
+ position: absolute;
+ left: 0;
+ color: var(--clr-primary);
+ font-size: 0.85rem;
+}
+
+/* Tech pills */
+.tech-pills {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.6rem;
+}
+
+.tech-pills span {
+ font-family: 'Quicksand', sans-serif;
+ font-size: 0.85rem;
+ font-weight: 600;
+ padding: 0.35rem 0.9rem;
+ border-radius: 20px;
+ background-color: rgba(0, 157, 240, 0.12);
+ border: 1px solid rgba(0, 157, 240, 0.35);
+ color: #005f90;
+}
+
+/* Inline code */
+code {
+ font-family: 'Courier New', monospace;
+ font-size: 0.88em;
+ background: rgba(0, 157, 240, 0.08);
+ border-radius: 4px;
+ padding: 0.1em 0.4em;
+ color: #005f90;
+}
+
+/* --- Project prev/next nav --------------------------------- */
+.project-nav {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+
+/* --- Coming soon page -------------------------------------- */
+.coming-soon-wrapper {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ gap: 1.2rem;
+ padding: 4rem 2rem;
+}
+
+.coming-soon-icon svg {
+ width: 90px;
+ height: 90px;
+}
+
+.coming-soon-wrapper h1 {
+ font-family: 'Oswald', sans-serif;
+ font-size: 2.2rem;
+ font-weight: 500;
+ color: var(--clr-text-main);
+}
+
+.coming-soon-wrapper p {
+ color: var(--clr-text-light);
+ font-size: 1.05rem;
+ max-width: 40ch;
+}
+
+/* --- Responsive ------------------------------------------- */
+@media (min-width: 700px) {
+ .detail-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
diff --git a/project_pages/project1.html b/project_pages/project1.html
new file mode 100644
index 0000000..c44ff41
--- /dev/null
+++ b/project_pages/project1.html
@@ -0,0 +1,104 @@
+
+
+
+
+
+
+
+
+
+
+
Web Scraper / Discord Bot – Lew's Portfolio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Golang · Web Scraping · Discord API
+
Web Scraper / Discord Bot
+
Automated SHiFT code delivery straight to your Discord server.
+
View Release ↗
+
+
+
+
+ Overview
+
+ This project combines a web scraper with a Discord bot to automatically surface
+ SHiFT codes for Borderlands 4. When a user triggers the bot on Discord, it
+ scrapes the latest codes and returns them instantly — no manual hunting required.
+
+
+
+
+ Features
+
+ On-demand scraping triggered by Discord command
+ Parses and formats code lists for readability
+ Error handling for network / parse failures
+ Lightweight — runs on a small VPS or home server
+
+
+
+
+ Tech Stack
+
+ Golang
+ Discord Go
+ GoColly
+ Request/Response
+
+
+
+
+ Challenges & Learnings
+
+ Navigating the structure of a dynamically rendered page required careful selector
+ targeting. Integrating the scraper output into Discord's message format taught
+ clean separation of concerns between data retrieval and presentation layers.
+
+
+
+
+
+
+
+
+
diff --git a/project_pages/project2.html b/project_pages/project2.html
new file mode 100644
index 0000000..ad74880
--- /dev/null
+++ b/project_pages/project2.html
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+
+
+
+
+
To-Do List – Lew's Portfolio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
JavaScript · CSS · HTML
+
To-Do List
+
Stay organised with priority, date, and category sorting.
+
View Release ↗
+
+
+
+
+ Overview
+
+ A fully interactive To-Do list application that lets users add, edit, and
+ remove tasks while sorting them by priority level, due date, or custom
+ category. Built to explore front-end state management without a framework.
+
+
+
+
+ Features
+
+ Add, edit, complete, and delete tasks
+ Sort by priority (High / Medium / Low), date, or category
+ Persistent storage via localStorage
+ Responsive layout for mobile and desktop
+
+
+
+
+ Tech Stack
+
+ Object Oriented Java Proframming
+ Local Storage
+
+
+
+
+ Challenges & Learnings
+
+ Managing sort state across multiple criteria without a reactive framework
+ required thoughtful event delegation and a clear data model. This project
+ solidified foundational DOM manipulation skills and reinforced mobile-first
+ CSS practices.
+
+
+
+
+
+
+
+
+
diff --git a/project_pages/project3.html b/project_pages/project3.html
new file mode 100644
index 0000000..ffeafd7
--- /dev/null
+++ b/project_pages/project3.html
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+
+
+
+
+
API Accessing Practice – Lew's Portfolio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Golang · REST API · JSON
+
API Accessing Practice
+
Fetching, parsing, and displaying live data with Go.
+
View Release ↗
+
+
+
+
+ Overview
+
+ A command-line program written in Go that connects to a public REST API,
+ retrieves JSON payloads, and displays the parsed data in a clean, formatted
+ output. The project demonstrates practical API consumption and Go's standard
+ library for HTTP and JSON.
+
+
+
+
+ Features
+
+ HTTP GET requests using Go's net/http package
+ JSON unmarshalling into typed structs
+ Formatted terminal output with error reporting
+ Configurable endpoint via CLI flags
+
+
+
+
+ Tech Stack
+
+ Go (Golang)
+ net/http
+ encoding/json
+ REST APIs
+
+
+
+
+ Challenges & Learnings
+
+ Learning Go's strict typing system alongside JSON decoding required careful
+ struct design to match API schemas. This project built confidence in Go's
+ idioms — error handling patterns, struct tags, and the standard library's
+ power for network tasks.
+
+
+
+
+
+
+
+
+
diff --git a/project_pages/project4.html b/project_pages/project4.html
new file mode 100644
index 0000000..038c69b
--- /dev/null
+++ b/project_pages/project4.html
@@ -0,0 +1,117 @@
+
+
+
+
+
+
+
+
+
+
+
Graph Theory: Flat Buffer – Lew's Portfolio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Data Structures · Memory Management
+
Graph Theory: Flat Buffer
+
A memory-consistent graph implementation with zero object duplication.
+
View Repository ↗
+
+
+
+
+ Overview
+
+ This project explores graph theory through the lens of memory efficiency.
+ The flat buffer architecture ensures a consistent, predictable memory
+ footprint — no object duplication, only controlled growth, reduction,
+ or deletion of nodes and edges.
+
+
+
+
+ Design Goals
+
+ Flat contiguous buffer — no pointer-chasing heap fragmentation
+ Strict no-duplication contract for all graph objects
+ Deterministic add / grow / shrink / delete lifecycle
+ Suitable for use in performance-sensitive or embedded contexts
+
+
+
+
+ Tech Stack
+
+ C / C++
+ Graph Theory
+ Memory Layouts
+ Data Structures
+
+
+
+
+ Challenges & Learnings
+
+ Designing a flat buffer that still supports dynamic graph mutations required
+ rethinking typical pointer-based graph representations. The key insight was
+ using index-based references within the buffer rather than raw pointers,
+ enabling safe resizing without invalidating existing relationships.
+
+
+
+
+
+
+
+
+
diff --git a/project_pages/project5.html b/project_pages/project5.html
new file mode 100644
index 0000000..f98cad9
--- /dev/null
+++ b/project_pages/project5.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
+
+
+
+
Coming Soon – Lew's Portfolio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 🚧
+
+
+
Under Construction
+
Something new is being built here. Check back soon!
+
← Back to Projects
+
+
+
+
+
+
diff --git a/projects.html b/projects.html
new file mode 100644
index 0000000..488c9b4
--- /dev/null
+++ b/projects.html
@@ -0,0 +1,115 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Lew's Portfolio
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
- 
-