diff options
| author | altaf-creator <dev@altafcreator.com> | 2026-05-17 13:01:57 +0800 |
|---|---|---|
| committer | altaf-creator <dev@altafcreator.com> | 2026-05-17 13:01:57 +0800 |
| commit | 9e7fe6d8dad56c237adb1905e130c1d723131812 (patch) | |
| tree | dd067e14b3ec5af719d748427bb322320c248879 /www/projects/index.html | |
| parent | d04598ba59d7267ee4db3745ff90eaa1a990072a (diff) | |
big structural change, altafcreator.com no longer served statically, projects now use md, blog is being reworked, videos removed temp
Diffstat (limited to 'www/projects/index.html')
| -rw-r--r-- | www/projects/index.html | 161 |
1 files changed, 132 insertions, 29 deletions
diff --git a/www/projects/index.html b/www/projects/index.html index 237d662..301b8e5 100644 --- a/www/projects/index.html +++ b/www/projects/index.html @@ -8,12 +8,13 @@ <link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
<title>Projects • altaf-creator</title>
- <link rel="stylesheet" href="/packages/fontawesome-free-6.5.2-web/css/all.css">
+ <link rel="stylesheet" href="/packages/fontawesome-free-7.2.0-web/css/all.css">
</head>
<body onload="addNodes();">
<script defer src="/scripts/onload.js"></script>
<script defer src="/scripts/scroll.js"></script>
+ <script defer src="/scripts/videoprojects.js"></script>
<div class="floating-nav-container">
<div class="floating-nav">
<a href="/" class="mobile"><img src="/assets/images/hero/logo.png" alt="" class="sidebar-img mobile" style="margin-top: 0; margin-left: -20px;"></a>
@@ -30,24 +31,37 @@ </div>
<div class="sidebar-progress-container" id="progressContainer">
</div>
-<!-- <section style="border-top: none;">
- <div class="div-sizing">
- <span class="heading">Projects</span>
+ <!--
+ <section style="border-top: none;">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <span class="heading">Projects</span>
+ <div class="flex-container flex-container-normal flex-container-dynamicwrap gap" style="width: fit-content;">
+ <a class="button button-inline button-box" href="#code-projs">
+ <i class="fa-solid fa-code"></i>
+ Tech Projects
+ </a>
+ <a class="button button-inline button-box" href="#video-projs">
+ <i class="fa-solid fa-video"></i>
+ Videography Projects
+ </a>
+ </div>
+ </div>
</div>
</section>
--->
- <section style="border-top: none;">
+ -->
+ <section id="code-projs" style="border-top: none" class="top-section-margin">
<div class="center-grid">
<div class="div-sizing" style="max-width: none;">
<div class="flex-container flex-container-column">
<p>
- <span class="heading" style="display: inline;">Projects</span>
+ <span class="heading" style="display: inline;">Tech & Dev<span class="desktop"> Projects</span></span>
<br class="mobile">
<a class="link item-end" href="https://git.altafcreator.com">
<i class="fa-brands fa-git-alt"></i> Source Code for My Projects ↗
</a>
</p>
- <div class="flex-container flex" id="top-project-highlight">
+ <div class="flex-container flex gap" id="top-project-highlight">
<div class="flex full-img-card highlight-card top-gallery-card"
style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); ">
<a href="/projects/simpliCity/" class="fill-div gradient-overlay">
@@ -60,7 +74,7 @@ </div>
<div class="flex full-img-card highlight-card top-gallery-card"
style="background-image: url(/assets/images/game-hero/laundryweb.png);">
- <a href="/209.html" class="fill-div gradient-overlay">
+ <a href="/projects/laundryweb/" class="fill-div gradient-overlay">
</a>
<div class="img-card-titlebox">
<span class="img-card-subtitle"><i class="fa-solid fa-globe"></i> Web App</span>
@@ -69,8 +83,8 @@ </div>
<div class="flex full-img-card top-gallery-card highlight-card"
- style="background-image: url(/assets/images/game-hero/learnsmpdotid.png);">
- <a href="https://alazharnotes.altafcreator.com/" class="fill-div gradient-overlay">
+ style="background-image: url(/assets/images/game-hero/shroud.png);">
+ <a href="/projects/shroud/" class="fill-div gradient-overlay">
</a>
<div class="img-card-titlebox">
<span class="img-card-subtitle"><i class="fa-solid fa-globe"></i> Game</span>
@@ -78,7 +92,7 @@ </div>
</div>
</div>
- <div class="flex-container-normal flex">
+ <div class="flex-container-normal flex gap gap-top">
<div class="flex full-img-card gallery-card"
style="background-image: url(/assets/images/game-hero/esp32-blockly.png);">
<a href="https://github.com/altaf-creator/droid-esp32-blockly" class="fill-div gradient-overlay">
@@ -99,7 +113,7 @@ </div>
<div class="flex full-img-card gallery-card"
style="background-image: url(/assets/images/game-hero/.png);">
- <a href="/209.html" class="fill-div gradient-overlay">
+ <a href="https://deja.earth/" class="fill-div gradient-overlay">
</a>
<div class="img-card-titlebox">
<span class="img-card-subtitle"><i class="fa-solid fa-people-group"></i> Team</span>
@@ -108,11 +122,11 @@ </div>
<div class="flex full-img-card gallery-card"
style="background-image: url(/assets/images/game-hero/.png);">
- <a href="/209.html" class="fill-div gradient-overlay">
+ <a href="https://github.com/altaf-creator/droid-esp32-blockly" class="fill-div gradient-overlay">
</a>
<div class="img-card-titlebox">
- <span class="img-card-subtitle"><i class="fa-solid fa-people-group"></i> Team</span>
- <span class="img-card-title">mindmap.ai</span>
+ <span class="img-card-subtitle"><i class="fa-solid fa-microchip"></i> Electronics</span>
+ <span class="img-card-title">Desk Dashboard</span>
</div>
</div>
<div class="flex full-img-card gallery-card"
@@ -172,6 +186,24 @@ </div>
</div>
<div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/.png); ">
+ <a href="https://altafcreator.com" class="fill-div gradient-overlay">
+ </a>
+ <div class="img-card-titlebox">
+ <span class="img-card-title">altafcreator.com</span>
+ </div>
+ </div>
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/mindmapai.png);">
+ <a href="/209.html" class="fill-div gradient-overlay">
+ </a>
+ <div class="img-card-titlebox">
+ <span class="img-card-subtitle"><i class="fa-solid fa-people-group"></i> Team</span>
+ <span class="img-card-title">mindmap.ai</span>
+ </div>
+ </div>
+ <!--
+ <div class="flex full-img-card gallery-card"
style="background-image: url(/assets/images/game-hero/file.png); ">
<a href="/209.html" class="fill-div gradient-overlay">
</a>
@@ -179,6 +211,7 @@ <span class="img-card-title">Unfinished Habit Tracker</span>
</div>
</div>
+ -->
<div class="flex full-img-card gallery-card"
style="background-image: url(/assets/images/game-hero/ufoproto_screenshot.png);">
<a href="/209.html" class="fill-div gradient-overlay">
@@ -252,15 +285,7 @@ </div>
</div>
<div class="flex full-img-card gallery-card"
- style="background-image: url(/assets/images/game-hero/wordle_screenshot.png); ">
- <a href="/209.html" class="fill-div gradient-overlay">
- </a>
- <div class="img-card-titlebox">
- <span class="img-card-title">C Wordle</span>
- </div>
- </div>
- <div class="flex full-img-card gallery-card"
- style="background-image: url(/assets/images/game-hero/wordle_screenshot.png); ">
+ style="background-image: url(/assets/images/game-hero/.png); ">
<a href="/209.html" class="fill-div gradient-overlay">
</a>
<div class="img-card-titlebox">
@@ -268,7 +293,7 @@ </div>
</div>
<div class="flex full-img-card gallery-card"
- style="background-image: url(/assets/images/game-hero/wordle_screenshot.png); ">
+ style="background-image: url(/assets/images/game-hero/.png); ">
<a href="/209.html" class="fill-div gradient-overlay">
</a>
<div class="img-card-titlebox">
@@ -280,16 +305,94 @@ </div>
</div>
</section>
- <section>
+ <section id="video-projs">
<div class="center-grid">
<div class="div-sizing" style="max-width: none;">
<div class="flex-container flex-container-column">
- <span class="heading">Videography</span>
- <p>Coming soon!</p>
+ <span class="heading">Videography<span class="desktop"> Projects</span></span>
+ <div class="flex-container flex-container-normal flex-container-dynamicwrap gap wide" style="margin-top: 1rem;">
+ <div class="flex video-higlight-card shadow-filter">
+ <button onclick="loadVideo('/assets/videos/stringsoffreedom.mp4', 'Strings of Freedom');">⏵</button>
+ <img src="/assets/images/video-hero/stringsoffreedom.png" alt="">
+ <div class="img">
+ <h1>Strings of Freedom</h1>
+ <!--In this profound and short video, Luqman, a Singaporean former inmate, shares his journey from drug abuse and his imprisonment to his personal redemption through music. When he was released, Luqman felt a loss of meaning in life, until he came across a workshop poster that changed his life. Through that opportunity, he rekindled his passion for music and, more importantly, found a supportive community that gave him a second chance.-->
+ <span>(2025) Top Winning Submission for Yellow Ribbon Arts Competition 2025.</span>
+ </div>
+ </div>
+ <div class="flex video-higlight-card shadow-filter">
+ <button onclick="loadVideo('/assets/videos/minds.mp4', 'MINDS Charity Car Wash Promotional Video');">⏵</button>
+ <img src="/assets/images/video-hero/minds.png" alt="">
+ <div class="img">
+ <h1>MINDS Charity Car Wash Promotional</h1>
+ <span>(2025) Volunteer work with MINDS to promote their Charity Car Wash in 2025.</span>
+ </div>
+ </div>
+ </div>
+ <div class="flex-container-normal flex video-gallery gap gap-top">
+ <div class="flex video-gallery-card narrow">
+ <div>
+ <img src="/assets/images/video-hero/stringsoffreedom.png" alt="">
+ <button onclick="loadVideo('/assets/videos/stringsoffreedom.mp4', 'Strings of Freedom');">⏵</button>
+ </div>
+ <div class="video-gallery-card-text video-gallery-card-text-accent flex-container flex-container-column flex-start gap">
+ <a href="" class="link">Strings of Freedom</a>
+ <span>(2025) Top Winning Submission for Yellow Ribbon Arts Competition 2025.</span>
+ </div>
+ </div>
+ <div class="flex video-gallery-card narrow">
+ <div>
+ <img src="/assets/images/video-hero/minds.png" alt="">
+ <button onclick="loadVideo('/assets/videos/minds.mp4', 'MINDS Charity Car Wash Promotional Video');">⏵</button>
+ </div>
+ <div class="video-gallery-card-text video-gallery-card-text-accent flex-container flex-container-column flex-start gap">
+ <a href="" class="link">MINDS Charity Car Wash Promotional</a>
+ <span>(2025) Volunteer work with MINDS to promote their Charity Car Wash in 2025.</span>
+ </div>
+ </div>
+ <div class="flex video-gallery-card">
+ <div>
+ <img src="/assets/images/video-hero/paperverse.png" alt="">
+ <button onclick="loadVideo('/assets/videos/paperverse.mp4', 'Paperverse Hub, a videography competition entry');">⏵</button>
+ </div>
+ <div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content">
+ <a href="" class="link">Paperverse Hub</a>
+ <span>2026</span>
+ </div>
+ </div>
+ <div class="flex video-gallery-card">
+ <div>
+ <img src="/assets/images/video-hero/eid2026.png" alt="">
+ <button onclick="loadVideo('/assets/videos/eid2026.mp4', 'A message for this Eid');">⏵</button>
+ </div>
+ <div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content gap">
+ <a href="" class="link">A message for this Eid</a>
+ <span>2026</span>
+ </div>
+ </div>
+ <div class="flex video-gallery-card">
+ <div>
+ <img src="/assets/images/video-hero/via3rp.png" alt="">
+ <button onclick="loadVideo('/assets/videos/VIA.mp4', 'Secondary 3 Class VIA Project');">⏵</button>
+ </div>
+ <div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content gap">
+ <a href="" class="link">Secondary 3 VIA Project</a>
+ <span>2025</span>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
</section>
+ <div id="full-video-player">
+ <button class="video-close-button" onclick="closeFullPlayer()">✕</button>
+ <video controls src="" id="full-video-player-video"></video>
+ <div class="flex-container flex-container-dynamicwrap gap">
+ <span id="full-video-player-caption">Video Caption</span>
+ <a class="button button-inline" href="" id="full-video-player-button">View Details</a>
+ </div>
+ </div>
</body>
</html>
|