Skip to content

Reorganize folder and fix projects page #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KorelU merged 1 commit into from
Feb 25, 2026
Merged

Reorganize folder and fix projects page #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,7 @@ <h2>About Me</h2>
</div>
</div> -->
<div class="about-line left-align">
I was born in Southern California but I have lived in Northern California for most of my life.
A large part of my childhood was as a result influenced by the booming tech scene in Northern California.
A large part of my childhood was influenced by the booming tech scene in Northern California.
My dad was a software engineer and we often bonded over related concepts as a result. One memory that
has stuck with me was during the summer of my 7th-grade year, when we built a set of lego robots that still stand
on my bookshelf at home. it was this influence that got me first intrested in Computer science and has led me to
Expand Down Expand Up @@ -114,7 +113,7 @@ <h3>Portable Speaker - 2025</h3>
</a>
</p>
<h4>A simple, battery powered arduino-based speaker</h4>
<img src="photos/Portable_Arduino_Based_Speaker.png" alt="Portable_Arduino_Based_Speaker" class="project-chart" style="width: 80%; max-width: 400px; margin: 2em auto; display: block; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);">
<img src="photos/Portable_Arduino_Based_Speaker.png" alt="Portable_Arduino_Based_Speaker" class="project-chart" style="width: 100%; max-width: 400px; margin: 2em auto; display: block; ">
<p class="chart-title ">This diagram is for the circuit network of the portable arduino speaker</p>
<!-- description that is hidden initially -->
<p class="description">
Expand Down Expand Up @@ -153,7 +152,7 @@ <h3>KDAI - 2025</h3>
</a>
</p>
<h4>KDAI (Kernel Dynamic ARP Inspeciton) is a Loadable Kernel Module for Linux systems that enhances network security </h4>
<img src="photos/kdai.png" alt="KDAI" class="project-chart" style="width: 100%; max-width: 400px; margin: 2em auto; display: block; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);">
<img src="photos/kdai.png" alt="KDAI" class="project-chart" style="width: 100%; max-width: 400px; margin: 2em auto; display: block; ">
<p class="chart-title">Screenshot of GNS3 Simulaiton where multiple PC's in different VLANs are connected to a switch running KDAI</p>
<p class="description">
<a href="https://en.wikipedia.org/wiki/Address_Resolution_Protocol" target="_blank">The Address Resolution Protocol (ARP) </a>
Expand Down Expand Up @@ -209,7 +208,7 @@ <h3>IEEE802.1x Docker Image - 2024</h3>
</a>
</p>
<h4>Custom Docker Image for IEEE 802.1x RADIUS Server & Authenticator</h4>
<img src="photos/DENT_IEEE_802.1x.jpg" alt="DENT_IEEE_802.1x" class="project-chart" style="width: 100%; max-width: 800px; margin: 2em auto; display: block; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);">
<img src="photos/DENT_IEEE_802.1x.png" alt="DENT_IEEE_802.1x" class="project-chart" style="width: 100%; max-width: 400px; margin: 2em auto; display: block; ">
<p class="chart-title">This diagram shows an 802.1X network setup where a supplicant (client) connects to an access point on an Authenticator (a TN48M Switch),
which forwards authentication requests to a FreeRadius server running in a Docker container</p>
<p class="description">
Expand Down Expand Up @@ -262,7 +261,7 @@ <h3>DENT Documentation - 2024</h3>
</a>
</p>
<h4>This Project was a step by step guide using GNS3 on how to configure a Linux Based Network Operating System called DENT</h4>
<img src="photos/BGP_Demo.png" alt="BGP_Demo" class="project-chart" style="width: 100%; max-width: 800px; margin: 2em auto; display: block; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);">
<img src="photos/BGP_Demo.png" alt="BGP_Demo" class="project-chart" style="width: 100%; max-width: 400px; margin: 2em auto; display: block; ">
<p class="chart-title">
This diagram shows a classic instance of a network topology and is part of the how to configure BGP using
Free Range Routing
Expand Down Expand Up @@ -309,7 +308,7 @@ <h4>This Project was a step by step guide using GNS3 on how to configure a Linux
<div class="project" style="display: flex; justify-content: center; align-items: center;">
<a href="pages/projects.html"
style="font-weight: bold; color: #9eccfc; ; text-decoration: underline; visibility: unset;">
View All Projects ->
View All Projects
</a>
</div>
</div>
Expand Down
12 changes: 7 additions & 5 deletions pages/projects.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ <h3>Portable Speaker - 2025</h3>
style="height: 20px;">
</a>
</p>
<h4>A simple, battery powered arduino-based speaker</h4>
<img src="../photos/Portable_Arduino_Based_Speaker.jpg" alt="Portable_Arduino_Based_Speaker" class="project-chart" style="width: 100%; max-width: 400px; margin: 2em auto; display: block">
<h4>A simple, battery powered arduino-based speaker. </h4>
<img src="../photos/Portable_Arduino_Based_Speaker.png" alt="Portable_Arduino_Based_Speaker" class="project-chart" style="width: 100%; max-width: 400px; margin: 2em auto; display: block">
<p class="chart-title ">This diagram is for the circuit network of the portable arduino speaker</p>
<!-- description that is hidden initially -->
<p class="description">
Expand Down Expand Up @@ -82,8 +82,8 @@ <h3>KDAI - 2025</h3>
style="height: 20px;">
</a>
</p>
<h4>KDAI (Kernel Dynamic ARP Inspeciton) is a Loadable Kernel Module for Linux systems that enhances network security </h4>
<img src="../photos/kdai.png" alt="KDAI" class="project-chart" style="width: 100%; max-width: 400px; margin: 2em auto; display">
<h4>KDAI (Kernel Dynamic ARP Inspeciton) is a Loadable Kernel Module for Linux systems that enhances network security</h4>
<img src="../photos/kdai.png" alt="KDAI" class="project-chart" style="width: 100%; max-width: 400px; margin: 2em auto; display: block; ">
<p class="chart-title">Screenshot of GNS3 Simulaiton where multiple PC's in different VLANs are connected to a switch running KDAI</p>
<p class="description">
<a href="https://en.wikipedia.org/wiki/Address_Resolution_Protocol" target="_blank">The Address Resolution Protocol (ARP) </a>
Expand Down Expand Up @@ -139,7 +139,7 @@ <h3>IEEE802.1x Docker Image - 2024</h3>
</a>
</p>
<h4>Custom Docker Image for IEEE 802.1x RADIUS Server & Authenticator</h4>
<img src="../photos/DENT_IEEE_802.1x.jpg" alt="DENT_IEEE_802.1x" class="project-chart" style="width: 100%; max-width: 400px; margin: 2em auto; display: block; ">
<img src="../photos/DENT_IEEE_802.1x.png" alt="DENT_IEEE_802.1x" class="project-chart" style="width: 100%; max-width: 400px; margin: 2em auto; display: block; ">
<p class="chart-title">This diagram shows an 802.1X network setup where a supplicant (client) connects to an access point on an Authenticator (a TN48M Switch),
which forwards authentication requests to a FreeRadius server running in a Docker container</p>
<p class="description">
Expand Down Expand Up @@ -250,5 +250,7 @@ <h4>This Project was a step by step guide using GNS3 on how to configure a Linux
<p>Copyright © 2026 Korel Ucpinar</p>
</footer>


