Gitea migration
420
css/indexStyle.css
Executable file
@@ -0,0 +1,420 @@
|
||||
/* Quick Reset */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*Variables*/
|
||||
:root {
|
||||
--clr-name-plate: #1c3610;
|
||||
--clr-text-color: rgb(41, 39, 39);
|
||||
--clr-One:#F2D7C0;
|
||||
--clr-Two:#B8C2C5;
|
||||
--clr-Three:#43665f;
|
||||
--clr-hero: #E19479;
|
||||
--clr-Four:#A68B78 ;
|
||||
--clr-Five:#4A5052;
|
||||
--clr-Six: #5D3A28;
|
||||
|
||||
--fs-h1: 2.5rem;
|
||||
--fs-h2: 1.8rem;
|
||||
--fs-h3: 1.2rem;
|
||||
--fs-text: 1rem;
|
||||
--fs-small: 0.9rem;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
background-color: var(--clr-One);
|
||||
color: var(--clr-text-color);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: var(--clr-Three);
|
||||
z-index: 10;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
div.nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
background-color: var(--clr-One);
|
||||
border-radius: 20px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
nav ul.nav-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav ul.nav-links a {
|
||||
color: var(--clr-Six);
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 10px;
|
||||
background-color: var(--clr-One);
|
||||
font-weight: 500;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
nav ul.nav-links a:hover,
|
||||
nav ul.nav-links a:focus {
|
||||
background-color: var(--clr-Four);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
main {
|
||||
flex: 1;
|
||||
/* padding-top: 120px; Added a gap between nav and hero which apparently is a faux*/
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
#hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 30rem;
|
||||
background: var(--clr-hero);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding-top: 8rem;
|
||||
padding-bottom: 3rem;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.hero-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
max-width: 300px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
div.hero-text h1 {
|
||||
color: var(--clr-name-plate);
|
||||
font-size: var(--fs-h1);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
div.hero-text p {
|
||||
color: var(--clr-text-color);
|
||||
font-size: var(--fs-text);
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
background-color: var(--clr-Three);
|
||||
color: var(--clr-One);
|
||||
padding: 1rem 2rem;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-top: 1rem;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.cta-button:hover,
|
||||
.cta-button:focus {
|
||||
background-color: var(--clr-Six);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
img.hero-img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* About Section */
|
||||
.about-section {
|
||||
padding: 4rem 2rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.about-section h2 {
|
||||
font-size: var(--fs-h2);
|
||||
color: var(--clr-name-plate);
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-section p {
|
||||
font-size: var(--fs-text);
|
||||
line-height: 1.6;
|
||||
max-width: 75ch;
|
||||
}
|
||||
|
||||
/* Projects Containers */
|
||||
.list-all-projects {
|
||||
background-color: var(--clr-Four);
|
||||
padding: 4rem 2rem;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.list-all-projects h2 {
|
||||
text-align: center;
|
||||
color: var(--clr-text-color);
|
||||
font-size: var(--fs-h2);
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
#projects {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.project-box {
|
||||
background-color: var(--clr-Two);
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
color: var(--clr-text-color);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.project-box:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.project-box img {
|
||||
width: 150px;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.proj-text {
|
||||
padding: 1rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.proj-text h3 {
|
||||
font-size: var(--fs-h3);
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--clr-name-plate);
|
||||
}
|
||||
|
||||
.proj-text p {
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Contact Section */
|
||||
#contact {
|
||||
padding: 4rem 2rem;
|
||||
background-color: var(--clr-One);
|
||||
}
|
||||
|
||||
#contact h2 {
|
||||
text-align: center;
|
||||
font-size: var(--fs-h2);
|
||||
color: var(--clr-name-plate);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#socials {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
#socials a img {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
#socials a:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
form label {
|
||||
align-self: flex-start;
|
||||
font-weight: 600;
|
||||
color: var(--clr-name-plate);
|
||||
}
|
||||
|
||||
form input,
|
||||
form textarea {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
font-size: var(--fs-text);
|
||||
border: 3px solid var(--clr-Five);
|
||||
border-radius: 10px;
|
||||
background-color: white;
|
||||
color: var(--clr-text-color);
|
||||
}
|
||||
|
||||
form input:focus,
|
||||
form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--clr-Three);
|
||||
}
|
||||
|
||||
form textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
form button {
|
||||
background-color: var(--clr-Three);
|
||||
color: var(--clr-One);
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
font-size: var(--fs-text);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
form button:hover,
|
||||
form button:focus {
|
||||
background-color: var(--clr-Six);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background-color: var(--clr-Five);
|
||||
color: var(--clr-One);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.social-links a img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
filter: brightness(0) invert(1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.social-links a:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Responsive Design - Mobile First */
|
||||
@media (min-width: 600px) {
|
||||
nav ul.nav-links {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
/* padding: 4rem 2rem; */
|
||||
}
|
||||
|
||||
div.hero-text {
|
||||
text-align: left;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
div.hero-text h1 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div.hero-text p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
img.hero-img {
|
||||
order: 1;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
#projects {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.project-box img {
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
#projects {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.project-box {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.project-box img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.proj-text {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
219
css/projectStyle.css
Executable file
@@ -0,0 +1,219 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*Variables*/
|
||||
:root {
|
||||
--clr-primary: #009DF0;
|
||||
--clr-accent-light: #F09B00;
|
||||
--clr-accent-dark: #F04E00;
|
||||
--clr-card-background: #E3F0FB;
|
||||
--clr-page-background: #fffcf6;
|
||||
--clr-text-light: #263f4a;
|
||||
--clr-text-main: #1B0A14;
|
||||
--clr-header-bg: #43665f;
|
||||
--clr-nav-bg: #F2D7C0;
|
||||
|
||||
--fs-h1: 2.5rem;
|
||||
--fs-h2: 1.5rem;
|
||||
--fs-text: 1rem;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
background-color: var(--clr-page-background);
|
||||
color: var(--clr-text-main);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
width: 100%;
|
||||
background-color: var(--clr-header-bg);
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
background-color: var(--clr-nav-bg);
|
||||
border-radius: 20px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
nav ul.nav-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav ul.nav-links a {
|
||||
color: #5D3A28;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 10px;
|
||||
background-color: var(--clr-nav-bg);
|
||||
font-weight: 500;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
nav ul.nav-links a:hover,
|
||||
nav ul.nav-links a:focus {
|
||||
background-color: #A68B78;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
background-color: var(--clr-page-background);
|
||||
}
|
||||
|
||||
.header-content h1 {
|
||||
font-size: var(--fs-h1);
|
||||
color: var(--clr-text-main);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 3rem 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#projects {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr; /* Single column for mobile */
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
#projects h2 {
|
||||
font-size: var(--fs-h2);
|
||||
color: var(--clr-text-main);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#projects p {
|
||||
color: var(--clr-text-light);
|
||||
font-size: var(--fs-text);
|
||||
line-height: 1.6;
|
||||
max-width: 65ch;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--clr-card-background);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 12px rgba(91, 127, 161, 0.3);
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 20px rgba(91, 127, 161, 0.4);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.project-card:hover .project-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.project-description {
|
||||
padding: 1.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.project-description h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background-color: #4A5052;
|
||||
color: #F2D7C0;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.social-links a img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
filter: brightness(0) invert(1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.social-links a:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Responsive Design - Mobile First */
|
||||
@media (min-width: 600px) {
|
||||
nav ul.nav-links {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#projects {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
#projects {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
12
images/Lew Header icon.svg
Executable file
@@ -0,0 +1,12 @@
|
||||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grad6" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#A2D3DB;stop-opacity:1" />
|
||||
<stop offset="50%" style="stop-color:#999FA0;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#867262;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="50" cy="50" r="30" fill="#f8af73ff" opacity="1"/>
|
||||
<path d="M25 40 Q40 28 55 40 Q70 52 80 40" stroke="url(#grad6)" stroke-width="5" fill="none" stroke-linecap="round"/>
|
||||
<path d="M25 50 Q35 42 45 50 Q55 58 65 50" stroke="url(#grad6)" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.7"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 929 B |
13
images/Lew Header.svg
Executable file
@@ -0,0 +1,13 @@
|
||||
<svg viewBox="0 0 280 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="grad6" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#A2D3DB;stop-opacity:1" />
|
||||
<stop offset="50%" style="stop-color:#999FA0;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#867262;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="50" cy="50" r="30" fill="#f8af73ff" opacity="1"/>
|
||||
<path d="M25 40 Q40 28 55 40 Q70 52 80 40" stroke="url(#grad6)" stroke-width="5" fill="none" stroke-linecap="round"/>
|
||||
<path d="M25 50 Q35 42 45 50 Q55 58 65 50" stroke="url(#grad6)" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.7"/>
|
||||
<text x="90" y="58" font-family="Arial, sans-serif" font-size="24" font-weight="600" fill="#323434">Rapturate</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
BIN
images/Lew's Images/Doubly Linked List.jpg
Executable file
|
After Width: | Height: | Size: 112 KiB |
BIN
images/Lew's Images/Find Median Sorted Array.jpg
Executable file
|
After Width: | Height: | Size: 113 KiB |
BIN
images/Lew's Images/Graph Theory Project.jpg
Executable file
|
After Width: | Height: | Size: 92 KiB |
BIN
images/Lew's Images/Lew.JPG
Executable file
|
After Width: | Height: | Size: 65 KiB |
BIN
images/Lew's Images/Project 1jpg.jpg
Executable file
|
After Width: | Height: | Size: 65 KiB |
BIN
images/Lew's Images/ToDoList Project.jpg
Executable file
|
After Width: | Height: | Size: 168 KiB |
1
images/facebook-icon.svg
Executable file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 440 146.7 540.8 258.2 568.5L258.2 398.2L205.4 398.2L205.4 320L258.2 320L258.2 286.3C258.2 199.2 297.6 158.8 383.2 158.8C399.4 158.8 427.4 162 438.9 165.2L438.9 236C432.9 235.4 422.4 235 409.3 235C367.3 235 351.1 250.9 351.1 292.2L351.1 320L434.7 320L420.3 398.2L351 398.2L351 574.1C477.8 558.8 576 450.9 576 320z"/></svg>
|
||||
|
After Width: | Height: | Size: 606 B |
BIN
images/generic project photo.jpg
Executable file
|
After Width: | Height: | Size: 2.0 MiB |
BIN
images/generic_person.jfif
Executable file
|
After Width: | Height: | Size: 2.1 KiB |
BIN
images/hero background.jpg
Executable file
|
After Width: | Height: | Size: 1.1 MiB |
BIN
images/hero.jpg
Executable file
|
After Width: | Height: | Size: 414 KiB |
BIN
images/hero_superhero_dark.jpg
Executable file
|
After Width: | Height: | Size: 952 KiB |
BIN
images/hero_superhero_light.jpg
Executable file
|
After Width: | Height: | Size: 2.2 MiB |
1
images/instagram-icon.svg
Executable file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320.3 205C256.8 204.8 205.2 256.2 205 319.7C204.8 383.2 256.2 434.8 319.7 435C383.2 435.2 434.8 383.8 435 320.3C435.2 256.8 383.8 205.2 320.3 205zM319.7 245.4C360.9 245.2 394.4 278.5 394.6 319.7C394.8 360.9 361.5 394.4 320.3 394.6C279.1 394.8 245.6 361.5 245.4 320.3C245.2 279.1 278.5 245.6 319.7 245.4zM413.1 200.3C413.1 185.5 425.1 173.5 439.9 173.5C454.7 173.5 466.7 185.5 466.7 200.3C466.7 215.1 454.7 227.1 439.9 227.1C425.1 227.1 413.1 215.1 413.1 200.3zM542.8 227.5C541.1 191.6 532.9 159.8 506.6 133.6C480.4 107.4 448.6 99.2 412.7 97.4C375.7 95.3 264.8 95.3 227.8 97.4C192 99.1 160.2 107.3 133.9 133.5C107.6 159.7 99.5 191.5 97.7 227.4C95.6 264.4 95.6 375.3 97.7 412.3C99.4 448.2 107.6 480 133.9 506.2C160.2 532.4 191.9 540.6 227.8 542.4C264.8 544.5 375.7 544.5 412.7 542.4C448.6 540.7 480.4 532.5 506.6 506.2C532.8 480 541 448.2 542.8 412.3C544.9 375.3 544.9 264.5 542.8 227.5zM495 452C487.2 471.6 472.1 486.7 452.4 494.6C422.9 506.3 352.9 503.6 320.3 503.6C287.7 503.6 217.6 506.2 188.2 494.6C168.6 486.8 153.5 471.7 145.6 452C133.9 422.5 136.6 352.5 136.6 319.9C136.6 287.3 134 217.2 145.6 187.8C153.4 168.2 168.5 153.1 188.2 145.2C217.7 133.5 287.7 136.2 320.3 136.2C352.9 136.2 423 133.6 452.4 145.2C472 153 487.1 168.1 495 187.8C506.7 217.3 504 287.3 504 319.9C504 352.5 506.7 422.6 495 452z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
images/linkedin-icon.svg
Executable file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M512 96L127.9 96C110.3 96 96 110.5 96 128.3L96 511.7C96 529.5 110.3 544 127.9 544L512 544C529.6 544 544 529.5 544 511.7L544 128.3C544 110.5 529.6 96 512 96zM231.4 480L165 480L165 266.2L231.5 266.2L231.5 480L231.4 480zM198.2 160C219.5 160 236.7 177.2 236.7 198.5C236.7 219.8 219.5 237 198.2 237C176.9 237 159.7 219.8 159.7 198.5C159.7 177.2 176.9 160 198.2 160zM480.3 480L413.9 480L413.9 376C413.9 351.2 413.4 319.3 379.4 319.3C344.8 319.3 339.5 346.3 339.5 374.2L339.5 480L273.1 480L273.1 266.2L336.8 266.2L336.8 295.4L337.7 295.4C346.6 278.6 368.3 260.9 400.6 260.9C467.8 260.9 480.3 305.2 480.3 362.8L480.3 480z"/></svg>
|
||||
|
After Width: | Height: | Size: 844 B |
135
index.html
Executable file
@@ -0,0 +1,135 @@
|
||||
<!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&display=swap" rel="stylesheet">
|
||||
<!--End Fonts-->
|
||||
|
||||
<link rel="stylesheet" href="css/indexStyle.css">
|
||||
<title>Lewis's Information</title>
|
||||
<link rel="icon" type="image/svg+xml" href="./images/Lew Header icon.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>
|
||||
<nav>
|
||||
<ul class="nav-links">
|
||||
<li><a href="./project.html">Projects</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="hero">
|
||||
<img class="hero-img" src="./images/Lew's Images/Lew.JPG" alt="profile picture">
|
||||
<div class="hero-text">
|
||||
<h1>Lewis Price</h1>
|
||||
<p>Welcome!</p>
|
||||
<p>This site is still under construction but feel free to look around!</p>
|
||||
<a href="#contact" class="cta-button">Get In Touch</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about-section">
|
||||
<h2>About Me</h2>
|
||||
<p>I have been interested in computers and programming from a very young age. I started with HTML in 2008. I quickly dove deeper into the world of programming where I began learning Java. At the time, Minecraft Beta was just starting to become popular in the world of gaming and I would practice Java by modding Minecraft Beta. Java taught me the ins and outs of the object-oriented world where I started to branch out into other languages to learn more about algorithms and systems. I am now comfortable writing programs in C, C++, Java, Python, HTML, CSS, and Golang. In addition, I am comfortable working with SQL databases, UML diagraming, and MongoDB.</p>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
</a>
|
||||
</div>
|
||||
<!--
|
||||
<form action="#" method="post">
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name" placeholder="Enter Your Name" required>
|
||||
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" id="email" name="email" placeholder="person@gmail.com" required>
|
||||
|
||||
<label for="message">Message:</label>
|
||||
<textarea id="message" name="message" placeholder="Enter a short message!" required></textarea>
|
||||
|
||||
<button type="submit">Send Message</button>
|
||||
</form>
|
||||
-->
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 LewisPriceDev. All rights reserved.</p>
|
||||
<div class="social-links">
|
||||
<a href="https://www.instagram.com/lewcifer_the_great/" target="_blank" aria-label="Instagram">
|
||||
<img src="./images/instagram-icon.svg" alt="">
|
||||
</a>
|
||||
<a href="https://www.facebook.com/lewprice140" target="_blank" aria-label="Facebook">
|
||||
<img src="./images/facebook-icon.svg" alt="">
|
||||
</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>
|
||||
<div>
|
||||
<a href="mailto:lewis.e.price@outlook.com">Email Me</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
106
project.html
Executable 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">
|
||||
<!--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">
|
||||
<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>
|
||||
</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>© 2025 Group 18. All rights reserved.</p>
|
||||
<div class="social-links">
|
||||
<a href="https://www.instagram.com/lewcifer_the_great/" target="_blank" aria-label="Instagram">
|
||||
<img src="./images/instagram-icon.svg" alt="">
|
||||
</a>
|
||||
<a href="https://www.facebook.com/lewprice140" target="_blank" aria-label="Facebook">
|
||||
<img src="./images/facebook-icon.svg" alt="">
|
||||
</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>
|
||||