Skip to content

Commit 05026f7

Browse files
Code-JLCode-JL
committed
Properly uses project images to showcase them
1 parent 44bc660 commit 05026f7

File tree

12 files changed

+359
-0
lines changed

12 files changed

+359
-0
lines changed

‎projects/ai_page_summary/about.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,48 @@ section#contact p a {
7373
section#contact p a:visited {
7474
color: #dfa843;
7575
}
76+
77+
.project-gallery {
78+
margin: 2rem 0;
79+
padding: 2rem;
80+
background: rgba(255, 255, 255, 0.05);
81+
border-radius: 8px;
82+
}
83+
84+
.gallery {
85+
display: grid;
86+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
87+
gap: 2rem;
88+
margin-top: 1.5rem;
89+
}
90+
91+
.gallery-item {
92+
position: relative;
93+
margin: 0;
94+
transition: transform 0.3s ease;
95+
}
96+
97+
.gallery-item:hover {
98+
transform: scale(1.02);
99+
}
100+
101+
.gallery-image {
102+
width: 100%;
103+
height: auto;
104+
border-radius: 6px;
105+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
106+
}
107+
108+
figcaption {
109+
margin-top: 1rem;
110+
text-align: center;
111+
font-size: 0.9rem;
112+
color: #ccc;
113+
}
114+
115+
/* Responsive adjustments */
116+
@media (max-width: 768px) {
117+
.gallery {
118+
grid-template-columns: 1fr;
119+
}
120+
}

‎projects/ai_page_summary/about.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,20 @@ <h2>Features</h2>
3939
</ul>
4040
</section>
4141

42+
<section class="project-gallery">
43+
<h2>Project Screenshots</h2>
44+
<div class="gallery">
45+
<figure class="gallery-item">
46+
<img src="../images/ai_page_summary0.JPG" alt="AI Page Summary Extension Interface" class="gallery-image">
47+
<figcaption>Main Extension Interface</figcaption>
48+
</figure>
49+
<figure class="gallery-item">
50+
<img src="../images/ai_page_summary1.JPG" alt="AI Page Summary Settings Panel" class="gallery-image">
51+
<figcaption>Settings Configuration Panel</figcaption>
52+
</figure>
53+
</div>
54+
</section>
55+
4256
<!-- Implementation -->
4357
<section class="project">
4458
<h2>Implementation</h2>

‎projects/dna_sequence_analyzer/about.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,49 @@ section#contact p a {
7373
section#contact p a:visited {
7474
color: #dfa843;
7575
}
76+
77+
78+
.project-gallery {
79+
margin: 2rem 0;
80+
padding: 2rem;
81+
background: rgba(255, 255, 255, 0.05);
82+
border-radius: 8px;
83+
}
84+
85+
.gallery {
86+
display: grid;
87+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
88+
gap: 2rem;
89+
margin-top: 1.5rem;
90+
}
91+
92+
.gallery-item {
93+
position: relative;
94+
margin: 0;
95+
transition: transform 0.3s ease;
96+
}
97+
98+
.gallery-item:hover {
99+
transform: scale(1.02);
100+
}
101+
102+
.gallery-image {
103+
width: 100%;
104+
height: auto;
105+
border-radius: 6px;
106+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
107+
}
108+
109+
figcaption {
110+
margin-top: 1rem;
111+
text-align: center;
112+
font-size: 0.9rem;
113+
color: #ccc;
114+
}
115+
116+
/* Responsive adjustments */
117+
@media (max-width: 768px) {
118+
.gallery {
119+
grid-template-columns: 1fr;
120+
}
121+
}

‎projects/dna_sequence_analyzer/about.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,13 @@ <h2>Technologies Used</h2>
2727
</div>
2828
</section>
2929

30+
<section class="project">
31+
<h2>Results</h2>
32+
<div class="image-container">
33+
<img src="../images/dna_sequence_analyzer0.JPG" alt="DNA Sequence Analyzer Interface" class="project-image">
34+
</div>
35+
</section>
36+
3037
<!-- Features Section -->
3138
<section class="project">
3239
<h2>Features</h2>

‎projects/inventory_manager/about.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,48 @@ section#contact p a {
7373
section#contact p a:visited {
7474
color: #dfa843;
7575
}
76+
77+
.project-gallery {
78+
margin: 2rem 0;
79+
padding: 2rem;
80+
background: rgba(255, 255, 255, 0.05);
81+
border-radius: 8px;
82+
}
83+
84+
.gallery {
85+
display: grid;
86+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
87+
gap: 2rem;
88+
margin-top: 1.5rem;
89+
}
90+
91+
.gallery-item {
92+
position: relative;
93+
margin: 0;
94+
transition: transform 0.3s ease;
95+
}
96+
97+
.gallery-item:hover {
98+
transform: scale(1.02);
99+
}
100+
101+
.gallery-image {
102+
width: 100%;
103+
height: auto;
104+
border-radius: 6px;
105+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
106+
}
107+
108+
figcaption {
109+
margin-top: 1rem;
110+
text-align: center;
111+
font-size: 0.9rem;
112+
color: #ccc;
113+
}
114+
115+
/* Responsive adjustments */
116+
@media (max-width: 768px) {
117+
.gallery {
118+
grid-template-columns: 1fr;
119+
}
120+
}

