Added individual pages with descriptions for each project.

This commit is contained in:
Rapturate
2026-03-23 10:39:30 -04:00
parent 346f868784
commit d744abba86
15 changed files with 993 additions and 118 deletions

BIN
files.zip Normal file

Binary file not shown.

View File

@@ -19,7 +19,7 @@
<a href="index.html"><img class ="nav-logo" src="./images/icons/logo.svg" alt="lew's logo" width="180" height="auto"></a>
<nav>
<ul class="nav-links">
<li><a href="./project.html">Projects</a></li>
<li><a href="./projects.html">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
@@ -54,7 +54,7 @@
<h2>Personal Projects</h2>
<div id="projects">
<a href="https://git.lewispricedev.com/Rapturate/SHiFT_Codes_Bot">
<a href="./project_pages/project1.html">
<div class="project-box">
<img src="./images/project_imgs/Discord_Bot.jpg" alt="discord bot picture">
<div class="proj-text">
@@ -64,7 +64,7 @@
</div>
</a>
<a href="https://git.lewispricedev.com/Rapturate/To_Do_List">
<a href="./project_pages/project2.html">
<div class="project-box">
<img src="./images/project_imgs/ToDoList Project.jpg" alt="ToDo List picture">
<div class="proj-text">
@@ -74,7 +74,7 @@
</div>
</a>
<a href="https://lewispricedev.com/project.html">
<a href="./project_pages/project3.html">
<div class="project-box">
<img src="./images/project_imgs/<some_image>" alt="Under Construction">
<div class="proj-text">
@@ -84,7 +84,7 @@
</div>
</a>
<a href="https://git.lewispricedev.com/Rapturate/API_Practice">
<a href="./project_pages/project4.html">
<div class="project-box">
<img src="./images/project_imgs/api_practice.jpg" alt="api project picture">
<div class="proj-text">
@@ -94,7 +94,7 @@
</div>
</a>
<a href="https://lewispricedev.com/project.html">
<a href="./project_pages/project5.html">
<div class="project-box">
<img src="./images/project_imgs/<some project image>" alt="project picture">
<div class="proj-text">

View File

@@ -1,112 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
<!--End Fonts-->
<link rel="stylesheet" href="css/projectStyle.css">
<title>Lew's Portfolio</title>
</head>
<body>
<header>
<div class="nav-bar">
<a href="index.html"><img class ="nav-logo" src="./images/icons/logo.svg" alt="lew's logo" width="180" height="auto"></a>
<nav>
<ul class="nav-links">
<li><a href="./index.html">Home</a></li>
<li><a href="./index.html#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section id="projects">
<!--Project 1-->
<div class="project-card">
<a href="https://git.lewispricedev.com/Rapturate/SHiFT_Codes_Bot/releases/tag/R1" >
<div class="project-image">
<img src="./images/project_imgs/ToDoList Project.jpg" alt="Project 1 Image">
</div>
<div class="project-description">
<h2>Web Scraper/Discord Bot</h2>
<p>A web scraper and Discord bot that pulls codes to unlock special gear in Borderlands 4 when prompted by a user on Discord.</p>
</div>
</a>
</div>
<!--Project 2-->
<div class="project-card">
<a href="https://git.lewispricedev.com/Rapturate/To_Do_List/releases/tag/R1">
<div class="project-image">
<img src="./images/project_imgs/ToDoList Project.jpg" alt="Project 2 Image">
</div>
<div class="project-description">
<h2>To-Do List</h2>
<p>A modifiable To-Do list that allows for organization and scheduling based on priority, date, and category.</p>
</div>
</a>
</div>
<!--Project 3-->
<div class="project-card">
<a href="https://git.lewispricedev.com/Rapturate/API_Practice/releases/tag/R1">
<div class="project-image">
<img src="./images/project_imgs/api_practice.jpg" alt="API Practice Image">
</div>
<div class="project-description">
<h2>API Accessing Practice</h2>
<p>A program written in golang for accessing a public API website. This demonstrates my ability to access APIs and display and manipulate data retrieved.</p>
</div>
</a>
</div>
<!--Project 4-->
<div class="project-card">
<a href="https://git.lewispricedev.com/Rapturate/">
<div class="project-image">
<img src="./images/project_imgs/<place_holder>" alt="Graph Theory Image">
</div>
<div class="project-description">
<h2>Graph Theory: Flat Buffer</h2>
<p>A graph theory project optimized for a consistent memory usage graph. There should be no duplications of objects, only addition, growth, reduction, or deletion of objects.</p>
</div>
</a>
</div>
<!--Project 5-->
<div class="project-card">
<a href="https://git.lewispricedev.com/Rapturate/">
<div class="project-image">
<img src="./images/project_imgs/<Place_holder>" alt="Project Image">
</div>
<div class="project-description">
<h2>Project Place Holder</h2>
<p>Under Construction</p>
</div>
</a>
</div>
</section>
</main>
<footer>
<p>&copy; 2024 LewisPriceDev, All rights reserved.</p>
<div class="social-links">
<a href="https://www.linkedin.com/in/lewis-price-a79185195/" target="_blank" aria-label="LinkedIn">
<img src="images/icons/linkedin-icon.svg" alt="">
</a>
<a class="mail-img" href="mailto:lewis.e.price@outlook.com">
<img src="./images/icons/mail_icon.svg" alt="lewis.price@outlook.com">
</a>
</div>
</footer>
</body>
</html>

