Compare commits
6 Commits
bcaecadb11
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
d744abba86 | ||
| 346f868784 | |||
|
|
46145e40b7 | ||
| d3d83f586c | |||
| 4238306621 | |||
| a1a0a3e4ed |
12
README.md
12
README.md
@@ -1,3 +1,13 @@
|
||||
# Web_Dev_Project
|
||||
My personal website with HTML and CSS. Currently in development.
|
||||
This site is currently up and running although it is still in development. The road map below reflects my current task list. The .gitignore reflects changes that will occur when I port the site over to node.js/vite
|
||||
|
||||
My personal website with HTML and CSS. Currently in development.
|
||||
Road Map:
|
||||
-- Projects Page --
|
||||
1) Add direct connections from project cards to the git.lewispricedev.com/rapturate/<project-name>/<release-name> urls.
|
||||
2) Remove hyperlink underlines that occur when the hyperlinks are added
|
||||
-- Home Page --
|
||||
1) Alter my photo location in the hero banner
|
||||
2) Possibly remove the projects section at the bottom of the page.
|
||||
-- Site Configuration --
|
||||
1) Port my project over to node.js/vite
|
||||
@@ -92,7 +92,6 @@ nav ul.nav-links a:focus {
|
||||
/* Main content */
|
||||
main {
|
||||
flex: 1;
|
||||
padding-top: 120px;
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
@@ -114,7 +113,7 @@ div.hero-text {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
gap: 1rem;
|
||||
/* gap: 1rem; */
|
||||
}
|
||||
|
||||
div.hero-text h1 {
|
||||
@@ -150,9 +149,9 @@ div.hero-text p {
|
||||
|
||||
img.hero-img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
justify-self: right;
|
||||
}
|
||||
|
||||
/* About Section */
|
||||
@@ -191,11 +190,17 @@ img.hero-img {
|
||||
}
|
||||
|
||||
#projects {
|
||||
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
#projects a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.project-box {
|
||||
@@ -385,7 +390,6 @@ footer p {
|
||||
|
||||
img.hero-img {
|
||||
order: 1;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#projects {
|
||||
|
||||
@@ -135,6 +135,9 @@ a {
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.project-card a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-4px);
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 929 B After Width: | Height: | Size: 929 B |
|
Before Width: | Height: | Size: 844 B After Width: | Height: | Size: 844 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
0
images/Lew's Images/Project 1jpg.jpg → images/project_imgs/Discord_Bot.jpg
Executable file → Normal file
0
images/Lew's Images/Project 1jpg.jpg → images/project_imgs/Discord_Bot.jpg
Executable file → Normal file
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 168 KiB |
BIN
images/project_imgs/api_practice.jpg
Normal file
BIN
images/project_imgs/api_practice.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
98
index.html
98
index.html
@@ -11,15 +11,15 @@
|
||||
|
||||
<link rel="stylesheet" href="css/indexStyle.css">
|
||||
<title>Lewis Price</title>
|
||||
<link rel="icon" type="image/svg+xml" href="./images/Lew Header icon.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="./images/icons/favicon.svg">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="nav-bar">
|
||||
<a href="index.html"><img class ="nav-logo" src="./images/Lew Header.svg" alt="lew's logo" width="180" height="auto"></a>
|
||||
<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>
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
<main>
|
||||
<section id="hero">
|
||||
<img class="hero-img" src="./images/Lew's Images/Lew.JPG" alt="profile picture">
|
||||
<img class="hero-img" src="./images/profile_img/Lew.JPG" alt="profile picture">
|
||||
<div class="hero-text">
|
||||
<h1>Lewis Price</h1>
|
||||
<p>This site is a live document that will be changing as I learn more and complete more projects.</p>
|
||||
@@ -53,58 +53,68 @@
|
||||
<section class="list-all-projects">
|
||||
<h2>Personal Projects</h2>
|
||||
<div id="projects">
|
||||
<div class="project-box">
|
||||
<img src="./images/Lew's Images/Project 1jpg.jpg" alt="project picture">
|
||||
<div class="proj-text">
|
||||
<h3>Web Scraper/Discord Bot</h3>
|
||||
<p>- Golang</p>
|
||||
|
||||
<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">
|
||||
<h3>Web Scraper/Discord Bot</h3>
|
||||
<p>- Golang</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-box">
|
||||
<img src="./images/Lew's Images/ToDoList Project.jpg" alt="project picture">
|
||||
<div class="proj-text">
|
||||
<h3>To-Do List</h3>
|
||||
<p>- Java</p>
|
||||
</a>
|
||||
|
||||
<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">
|
||||
<h3>To-Do List</h3>
|
||||
<p>- Java</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-box">
|
||||
<img src="./images/Lew's Images/Doubly Linked List.jpg" alt="project picture">
|
||||
<div class="proj-text">
|
||||
<h3>Binary Search Tree</h3>
|
||||
<p>- C++</p>
|
||||
</a>
|
||||
|
||||
<a href="./project_pages/project3.html">
|
||||
<div class="project-box">
|
||||
<img src="./images/project_imgs/<some_image>" alt="Under Construction">
|
||||
<div class="proj-text">
|
||||
<h3>Graph Theory: Flat Buffer Memory</h3>
|
||||
<p>- C++</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-box">
|
||||
<img src="./images/Lew's Images/Graph Theory Project.jpg" alt="project picture">
|
||||
<div class="proj-text">
|
||||
<h3>Graph Theory Project</h3>
|
||||
<p>- C++</p>
|
||||
</a>
|
||||
|
||||
<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">
|
||||
<h3>API Accessing</h3>
|
||||
<p>- Golang</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-box">
|
||||
<img src="./images/Lew's Images/Find Median Sorted Array.jpg" alt="project picture">
|
||||
<div class="proj-text">
|
||||
<h3>Median of Two Sorted Arrays</h3>
|
||||
<p>- Golang</p>
|
||||
</a>
|
||||
|
||||
<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">
|
||||
<h3>PROJECT TBD (Under Construction)</h3>
|
||||
<p>- Programming Language</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact">
|
||||
<h2>Contact Me</h2>
|
||||
<div id="socials">
|
||||
<a class="social-img" href="https://www.instagram.com/ohbejoyfulbags/" target="_blank">
|
||||
<img src="./images/instagram-icon.svg" alt="Instagram">
|
||||
</a>
|
||||
<a class="social-img" href="https://www.facebook.com/lewprice140" target="_blank">
|
||||
<img src="./images/facebook-icon.svg" alt="Facebook">
|
||||
</a>
|
||||
<a class="social-img" href="https://www.linkedin.com/in/lewis-price-a79185195/" target="_blank">
|
||||
<img src="images/linkedin-icon.svg" alt="LinkedIn">
|
||||
<img src="images/icons/linkedin-icon.svg" alt="LinkedIn">
|
||||
</a>
|
||||
<a class="mail-img" href="mailto:lewis.e.price@outlook.com">
|
||||
<img src="./images/mail_icon.svg" alt="lewis.price@outlook.com">
|
||||
<img src="./images/icons/mail_icon.svg" alt="lewis.price@outlook.com">
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
@@ -115,11 +125,11 @@
|
||||
<div class="social-links">
|
||||
|
||||
<a href="https://www.linkedin.com/in/lewis-price-a79185195/" target="_blank" aria-label="LinkedIn">
|
||||
<img src="images/linkedin-icon.svg" alt="">
|
||||
<img src="images/icons/linkedin-icon.svg" alt="">
|
||||
</a>
|
||||
|
||||
<a class="mail-img" href="mailto:lewis.e.price@outlook.com">
|
||||
<img src="./images/mail_icon.svg" alt="lewis.price@outlook.com">
|
||||
<img src="./images/icons/mail_icon.svg" alt="lewis.price@outlook.com">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
107
project.html
107
project.html
@@ -1,107 +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/Lew Header.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="./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/Lew's Images/Project 1jpg.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">
|
||||
<div class="project-image">
|
||||
<img src="./images/Lew's Images/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>
|
||||
</div>
|
||||
|
||||
<!--Project 3-->
|
||||
<div class="project-card">
|
||||
<div class="project-image">
|
||||
<img src="./images/Lew's Images/Doubly Linked List.jpg" alt="Project 3 Image">
|
||||
</div>
|
||||
<div class="project-description">
|
||||
<h2>Binary Search Tree</h2>
|
||||
<p>A program that I wrote as a singly linked list then modified into a doubly linked list, and then modified into a binary search tree.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Project 4-->
|
||||
<div class="project-card">
|
||||
<div class="project-image">
|
||||
<img src="./images/Lew's Images/Graph Theory Project.jpg" alt="Project 4 Image">
|
||||
</div>
|
||||
<div class="project-description">
|
||||
<h2>Graph Theory Project</h2>
|
||||
<p>An exploration of weighted graph theory using “Cities” and “Roads” as nodes and edges. Search functions include Breadth First, Depth First, and Dijkstra's.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Project 5-->
|
||||
<div class="project-card">
|
||||
<div class="project-image">
|
||||
<img src="./images/Lew's Images/Find Median Sorted Array.jpg" alt="Project 5 Image">
|
||||
</div>
|
||||
<div class="project-description">
|
||||
<h2>Median of Two Sorted Arrays LeetCode Hard</h2>
|
||||
<p>Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 LewisPriceDev, All rights reserved.</p>
|
||||
<div class="social-links">
|
||||
|
||||
<a class="mail-img" href="mailto:lewis.e.price@outlook.com">
|
||||
<img src="./images/mail_icon.svg" alt="lewis.price@outlook.com">
|
||||
</a>
|
||||
|
||||
<a href="https://www.linkedin.com/in/lewis-price-a79185195/" target="_blank" aria-label="LinkedIn">
|
||||
<img src="images/linkedin-icon.svg" alt="">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
13
project_pages/css/project1Style.css
Normal file
13
project_pages/css/project1Style.css
Normal 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);
|
||||
}
|
||||
27
project_pages/css/project2Style.css
Normal file
27
project_pages/css/project2Style.css
Normal 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;
|
||||
}
|
||||
32
project_pages/css/project3Style.css
Normal file
32
project_pages/css/project3Style.css
Normal 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;
|
||||
}
|
||||
41
project_pages/css/project4Style.css
Normal file
41
project_pages/css/project4Style.css
Normal 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; }
|
||||
}
|
||||
12
project_pages/css/project5Style.css
Normal file
12
project_pages/css/project5Style.css
Normal 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); }
|
||||
}
|
||||
260
project_pages/css/projectDetailStyle.css
Normal file
260
project_pages/css/projectDetailStyle.css
Normal 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
104
project_pages/project1.html
Normal 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 & 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>© 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
103
project_pages/project2.html
Normal 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 & 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>© 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
106
project_pages/project3.html
Normal 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 & 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>© 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
117
project_pages/project4.html
Normal 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 & 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>© 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>
|
||||
57
project_pages/project5.html
Normal file
57
project_pages/project5.html
Normal 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>© 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
115
projects.html
Normal 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>© 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>
|
||||
Reference in New Issue
Block a user