‎projects/inventory_manager/about.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,34 @@ <h2>Technologies Used</h2>
2727
</div>
2828
</section>
2929

30+
<!-- Project Evolution -->
31+
<section class="project">
32+
<h2>Project Evolution</h2>
33+
34+
<div class="version-container">
35+
<div class="version">
36+
<h3>Current GUI Version</h3>
37+
<div class="image-container">
38+
<img src="../images/invetory_manager_new0.JPG" alt="Modern GUI Inventory Manager Interface" class="project-image">
39+
</div>
40+
<div class="image-container">
41+
<img src="../images/invetory_manager_new1.JPG" alt="GUI Item Management View" class="project-image">
42+
</div>
43+
</div>
44+
45+
<div class="version">
46+
<h3>Original CLI Version</h3>
47+
<div class="image-container">
48+
<img src="../images/invetory_manager_old0.JPG" alt="Command Line Interface View" class="project-image">
49+
</div>
50+
<div class="image-container">
51+
<img src="../images/invetory_manager_old1.JPG" alt="CLI Data Processing View" class="project-image">
52+
</div>
53+
</div>
54+
</div>
55+
</section>
56+
57+
3058
<!-- Features Section -->
3159
<section class="project">
3260
<h2>Features</h2>

‎projects/kicker_data_scraper/about.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,48 @@ section#contact p a {
7373
section#contact p a:visited {
7474
color: #dfa843;
7575
}
76+
77+
.project-gallery {
78+
margin: 2rem 0;
79+
padding: 2rem;
80+
background: rgba(255, 255, 255, 0.05);
81+
border-radius: 8px;
82+
}
83+
84+
.gallery {
85+
display: grid;
86+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
87+
gap: 2rem;
88+
margin-top: 1.5rem;
89+
}
90+
91+
.gallery-item {
92+
position: relative;
93+
margin: 0;
94+
transition: transform 0.3s ease;
95+
}
96+
97+
.gallery-item:hover {
98+
transform: scale(1.02);
99+
}
100+
101+
.gallery-image {
102+
width: 100%;
103+
height: auto;
104+
border-radius: 6px;
105+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
106+
}
107+
108+
figcaption {
109+
margin-top: 1rem;
110+
text-align: center;
111+
font-size: 0.9rem;
112+
color: #ccc;
113+
}
114+
115+
/* Responsive adjustments */
116+
@media (max-width: 768px) {
117+
.gallery {
118+
grid-template-columns: 1fr;
119+
}
120+
}

‎projects/kicker_data_scraper/about.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,20 @@ <h2>Features</h2>
3838
</ul>
3939
</section>
4040

41+
<!-- Add this after the Technologies section -->
42+
<section class="project">
43+
<h2>Project Overview</h2>
44+
<div class="image-container">
45+
<img src="../images/kicker_data_scraper0.JPG" alt="NFL Point Kicker Data Scraper Interface" class="project-image">
46+
<p class="image-caption">CSV Output View of the Data</p>
47+
</div>
48+
<div class="image-container">
49+
<img src="../images/kicker_data_scraper1.JPG" alt="Data Analysis View" class="project-image">
50+
<p class="image-caption">Statistical Analysis and Data Visualization of the Data</p>
51+
</div>
52+
</section>
53+
54+
4155
<!-- Implementation -->
4256
<section class="project">
4357
<h2>Implementation</h2>

‎projects/kicker_predictor/about.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,48 @@ section#contact p a {
7373
section#contact p a:visited {
7474
color: #dfa843;
7575
}
76+
77+
.project-gallery {
78+
margin: 2rem 0;
79+
padding: 2rem;
80+
background: rgba(255, 255, 255, 0.05);
81+
border-radius: 8px;
82+
}
83+
84+
.gallery {
85+
display: grid;
86+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
87+
gap: 2rem;
88+
margin-top: 1.5rem;
89+
}
90+
91+
.gallery-item {
92+
position: relative;
93+
margin: 0;
94+
transition: transform 0.3s ease;
95+
}
96+
97+
.gallery-item:hover {
98+
transform: scale(1.02);
99+
}
100+
101+
.gallery-image {
102+
width: 100%;
103+
height: auto;
104+
border-radius: 6px;
105+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
106+
}
107+
108+
figcaption {
109+
margin-top: 1rem;
110+
text-align: center;
111+
font-size: 0.9rem;
112+
color: #ccc;
113+
}
114+
115+
/* Responsive adjustments */
116+
@media (max-width: 768px) {
117+
.gallery {
118+
grid-template-columns: 1fr;
119+
}
120+
}

‎projects/kicker_predictor/about.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,16 @@ <h2>Technologies Used</h2>
2727
</div>
2828
</section>
2929

30+
<!-- Project Overview -->
31+
<section class="project">
32+
<h2>Project Overview</h2>
33+
<div class="image-container">
34+
<img src="../images/kicker_predictor0.JPG" alt="NFL Kicker Predictor Main Interface" class="project-image">
35+
<p class="image-caption">Real-time Kicker Analysis Dashboard</p>
36+
</div>
37+
</section>
38+
39+
3040
<!-- Features Section -->
3141
<section class="project">
3242
<h2>Features</h2>

0 commit comments

Comments
 (0)