View File

@@ -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);
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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; }
}

View File

@@ -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); }
}

View File

@@ -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);
}
}

104
project_pages/project1.html Normal file
View File

@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/projectStyle.css">
<link rel="stylesheet" href="./css/project1Style.css">
<title>Web Scraper / Discord Bot Lew's Portfolio</title>
</head>
<body>
<header>
<div class="nav-bar">
<a href="../index.html"><img class="nav-logo" src="../images/icons/logo.svg" alt="lew's logo" width="180" height="auto"></a>
<nav>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="../projects.html">Projects</a></li>
<li><a href="../index.html#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="project-detail">
<div class="project-hero">
<div class="hero-image">
<img src="../images/project_imgs/ToDoList Project.jpg" alt="Web Scraper / Discord Bot">
</div>
<div class="hero-overlay">
<span class="project-tag">Golang · Web Scraping · Discord API</span>
<h1>Web Scraper / Discord Bot</h1>
<p class="hero-sub">Automated SHiFT code delivery straight to your Discord server.</p>
<a class="btn-primary" href="https://git.lewispricedev.com/Rapturate/SHiFT_Codes_Bot/releases/tag/R1" target="_blank">View Release ↗</a>
</div>
</div>
<div class="detail-grid">
<section class="detail-section">
<h2>Overview</h2>
<p>
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.
</p>
</section>
<section class="detail-section">
<h2>Features</h2>
<ul class="feature-list">
<li>On-demand scraping triggered by Discord command</li>
<li>Parses and formats code lists for readability</li>
<li>Error handling for network / parse failures</li>
<li>Lightweight — runs on a small VPS or home server</li>
</ul>
</section>
<section class="detail-section">
<h2>Tech Stack</h2>
<div class="tech-pills">
<span>Golang</span>
<span>Discord Go</span>
<span>GoColly</span>
<span>Request/Response</span>
</div>
</section>
<section class="detail-section">
<h2>Challenges &amp; Learnings</h2>
<p>
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.
</p>
</section>
</div>
<div class="project-nav">
<a href="../projects.html" class="btn-secondary">← All Projects</a>
<a href="./project2.html" class="btn-secondary">Next Project →</a>
</div>
</main>
<footer>
<p>&copy; 2024 LewisPriceDev, All rights reserved.</p>
<div class="social-links">
<a href="https://www.linkedin.com/in/lewis-price-a79185195/" target="_blank" aria-label="LinkedIn">
<img src="../images/icons/linkedin-icon.svg" alt="">
</a>
<a class="mail-img" href="mailto:lewis.e.price@outlook.com">
<img src="../images/icons/mail_icon.svg" alt="lewis.price@outlook.com">
</a>
</div>
</footer>
</body>
</html>

103
project_pages/project2.html Normal file
View File

