Implement games section with expandable cards
- Added responsive grid of game cards with dark-teal background - Each card has: rounded gray image placeholder, white title, gray description, orange year badge - Click to expand: shows full description + centered play button - Play button opens game in new window - Flat minimal design consistent with portfolio style - Created placeholder images for 6 games
This commit is contained in:
douwe
@@ -23,6 +23,10 @@
|
|||||||
--blue-clr: #47bcdf;
|
--blue-clr: #47bcdf;
|
||||||
--green-clr: #6ede9a;
|
--green-clr: #6ede9a;
|
||||||
--white-clr: #ffffff;
|
--white-clr: #ffffff;
|
||||||
|
--card-border-radius: 25px;
|
||||||
|
--dark-green: #1a3d2e;
|
||||||
|
--dark-teal: #2c5f5f;
|
||||||
|
--orange-clr: #f39c12;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|||||||
@@ -72,6 +72,17 @@ footer > div > p {
|
|||||||
.scroll_section {
|
.scroll_section {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: start;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll_section > h1 {
|
||||||
|
color: var(--white-clr);
|
||||||
|
font-size: 48px;
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== Navigationbar ===== */
|
/* ===== Navigationbar ===== */
|
||||||
@@ -191,6 +202,574 @@ footer > div > p {
|
|||||||
float: left;
|
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));
|
||||||
|
gap: 20px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 20px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Apps Section - Full Width Dashboard Carousel ===== */
|
||||||
|
|
||||||
|
.apps-container {
|
||||||
|
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;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-track-full {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-item-full {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
z-index: 1;
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-item-full[data-selected="true"] {
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-icon-large {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
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;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #2a2a2a;
|
||||||
|
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-screenshot-full img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-screenshot-full img.active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-info-full {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Go to App Button */
|
||||||
|
.go-to-app-button {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: var(--green-clr);
|
||||||
|
color: var(--background-clr);
|
||||||
|
padding: 18px 40px;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 15px;
|
||||||
|
border: none;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.go-to-app-button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.go-to-app-button.active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Games Section ===== */
|
||||||
|
|
||||||
|
.games-container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.games-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card {
|
||||||
|
background-color: var(--dark-teal, #2c5f5f);
|
||||||
|
border-radius: var(--card-border-radius, 25px);
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
background-color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card-content {
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card-title {
|
||||||
|
color: var(--white-clr);
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card-description {
|
||||||
|
color: var(--white-clr);
|
||||||
|
font-size: 18px;
|
||||||
|
opacity: 0.8;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-year-badge {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: var(--orange-clr, #f39c12);
|
||||||
|
color: var(--background-clr);
|
||||||
|
padding: 5px 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card-expanded {
|
||||||
|
display: none;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card.expanded .game-card-expanded {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card.expanded .game-card-content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card.expanded .game-card-image {
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card-full-description {
|
||||||
|
color: var(--white-clr);
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.6;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 80%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-button {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: var(--green-clr);
|
||||||
|
color: var(--background-clr);
|
||||||
|
padding: 15px 35px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 15px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.play-button:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive design for carousel */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.apps-container {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-item-full[data-selected="true"] .service-label-large {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.go-to-app-button {
|
||||||
|
font-size: 24px;
|
||||||
|
padding: 15px 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Currently working on and However in the past sections */
|
||||||
|
.about-me-section {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-me-section h2 {
|
||||||
|
font-size: 28px;
|
||||||
|
color: var(--white-clr);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-bottom: 2px solid var(--green-clr);
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-me-section h2 .green-text {
|
||||||
|
color: var(--green-clr);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
/* ===== Images ===== */
|
/* ===== Images ===== */
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 296 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
@@ -2,6 +2,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
setupNavigationHighlight();
|
setupNavigationHighlight();
|
||||||
setupNavigationClicks();
|
setupNavigationClicks();
|
||||||
setupCopyright();
|
setupCopyright();
|
||||||
|
setupProjectCards();
|
||||||
|
setupAppsCarousel();
|
||||||
|
setupGameCards();
|
||||||
});
|
});
|
||||||
|
|
||||||
function setupNavigationHighlight() {
|
function setupNavigationHighlight() {
|
||||||
@@ -43,3 +46,218 @@ function setupNavigationClicks() {
|
|||||||
function setupCopyright() {
|
function setupCopyright() {
|
||||||
document.getElementById('copyright').textContent = `© ${new Date().getFullYear()} - douwco.be`;
|
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') {
|
||||||
|
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 isExpanded = card.classList.contains('expanded');
|
||||||
|
|
||||||
|
if (isExpanded) {
|
||||||
|
card.classList.remove('expanded');
|
||||||
|
} else {
|
||||||
|
gameCards.forEach(c => c.classList.remove('expanded'));
|
||||||
|
card.classList.add('expanded');
|
||||||
|
}
|
||||||
|
|
||||||
|
event.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
const playButton = card.querySelector('.play-button');
|
||||||
|
if (playButton) {
|
||||||
|
playButton.addEventListener('click', (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
+287
-56
@@ -10,6 +10,24 @@
|
|||||||
<link rel="stylesheet" href="/assets/css/style.css"/>
|
<link rel="stylesheet" href="/assets/css/style.css"/>
|
||||||
<script src="/assets/js/project-card.js" defer></script>
|
<script src="/assets/js/project-card.js" defer></script>
|
||||||
<script src="/assets/js/index.js" defer></script>
|
<script src="/assets/js/index.js" defer></script>
|
||||||
|
<script>
|
||||||
|
// Parse [[text|url]] links in project card content
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const projectCards = document.querySelectorAll('.project-card-content p');
|
||||||
|
projectCards.forEach(p => {
|
||||||
|
const linkPattern = /\[\[([^|\]]+)\|([^\]]+)\]\]/g;
|
||||||
|
let html = p.innerHTML;
|
||||||
|
html = html.replace(linkPattern, (match, text, url) => {
|
||||||
|
if (url.startsWith('http')) {
|
||||||
|
return `<a href="${url}" target="_blank" rel="noopener">${text}</a>`;
|
||||||
|
} else {
|
||||||
|
return `<a href="${url}">${text}</a>`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
p.innerHTML = html;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@@ -68,74 +86,287 @@
|
|||||||
<h1>Hi, I'm Douwe</h1>
|
<h1>Hi, I'm Douwe</h1>
|
||||||
<p>
|
<p>
|
||||||
A <span class="green-text">PhD student</span> at KU Leuven with a passion for game development and software independence.
|
A <span class="green-text">PhD student</span> at KU Leuven with a passion for game development and software independence.
|
||||||
<br><br>
|
|
||||||
Currently I'm working on:
|
|
||||||
</p>
|
</p>
|
||||||
<project-card image="/assets/img/rollability.png" image-alt="RollAbility"
|
|
||||||
title="RollAbility"
|
<div class="about-me-section">
|
||||||
description="For my PhD research at KU Leuven, I'm developing RollAbility, a therapeutic exergame that bridges player autonomy with clinical guidelines to enhance wheelchair training.
|
<h2>Currently I'm working on:</h2>
|
||||||
Developed in collaboration with therapists, RollAbility is a game built onto a clinical protocol and controlled by an actual powered wheelchair. The game connects to the RollAbility App which allows therapists to control the training session in real-time.
|
<div class="about-me-projects-grid" id="currently-working-grid">
|
||||||
[[Read the paper|https://dl.acm.org/doi/abs/10.1145/3748621]] or [[watch the video|https://www.youtube.com/watch?v=8y9XFdSN_04]].">
|
<div class="project-card-new" data-full-desc="For my PhD research at KU Leuven, I'm developing RollAbility, a therapeutic exergame that bridges player autonomy with clinical guidelines to enhance wheelchair training. Developed in collaboration with therapists, RollAbility is a game built onto a clinical protocol and controlled by an actual powered wheelchair. The game connects to the RollAbility App which allows therapists to control the training session in real-time. [[Read the paper|https://dl.acm.org/doi/abs/10.1145/3748621]] or [[watch the video|https://www.youtube.com/watch?v=8y9XFdSN_04]].">
|
||||||
</project-card>
|
<div class="toggle-icon">+</div>
|
||||||
<project-card image="/assets/img/alcove.png" image-alt="Alcove"
|
<div class="project-card-image-container">
|
||||||
title="Alcove"
|
<img class="project-card-image" src="/assets/img/rollability.png" alt="RollAbility">
|
||||||
description="Alcove is an interreg project between Flemish, Walloon and French universities and hospitals that aims to build a device that detects lung cancer through a breath test.
|
</div>
|
||||||
My role is to create a user interface for the device. This UI has to work both on android phones and on embedded linux devices.
|
<div class="project-card-title-container">
|
||||||
[[Read more about Alcove|https://alcove.crosss3.eu/nl/]].">
|
<div class="project-card-title-background"></div>
|
||||||
</project-card>
|
<h3 class="project-card-title">RollAbility</h3>
|
||||||
<p><span class="green-text">However</span> in the past I also worked on:</p>
|
</div>
|
||||||
<project-card image="/assets/img/godot_addons.png" image-alt="Godot tools"
|
<div class="project-card-short-desc">
|
||||||
title="Godot Addons"
|
<p>Therapeutic exergame for wheelchair training with clinical protocol integration.</p>
|
||||||
description="I published two small addons to the godot asset library.
|
</div>
|
||||||
One addon called [[Godot Visual Studio Debugger|https://godotengine.org/asset-library/asset/3505]] which allows you to dynamically run the current scene open in the Godot editor directly in Visual Studio Debugger.
|
<div class="project-card-content">
|
||||||
The second addon called [[Godot Test Scenes|https://godotengine.org/asset-library/asset/3420]] extends the Godot editor with an additional run mode, this mode runs an associated test scene to the currently open one in the editor.
|
<p>For my PhD research at KU Leuven, I'm developing RollAbility, a therapeutic exergame that bridges player autonomy with clinical guidelines to enhance wheelchair training. Developed in collaboration with therapists, RollAbility is a game built onto a clinical protocol and controlled by an actual powered wheelchair. The game connects to the RollAbility App which allows therapists to control the training session in real-time. [[Read the paper|https://dl.acm.org/doi/abs/10.1145/3748621]] or [[watch the video|https://www.youtube.com/watch?v=8y9XFdSN_04]].</p>
|
||||||
They are both open source:
|
</div>
|
||||||
[[Godot Test Scenes|https://github.com/DouweRavers/godot_test_scene]] and [[Godot Visual Studio Debugger|https://github.com/DouweRavers/godot_visualstudio_debugger/tree/main]].">
|
</div>
|
||||||
</project-card>
|
|
||||||
<project-card image="/assets/img/kingfisher.png" image-alt="Kingfisher"
|
<div class="project-card-new" data-full-desc="Alcove is an interreg project between Flemish, Walloon and French universities and hospitals that aims to build a device that detects lung cancer through a breath test. My role is to create a user interface for the device. This UI has to work both on android phones and on embedded linux devices. [[Read more about Alcove|https://alcove.crosss3.eu/nl/]].">
|
||||||
title="Kingfisher"
|
<div class="toggle-icon">+</div>
|
||||||
description="The project [[Kingfisher|https://kingfisher-game.com/]] is a game built by PossilbyPixels that raises awareness about Autism. It is a story-based action / puzzle game for PC and mobile.
|
<div class="project-card-image-container">
|
||||||
My role in the project was to build minigames that occur throughout the story and also to develop tools to help development.
|
<img class="project-card-image" src="/assets/img/alcove.png" alt="Alcove">
|
||||||
One of the tools I made for this project was a suburban neighborhood generator. This tool allowed us to draw streets in the editor which then were automatically filled with procedurally generated houses and gardens. You can see a demo in [[this video|/assets/vid/procedural_streets.mp4]].
|
</div>
|
||||||
You can wishlist the game on [[Steam|https://store.steampowered.com/app/4197280/Kingfisher_An_Autism_Tale/]]!">
|
<div class="project-card-title-container">
|
||||||
</project-card>
|
<div class="project-card-title-background"></div>
|
||||||
<project-card image="/assets/img/ludum_dare.png" image-alt="Ludum Dare"
|
<h3 class="project-card-title">Alcove</h3>
|
||||||
title="Ludum Dare"
|
</div>
|
||||||
description="Between 2019 and 2024, I participated regularly in the Ludum Dare event. This event was all about creating games under tight deadlines of 48 hours and with no external resources such as audio or 3D art.
|
<div class="project-card-short-desc">
|
||||||
After each event I published my game on [[Itch.io|https://coffeeplanet.itch.io/]] where they are still available for play. In the future I want to migrate them to this website.
|
<p>Interreg project building a lung cancer detection device with cross-platform UI.</p>
|
||||||
I want to especially highlight [[Cobor goes farming|https://coffeeplanet.itch.io/ludum-dare-51]] and [[Windy the Indie|https://coffeeplanet.itch.io/windy-the-indie]].">
|
</div>
|
||||||
</project-card>
|
<div class="project-card-content">
|
||||||
<project-card image="/assets/img/thesis_tool.png" image-alt="Planet Tool"
|
<p>Alcove is an interreg project between Flemish, Walloon and French universities and hospitals that aims to build a device that detects lung cancer through a breath test. My role is to create a user interface for the device. This UI has to work both on android phones and on embedded linux devices. [[Read more about Alcove|https://alcove.crosss3.eu/nl/]].</p>
|
||||||
title="Masterthesis: Planet Tool"
|
</div>
|
||||||
description="For my Masterthesis at Group T KU Leuven I made a tool for Unity that creates a procedural planet terrain.
|
</div>
|
||||||
The main challenge of this project was to optimize the algorithm to work as fast as possible. For this I leveraged GPU compute shaders to process large chunks of data at once.
|
</div>
|
||||||
You can find the tool and my thesis paper [[here|https://github.com/DouweRavers/ThesisProject-ThePlanetEngine/tree/main]].">
|
</div>
|
||||||
</project-card>
|
|
||||||
<project-card image="/assets/img/wizard_gloves.png" image-alt="Wizard Gloves"
|
<div class="about-me-section">
|
||||||
title="Masterproject: Wizard Gloves"
|
<h2><span class="green-text">However</span> in the past I also worked on:</h2>
|
||||||
description="In another project during my masters we explored gesture-based interactions in virtual environments.
|
<div class="about-me-projects-grid" id="past-projects-grid">
|
||||||
For this project we developed a prototype using Unity and custom wearable hardware to enable magic-like hand gestures for interfacing with a story game.
|
<div class="project-card-new" data-full-desc="I published two small addons to the godot asset library. One addon called [[Godot Visual Studio Debugger|https://godotengine.org/asset-library/asset/3505]] which allows you to dynamically run the current scene open in the Godot editor directly in Visual Studio Debugger. The second addon called [[Godot Test Scenes|https://godotengine.org/asset-library/asset/3420]] extends the Godot editor with an additional run mode, this mode runs an associated test scene to the currently open one in the editor. They are both open source: [[Godot Test Scenes|https://github.com/DouweRavers/godot_test_scene]] and [[Godot Visual Studio Debugger|https://github.com/DouweRavers/godot_visualstudio_debugger/tree/main]].">
|
||||||
See the game [[here|/assets/vid/wizard_gloves.mp4]] or you can find the game and paper [[here|https://github.com/DouweRavers/MasterProject-WizardsGlovesAdventure/tree/main]].">
|
<div class="toggle-icon">+</div>
|
||||||
</project-card>
|
<div class="project-card-image-container">
|
||||||
|
<img class="project-card-image" src="/assets/img/godot_addons.png" alt="Godot tools">
|
||||||
|
</div>
|
||||||
|
<div class="project-card-title-container">
|
||||||
|
<div class="project-card-title-background"></div>
|
||||||
|
<h3 class="project-card-title">Godot Addons</h3>
|
||||||
|
</div>
|
||||||
|
<div class="project-card-short-desc">
|
||||||
|
<p>Visual Studio Debugger and Test Scenes addons for the Godot engine.</p>
|
||||||
|
</div>
|
||||||
|
<div class="project-card-content">
|
||||||
|
<p>I published two small addons to the godot asset library. One addon called [[Godot Visual Studio Debugger|https://godotengine.org/asset-library/asset/3505]] which allows you to dynamically run the current scene open in the Godot editor directly in Visual Studio Debugger. The second addon called [[Godot Test Scenes|https://godotengine.org/asset-library/asset/3420]] extends the Godot editor with an additional run mode, this mode runs an associated test scene to the currently open one in the editor. They are both open source: [[Godot Test Scenes|https://github.com/DouweRavers/godot_test_scene]] and [[Godot Visual Studio Debugger|https://github.com/DouweRavers/godot_visualstudio_debugger/tree/main]].</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-card-new" data-full-desc="The project [[Kingfisher|https://kingfisher-game.com/]] is a game built by PossilbyPixels that raises awareness about Autism. It is a story-based action / puzzle game for PC and mobile. My role in the project was to build minigames that occur throughout the story and also to develop tools to help development. One of the tools I made for this project was a suburban neighborhood generator. This tool allowed us to draw streets in the editor which then were automatically filled with procedurally generated houses and gardens. You can see a demo in [[this video|/assets/vid/procedural_streets.mp4]]. You can wishlist the game on [[Steam|https://store.steampowered.com/app/4197280/Kingfisher_An_Autism_Tale/]]!">
|
||||||
|
<div class="toggle-icon">+</div>
|
||||||
|
<div class="project-card-image-container">
|
||||||
|
<img class="project-card-image" src="/assets/img/kingfisher.png" alt="Kingfisher">
|
||||||
|
</div>
|
||||||
|
<div class="project-card-title-container">
|
||||||
|
<div class="project-card-title-background"></div>
|
||||||
|
<h3 class="project-card-title">Kingfisher</h3>
|
||||||
|
</div>
|
||||||
|
<div class="project-card-short-desc">
|
||||||
|
<p>Story-based action/puzzle game raising awareness about Autism.</p>
|
||||||
|
</div>
|
||||||
|
<div class="project-card-content">
|
||||||
|
<p>The project [[Kingfisher|https://kingfisher-game.com/]] is a game built by PossilbyPixels that raises awareness about Autism. It is a story-based action / puzzle game for PC and mobile. My role in the project was to build minigames that occur throughout the story and also to develop tools to help development. One of the tools I made for this project was a suburban neighborhood generator. This tool allowed us to draw streets in the editor which then were automatically filled with procedurally generated houses and gardens. You can see a demo in [[this video|/assets/vid/procedural_streets.mp4]]. You can wishlist the game on [[Steam|https://store.steampowered.com/app/4197280/Kingfisher_An_Autism_Tale/]]!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-card-new" data-full-desc="Between 2019 and 2024, I participated regularly in the Ludum Dare event. This event was all about creating games under tight deadlines of 48 hours and with no external resources such as audio or 3D art. After each event I published my game on [[Itch.io|https://coffeeplanet.itch.io/]] where they are still available for play. In the future I want to migrate them to this website. I want to especially highlight [[Cobor goes farming|https://coffeeplanet.itch.io/ludum-dare-51]] and [[Windy the Indie|https://coffeeplanet.itch.io/windy-the-indie]].">
|
||||||
|
<div class="toggle-icon">+</div>
|
||||||
|
<div class="project-card-image-container">
|
||||||
|
<img class="project-card-image" src="/assets/img/ludum_dare.png" alt="Ludum Dare">
|
||||||
|
</div>
|
||||||
|
<div class="project-card-title-container">
|
||||||
|
<div class="project-card-title-background"></div>
|
||||||
|
<h3 class="project-card-title">Ludum Dare</h3>
|
||||||
|
</div>
|
||||||
|
<div class="project-card-short-desc">
|
||||||
|
<p>Game jam participation with 48-hour deadlines and no external resources.</p>
|
||||||
|
</div>
|
||||||
|
<div class="project-card-content">
|
||||||
|
<p>Between 2019 and 2024, I participated regularly in the Ludum Dare event. This event was all about creating games under tight deadlines of 48 hours and with no external resources such as audio or 3D art. After each event I published my game on [[Itch.io|https://coffeeplanet.itch.io/]] where they are still available for play. In the future I want to migrate them to this website. I want to especially highlight [[Cobor goes farming|https://coffeeplanet.itch.io/ludum-dare-51]] and [[Windy the Indie|https://coffeeplanet.itch.io/windy-the-indie]].</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-card-new" data-full-desc="For my Masterthesis at Group T KU Leuven I made a tool for Unity that creates a procedural planet terrain. The main challenge of this project was to optimize the algorithm to work as fast as possible. For this I leveraged GPU compute shaders to process large chunks of data at once. You can find the tool and my thesis paper [[here|https://github.com/DouweRavers/ThesisProject-ThePlanetEngine/tree/main]].">
|
||||||
|
<div class="toggle-icon">+</div>
|
||||||
|
<div class="project-card-image-container">
|
||||||
|
<img class="project-card-image" src="/assets/img/thesis_tool.png" alt="Planet Tool">
|
||||||
|
</div>
|
||||||
|
<div class="project-card-title-container">
|
||||||
|
<div class="project-card-title-background"></div>
|
||||||
|
<h3 class="project-card-title">Masterthesis: Planet Tool</h3>
|
||||||
|
</div>
|
||||||
|
<div class="project-card-short-desc">
|
||||||
|
<p>Procedural planet terrain generation with GPU compute shaders.</p>
|
||||||
|
</div>
|
||||||
|
<div class="project-card-content">
|
||||||
|
<p>For my Masterthesis at Group T KU Leuven I made a tool for Unity that creates a procedural planet terrain. The main challenge of this project was to optimize the algorithm to work as fast as possible. For this I leveraged GPU compute shaders to process large chunks of data at once. You can find the tool and my thesis paper [[here|https://github.com/DouweRavers/ThesisProject-ThePlanetEngine/tree/main]].</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="project-card-new" data-full-desc="In another project during my masters we explored gesture-based interactions in virtual environments. For this project we developed a prototype using Unity and custom wearable hardware to enable magic-like hand gestures for interfacing with a story game. See the game [[here|/assets/vid/wizard_gloves.mp4]] or you can find the game and paper [[here|https://github.com/DouweRavers/MasterProject-WizardsGlovesAdventure/tree/main]].">
|
||||||
|
<div class="toggle-icon">+</div>
|
||||||
|
<div class="project-card-image-container">
|
||||||
|
<img class="project-card-image" src="/assets/img/wizard_gloves.png" alt="Wizard Gloves">
|
||||||
|
</div>
|
||||||
|
<div class="project-card-title-container">
|
||||||
|
<div class="project-card-title-background"></div>
|
||||||
|
<h3 class="project-card-title">Masterproject: Wizard Gloves</h3>
|
||||||
|
</div>
|
||||||
|
<div class="project-card-short-desc">
|
||||||
|
<p>Gesture-based interaction with wearable hardware for virtual environments.</p>
|
||||||
|
</div>
|
||||||
|
<div class="project-card-content">
|
||||||
|
<p>In another project during my masters we explored gesture-based interactions in virtual environments. For this project we developed a prototype using Unity and custom wearable hardware to enable magic-like hand gestures for interfacing with a story game. See the game [[here|/assets/vid/wizard_gloves.mp4]] or you can find the game and paper [[here|https://github.com/DouweRavers/MasterProject-WizardsGlovesAdventure/tree/main]].</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="apps" class="scroll_section">
|
<section id="apps" class="scroll_section">
|
||||||
<h1>Douwco Apps</h1>
|
<h1>Douwco Apps</h1>
|
||||||
<div class="content-box">
|
<div class="apps-container">
|
||||||
<p>
|
<div class="carousel-container-full">
|
||||||
Under construction...
|
<div class="carousel-track-full" id="apps-carousel">
|
||||||
</p>
|
<div class="carousel-item-full" data-index="0" data-selected="true">
|
||||||
|
<div class="service-icon-large" style="--icon-bg: #e94e36;">
|
||||||
|
<span class="icon-placeholder-large">G</span>
|
||||||
|
</div>
|
||||||
|
<span class="service-label-large">Gitea</span>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item-full" data-index="1">
|
||||||
|
<div class="service-icon-large" style="--icon-bg: #0082c9;">
|
||||||
|
<span class="icon-placeholder-large">N</span>
|
||||||
|
</div>
|
||||||
|
<span class="service-label-large">Nextcloud</span>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item-full" data-index="2">
|
||||||
|
<div class="service-icon-large" style="--icon-bg: #f16521;">
|
||||||
|
<span class="icon-placeholder-large">P</span>
|
||||||
|
</div>
|
||||||
|
<span class="service-label-large">Penpot</span>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item-full" data-index="3">
|
||||||
|
<div class="service-icon-large" style="--icon-bg: #4a90d9;">
|
||||||
|
<span class="icon-placeholder-large">B</span>
|
||||||
|
</div>
|
||||||
|
<span class="service-label-large">Beszel</span>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item-full" data-index="4">
|
||||||
|
<div class="service-icon-large" style="--icon-bg: #7d3c98;">
|
||||||
|
<span class="icon-placeholder-large">W</span>
|
||||||
|
</div>
|
||||||
|
<span class="service-label-large">Wattif</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="carousel-nav-full prev" aria-label="Previous">❮</button>
|
||||||
|
<button class="carousel-nav-full next" aria-label="Next">❯</button>
|
||||||
|
</div>
|
||||||
|
<div class="service-detail-full" id="apps-detail">
|
||||||
|
<div class="service-screenshot-full">
|
||||||
|
<img src="/assets/img/gitea_screenshot.png" alt="Gitea screenshot" id="apps-screenshot-img">
|
||||||
|
</div>
|
||||||
|
<div class="service-info-full">
|
||||||
|
<h2 class="service-title" id="apps-title">Gitea</h2>
|
||||||
|
<div class="service-description-full" id="apps-description">
|
||||||
|
<p>Self-hosted Git service with a simple and lightweight interface.</p>
|
||||||
|
</div>
|
||||||
|
<a href="https://gitea.douwco.be" target="_blank" rel="noopener" class="go-to-app-button" id="apps-link">Go to App</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="games" class="scroll_section">
|
<section id="games" class="scroll_section">
|
||||||
<h1>My Games</h1>
|
<h1>My Games</h1>
|
||||||
<div class="content-box">
|
<div class="games-container">
|
||||||
<p>
|
<div class="games-grid" id="games-grid">
|
||||||
Under construction...
|
<div class="game-card" data-title="Ludum Dare 51: Cobor goes farming" data-year="2022" data-description="A farming game made in 48 hours for Ludum Dare 51." data-url="https://coffeeplanet.itch.io/ludum-dare-51">
|
||||||
</p>
|
<div class="game-card-image">
|
||||||
|
<img src="/assets/img/games/ludum51_placeholder.png" alt="Cobor goes farming">
|
||||||
|
</div>
|
||||||
|
<div class="game-card-content">
|
||||||
|
<h3 class="game-card-title">Cobor goes farming</h3>
|
||||||
|
<p class="game-card-description">A farming game made in 48 hours.</p>
|
||||||
|
<span class="game-year-badge">2022</span>
|
||||||
|
</div>
|
||||||
|
<div class="game-card-expanded">
|
||||||
|
<p class="game-card-full-description">A farming game made in 48 hours for Ludum Dare 51. Features crop planting, animal husbandry, and resource management.</p>
|
||||||
|
<a href="https://coffeeplanet.itch.io/ludum-dare-51" target="_blank" rel="noopener" class="play-button">Play Game</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="game-card" data-title="Ludum Dare 50" data-year="2022" data-description="A puzzle platformer with a unique mechanic." data-url="https://coffeeplanet.itch.io/">
|
||||||
|
<div class="game-card-image">
|
||||||
|
<img src="/assets/img/games/ludum50_placeholder.png" alt="Ludum Dare 50">
|
||||||
|
</div>
|
||||||
|
<div class="game-card-content">
|
||||||
|
<h3 class="game-card-title">Platform Puzzler</h3>
|
||||||
|
<p class="game-card-description">A puzzle platformer game.</p>
|
||||||
|
<span class="game-year-badge">2022</span>
|
||||||
|
</div>
|
||||||
|
<div class="game-card-expanded">
|
||||||
|
<p class="game-card-full-description">A puzzle platformer with a unique mechanic. Solve puzzles by manipulating the environment and your character.</p>
|
||||||
|
<a href="https://coffeeplanet.itch.io/" target="_blank" rel="noopener" class="play-button">Play Game</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="game-card" data-title="Ludum Dare 49" data-year="2021" data-description="A top-down adventure with exploration." data-url="https://coffeeplanet.itch.io/">
|
||||||
|
<div class="game-card-image">
|
||||||
|
<img src="/assets/img/games/ludum49_placeholder.png" alt="Ludum Dare 49">
|
||||||
|
</div>
|
||||||
|
<div class="game-card-content">
|
||||||
|
<h3 class="game-card-title">Adventure Quest</h3>
|
||||||
|
<p class="game-card-description">A top-down adventure game.</p>
|
||||||
|
<span class="game-year-badge">2021</span>
|
||||||
|
</div>
|
||||||
|
<div class="game-card-expanded">
|
||||||
|
<p class="game-card-full-description">A top-down adventure with exploration, enemies, and treasure collection. Made in 48 hours for Ludum Dare 49.</p>
|
||||||
|
<a href="https://coffeeplanet.itch.io/" target="_blank" rel="noopener" class="play-button">Play Game</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="game-card" data-title="Ludum Dare 48" data-year="2021" data-description="A minimalist arcade game." data-url="https://coffeeplanet.itch.io/">
|
||||||
|
<div class="game-card-image">
|
||||||
|
<img src="/assets/img/games/ludum48_placeholder.png" alt="Ludum Dare 48">
|
||||||
|
</div>
|
||||||
|
<div class="game-card-content">
|
||||||
|
<h3 class="game-card-title">Arcade Shooter</h3>
|
||||||
|
<p class="game-card-description">A minimalist arcade shooter.</p>
|
||||||
|
<span class="game-year-badge">2021</span>
|
||||||
|
</div>
|
||||||
|
<div class="game-card-expanded">
|
||||||
|
<p class="game-card-full-description">A minimalist arcade shooter with wave-based gameplay and power-ups. Created for Ludum Dare 48.</p>
|
||||||
|
<a href="https://coffeeplanet.itch.io/" target="_blank" rel="noopener" class="play-button">Play Game</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="game-card" data-title="Ludum Dare 47" data-year="2020" data-description="A story-driven puzzle game." data-url="https://coffeeplanet.itch.io/">
|
||||||
|
<div class="game-card-image">
|
||||||
|
<img src="/assets/img/games/ludum47_placeholder.png" alt="Ludum Dare 47">
|
||||||
|
</div>
|
||||||
|
<div class="game-card-content">
|
||||||
|
<h3 class="game-card-title">Story Puzzles</h3>
|
||||||
|
<p class="game-card-description">A story-driven puzzle game.</p>
|
||||||
|
<span class="game-year-badge">2020</span>
|
||||||
|
</div>
|
||||||
|
<div class="game-card-expanded">
|
||||||
|
<p class="game-card-full-description">A story-driven puzzle game where each level reveals part of the narrative. Made in 48 hours for Ludum Dare 47.</p>
|
||||||
|
<a href="https://coffeeplanet.itch.io/" target="_blank" rel="noopener" class="play-button">Play Game</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="game-card" data-title="Windy the Indie" data-year="2024" data-description="A platformer about indie game development." data-url="https://coffeeplanet.itch.io/windy-the-indie">
|
||||||
|
<div class="game-card-image">
|
||||||
|
<img src="/assets/img/games/windy_placeholder.png" alt="Windy the Indie">
|
||||||
|
</div>
|
||||||
|
<div class="game-card-content">
|
||||||
|
<h3 class="game-card-title">Windy the Indie</h3>
|
||||||
|
<p class="game-card-description">A platformer about indie development.</p>
|
||||||
|
<span class="game-year-badge">2024</span>
|
||||||
|
</div>
|
||||||
|
<div class="game-card-expanded">
|
||||||
|
<p class="game-card-full-description">A platformer game about the journey of indie game development. Features challenging levels and a touching story.</p>
|
||||||
|
<a href="https://coffeeplanet.itch.io/windy-the-indie" target="_blank" rel="noopener" class="play-button">Play Game</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Reference in New Issue
Block a user