douwe/douwco_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved UI

Browse Source
This commit is contained in:
douwe
2026-10-12 17:18:17 +02:00
parent 537db79d78
commit 75dd780352
29 changed files with 744 additions and 745 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/css/style.css
+215 -337
View File
@@ -92,7 +92,7 @@ footer > div > p {
font-weight: bold;
color: var(--white-clr);
text-decoration: none;
font-size: 36px;
font-size: 28px;
border: none;
border-radius: 20px;
@@ -100,7 +100,7 @@ footer > div > p {
display: flex;
align-items: center;
margin: 10px;
margin: 8px;
padding-right: 10px;
}
@@ -202,328 +202,156 @@ footer > div > p {
float: left;
}
/* New project card styling - rectangular with image on top */
.project-card-new {
background-color: var(--background-accent-clr);
border-radius: var(--card-border-radius, 25px);
overflow: hidden;
margin: 10px;
max-width: 400px;
min-width: 300px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
position: relative;
}
.project-card-new.expanded {
z-index: 10;
transform: scale(1.02);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}
.project-card-new .toggle-icon {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--green-clr);
color: var(--background-clr);
font-size: 20px;
font-weight: bold;
z-index: 20;
cursor: pointer;
transition: transform 0.2s ease;
}
.project-card-new .toggle-icon:hover {
transform: scale(1.1);
}
.project-card-image-container {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-card-new.expanded .project-card-image-container {
height: 150px;
}
.project-card-image {
width: 100%;
height: 100%;
object-fit: cover;
background-color: #888; /* Plain grey as fallback */
}
.project-card-title-container {
position: relative;
margin-top: -50px; /* Overlap with image */
padding: 10px 20px;
z-index: 1;
}
.project-card-title-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--background-accent-clr);
border-radius: var(--card-border-radius, 25px);
opacity: 0.95;
}
.project-card-title {
position: relative;
font-weight: bold;
font-size: 20px;
color: var(--green-clr);
margin: 0;
z-index: 1;
}
.project-card-content {
padding: 0 20px;
color: var(--text-color);
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-card-new.expanded .project-card-content {
max-height: 1000px;
padding: 20px;
}
.project-card-short-desc {
padding: 10px 20px 20px;
color: var(--text-color);
line-height: 1.6;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-card-new.expanded .project-card-short-desc {
display: none;
}
.project-card-content p {
margin: 0;
line-height: 1.6;
}
/* About Me grid layout */
.about-me-projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 20px;
width: 100%;
max-width: 1200px;
margin: 20px auto;
}
/* ===== Apps Section - Full Width Dashboard Carousel ===== */
/* ===== Apps & Hosted Sections - vertical selector + detail ===== */
.apps-container {
.service-section {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 20px;
display: flex;
flex-direction: column;
gap: 30px;
}
.carousel-container-full {
position: relative;
width: 100%;
padding: 40px 60px;
padding: 0 20px 20px;
box-sizing: border-box;
}
.carousel-track-full {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
width: 100%;
gap: 30px;
align-items: stretch;
}
.carousel-item-full {
.service-selector {
display: flex;
flex-direction: column;
gap: 12px;
width: 260px;
flex-shrink: 0;
max-height: 480px;
overflow-y: auto;
padding: 5px;
}
.service-selector-item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border: 2px solid transparent;
border-radius: 18px;
background-color: var(--background-accent-clr);
color: var(--white-clr);
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: bold;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
min-width: 120px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: left;
}
.carousel-item-full[data-selected="true"] {
z-index: 5;
.service-selector-item:hover {
transform: translateY(-2px);
background-color: #3a5c5c;
}
.service-icon-large {
width: 100px;
height: 100px;
.service-selector-item.selected {
border-color: var(--green-clr);
background-color: var(--dark-teal, #2c5f5f);
}
.service-selector-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 50%;
background-color: var(--icon-bg, #888);
display: flex;
align-items: center;
justify-content: center;
color: var(--white-clr);
font-weight: bold;
font-size: 40px;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.carousel-item-full[data-selected="true"] .service-icon-large {
width: 150px;
height: 150px;
font-size: 60px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}
.carousel-item-full:nth-child(1):not([data-selected="true"]) .service-icon-large,
.carousel-item-full:nth-child(5):not([data-selected="true"]) .service-icon-large {
width: 80px;
height: 80px;
font-size: 32px;
opacity: 0.7;
}
.carousel-item-full:nth-child(2):not([data-selected="true"]):not(:nth-child(4)) .service-icon-large,
.carousel-item-full:nth-child(4):not([data-selected="true"]):not(:nth-child(2)) .service-icon-large {
width: 90px;
height: 90px;
font-size: 36px;
opacity: 0.85;
}
.service-label-large {
color: var(--white-clr);
font-size: 22px;
margin-top: 15px;
opacity: 0.8;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
}
.carousel-item-full[data-selected="true"] .service-label-large {
opacity: 1;
font-size: 28px;
font-weight: bold;
}
.carousel-item-full:nth-child(1):not([data-selected="true"]) .service-label-large,
.carousel-item-full:nth-child(5):not([data-selected="true"]) .service-label-large {
opacity: 0.5;
}
.carousel-nav-full {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.15);
border: none;
color: var(--white-clr);
font-size: 48px;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}
.carousel-nav-full:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-50%) scale(1.1);
}
.carousel-nav-full.prev {
left: 20px;
}
.carousel-nav-full.next {
right: 20px;
}
/* Service detail area - full width */
.service-detail-full {
width: 100%;
background-color: var(--dark-green, #1a3d2e);
border-radius: var(--card-border-radius, 25px);
padding: 40px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 30px;
}
.service-screenshot-full {
width: 100%;
height: 400px;
border-radius: 15px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
background-color: #2a2a2a;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-screenshot-full img {
.service-selector-icon img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
object-fit: contain;
padding: 5px;
box-sizing: border-box;
}
.service-screenshot-full img.active {
.service-selector-item.selected .service-selector-icon {
transform: scale(1.1);
}
.service-selector-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.service-detail {
flex: 1;
background-color: var(--dark-green, #1a3d2e);
border-radius: var(--card-border-radius, 25px);
padding: 30px;
box-sizing: border-box;
display: flex;
gap: 30px;
align-items: center;
min-width: 0;
}
.service-visual {
flex: 1 1 45%;
height: clamp(240px, 45vh, 420px);
border-radius: 15px;
overflow: hidden;
background: linear-gradient(145deg, #2c5f5f, #1a3d2e);
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.service-visual-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
padding: 24px;
box-sizing: border-box;
opacity: 1;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-info-full {
.service-visual-img.fading {
opacity: 0;
}
.service-info {
flex: 1 1 55%;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
text-align: center;
align-items: flex-start;
gap: 16px;
min-width: 0;
}
.service-title {
color: var(--green-clr);
font-size: 42px;
margin: 0;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.service-title.active {
opacity: 1;
}
.service-description-full {
.service-description {
color: var(--white-clr);
font-size: 24px;
line-height: 1.6;
max-width: 800px;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.service-description-full.active {
opacity: 1;
}
.service-description-full p {
margin: 0;
}
@@ -541,9 +369,7 @@ footer > div > p {
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
margin-top: 20px;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
margin-top: 10px;
}
.go-to-app-button:hover {
@@ -551,10 +377,6 @@ footer > div > p {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.go-to-app-button.active {
opacity: 1;
}
/* ===== Games Section ===== */
.games-container {
@@ -566,7 +388,7 @@ footer > div > p {
.games-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
width: 100%;
}
@@ -587,18 +409,30 @@ footer > div > p {
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.game-card.expanded {
grid-column: span 2;
z-index: 10;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}
.game-card-image {
width: 100%;
height: 200px;
overflow: hidden;
background-color: #888;
background: linear-gradient(145deg, #2c5f5f, #1a3d2e);
}
.game-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
background-color: #888;
}
/* Logo-style images (About Me cards): show the full logo instead of cropping */
.game-card-image.contain img {
object-fit: contain;
padding: 24px;
box-sizing: border-box;
}
.game-card-content {
@@ -606,6 +440,7 @@ footer > div > p {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.game-card-title {
@@ -615,6 +450,20 @@ footer > div > p {
margin: 0;
}
.game-card-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.game-genre {
color: var(--white-clr);
font-size: 14px;
font-weight: bold;
opacity: 0.75;
}
.game-card-description {
color: var(--white-clr);
font-size: 18px;
@@ -680,77 +529,106 @@ footer > div > p {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.game-card-content .play-button {
align-self: flex-start;
padding: 10px 24px;
font-size: 18px;
margin-top: auto;
}
.play-button:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
/* Responsive design for carousel */
/* Responsive design for the service sections */
@media (max-width: 1024px) {
.apps-container {
padding: 15px;
.service-selector {
width: 220px;
}
.carousel-container-full {
padding: 30px 40px;
}
.carousel-track-full {
gap: 15px;
}
.service-icon-large {
width: 80px;
height: 80px;
font-size: 32px;
}
.carousel-item-full[data-selected="true"] .service-icon-large {
width: 120px;
height: 120px;
font-size: 48px;
}
.carousel-item-full:nth-child(1):not([data-selected="true"]) .service-icon-large,
.carousel-item-full:nth-child(5):not([data-selected="true"]) .service-icon-large {
width: 60px;
height: 60px;
font-size: 24px;
}
.carousel-item-full:nth-child(2):not([data-selected="true"]):not(:nth-child(4)) .service-icon-large,
.carousel-item-full:nth-child(4):not([data-selected="true"]):not(:nth-child(2)) .service-icon-large {
width: 70px;
height: 70px;
font-size: 28px;
}
.service-screenshot-full {
height: 300px;
}
.service-title {
font-size: 36px;
}
.service-description-full {
font-size: 20px;
}
.service-label-large {
.service-selector-item {
font-size: 18px;
}
.carousel-item-full[data-selected="true"] .service-label-large {
font-size: 24px;
.service-detail {
padding: 20px;
gap: 20px;
}
.service-visual {
height: clamp(220px, 40vh, 340px);
}
.service-title {
font-size: 34px;
}
.service-description {
font-size: 20px;
}
.go-to-app-button {
font-size: 24px;
padding: 15px 35px;
}
}
@media (max-width: 900px) {
.service-section {
flex-direction: column;
padding: 0 10px 20px;
gap: 20px;
}
.service-selector {
flex-direction: row;
width: 100%;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
padding: 2px;
}
.service-selector-item {
flex-shrink: 0;
font-size: 18px;
padding: 10px 14px;
}
.service-selector-icon {
width: 36px;
height: 36px;
}
.service-detail {
flex-direction: column;
align-items: stretch;
}
.service-visual {
width: 100%;
height: clamp(200px, 35vh, 320px);
}
.service-info {
align-items: center;
text-align: center;
}
}
/* Below this width the card grids have a single column: expanding tiles
take the full width instead of spanning two columns. */
@media (max-width: 740px) {
.game-card.expanded {
grid-column: span 1;
}
.game-card-full-description {
max-width: 100%;
}
}
/* Currently working on and However in the past sections */
.about-me-section {
width: 100%;
@@ -778,11 +656,11 @@ footer > div > p {
}
.icon.small {
height: 45px;
height: 36px;
}
.icon.medium {
height: 100px;
height: 70px;
}
.icon.large {
public/assets/img/apps/beszel_screenshot.png
View File
public/assets/img/apps/gitea_screenshot.png
View File
public/assets/img/apps/nextcloud_screenshot.png
View File
public/assets/img/apps/penpot_screenshot.png
View File
public/assets/img/apps/wattif_screenshot.png
View File
public/assets/img/findash_dashboard.svg
+58
View File
@@ -0,0 +1,58 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 500" width="630" height="500">
<defs>
<linearGradient id="fg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#12222a"/>
<stop offset="1" stop-color="#0d1117"/>
</linearGradient>
<linearGradient id="line" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#3fb950"/>
<stop offset="1" stop-color="#58a6ff"/>
</linearGradient>
</defs>
<rect width="630" height="500" fill="url(#fg)"/>
<!-- top bar -->
<rect x="30" y="28" width="570" height="54" rx="10" fill="#161b22" stroke="#30363d" stroke-width="2"/>
<rect x="48" y="48" width="120" height="14" rx="7" fill="#3fb950"/>
<rect x="470" y="44" width="112" height="22" rx="11" fill="#21262d" stroke="#30363d" stroke-width="2"/>
<!-- balance card -->
<rect x="30" y="100" width="270" height="120" rx="10" fill="#161b22" stroke="#30363d" stroke-width="2"/>
<rect x="48" y="118" width="90" height="10" rx="5" fill="#8b949e"/>
<text x="48" y="168" font-family="monospace" font-size="34" font-weight="700" fill="#e6edf3">&#8364; 1 284,50</text>
<rect x="48" y="186" width="70" height="9" rx="4" fill="#3fb950"/>
<rect x="126" y="186" width="52" height="9" rx="4" fill="#21262d"/>
<!-- spending chart card -->
<rect x="330" y="100" width="270" height="120" rx="10" fill="#161b22" stroke="#30363d" stroke-width="2"/>
<rect x="348" y="118" width="80" height="10" rx="5" fill="#8b949e"/>
<g fill="#3fb950">
<rect x="352" y="168" width="18" height="28" rx="4"/>
<rect x="382" y="152" width="18" height="44" rx="4"/>
<rect x="412" y="160" width="18" height="36" rx="4"/>
<rect x="442" y="134" width="18" height="62" rx="4"/>
<rect x="472" y="146" width="18" height="50" rx="4"/>
</g>
<g fill="#58a6ff">
<rect x="510" y="156" width="18" height="40" rx="4"/>
<rect x="540" y="122" width="18" height="74" rx="4"/>
<rect x="570" y="142" width="18" height="54" rx="4"/>
</g>
<!-- line chart card -->
<rect x="30" y="240" width="570" height="150" rx="10" fill="#161b22" stroke="#30363d" stroke-width="2"/>
<rect x="48" y="258" width="110" height="10" rx="5" fill="#8b949e"/>
<polyline points="48,370 108,344 168,356 228,312 288,326 348,290 408,300 468,268 528,280 582,252"
fill="none" stroke="url(#line)" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="582" cy="252" r="7" fill="#3fb950" stroke="#0d1117" stroke-width="3"/>
<!-- category rows -->
<rect x="30" y="410" width="570" height="62" rx="10" fill="#161b22" stroke="#30363d" stroke-width="2"/>
<circle cx="58" cy="441" r="12" fill="#3fb950"/>
<rect x="82" y="433" width="96" height="14" rx="7" fill="#8b949e"/>
<circle cx="238" cy="441" r="12" fill="#58a6ff"/>
<rect x="262" y="433" width="80" height="14" rx="7" fill="#8b949e"/>
<circle cx="402" cy="441" r="12" fill="#d29922"/>
<rect x="426" y="433" width="88" height="14" rx="7" fill="#8b949e"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

public/assets/img/games/break-the-isolation.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

public/assets/img/games/cobor-goes-farming.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

public/assets/img/games/coral-conquest.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

public/assets/img/games/cropcopter.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

public/assets/img/games/for-king-for-freedom-and-for-law.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

public/assets/img/games/gerstenat.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

public/assets/img/games/loopedy-island.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

public/assets/img/games/ludum47_placeholder.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 123 KiB

public/assets/img/games/ludum48_placeholder.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

public/assets/img/games/ludum49_placeholder.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 296 KiB

public/assets/img/games/ludum50_placeholder.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

public/assets/img/games/ludum51_placeholder.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.8 KiB

public/assets/img/games/pandaemic.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

public/assets/img/games/romants.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB

public/assets/img/games/tanks-n-robots.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

public/assets/img/games/the-desert-of-nothingness.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

public/assets/img/games/windy-the-indie.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

public/assets/img/games/windy_placeholder.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 172 KiB

public/assets/img/icons/hosted_icon.svg
+16
View File
@@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 272" width="192" height="272">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#78e0a1"/>
<stop offset="1" stop-color="#47bcdf"/>
</linearGradient>
</defs>
<g fill="none" stroke="url(#g)" stroke-width="14" stroke-linecap="round" stroke-linejoin="round">
<rect x="20" y="30" width="152" height="90" rx="18"/>
<rect x="20" y="152" width="152" height="90" rx="18"/>
<circle cx="52" cy="75" r="7" fill="url(#g)" stroke="none"/>
<circle cx="52" cy="197" r="7" fill="url(#g)" stroke="none"/>
<path d="M92 75h48"/>
<path d="M92 197h48"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 744 B

public/assets/js/index.js
+64 -201
View File
@@ -2,9 +2,8 @@ document.addEventListener('DOMContentLoaded', () => {
setupNavigationHighlight();
setupNavigationClicks();
setupCopyright();
setupProjectCards();
setupAppsCarousel();
setupGameCards();
setupServiceSections();
setupCards();
});
function setupNavigationHighlight() {
@@ -47,212 +46,32 @@ function setupCopyright() {
document.getElementById('copyright').textContent = `© ${new Date().getFullYear()} - douwco.be`;
}
function setupProjectCards() {
const projectCards = document.querySelectorAll('.project-card-new');
projectCards.forEach(card => {
const shortDesc = card.querySelector('.project-card-short-desc');
const fullContent = card.querySelector('.project-card-content');
const toggleIcon = card.querySelector('.toggle-icon');
if (!shortDesc || !fullContent || !toggleIcon) return;
const toggleCard = (event) => {
if (event.target.tagName === 'A') {
/* Unified expandable card system, shared by the About Me and My Games grids.
Clicking a card expands it (spanning two grid columns); clicking again or
picking another card in the same grid collapses it. */
function setupCards() {
const cards = document.querySelectorAll('.game-card');
cards.forEach(card => {
card.addEventListener('click', (event) => {
if (event.target.closest('a')) {
return;
}
const isExpanded = card.classList.contains('expanded');
if (isExpanded) {
card.classList.remove('expanded');
toggleIcon.textContent = '+';
} else {
card.classList.add('expanded');
toggleIcon.textContent = '−';
}
event.stopPropagation();
};
card.addEventListener('click', toggleCard);
toggleIcon.addEventListener('click', toggleCard);
});
}
function setupAppsCarousel() {
const carousel = document.getElementById('apps-carousel');
const carouselContainer = carousel ? carousel.closest('.carousel-container-full') : null;
const items = document.querySelectorAll('#apps-carousel .carousel-item-full');
const prevBtn = carouselContainer ? carouselContainer.querySelector('.carousel-nav-full.prev') : null;
const nextBtn = carouselContainer ? carouselContainer.querySelector('.carousel-nav-full.next') : null;
const screenshotImg = document.getElementById('apps-screenshot-img');
const description = document.getElementById('apps-description');
const title = document.getElementById('apps-title');
const goToAppBtn = document.getElementById('apps-link');
if (!carousel || items.length === 0) return;
const services = [
{
name: 'Gitea',
screenshot: '/assets/img/gitea_screenshot.png',
description: 'Self-hosted Git service with a simple and lightweight interface.',
url: 'https://gitea.douwco.be'
},
{
name: 'Nextcloud',
screenshot: '/assets/img/nextcloud_screenshot.png',
description: 'Private file hosting and collaboration platform with powerful features.',
url: 'https://nextcloud.douwco.be'
},
{
name: 'Penpot',
screenshot: '/assets/img/penpot_screenshot.png',
description: 'Open-source design and prototyping platform for teams.',
url: 'https://penpot.douwco.be'
},
{
name: 'Beszel',
screenshot: '/assets/img/beszel_screenshot.png',
description: 'Custom service management and monitoring dashboard.',
url: 'https://beszel.douwco.be'
},
{
name: 'Wattif',
screenshot: '/assets/img/wattif_screenshot.png',
description: 'Energy monitoring and analysis tool for smart homes.',
url: 'https://wattif.douwco.be'
}
];
let currentIndex = 0;
let isAnimating = false;
function updateCarousel() {
if (isAnimating) return;
isAnimating = true;
items.forEach((item, index) => {
const isSelected = index === currentIndex;
item.setAttribute('data-selected', isSelected.toString());
});
const service = services[currentIndex];
if (description) description.classList.remove('active');
if (screenshotImg) screenshotImg.classList.remove('active');
if (title) title.classList.remove('active');
if (goToAppBtn) goToAppBtn.classList.remove('active');
setTimeout(() => {
if (screenshotImg) {
screenshotImg.src = service.screenshot;
}
if (title) {
title.textContent = service.name;
}
if (description) {
description.innerHTML = `<p>${service.description}</p>`;
}
if (goToAppBtn) {
goToAppBtn.href = service.url;
}
setTimeout(() => {
if (description) description.classList.add('active');
if (screenshotImg) screenshotImg.classList.add('active');
if (title) title.classList.add('active');
if (goToAppBtn) goToAppBtn.classList.add('active');
isAnimating = false;
}, 50);
}, 300);
}
function rotateCarousel(direction) {
if (isAnimating) return;
currentIndex = (currentIndex + direction + items.length) % items.length;
updateCarousel();
}
if (prevBtn) {
prevBtn.addEventListener('click', () => rotateCarousel(-1));
}
if (nextBtn) {
nextBtn.addEventListener('click', () => rotateCarousel(1));
}
items.forEach((item, index) => {
item.addEventListener('click', () => {
if (isAnimating) return;
currentIndex = index;
updateCarousel();
});
});
let touchStartX = 0;
let touchEndX = 0;
if (carousel) {
carousel.addEventListener('touchstart', (e) => {
touchStartX = e.changedTouches[0].screenX;
}, { passive: true });
carousel.addEventListener('touchend', (e) => {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
}, { passive: true });
}
function handleSwipe() {
if (isAnimating) return;
const swipeThreshold = 50;
const diff = touchStartX - touchEndX;
if (Math.abs(diff) > swipeThreshold) {
if (diff > 0) {
rotateCarousel(1);
} else {
rotateCarousel(-1);
}
}
}
if (carousel) {
carousel.addEventListener('wheel', (e) => {
if (isAnimating) return;
e.preventDefault();
if (e.deltaY > 0) {
rotateCarousel(1);
} else {
rotateCarousel(-1);
}
}, { passive: false });
}
updateCarousel();
}
function setupGameCards() {
const gameCards = document.querySelectorAll('.game-card');
gameCards.forEach(card => {
card.addEventListener('click', (event) => {
const grid = card.closest('.games-grid, .about-me-projects-grid');
const isExpanded = card.classList.contains('expanded');
if (isExpanded) {
card.classList.remove('expanded');
} else {
gameCards.forEach(c => c.classList.remove('expanded'));
if (grid) {
grid.querySelectorAll('.game-card').forEach(c => c.classList.remove('expanded'));
}
if (!isExpanded) {
card.classList.add('expanded');
}
event.stopPropagation();
});
const playButton = card.querySelector('.play-button');
if (playButton) {
playButton.addEventListener('click', (event) => {
@@ -261,3 +80,47 @@ function setupGameCards() {
}
});
}
function setupServiceSections() {
document.querySelectorAll('.service-section').forEach(section => {
const items = section.querySelectorAll('.service-selector-item');
const visualImg = section.querySelector('.service-visual-img');
const title = section.querySelector('.service-title');
const description = section.querySelector('.service-description');
const link = section.querySelector('.go-to-app-button');
if (items.length === 0 || !visualImg || !title || !description || !link) return;
let isAnimating = false;
const applyItem = (item) => {
visualImg.src = item.dataset.image;
visualImg.alt = item.dataset.name;
title.textContent = item.dataset.name;
description.textContent = item.dataset.description;
link.href = item.dataset.url;
};
const selectItem = (item) => {
if (isAnimating || item.classList.contains('selected')) return;
isAnimating = true;
items.forEach(i => i.classList.toggle('selected', i === item));
visualImg.classList.add('fading');
setTimeout(() => {
applyItem(item);
requestAnimationFrame(() => {
visualImg.classList.remove('fading');
setTimeout(() => {
isAnimating = false;
}, 300);
});
}, 300);
};
items.forEach(item => {
item.addEventListener('click', () => selectItem(item));
});
});
}