@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/projectStyle.css">
<link rel="stylesheet" href="./css/project1Style.css">
<title>To-Do List Lew's Portfolio</title>
</head>
<body>
<header>
<div class="nav-bar">
<a href="../index.html"><img class="nav-logo" src="../images/icons/logo.svg" alt="lew's logo" width="180" height="auto"></a>
<nav>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="../projects.html">Projects</a></li>
<li><a href="../index.html#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="project-detail">
<div class="project-hero">
<div class="hero-image">
<img src="../images/project_imgs/ToDoList Project.jpg" alt="To-Do List">
</div>
<div class="hero-overlay">
<span class="project-tag">JavaScript · CSS · HTML</span>
<h1>To-Do List</h1>
<p class="hero-sub">Stay organised with priority, date, and category sorting.</p>
<a class="btn-primary" href="https://git.lewispricedev.com/Rapturate/To_Do_List/releases/tag/R1" target="_blank">View Release ↗</a>
</div>
</div>
<div class="detail-grid">
<section class="detail-section">
<h2>Overview</h2>
<p>
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.
</p>
</section>
<section class="detail-section">
<h2>Features</h2>
<ul class="feature-list">
<li>Add, edit, complete, and delete tasks</li>
<li>Sort by priority (High / Medium / Low), date, or category</li>
<li>Persistent storage via localStorage</li>
<li>Responsive layout for mobile and desktop</li>
</ul>
</section>
<section class="detail-section">
<h2>Tech Stack</h2>
<div class="tech-pills">
<span>Object Oriented Java Proframming</span>
<span>Local Storage</span>
</div>
</section>
<section class="detail-section">
<h2>Challenges &amp; Learnings</h2>
<p>
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.
</p>
</section>
</div>
<div class="project-nav">
<a href="./project1.html" class="btn-secondary">← Previous Project</a>
<a href="./project3.html" class="btn-secondary">Next Project →</a>
</div>
</main>
<footer>
<p>&copy; 2024 LewisPriceDev, All rights reserved.</p>
<div class="social-links">
<a href="https://www.linkedin.com/in/lewis-price-a79185195/" target="_blank" aria-label="LinkedIn">
<img src="../images/icons/linkedin-icon.svg" alt="">
</a>
<a class="mail-img" href="mailto:lewis.e.price@outlook.com">
<img src="../images/icons/mail_icon.svg" alt="lewis.price@outlook.com">
</a>
</div>
</footer>
</body>
</html>

106
project_pages/project3.html Normal file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/projectStyle.css">
<link rel="stylesheet" href="./css/project1Style.css">
<title>API Accessing Practice Lew's Portfolio</title>
</head>
<body>
<header>
<div class="nav-bar">
<a href="../index.html"><img class="nav-logo" src="../images/icons/logo.svg" alt="lew's logo" width="180" height="auto"></a>
<nav>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="../projects.html">Projects</a></li>
<li><a href="../index.html#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="project-detail">
<div class="project-hero">
<div class="hero-image">
<img src="../images/project_imgs/api_practice.jpg" alt="API Accessing Practice">
</div>
<div class="hero-overlay">
<span class="project-tag">Golang · REST API · JSON</span>
<h1>API Accessing Practice</h1>
<p class="hero-sub">Fetching, parsing, and displaying live data with Go.</p>
<a class="btn-primary" href="https://git.lewispricedev.com/Rapturate/API_Practice/releases/tag/R1" target="_blank">View Release ↗</a>
</div>
</div>
<div class="detail-grid">
<section class="detail-section">
<h2>Overview</h2>
<p>
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.
</p>
</section>
<section class="detail-section">
<h2>Features</h2>
<ul class="feature-list">
<li>HTTP GET requests using Go's <code>net/http</code> package</li>
<li>JSON unmarshalling into typed structs</li>
<li>Formatted terminal output with error reporting</li>
<li>Configurable endpoint via CLI flags</li>
</ul>
</section>
<section class="detail-section">
<h2>Tech Stack</h2>
<div class="tech-pills">
<span>Go (Golang)</span>
<span>net/http</span>
<span>encoding/json</span>
<span>REST APIs</span>
</div>
</section>
<section class="detail-section">
<h2>Challenges &amp; Learnings</h2>
<p>
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.
</p>
</section>
</div>
<div class="project-nav">
<a href="./project2.html" class="btn-secondary">← Previous Project</a>
<a href="./project4.html" class="btn-secondary">Next Project →</a>
</div>
</main>
<footer>
<p>&copy; 2024 LewisPriceDev, All rights reserved.</p>
<div class="social-links">
<a href="https://www.linkedin.com/in/lewis-price-a79185195/" target="_blank" aria-label="LinkedIn">
<img src="../images/icons/linkedin-icon.svg" alt="">
</a>
<a class="mail-img" href="mailto:lewis.e.price@outlook.com">
<img src="../images/icons/mail_icon.svg" alt="lewis.price@outlook.com">
</a>
</div>
</footer>
</body>
</html>

