diff options
| -rw-r--r-- | assets/images/education/achieve/osaxv.png | bin | 0 -> 6215732 bytes | |||
| -rw-r--r-- | assets/images/game-hero/boids_screenshot.png | bin | 0 -> 6202760 bytes | |||
| -rw-r--r-- | assets/images/game-hero/cargame_screenshot.jpg | bin | 0 -> 174382 bytes | |||
| -rw-r--r-- | assets/images/game-hero/learnsmpdotid.png | bin | 0 -> 6228716 bytes | |||
| -rw-r--r-- | assets/images/game-hero/simpliCityStore.png | bin | 0 -> 1540944 bytes | |||
| -rw-r--r-- | assets/images/game-hero/simplicity_screenshot.png | bin | 499148 -> 1011418 bytes | |||
| -rw-r--r-- | assets/images/game-hero/simplicity_screenshot_old.png | bin | 0 -> 499148 bytes | |||
| -rw-r--r-- | assets/images/game-hero/sumon_cover.png | bin | 0 -> 383001 bytes | |||
| -rw-r--r-- | assets/images/game-hero/ufoproto_screenshot.png | bin | 0 -> 6236076 bytes | |||
| -rw-r--r-- | blog/post.html | 8 | ||||
| -rw-r--r-- | data/posts.json | 2 | ||||
| -rw-r--r-- | index.html | 315 | ||||
| -rw-r--r-- | projects/index.html | 62 | ||||
| -rw-r--r-- | projects/simpliCity/index.html | 6 | ||||
| -rw-r--r-- | scripts/blog.js | 9 | ||||
| -rw-r--r-- | scripts/onload.js | 5 | ||||
| -rw-r--r-- | style.css | 53 |
17 files changed, 281 insertions, 179 deletions
diff --git a/assets/images/education/achieve/osaxv.png b/assets/images/education/achieve/osaxv.png Binary files differnew file mode 100644 index 0000000..9339968 --- /dev/null +++ b/assets/images/education/achieve/osaxv.png diff --git a/assets/images/game-hero/boids_screenshot.png b/assets/images/game-hero/boids_screenshot.png Binary files differnew file mode 100644 index 0000000..9d22225 --- /dev/null +++ b/assets/images/game-hero/boids_screenshot.png diff --git a/assets/images/game-hero/cargame_screenshot.jpg b/assets/images/game-hero/cargame_screenshot.jpg Binary files differnew file mode 100644 index 0000000..3ddf4b6 --- /dev/null +++ b/assets/images/game-hero/cargame_screenshot.jpg diff --git a/assets/images/game-hero/learnsmpdotid.png b/assets/images/game-hero/learnsmpdotid.png Binary files differnew file mode 100644 index 0000000..156a62b --- /dev/null +++ b/assets/images/game-hero/learnsmpdotid.png diff --git a/assets/images/game-hero/simpliCityStore.png b/assets/images/game-hero/simpliCityStore.png Binary files differnew file mode 100644 index 0000000..410c096 --- /dev/null +++ b/assets/images/game-hero/simpliCityStore.png diff --git a/assets/images/game-hero/simplicity_screenshot.png b/assets/images/game-hero/simplicity_screenshot.png Binary files differindex 4b8c93e..442b6b0 100644 --- a/assets/images/game-hero/simplicity_screenshot.png +++ b/assets/images/game-hero/simplicity_screenshot.png diff --git a/assets/images/game-hero/simplicity_screenshot_old.png b/assets/images/game-hero/simplicity_screenshot_old.png Binary files differnew file mode 100644 index 0000000..4b8c93e --- /dev/null +++ b/assets/images/game-hero/simplicity_screenshot_old.png diff --git a/assets/images/game-hero/sumon_cover.png b/assets/images/game-hero/sumon_cover.png Binary files differnew file mode 100644 index 0000000..7fdc146 --- /dev/null +++ b/assets/images/game-hero/sumon_cover.png diff --git a/assets/images/game-hero/ufoproto_screenshot.png b/assets/images/game-hero/ufoproto_screenshot.png Binary files differnew file mode 100644 index 0000000..fc370f9 --- /dev/null +++ b/assets/images/game-hero/ufoproto_screenshot.png diff --git a/blog/post.html b/blog/post.html index 815ef86..2e81e4e 100644 --- a/blog/post.html +++ b/blog/post.html @@ -24,6 +24,7 @@ <script defer src="/scripts/onload.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> <a href="/about/" class="link">About Me</a> <a href="/projects/" class="link">Projects</a> <a href="/blog/" class="link">(dev)Blog</a> @@ -46,9 +47,10 @@ <div class="flex-container flex-container-column flex" style="gap: 7px; margin-top: 20px;"> <div id="tag-container" class="chip-container flex-container-normal "> </div> - <h1 style="text-align: left; margin: 0;" id="title">Loading title...</h1> - <span style="color: rgba(0, 0, 0, 0.5);" id="date">Date</span><br> - <span>Written by <span class="colored-text" id="author">author</span></span> + <h1 style="text-align: left; margin: 0;" id="title">Loading title...</h1> + <span style="margin-bottom: 0.5rem;" id="description">Description</span><br> + <span class="half-opacity-text"><i class="fa-solid fa-calendar-days"></i> <span id="date">Date</span></span><br> + <span class="half-opacity-text"><i class="fa-solid fa-user"></i> Written by <span class="colored-text" id="author">Author</span></span> </div> </div> </div> diff --git a/data/posts.json b/data/posts.json index 2713cc0..760dbfc 100644 --- a/data/posts.json +++ b/data/posts.json @@ -25,7 +25,7 @@ { "id" : 2, "title" : "Catatan Publik — Zoom Fisika untuk ASS", - "description" : "", + "description" : "ASS means Asesmen Sumatif Sekolah (Summative School Assesment)", "date" : "Wed, 1 May 2024", "author" : "altaf-creator", "tags" : ["School"], @@ -1,162 +1,153 @@ -<!DOCTYPE html>
-<html lang="en">
-
-<head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="/style.css">
- <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
- <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
- <link rel="me" href="https://mastodon.gamedev.place/@altaf">
- <title>This is altaf-creator</title>
- <link rel="stylesheet" href="/packages/fontawesome-free-6.5.2-web/css/all.css">
-</head>
-
-<body onload="addNodes()">
- <script defer src="/scripts/onload.js"></script>
- <script defer src="/scripts/scroll.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>
- <a href="/about/" class="link">About Me</a>
- <a href="/projects/" class="link">Projects</a>
- <a href="/blog/" class="link">(dev)Blog</a>
- </div>
- </div>
- <div class="sidebar" id="sidebar">
- <a href="/">
- <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img">
- </a>
- <span>altaf-creator</span>
- </div>
- <div class="sidebar-progress-container" id="progressContainer">
- </div>
- <section style="background-color: #8ACFE5; border-top: none;">
- <div class="home-img"
- style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_ocean.png); ">
- </div>
- <span class="home-title" style="z-index: 0;">Altaf</span>
- <div class="home-img"
- style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_island.png); ">
-</div>
- <a href="https://store.steampowered.com/app/2381230/simpliCity/" id="simpliCity-link" class="link">simpliCity
- ↗</a>
- </section>
- <section>
- <div class="center-grid">
- <div class="div-sizing">
- <span class="big-text">Hey there!</span>
- <br>
- <span>I'm a middle school student from <b class="colored-text">Indonesia</b> who likes to code as a <b class="colored-text">hobby</b>.</span>
- <br>
- <a href="about/" class="link" style="margin-top: 20px; display: inline-block;">Learn more about me →</a>
- </div>
- </div>
- </section>
- <section>
- <div class="center-grid">
- <div class="div-sizing" style="height: 100%;">
- <div class="flex-container flex-container-column">
- <h1>Project Highlights</h1>
- <div class="flex-container flex" style="min-height: 600px;">
- <div class="flex full-img-card"
- style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); ">
- <a href="/projects/simpliCity/" class="fill-div gradient-overlay">
- <span>simpliCity</span>
- </a>
-
- </div>
- <div class="flex full-img-card"
- style="background-image: url(/assets/images/game-hero/tank_screenshot.png);">
- <a href="https://altaf-creator.itch.io/tank-shooter" class="fill-div gradient-overlay">
- <span>Tank Shooter</span>
- </a>
-
- </div>
- <div class="flex full-img-card"
- style="background-image: url(/assets/images/game-hero/markdown_screenshot.png);">
- <a href="https://github.com/altaf-creator/MarkdownEditor" class="fill-div gradient-overlay">
- <span>MarkdownEditor</span>
- </a>
-
- </div>
- </div>
- <div style="margin: 5px; display: flex; justify-content: center; gap: 10px;">
- <a href="projects/" class="button" style="margin: 0">View More</a>
- <a href="https://git.altafcreator.com/" class="button" style="margin: 0">Source Code</a>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section>
- <div class="center-grid">
- <div class="div-sizing">
- <h1 id="center">Academic History</h1>
- </div>
- </div>
- </section>
- <section>
- <div class="center-grid">
- <div class="div-sizing">
- <h1 class="center">Blog Posts</h1>
- <div class="flex-container flex-center">
- <div class="card" tabindex="9999">
- <img src="/assets/images/blog/33_cover.png"
- alt="">
- <div>
- <div class="flex-container-normal"> <span class="colored-text">Devlog</span>, <span class="colored-text"> simpliCity</span></div>
- <a href="blog/simpliCity/well-that-was-dumb/" class="link">This Week's Devlog: Well that was dumb. (33nd Week of 2023)</a>
- <p>Wed, 16 August 2023</p>
- </div>
- </div>
- <div class="card" tabindex="9999">
- <img src="/assets/images/blog/beta0.2_cover.png"
- alt="">
- <div>
- <div class="flex-container-normal"><span class="colored-text">simpliCity</span></div>
- <a href="blog/simpliCity/beta02/" class="link">beta0.2: The Visual Update is Out!</a>
- <p>Wed, 26 July 2023</p>
- </div>
- </div>
- </div>
- <div class="flex-container flex-center">
- <a href="blog/" class="button" style="margin-left: auto; margin-right: auto;">View More</a>
- </div>
- </div>
- </div>
- </section>
- <section>
- <div class="center-grid">
- <div class="div-sizing">
- <h1>Meta</h1>
- <h2>Links</h2>
- <ul>
- <li><a class="link" href=""><i class="fa-solid fa-wrench"></i> altaf-projects<span class="desktop">: internal website for my projects</span></a>
- <ul>
- <li><a class="link" href="https://git.altafcreator.com/"><i class="fa-brands fa-git-alt"></i> git repositories<span class="desktop">: source code to all of my projects</span></a></li>
- </ul>
- </li>
- <li><a class="link" href="https://discord.gg/Mg5WFqrHk3"><i class="fa-brands fa-discord"></i> <span class="desktop">Join our </span>Discord Server<span class="desktop">!</span></a></li>
- </ul>
- <h2>Contact Me!</h2>
- <ul>
- <li>For <b>business<span class="desktop"> inquiries</span></b>: <a href="mailto:business@altafcreator.com" class="link"><i class="fa-solid fa-envelope"></i> business@altafcreator.com</a></li>
- <li>For <span class="desktop">contacting me </span><b>personal<span class="desktop">ly</span></b>: <a href="mailto:altaf@altafcreator.com" class="link"><i class="fa-solid fa-envelope"></i> altaf@altafcreator.com</a></li>
- </ul>
- <h2>Socials</h2>
- <div class="container-social">
- <a href="https://www.youtube.com/channel/UCm7n_G87ihIK-MmBb4i19dA" class="button button-social" target="_blank"><i class="fa-brands fa-youtube"></i></a>
- <a href="https://www.instagram.com/altafcreator" class="button button-social" target="_blank"><i class="fa-brands fa-instagram"></i></a>
- <a href="https://twitter.com/altafcreator" class="button button-social" target="_blank"><i class="fa-brands fa-twitter"></i></a>
- <a href="https://github.com/altaf-creator" class="button button-social" target="_blank"><i class="fa-brands fa-github"></i></a>
- <a href="https://discord.gg/Mg5WFqrHk3" class="button button-social" target="_blank"><i class="fa-brands fa-discord"></i></a>
- <a href="https://mastodon.gamedev.place/@altaf" class="button button-social" target="_blank"><i class="fa-brands fa-mastodon"></i></a>
- </div>
- </div>
- </div>
- </section>
-</body>
-
-</html>
+<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="/style.css"> + <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> + <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> + <link rel="me" href="https://mastodon.gamedev.place/@altaf"> + <title>This is altaf-creator</title> + <link rel="stylesheet" href="/packages/fontawesome-free-6.5.2-web/css/all.css"> +</head> + +<body onload="index();"> + <script defer src="/scripts/onload.js"></script> + <script defer src="/scripts/scroll.js"></script> + <script defer src="/scripts/blog.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> + <a href="/about/" class="link">About Me</a> + <a href="/projects/" class="link">Projects</a> + <a href="/blog/" class="link">(dev)Blog</a> + </div> + </div> + <div class="sidebar" id="sidebar"> + <a href="/"> + <img src="/assets/images/hero/logo.png" alt="" class="sidebar-img"> + </a> + <span>altaf-creator</span> + </div> + <div class="sidebar-progress-container" id="progressContainer"> + </div> + <section style="background-color: #8ACFE5; border-top: none;"> + <div class="home-img" + style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_ocean.png); "> + </div> + <span class="home-title" style="z-index: 0;">Altaf</span> + <div class="home-img" + style="z-index: 1; background-image: url(/assets/images/hero/simpliCity_web_0_island.png); "> +</div> + <a href="https://store.steampowered.com/app/2381230/simpliCity/" id="simpliCity-link" class="link">simpliCity + ↗</a> + </section> + <section> + <div class="center-grid"> + <div class="div-sizing"> + <span class="big-text">Hey there!</span> + <br> + <span>I'm a middle school student from <b class="colored-text">Indonesia</b> who likes to code as a <b class="colored-text">hobby</b>.</span> + <br> + <a href="about/" class="link" style="margin-top: 20px; display: inline-block;">Learn more about me →</a> + </div> + </div> + </section> + <section> + <div class="center-grid"> + <div class="div-sizing" style="height: 100%;"> + <div class="flex-container flex-container-column"> + <h1>Project Highlights</h1> + <div class="flex-container flex" style="min-height: 600px;"> + <div class="flex full-img-card" + style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); "> + <a href="/projects/simpliCity/" class="fill-div gradient-overlay"> + <span>simpliCity</span> + </a> + + </div> + <div class="flex full-img-card" + style="background-image: url(/assets/images/game-hero/tank_screenshot.png);"> + <a href="https://altaf-creator.itch.io/tank-shooter" class="fill-div gradient-overlay"> + <span>Tank Shooter</span> + </a> + + </div> + <div class="flex full-img-card" + style="background-image: url(/assets/images/game-hero/learnsmpdotid.png);"> + <a href="https://github.com/altaf-creator/MarkdownEditor" class="fill-div gradient-overlay"> + <span>learnsmp.id</span> + </a> + + </div> + </div> + <div style="margin: 5px; display: flex; justify-content: center; gap: 10px;"> + <a href="projects/" class="button" style="margin: 0">View More</a> + <a href="https://git.altafcreator.com/" class="button" style="margin: 0">Source Code</a> + </div> + </div> + </div> + </div> + </section> + <section> + <div class="center-grid"> + <div class="div-sizing"> + <h1>Academic History & Achievements</h1> + <h2>Al Azhar 25 Junior High School</h2> + <ul> + <li>🥉 Bronze Medalist, OSA XV — IPA <span class="half-opacity-text">• National • January 2023</span></li> + <li>🥇 First Place, Alarm Robotic Competition — Creative JHS <span class="half-opacity-text">• Jakarta Metropolitan Area • March 2023</span></li> + <li>🏅 Fourth Place, ASEAN Robotic Day — Creative JHS <span class="half-opacity-text">• National • September 2023</span></li> + <li>🥇 First Place, Trans Studio Bandung Robotic Competition — Creative Senior <span class="half-opacity-text">• National • November 2023</span></li> + </ul> + <br> + </div> + </div> + </section> + <section> + <div class="center-grid"> + <div class="div-sizing"> + <h1 class="center">Blog Posts</h1> + <div class="flex-container flex-center" id="blog-container"> + </div> + <div class="flex-container flex-center"> + <a href="blog/" class="button" style="margin-left: auto; margin-right: auto;">View More</a> + </div> + </div> + </div> + </section> + <section> + <div class="center-grid"> + <div class="div-sizing"> + <h1>Meta</h1> + <h2>Links</h2> + <ul> + <li><a class="link" href=""><i class="fa-solid fa-wrench"></i> altaf-projects<span class="desktop">: internal website for my projects</span></a> + <ul> + <li><a class="link" href="https://git.altafcreator.com/"><i class="fa-brands fa-git-alt"></i> git repositories<span class="desktop">: source code to all of my projects</span></a></li> + </ul> + </li> + <li><a class="link" href="https://discord.gg/Mg5WFqrHk3"><i class="fa-brands fa-discord"></i> <span class="desktop">Join our </span>Discord Server<span class="desktop">!</span></a></li> + </ul> + <h2>Contact Me!</h2> + <ul> + <li>For <b>business<span class="desktop"> inquiries</span></b>: <a href="mailto:business@altafcreator.com" class="link"><i class="fa-solid fa-envelope"></i> business@altafcreator.com</a></li> + <li>For <span class="desktop">contacting me </span><b>personal<span class="desktop">ly</span></b>: <a href="mailto:altaf@altafcreator.com" class="link"><i class="fa-solid fa-envelope"></i> altaf@altafcreator.com</a></li> + </ul> + <h2>Socials</h2> + <div class="container-social"> + <a href="https://www.youtube.com/channel/UCm7n_G87ihIK-MmBb4i19dA" class="button button-social" target="_blank"><i class="fa-brands fa-youtube"></i></a> + <a href="https://www.instagram.com/altafcreator" class="button button-social" target="_blank"><i class="fa-brands fa-instagram"></i></a> + <a href="https://twitter.com/altafcreator" class="button button-social" target="_blank"><i class="fa-brands fa-twitter"></i></a> + <a href="https://github.com/altaf-creator" class="button button-social" target="_blank"><i class="fa-brands fa-github"></i></a> + <a href="https://discord.gg/Mg5WFqrHk3" class="button button-social" target="_blank"><i class="fa-brands fa-discord"></i></a> + <a href="https://mastodon.gamedev.place/@altaf" class="button button-social" target="_blank"><i class="fa-brands fa-mastodon"></i></a> + </div> + </div> + </div> + </section> +</body> + +</html> diff --git a/projects/index.html b/projects/index.html index f8225cf..70e5b99 100644 --- a/projects/index.html +++ b/projects/index.html @@ -33,7 +33,7 @@ <div class="flex-container flex-container-column">
<span class="heading">Projects</span>
<a class="button center" href="//git.altafcreator.com" style="margin-left: auto; margin-right: auto;"><i class="fa-brands fa-git-alt"></i> Source Code to My Projects</a>
- <div class="flex-container flex" style="height: 800px;">
+ <div class="flex-container flex" id="top-project-highlight">
<div class="flex full-img-card"
style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); ">
<a href="/projects/simpliCity/" class="fill-div gradient-overlay">
@@ -48,15 +48,21 @@ </a>
</div>
- <div class="flex full-img-card"
- style="background-image: url(/assets/images/game-hero/markdown_screenshot.png);">
+ <div class="flex full-img-card top-gallery-card"
+ style="background-image: url(/assets/images/game-hero/learnsmpdotid.png);">
<a href="https://github.com/altaf-creator/MarkdownEditor" class="fill-div gradient-overlay">
- <span>MarkdownEditor</span>
+ <span>learnsmp.id</span>
</a>
</div>
</div>
<div class="flex-container-normal flex">
<div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/sumon_cover.png);">
+ <a href="https://ldjam.com/events/ludum-dare/55/sum-on" class="fill-div gradient-overlay">
+ <span>Sum On!</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
style="background-image: url(/assets/images/game-hero/depths-of-knowledge_cover.png); ">
<a href="https://altaf-creator.itch.io/depths-of-knowledge" class="fill-div gradient-overlay">
<span>Depths of Knowledge</span>
@@ -69,18 +75,54 @@ </a>
</div>
<div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/markdown_screenshot.png);">
+ <a href="https://github.com/altaf-creator/MarkdownEditor" class="fill-div gradient-overlay">
+ <span>MarkdownEditor</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
style="background-image: url(/assets/images/game-hero/quran_screenshot.png); ">
<a href="https://altaf-creator.github.io/OpenQuran/src/" class="fill-div gradient-overlay">
<span>OpenQuran</span>
</a>
</div>
<div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/file.png); ">
+ <a href="https://altaf-creator.github.io/OpenQuran/src/" class="fill-div gradient-overlay">
+ <span>Unfinished Habit Tracker</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/ufoproto_screenshot.png);">
+ <a href="https://altaf-creator.itch.io/depths-of-knowledge" class="fill-div gradient-overlay">
+ <span>UFO with a Gravity Gun Prototype</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/boids_screenshot.png);">
+ <a href="https://altaf-creator.itch.io/depths-of-knowledge" class="fill-div gradient-overlay">
+ <span>(failed (?)) Boids Experiment</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/simpliCityStore.png); ">
+ <a href="https://simpliCity-Store.github.io/" class="fill-div gradient-overlay">
+ <span>simpliCity Store Mock-up</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
style="background-image: url(/assets/images/game-hero/duck_screenshot.png); ">
<a href="https://play.unity.com/mg/other/webgl-flappy-duck-1-0" class="fill-div gradient-overlay">
<span>Flappy Duck</span>
</a>
</div>
<div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/cargame_screenshot.jpg);">
+ <a href="https://play.unity.com/mg/other/webgl-builds-153175" class="fill-div gradient-overlay">
+ <span>Road Obstacles</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
style="background-image: url(/assets/images/game-hero/ball_screenshot.png); ">
<a href="https://play.unity.com/mg/other/webgl-builds-153175" class="fill-div gradient-overlay">
<span>Ball Run</span>
@@ -110,6 +152,18 @@ <span>C Wordle</span>
</a>
</div>
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/wordle_screenshot.png); ">
+ <a href="" class="fill-div gradient-overlay">
+ <span>NurseBot</span>
+ </a>
+ </div>
+ <div class="flex full-img-card gallery-card"
+ style="background-image: url(/assets/images/game-hero/wordle_screenshot.png); ">
+ <a href="" class="fill-div gradient-overlay">
+ <span>Garbage Sorting Machine</span>
+ </a>
+ </div>
</div>
</div>
</div>
diff --git a/projects/simpliCity/index.html b/projects/simpliCity/index.html index a816a3c..df3179f 100644 --- a/projects/simpliCity/index.html +++ b/projects/simpliCity/index.html @@ -32,9 +32,9 @@ </div>
<div class="sidebar-progress-container" id="progressContainer">
</div>
- <div class="banner-top-bar flex-container">
- <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy on Steam</a>
- <img class="center-absolute" src="/assets/images/logo/simpliCity.png" alt="">
+ <div class="bottom-bar flex-container">
+ <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy on Steam</a>
+ <img class="center-absolute" src="/assets/images/logo/simpliCity.png" alt="">
</div>
<section style="border-top: none; overflow: hidden;" id="simpliCity-img">
<video src="/assets/videos/trailer_simpliCity.mp4" class="banner-video" id="video" onended="stopVideo('video')"></video>
diff --git a/scripts/blog.js b/scripts/blog.js index 65fc02e..bbded40 100644 --- a/scripts/blog.js +++ b/scripts/blog.js @@ -11,9 +11,10 @@ function postList(n = 0) { } // i ❤ for loops - for (var i = n - 1; i >= 0; i--) { - console.log("dkfjlaafjsdk" + i) - postCard(data.posts[i]); + for (var i = data.posts.length - 1; i >= 0; i--) { + if (i >= data.posts.length - n) { + postCard(data.posts[i]); + } } }); } @@ -80,12 +81,14 @@ function loadPost(n) { var date = document.getElementById("date"); var author = document.getElementById("author"); var tags = document.getElementById("tag-container"); + var description = document.getElementById("description"); var content = document.getElementById("content"); banner.src = post.banner; title.innerHTML = post.title; date.innerHTML = post.date; author.innerHTML = post.author; + description.innerHTML = post.description; post.tags.forEach(createTags); tags.innerHTML = evaluatedTags; diff --git a/scripts/onload.js b/scripts/onload.js index 9d9226e..10dcf1d 100644 --- a/scripts/onload.js +++ b/scripts/onload.js @@ -18,3 +18,8 @@ function blog(n) { // addNodes is called in loadPost(n);
loadPost(n);
}
+
+function index() {
+ postList(2);
+ addNodes();
+}
@@ -112,6 +112,10 @@ li { -webkit-text-fill-color: transparent;
}
+.half-opacity-text {
+ color: rgba(0, 0, 0, 0.5);
+}
+
.floating-nav-container {
display: block;
position: fixed;
@@ -297,6 +301,24 @@ li { flex-wrap: wrap;
}
+.horizontal-scroll {
+ overflow-x: scroll;
+ overflow-y: hidden;
+}
+
+.carousel-container {
+ flex-direction: row;
+ flex-wrap: nowrap;
+ height: 240px;
+ width: 100%;
+ gap: 10px;
+}
+
+.carousel-container > img {
+ height: 100%;
+ clip-path: polygon(0 10.00px, 10px 10px, 10.00px 0, calc(100% - 10.00px) 0, calc(100% - 10px) 10px, 100% 10.00px, 100% calc(100% - 10.00px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10.00px) 100%, 10.00px 100%, 10px calc(100% - 10px), 0 calc(100% - 10.00px));
+}
+
.flex-center {
flex-direction: column;
place-items: center;
@@ -398,8 +420,14 @@ li { color: white;
}
-.banner-top-bar > img {
+.bottom-bar > img {
height: 40px;
+ transition: height .4s;
+}
+
+.bottom-bar > img:hover {
+ height: 45px;
+ transition: height .4s;
}
.banner-bottom-bar > i {
@@ -407,14 +435,14 @@ li { display: inline-block;
}
-.banner-top-bar {
+.bottom-bar {
position: fixed;
z-index: 3;
height: 69px;
width: 100%;
background-color: #0008;
backdrop-filter: blur(10px);
- top: 0;
+ bottom: 0;
left: 70px;
color: white;
box-sizing: border-box;
@@ -589,6 +617,10 @@ li { background: linear-gradient(180deg, transparent calc(100% - 1px), #ffffff79 0);
}
+#top-project-highlight {
+ height: 800px;
+}
+
@media only screen and (max-width: 600px) {
.desktop {
visibility: collapse;
@@ -644,4 +676,19 @@ li { .banner-video {
width: 100%;
}
+
+ .div-sizing {
+ max-width: calc(100vw - 30px);
+ }
+}
+
+
+@media only screen and (max-width: 1000px) {
+ .flex {
+ flex-direction: column;
+ }
+
+ #top-project-highlight {
+ height: 280vh;
+ }
}
|
