diff options
27 files changed, 1061 insertions, 0 deletions
diff --git a/about/index.html b/about/index.html new file mode 100644 index 0000000..765d9ad --- /dev/null +++ b/about/index.html @@ -0,0 +1,93 @@ +<!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"> + <title>Projects • altaf-creator</title> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> +</head> + +<body> + <script defer src="/scripts/scroll.js"></script> + <div class="floating-nav-container"> + <div class="floating-nav"> + <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> + <section style="border-top: none;"> + <div class="center-grid"> + <div class="div-sizing"> + <div class="flex-container"> + <img src="/assets/images/hero/logo.png" alt="" + style="box-sizing: border-box; height: 240px; width: 240px; object-fit: cover;" class="img"> + <div style="padding: 30px; color: gray;"> + <span><i class="fa-solid fa-suitcase"></i> Student</span> + <br> + <span><i class="fa-solid fa-star"></i> Software Development</span> + <br> + <span>🇮🇩 Indonesia</span> + <br> + <span><i class="fa-solid fa-envelope"></i> <a href="mailto:athaalaa@gmail.com" + class="link">athaalaa@gmail.com</a></span> + <br> + <span><i class="fa-brands fa-github"></i> <a href="https://github.com/altaf-creator/" + class="link">altaf-creator</a></span> + <br> + <span><i class="fa-brands fa-youtube"></i> <a href="https://youtube.com/@altafcreator/" + class="link">altaf-creator</a></span> + <br> + <span><i class="fa-brands fa-instagram"></i> <a href="https://instagram.com/athaalaa.altaf9/" + class="link">athaalaa.altaf9</a></span> + <br> + </div> + </div> + <p> + <span class="big-text">About Me</span><br> + <span>Hey there! I'm <span class="colored-text">Altaf</span>. I am a middle school student from + <span class="colored-text">Indonesia</span> who likes to code as a <span + class="colored-text">hobby</span>. I mostly make games and websites, but also likes to try + new things.</span> + </p> + </div> + </div> + </div> + </section> + <section style="height: 50vh;"> + <div class="center-grid"> + <div class="div-sizing"> + <div> + <span class="big-text" style="margin-left: 10px;">Socials</span> + <br> + <a href="https://www.youtube.com/channel/UCm7n_G87ihIK-MmBb4i19dA" class="button" + style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;" + target="_blank"><i class="fa-brands fa-youtube"></i></a> + <a href="https://www.instagram.com/athaalaa.altaf9/" class="button" + style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;" + target="_blank"><i class="fa-brands fa-instagram"></i></a> + <a href="https://github.com/altaf-creator" class="button" + style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;" + target="_blank"><i class="fa-brands fa-github"></i></a> + <a href="mailto:athaalaa@gmail.com" class="button" + style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;"><i + class="fa-solid fa-envelope" target="_blank"></i></a> + <a href="https://discord.gg/Mg5WFqrHk3" class="button" + style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;"><i + class="fa-brands fa-discord" target="_blank"></i></a> + </div> + </div> + </div> + </section> +</body> + +</html>
\ No newline at end of file diff --git a/assets/images/blog/beta0.2_banner.png b/assets/images/blog/beta0.2_banner.png Binary files differnew file mode 100644 index 0000000..ad5907e --- /dev/null +++ b/assets/images/blog/beta0.2_banner.png diff --git a/assets/images/blog/beta0.2_cover.png b/assets/images/blog/beta0.2_cover.png Binary files differnew file mode 100644 index 0000000..bfeff9f --- /dev/null +++ b/assets/images/blog/beta0.2_cover.png diff --git a/assets/images/blog/newsite.png b/assets/images/blog/newsite.png Binary files differnew file mode 100644 index 0000000..2848f14 --- /dev/null +++ b/assets/images/blog/newsite.png diff --git a/assets/images/game-hero/ball_screenshot.png b/assets/images/game-hero/ball_screenshot.png Binary files differnew file mode 100644 index 0000000..89cd8e4 --- /dev/null +++ b/assets/images/game-hero/ball_screenshot.png diff --git a/assets/images/game-hero/depths-of-knowledge_cover.png b/assets/images/game-hero/depths-of-knowledge_cover.png Binary files differnew file mode 100644 index 0000000..d6f8852 --- /dev/null +++ b/assets/images/game-hero/depths-of-knowledge_cover.png diff --git a/assets/images/game-hero/duck_screenshot.png b/assets/images/game-hero/duck_screenshot.png Binary files differnew file mode 100644 index 0000000..440889f --- /dev/null +++ b/assets/images/game-hero/duck_screenshot.png diff --git a/assets/images/game-hero/farmer_screenshot.png b/assets/images/game-hero/farmer_screenshot.png Binary files differnew file mode 100644 index 0000000..d29fc8b --- /dev/null +++ b/assets/images/game-hero/farmer_screenshot.png diff --git a/assets/images/game-hero/farmers_cover.png b/assets/images/game-hero/farmers_cover.png Binary files differnew file mode 100644 index 0000000..e18771e --- /dev/null +++ b/assets/images/game-hero/farmers_cover.png diff --git a/assets/images/game-hero/markdown_screenshot.png b/assets/images/game-hero/markdown_screenshot.png Binary files differnew file mode 100644 index 0000000..fa5666b --- /dev/null +++ b/assets/images/game-hero/markdown_screenshot.png diff --git a/assets/images/game-hero/math_screenshot.png b/assets/images/game-hero/math_screenshot.png Binary files differnew file mode 100644 index 0000000..28f0879 --- /dev/null +++ b/assets/images/game-hero/math_screenshot.png diff --git a/assets/images/game-hero/microbit_screenshot.png b/assets/images/game-hero/microbit_screenshot.png Binary files differnew file mode 100644 index 0000000..0722bf5 --- /dev/null +++ b/assets/images/game-hero/microbit_screenshot.png diff --git a/assets/images/game-hero/quran_screenshot.png b/assets/images/game-hero/quran_screenshot.png Binary files differnew file mode 100644 index 0000000..4ba265b --- /dev/null +++ b/assets/images/game-hero/quran_screenshot.png diff --git a/assets/images/game-hero/simplicity_screenshot.png b/assets/images/game-hero/simplicity_screenshot.png Binary files differnew file mode 100644 index 0000000..4b8c93e --- /dev/null +++ b/assets/images/game-hero/simplicity_screenshot.png diff --git a/assets/images/game-hero/space_hero.png b/assets/images/game-hero/space_hero.png Binary files differnew file mode 100644 index 0000000..dc0f66a --- /dev/null +++ b/assets/images/game-hero/space_hero.png diff --git a/assets/images/game-hero/tank_screenshot.png b/assets/images/game-hero/tank_screenshot.png Binary files differnew file mode 100644 index 0000000..0ed9e18 --- /dev/null +++ b/assets/images/game-hero/tank_screenshot.png diff --git a/assets/images/hero/altaf.png b/assets/images/hero/altaf.png Binary files differnew file mode 100644 index 0000000..ff2ce4b --- /dev/null +++ b/assets/images/hero/altaf.png diff --git a/assets/images/hero/logo.png b/assets/images/hero/logo.png Binary files differnew file mode 100644 index 0000000..1850c56 --- /dev/null +++ b/assets/images/hero/logo.png diff --git a/assets/images/hero/simpliCity_web_0_island.png b/assets/images/hero/simpliCity_web_0_island.png Binary files differnew file mode 100644 index 0000000..d490587 --- /dev/null +++ b/assets/images/hero/simpliCity_web_0_island.png diff --git a/assets/images/hero/simpliCity_web_0_ocean.png b/assets/images/hero/simpliCity_web_0_ocean.png Binary files differnew file mode 100644 index 0000000..5f0eb52 --- /dev/null +++ b/assets/images/hero/simpliCity_web_0_ocean.png diff --git a/blog/index.html b/blog/index.html new file mode 100644 index 0000000..0340bbf --- /dev/null +++ b/blog/index.html @@ -0,0 +1,58 @@ +<!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"> + <title>Blog • altaf-creator</title> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> +</head> + +<body> + <script defer src="/scripts/scroll.js"></script> + <div class="floating-nav-container"> + <div class="floating-nav"> + <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> + <section style="border-top: none;"> + <div class="center-grid"> + <div class="div-sizing"> + <div class="flex-container flex-container-column flex-center-content"> + <span class="heading">Blog</span> + <div class="card" tabindex="9999"> + <img src="/assets/images/blog/newsite.png" + alt=""> + <div> + <div class="flex-container-normal"><span class="colored-text">Devlog</span></div> + <a href="" class="link">A new website! (again)</a> + <p>Fri, 11 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="simpliCity/beta02/" class="link">beta0.2: The Visual Update is Out!</a> + <p>Wed, 26 July 2023</p> + </div> + </div> + </div> + </div> + </div> + </div> + </section> +</body> + +</html>
\ No newline at end of file diff --git a/blog/simpliCity/beta02/index.html b/blog/simpliCity/beta02/index.html new file mode 100644 index 0000000..f40e938 --- /dev/null +++ b/blog/simpliCity/beta02/index.html @@ -0,0 +1,137 @@ +<!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"> + <title>Blog / beta0.2: The Visual Update is Out! • altaf-creator</title> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> + + <style> + .center-grid { + min-height: 0; + } + </style> +</head> + +<body onload="addNodes()"> + <script defer src="/scripts/scroll.js"></script> + <script defer src="/scripts/onload.js"></script> + <div class="floating-nav-container"> + <div class="floating-nav"> + <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="border-top: none; padding-top: 50px;" class="normal-section"> + <div class="banner-shadow"> + <img src="/assets/images/blog/beta0.2_banner.png" alt="" class="banner img"> + </div> + <div class="center-grid"> + <div class="div-sizing"> + <div class="flex-container flex-container-column flex" style="gap: 7px; margin-top: 20px;"> + <span class="colored-text">simpliCity</span> + <h1 style="text-align: left; margin: 0;">beta0.2: The Visual Update is Out!</h1> + <span style="color: rgba(0, 0, 0, 0.5);">Wednesday, 26 July 2023</span><br> + <span>Written by <span class="colored-text">altaf-creator</span></span> + </div> + </div> + </div> + </section> + <section class="normal-section"> + <div class="center-grid"> + <div class="div-sizing"> + <h1>Introduction</h1> + <p>Hello, friends! Today, I'm excited to announce that simpliCity beta0.2: The Visual Update is OUT NOW! + 🥳 <br>This update contains a lot of content features, bugfixes, and improvements from the last + update. </p> + </div> + </div> + </section> + <section class="normal-section"> + <div class="center-grid"> + <div class="div-sizing"> + <h2>Notable Additions</h2> + <p>Starting from NEW buildings, there is now;</p> + <ul> + <li>Factories</li> + <li>A soup restaurant</li> + <li>Restoran Padang</li> + <li>miniMart</li> + <li>Big Ben</li> + <li>Fountains</li> + <li>House remodel + new models</li> + <li>School remodel</li> + <li>Lamp remodel</li> + <li>Connected roads</li> + <li>Fences</li> + </ul> + + <p>And then the new game ambience;</p> + <ul> + <li>Better ambient lightning</li> + <li>Better skybox coloring</li> + <li>Clouds!</li> + <li>Better ambience</li> + <li>Window lights</li> + </ul> + + <p>Last but certainly not least, big changes to UI!</p> + <ul> + <li>a COMPLETE UI overhaul</li> + <li>Loading screen</li> + <li>UI Sounds</li> + <li>Hotbar organization</li> + </ul> + </div> + </div> + </section> + <section class="normal-section"> + <div class="center-grid"> + <div class="div-sizing"> + <h2>Changes & Bugfixes</h2> + <ul> + <li>Citizen arrival and depart rate modifications</li> + <li>Performance optimizations</li> + <li>Small improvements</li> + <li>Land expansions are now limited to 3x3</li> + <li>Useful tooltips</li> + <li>Better tooltip positioning</li> + <li>Fixed credit overlapping text</li> + </ul> + </div> + </div> + </section> + <section class="normal-section"> + <div class="center-grid"> + <div class="div-sizing"> + <h1>Closing</h1> + <p> + And that's (probably) the end of the beta0.2 update. You can already update the game on steam right + now! I wanted to say thank you everyone for all of your support, suggestions, and help on building + simpliCity. <br><br> + Once again, thank you everyone for reading. <br> + This is Altaf. <br> + Stay safe, and see you in the next update on <a href="/blog/" class="link">The Altaf (dev)Blog</a>! + </p> + + <span style="color: rgba(0, 0, 0, 0.5);">Steam News Link: <a + href="https://steamcommunity.com/games/2381230/announcements/detail/3680055105769610135" + class="link">https://steamcommunity.com/games/2381230/announcements/detail/3680055105769610135</a></span> + </div> + </div> + </section> +</body> + +</html>
\ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..af106f2 --- /dev/null +++ b/index.html @@ -0,0 +1,125 @@ +<!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"> + <title>This is altaf-creator</title> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> +</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="/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="" 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="" 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="" class="fill-div gradient-overlay"> + <span>MarkdownEditor</span> + </a> + + </div> + </div> + <a href="projects/" 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 class="center">Blog Posts</h1> + <div class="flex-container flex-center"> + <div class="card" tabindex="9999"> + <img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg" alt=""> + <div> + <a href="" class="link">hey</a> + <p>yo</p> + <a href="" class="button">what</a> + </div> + </div> + <div class="card" tabindex="9999"> + <img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg" alt=""> + <div> + <a href="" class="link">hey</a> + <p>yo</p> + <a href="" class="button">what</a> + </div> + </div> + </div> + <a href="blog/" class="button" style="margin-left: auto; margin-right: auto;">View More</a> + <hr> + <h1 class="center">Socials</h1> + <div class="center-grid" style="min-height: 0;"> + <div> + <a href="https://www.youtube.com/channel/UCm7n_G87ihIK-MmBb4i19dA" class="button" style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;" target="_blank"><i class="fa-brands fa-youtube"></i></a> + <a href="https://www.instagram.com/athaalaa.altaf9/" class="button" style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;" target="_blank"><i class="fa-brands fa-instagram"></i></a> + <a href="https://github.com/altaf-creator" class="button" style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;" target="_blank"><i class="fa-brands fa-github"></i></a> + <a href="mailto:athaalaa@gmail.com" class="button" style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;"><i class="fa-solid fa-envelope" target="_blank"></i></a> + <a href="https://discord.gg/Mg5WFqrHk3" class="button" style="font-size: 1.3rem; text-align: center; display: inline-block; width: 1.5rem; height: 1.5rem;"><i class="fa-brands fa-discord" target="_blank"></i></a> + </div> + </div> + </div> + </div> + </section> +</body> + +</html>
\ No newline at end of file diff --git a/projects/index.html b/projects/index.html new file mode 100644 index 0000000..e101fae --- /dev/null +++ b/projects/index.html @@ -0,0 +1,117 @@ +<!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"> + <title>Projects • altaf-creator</title> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> +</head> + +<body> + <script defer src="/scripts/scroll.js"></script> + <div class="floating-nav-container"> + <div class="floating-nav"> + <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> + <section style="border-top: none;"> + <div class="center-grid"> + <div class="div-sizing" style="max-width: none;"> + <div class="flex-container flex-container-column"> + <span class="heading">Projects</span> + <div class="flex-container flex" style="height: 800px;"> + <div class="flex full-img-card" + style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); "> + <a href="https://store.steampowered.com/app/2381230/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 class="flex-container-normal flex"> + <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> + </a> + </div> + <div class="flex full-img-card gallery-card" + style="background-image: url(/assets/images/game-hero/farmer_screenshot.png); "> + <a href="https://altaf-creator.itch.io/farmers-universe" class="fill-div gradient-overlay"> + <span>Farmer's Universe</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/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/ball_screenshot.png); "> + <a href="https://play.unity.com/mg/other/webgl-builds-153175" class="fill-div gradient-overlay"> + <span>Ball Run</span> + </a> + </div> + <div class="flex full-img-card gallery-card" + style="background-image: url(/assets/images/game-hero/space_hero.png); "> + <a href="https://github.com/altaf-creator/Space-Shooter-Game" class="fill-div gradient-overlay"> + <span>Space Shooter Game</span> + </a> + </div> + <div class="flex full-img-card gallery-card" + style="background-image: url(/assets/images/game-hero/math_screenshot.png); "> + <a href="https:/altaf-creator.github.io/easy-math-game/" class="fill-div gradient-overlay"> + <span>Easy Math Game</span> + </a> + </div> + <div class="flex full-img-card gallery-card" + style="background-image: url(/assets/images/game-hero/microbit_screenshot.png); "> + <a href="https://github.com/altaf-creator/microbit-calculator" class="fill-div gradient-overlay"> + <span>micro:bit Calculator</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>C Wordle</span> + </a> + </div> + </div> + </div> + </div> + </div> + </section> +</body> + +</html>
\ No newline at end of file diff --git a/scripts/onload.js b/scripts/onload.js new file mode 100644 index 0000000..5c63f35 --- /dev/null +++ b/scripts/onload.js @@ -0,0 +1,8 @@ +function addNodes() { + const collection = document.getElementsByTagName("section"); + const container = document.getElementById("progressContainer"); + + for (var i = 0; i < collection.length; i++) { + container.innerHTML += "<nodes class=\"sidebar-progress-node\"></nodes>\n"; + } +}
\ No newline at end of file diff --git a/scripts/scroll.js b/scripts/scroll.js new file mode 100644 index 0000000..b7a6fa0 --- /dev/null +++ b/scripts/scroll.js @@ -0,0 +1,74 @@ +document.addEventListener('scroll', function () { + progress(); + hideSidebar(); +}); + +function progress() { + const sections = document.getElementsByTagName("section"); + const nodes = document.getElementsByTagName("nodes"); + + if (nodes[0]) { + for (var i = 0; i < sections.length; i++) { + if (isInViewport(sections[i])) { + nodes[i].style.width = "20px"; + nodes[i].style.height = "20px"; + } + else { + nodes[i].style.width = "10px"; + nodes[i].style.height = "10px"; + } + } + } +} + +function hideSidebar() { + const sidebar = document.getElementById("sidebar"); + const progressContainer = document.getElementById("progressContainer"); + const sections = document.getElementsByTagName("section"); + + if (screen.width <= 600) { + if (window.scrollY >= 100) { + sidebar.style.left = "-80px"; + + for (var i = 0; i < sections.length; i++) { + sections[i].style.marginLeft = 0; + } + + if (progressContainer) { + progressContainer.style.left = "-11px"; + } + } + else { + sidebar.style.left = "0"; + + for (var i = 0; i < sections.length; i++) { + sections[i].style.marginLeft = "70px"; + } + + if (progressContainer) { + progressContainer.style.left = "61px"; + } + } + } + else { + sidebar.style.left = "0"; + progressContainer.style.left = "61px"; + } +} + +function isInViewport(element) { + const rect = element.getBoundingClientRect(); + const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0); + const visibleWidth = Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0); + const elementHeight = rect.height; + const elementWidth = rect.width; + const halfElementHeight = elementHeight / 2; + const halfElementWidth = elementWidth / 2; + + return ( + visibleHeight >= halfElementHeight && + visibleWidth >= halfElementWidth + ); +} + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..8b99cde --- /dev/null +++ b/style.css @@ -0,0 +1,449 @@ +:root { + --accent1: #00BA62; + --accent2: #008C94; + --accent: #00A37B; +} + +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,150;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,150;1,400;1,500;1,600;1,700;1,800&display=swap'); + +::-moz-selection { /* Code for Firefox */ + color: white; + background: black; +} + +::selection { + color: white; + background: black; +} + +html { + overflow-x: none; +} + +body { + margin: 0; + padding: 0; + height: 100vh; + width: 100%; + font-family: 'JetBrains Mono', monospace; + word-wrap: break-word; + text-overflow: ellipsis; +} + +h1 { + font-size: 1.7rem; +} + +section { + padding-inline: 50px; + min-height: 100%; + border-top: 2px solid rgba(0, 0, 0, 0.7); + position: relative; + z-index: 2; + margin-left: 70px; + background-color: white; + transition: margin-left .3s; +} + +hr { + border: none; + background-color: black; + height: 2px; + margin: 20px; +} + +.center { + text-align: center; +} + +.normal-section { + padding-bottom: 30px; + min-height: 0; + height: fit-content; +} + +.heading { + font-size: 2.5rem; + font-weight: 600; + display: block; + margin-top: 1rem; + margin-bottom: 1rem; +} + +.colored-text { + background: -webkit-linear-gradient(45deg, var(--accent1), var(--accent2)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.floating-nav-container { + display: block; + position: fixed; + top: 20px; + right: 20px; + filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.15)); + z-index: 9999; +} + +.floating-nav { + box-sizing: border-box; + background-color: white; + padding: 20px; + height: 50px; + display: flex; + gap: 20px; + align-items: center; + clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px)); +} + +.sidebar { + background-color: white; + position: fixed; + height: 100%; + width: 70px; + border-right: 2px solid rgba(0, 0, 0, 0.7); + z-index: 9998; + display: flex; + flex-direction: column; + align-items: center; + transition: left .3s; +} + +.sidebar > span { + font-size: xx-large; + text-orientation: sideways; + writing-mode: vertical-lr; + margin-top: 30px; + display: block; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: break-word; + overflow: hidden; + box-sizing: border-box; + max-height: 80% !important; +} + +.sidebar-img { + height: 50px; + clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px)); + margin-top: 20px; +} + +.home-img { + height: 100%; + width: 100%; + margin: 0; + background-size: cover; + background-position: center; + position: absolute; + top: 0; + right: 0; +} + +.sidebar-progress-container { + width: 20px; + height: 100vh; + position: fixed; + top: 0; + left: 61px; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + z-index: 10000; + transition: left .3s; +} + +.sidebar-progress-node { + width: 10px; + height: 10px; + margin-top: 50px; + margin-bottom: 50px; + background-color: black; + border-radius: 20px; + transition: all .3s cubic-bezier(0, .38, .48, 1.35); +} + +@keyframes title { + from { + bottom: 30%; + color: transparent; + letter-spacing: -10px; + } + + to { + letter-spacing: clamp(10px, -0.875rem + 5vw, 30px); + color: #FFFFFF5A; + bottom: 46%; + } +} + +.home-title { + right: 0; + font-weight: 800; + font-size: clamp(1rem, -0.875rem + 20vw, 400px); + color: #FFFFFF5A; + position: fixed; + text-align: center; + width: calc(100% - 70px); + line-height: 65%; + bottom: 46%; + z-index: 0; + letter-spacing: clamp(10px, -0.875rem + 5vw, 30px); + animation-name: title; + animation-duration: 3s; + user-select: none; +} + +.div-sizing { + width: 100%; + max-width: 1200px; + padding: 30px; + box-sizing: border-box; +} + +.img { + clip-path: polygon(0 20.00px, 20px 20px, 20.00px 0, calc(100% - 20.00px) 0, calc(100% - 20px) 20px, 100% 20.00px, 100% calc(100% - 20.00px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20.00px) 100%, 20.00px 100%, 20px calc(100% - 20px), 0 calc(100% - 20.00px)); +} + +.center-grid { + display: grid; + place-items: center; + min-height: 100vh; + width: 100%; +} + +.big-text { + font-size: clamp(1rem, -0.875rem + 30vw, 2rem); + max-width: 80%; +} + +.link { + text-decoration: none; + background: linear-gradient(180deg, transparent calc(100% - 2px), black 0); + /* thanks MIT very cool */ + transition: all .2s; + color: black; + background-color: transparent; + z-index: 9999; +} + +.link:hover { + background: linear-gradient(180deg, #00000021 calc(100% - 2px), black 0); + color: #000000FA; +} + +.link:focus { + color: #00000085; + background: linear-gradient(180deg, #00000021 calc(100% - 1px), black 0); +} + +.flex { + flex-grow: 1; +} + +.flex-container { + display: flex; + flex-direction: row; + width: 100%; + flex-wrap: wrap; +} + +.flex-center { + flex-direction: column; + place-items: center; +} + +.flex-center-content { + place-content: center; +} + +.flex-container-normal { + display: flex; + width: 100%; + flex-wrap: wrap; +} + +.flex-container-column { + flex-direction: column; + height: 100%; +} + +.full-img-card { + background-color: var(--accent); + margin: 5px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +.full-img-card > a { + text-decoration: none; + box-sizing: border-box; + position: relative; + overflow: hidden; +} + +.full-img-card > a:hover { + box-shadow: inset white 0 0 0 4px, rgba(0, 0, 0, 0.3) 0 0 10px 1px; +} + +.full-img-card > a:focus { + background-color: rgba(0, 0, 0, 0.1); + box-shadow: inset white 0 0 0 2.5px, rgba(0, 0, 0, 0.3) 0 0 10px 1px; +} + +.full-img-card > a:active { + background-color: rgba(0, 0, 0, 0.24) !important; +} + +.full-img-card > a > span { + font-size: 2rem; + font-weight: 500; + color: white; + position: absolute; + bottom: 2rem; + left: 2rem; +} + +.full-img-card > a:hover > span { + background: linear-gradient(180deg, transparent calc(100% - 2px), white 0); +} + +.card { + height: 200px; + max-width: 800px; + width: 100%; + display: flex; + flex-direction: row; + box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 2px; + margin-bottom: 15px; + margin-top: 15px; +} + +.card:hover { + box-shadow: rgba(0, 0, 0, 0.15) 0 0 15px 4px; +} + +.card > * { + flex: 1 1; + width: 50%; +} + +.card > div { + position: relative; + padding: 15px; +} + +.card > div > .link { + font-size: 1.5rem; + font-weight: 600; +} + +.card > div > .button { + position: absolute; + bottom: 15px; + right: 15px; +} + +.card > div > .flex-container-normal { + margin-bottom: 10px; +} + +.card > img { + object-fit: cover; +} + +.gallery-card { + flex: 1 0 400px; + height: 300px; +} + +.gradient-overlay { + width: 100%; + height: 100%; + background: linear-gradient(5deg, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0) 50%); +} + +.gradient-overlay:hover { + background: linear-gradient(5deg, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0) 60%); +} + +.fill-div { + display: block; +} + +.button { + display: block; + width: fit-content; + padding: 15px; + background-color: var(--accent); + color: white; + text-decoration: none; + margin: 10px; + transition: background-color .2s; + box-shadow: none; + position: relative; +} + +.button:hover { + background-color: var(--accent2); +} + +.button:active { + box-shadow: inset white 0 0 0 3px, rgba(0, 0, 0, 0.4) 0 0 12px 1px !important; +} + +.button:focus { + box-shadow: inset white 0 0 0 2px, rgba(0, 0, 0, 0.4) 0 0 12px 1px; +} + +.banner-shadow { + filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.4)); +} + +.banner { + max-width: 100%; + height: 500px; + object-fit: cover; + width: 100%; + box-sizing: border-box; +} + +#simpliCity-link { + position: absolute; + right: 30px; + bottom: 30px; + background-color: transparent; + background: linear-gradient(180deg, transparent calc(100% - 2px), white 0); + font-size: large; + color: white; +} + +#simpliCity-link:hover { + color: #ffffffbe; + background: linear-gradient(180deg, transparent calc(100% - 2px), #ffffffbe 0); +} + +#simpliCity-link:focus { + color: #ffffff79; + background: linear-gradient(180deg, transparent calc(100% - 1px), #ffffff79 0); +} + +@media only screen and (max-width: 600px) { + .flex { + flex-direction: column; + } + + .card { + flex-direction: column; + height: 400px; + } + + .card > * { + width: 100%; + height: 50%; + box-sizing: border-box; + } +}
\ No newline at end of file |