117
project_pages/project4.html Normal file
View File

@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/projectStyle.css">
<link rel="stylesheet" href="./css/project1Style.css">
<title>Graph Theory: Flat Buffer Lew's Portfolio</title>
</head>
<body>
<header>
<div class="nav-bar">
<a href="../index.html"><img class="nav-logo" src="../images/icons/logo.svg" alt="lew's logo" width="180" height="auto"></a>
<nav>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="../projects.html">Projects</a></li>
<li><a href="../index.html#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="project-detail">
<div class="project-hero">
<div class="hero-image hero-image--placeholder">
<div class="placeholder-graphic">
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="30" cy="60" r="12" fill="none" stroke="#009DF0" stroke-width="2"/>
<circle cx="100" cy="20" r="12" fill="none" stroke="#009DF0" stroke-width="2"/>
<circle cx="170" cy="60" r="12" fill="none" stroke="#009DF0" stroke-width="2"/>
<circle cx="100" cy="100" r="12" fill="none" stroke="#F09B00" stroke-width="2"/>
<line x1="42" y1="60" x2="88" y2="28" stroke="#009DF0" stroke-width="1.5" stroke-dasharray="4 3"/>
<line x1="112" y1="28" x2="158" y2="52" stroke="#009DF0" stroke-width="1.5" stroke-dasharray="4 3"/>
<line x1="42" y1="66" x2="88" y2="92" stroke="#F09B00" stroke-width="1.5" stroke-dasharray="4 3"/>
<line x1="112" y1="92" x2="158" y2="68" stroke="#F09B00" stroke-width="1.5" stroke-dasharray="4 3"/>
</svg>
</div>
</div>
<div class="hero-overlay">
<span class="project-tag">Data Structures · Memory Management</span>
<h1>Graph Theory: Flat Buffer</h1>
<p class="hero-sub">A memory-consistent graph implementation with zero object duplication.</p>
<a class="btn-primary" href="https://git.lewispricedev.com/Rapturate/" target="_blank">View Repository ↗</a>
</div>
</div>
<div class="detail-grid">
<section class="detail-section">
<h2>Overview</h2>
<p>
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.
</p>
</section>
<section class="detail-section">
<h2>Design Goals</h2>
<ul class="feature-list">
<li>Flat contiguous buffer — no pointer-chasing heap fragmentation</li>
<li>Strict no-duplication contract for all graph objects</li>
<li>Deterministic add / grow / shrink / delete lifecycle</li>
<li>Suitable for use in performance-sensitive or embedded contexts</li>
</ul>
</section>
<section class="detail-section">
<h2>Tech Stack</h2>
<div class="tech-pills">
<span>C / C++</span>
<span>Graph Theory</span>
<span>Memory Layouts</span>
<span>Data Structures</span>
</div>
</section>
<section class="detail-section">
<h2>Challenges &amp; Learnings</h2>
<p>
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.
</p>
</section>
</div>
<div class="project-nav">
<a href="./project3.html" class="btn-secondary">← Previous Project</a>
<a href="./project5.html" class="btn-secondary">Next Project →</a>
</div>
</main>
<footer>
<p>&copy; 2024 LewisPriceDev, All rights reserved.</p>
<div class="social-links">
<a href="https://www.linkedin.com/in/lewis-price-a79185195/" target="_blank" aria-label="LinkedIn">
<img src="../images/icons/linkedin-icon.svg" alt="">
</a>
<a class="mail-img" href="mailto:lewis.e.price@outlook.com">
<img src="../images/icons/mail_icon.svg" alt="lewis.price@outlook.com">
</a>
</div>
</footer>
</body>
</html>