<script src="../script.js"></script>
</body>
</html>
Binary file added photos/DENT_IEEE_802.1x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 photos/DENT_IEEE_802.1x.jpg → photos/DENT_IEEE_802.1x3.jpg
View file
Open in desktop
File renamed without changes
0 photos/Portable_Arduino_Based_Speaker3.png → photos/Portable_Arduino_Based_Speaker.png
View file
Open in desktop
File renamed without changes
0 photos/Portable_Arduino_Based_Speaker.jpg → ...photos/Portable_Arduino_Based_Speaker.jpg
View file
Open in desktop
File renamed without changes
0 photos/Portable_Arduino_Based_Speaker2.png → ...hotos/Portable_Arduino_Based_Speaker2.png
View file
Open in desktop
File renamed without changes
0 photos/kdai3.png → photos/old_photos/kdai3.png
View file
Open in desktop
File renamed without changes
0 photos/kdai4.jpg → photos/old_photos/kdai4.jpg
View file
Open in desktop
File renamed without changes
4 changes: 2 additions & 2 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -794,7 +794,7 @@ html body header {
margin-top: 20px;
}
.project{
max-width: fit-content;
/* max-width: fit-content; */
}
#about {
padding-top: 10px;
Expand Down Expand Up @@ -923,7 +923,7 @@ html body header {
margin-top: 10px;
}
.project{
max-width: fit-content;
/* max-width: fit-content; */
}
#about {
padding-top: 10px;
Expand Down
15 changes: 10 additions & 5 deletions styless-projects.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
button.read-more {
visibility: unset;
margin-top: auto;
display: flex;
justify-content: left;
gap: 0.5em;
}

/*Takes up the space between read more and tech icons*/
Expand Down Expand Up @@ -296,7 +300,7 @@ h3.super-large {


.project {
height: 700px;
/* height: 700px; */
padding: 1.4em;
background-color: rgb(47, 47, 54);
background-color: rgb(45, 44, 49);
Expand All @@ -307,7 +311,8 @@ h3.super-large {
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for move and shadow */
/* justify-content: unset; */
}
max-height: fit-content;
}
.project {
flex: 1 1 calc((100% / 2) - 1.5em); /* grow and shrink, at least 2 per row */
/* aspect-ratio: 1 / 1; */ /* makes it a square */
Expand Down Expand Up @@ -760,7 +765,7 @@ html body header {
@media (max-width: 1600px) {

.project {
height: 700px;
/* height: 700px; */

padding: 1.4em;
background-color: rgb(47, 47, 54);
Expand Down Expand Up @@ -879,7 +884,7 @@ html body header {
margin-top: 20px;
}
.project{
max-width: fit-content;
/* max-width: fit-content; */
}
#about {
padding-top: 10px;
Expand Down Expand Up @@ -1015,7 +1020,7 @@ html body header {
margin-top: 10px;
}
.project{
max-width: fit-content;
/* max-width: fit-content; */
}
#about {
padding-top: 10px;
Expand Down
Loading