View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/projectStyle.css">
<link rel="stylesheet" href="./css/project1Style.css">
<title>Coming Soon Lew's Portfolio</title>
</head>
<body>
<header>
<div class="nav-bar">
<a href="../index.html"><img class="nav-logo" src="../images/icons/logo.svg" alt="lew's logo" width="180" height="auto"></a>
<nav>
<ul class="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="../projects.html">Projects</a></li>
<li><a href="../index.html#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="project-detail">
<div class="coming-soon-wrapper">
<div class="coming-soon-icon" aria-hidden="true">
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="36" fill="none" stroke="var(--clr-primary)" stroke-width="3" stroke-dasharray="8 5"/>
<text x="40" y="46" text-anchor="middle" font-size="28" fill="var(--clr-accent-light)">🚧</text>
</svg>
</div>
<h1>Under Construction</h1>
<p>Something new is being built here. Check back soon!</p>
<a href="../projects.html" class="btn-secondary">← Back to Projects</a>
</div>
</main>
<footer>
<p>&copy; 2024 LewisPriceDev, All rights reserved.</p>
<div class="social-links">
<a href="https://www.linkedin.com/in/lewis-price-a79185195/" target="_blank" aria-label="LinkedIn">
<img src="../images/icons/linkedin-icon.svg" alt="">
</a>
<a class="mail-img" href="mailto:lewis.e.price@outlook.com">
<img src="../images/icons/mail_icon.svg" alt="lewis.price@outlook.com">
</a>
</div>
</footer>
</body>
</html>

115
projects.html Normal file
View File

@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Begin: Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
<!--End: Fonts-->
<link rel="stylesheet" href="css/projectStyle.css">
<title>Lew's Portfolio</title>
</head>
<body>
<header>
<div class="nav-bar">
<a href="index.html"><img class ="nav-logo" src="./images/icons/logo.svg" alt="lew's logo" width="180" height="auto"></a>
<nav>
<ul class="nav-links">
<li><a href="./index.html">Home</a></li>
<li><a href="./index.html#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section id="projects">
<!--Project 1-->
<div class="project-card">
<a href="./project_pages/project1.html">
<div class="project-image">
<img src="./images/project_imgs/ToDoList Project.jpg" alt="Project 1 Image">
</div>
<div class="project-description">
<h2>Web Scraper/Discord Bot</h2>
<p>A web scraper and Discord bot that pulls codes to unlock special gear in Borderlands 4 when prompted by a user on Discord.</p>
</div>
</a>
</div>
<!--Project 2-->
<div class="project-card">
<a href="./project_pages/project2.html">
<div class="project-image">
<img src="./images/project_imgs/ToDoList Project.jpg" alt="Project 2 Image">
</div>
<div class="project-description">
<h2>To-Do List</h2>
<p>A modifiable To-Do list that allows for organization and scheduling based on priority, date, and category.</p>
</div>
</a>
</div>
<!--Project 3-->
<div class="project-card">
<a href="./project_pages/project3.html">
<div class="project-image">
<img src="./images/project_imgs/api_practice.jpg" alt="API Practice Image">
</div>
<div class="project-description">
<h2>API Accessing Practice</h2>
<p>A program written in golang for accessing a public API website. This demonstrates my ability to access APIs and display and manipulate data retrieved.</p>
</div>
</a>
</div>
<!--Project 4-->
<div class="project-card">
<a href="./project_pages/project4.html">
<div class="project-image">
<img src="./images/project_imgs/<place_holder>" alt="Graph Theory Image">
</div>
<div class="project-description">
<h2>Graph Theory: Flat Buffer</h2>
<p>A graph theory project optimized for a consistent memory usage graph. There should be no duplications of objects, only addition, growth, reduction, or deletion of objects.</p>
</div>
</a>
</div>
<!--Project 5-->
<div class="project-card">
<a href="./project_pages/project5.html">
<div class="project-image">
<img src="./images/project_imgs/<Place_holder>" alt="Project Image">
</div>
<div class="project-description">
<h2>Project Place Holder</h2>
<p>Under Construction</p>
</div>
</a>
</div>
</section>
</main>
<footer>
<p>&copy; 2024 LewisPriceDev, All rights reserved.</p>
<div class="social-links">
<a href="https://www.linkedin.com/in/lewis-price-a79185195/" target="_blank" aria-label="LinkedIn">
<img src="images/icons/linkedin-icon.svg" alt="">
</a>
<a class="mail-img" href="mailto:lewis.e.price@outlook.com">
<img src="./images/icons/mail_icon.svg" alt="lewis.price@outlook.com">
</a>
</div>
</footer>
</body>
</html>