diff options
| author | altaf-creator <dev@altafcreator.com> | 2024-04-10 18:24:58 +0700 |
|---|---|---|
| committer | altaf-creator <dev@altafcreator.com> | 2024-04-10 18:24:58 +0700 |
| commit | 228217e4075eed9ca4aed1ff64be00093c28676d (patch) | |
| tree | d1e5d9468f230fe7fad96d3d261366cad7b83fa0 | |
| parent | a26de243da1a42ea9abc4953c1906cf558493883 (diff) | |
improve meta, spaces to tabs, blog to markdown
| -rw-r--r-- | about/index.html | 155 | ||||
| -rw-r--r-- | blog/index.html | 96 | ||||
| -rw-r--r-- | data/posts/0.md | 62 | ||||
| -rw-r--r-- | data/posts/1.md | 56 | ||||
| -rw-r--r-- | index.html | 271 | ||||
| -rw-r--r-- | projects/index.html | 214 | ||||
| -rw-r--r-- | projects/simpliCity/index.html | 139 | ||||
| -rw-r--r-- | projects/tank-shooter/index.html | 139 | ||||
| -rw-r--r-- | scripts/blog.js | 167 | ||||
| -rw-r--r-- | scripts/scroll.js | 2 | ||||
| -rw-r--r-- | style.css | 747 |
11 files changed, 1105 insertions, 943 deletions
diff --git a/about/index.html b/about/index.html index ded10f1..a6dd74b 100644 --- a/about/index.html +++ b/about/index.html @@ -2,84 +2,89 @@ <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">
- <title>About Me • altaf-creator</title>
- <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+ <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">
+ <title>About Me • 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 button-social" target="_blank"><i class="fa-brands fa-youtube"></i></a>
- <a href="https://www.instagram.com/athaalaa.altaf9/" class="button button-social" target="_blank"><i class="fa-brands fa-instagram"></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="mailto:athaalaa@gmail.com" class="button button-social" target="_blank"><i class="fa-solid fa-envelope"></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>
+ <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>
+ <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>
+ </div>
+ </div>
+ <br>
+ <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>
+ <p class="desktop" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: gray;">↓ psst, scroll down! ↓</p>
+ </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="//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=""><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/blog/index.html b/blog/index.html index 51554e8..49bf847 100644 --- a/blog/index.html +++ b/blog/index.html @@ -2,72 +2,42 @@ <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">
- <title>Blog • altaf-creator</title>
- <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+ <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">
+ <title>Blog • altaf-creator</title>
+ <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
</head>
<body onload="postList();">
- <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="/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" id="blog-container">
- <span class="heading">Blog</span>
- <div class="card" tabindex="9999">
- <img src="/assets/images/blog/33_cover.png"
- alt="">
- <div>
- <div class="flex-container-normal chip-container">
- <span class="chip">Devlog</span>
- <span class="chip">simpliCity</span>
- </div>
- <a href="simpliCity/well-that-was-dumb/" class="link">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/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>
+ <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>
+ <section style="border-top: none;">
+ <div class="center-grid">
+ <div class="div-sizing">
+ <div class="flex-container flex-container-column flex-center-content" id="blog-container">
+ <span class="heading">Blog</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
</body>
</html>
diff --git a/data/posts/0.md b/data/posts/0.md index 9884eb2..566724b 100644 --- a/data/posts/0.md +++ b/data/posts/0.md @@ -1,2 +1,60 @@ -# hello, wolrd! -0.md +-+-+-+ +# Introduction + +Hello, friends! Today, I'm excited to announce that simpliCity beta0.2: The Visual Update is OUT NOW! 🥳 +This update contains a lot of content features, bugfixes, and improvements from the last update. ++-+-+- + +-+-+-+ +## Notable Additions + +Starting from NEW buildings, there is now; +* Factories +* A soup restaurant +* Restoran Padang +* miniMart +* Big Ben +* Fountains +* House remodel + new models +* School remodel +* Lamp remodel +* Connected roads +* Fences + +And then the new game ambience; +* Better ambient lightning +* Better skybox coloring +* Clouds! +* Better ambience +* Window lights + +Last but certainly not least, big changes to UI! +* a COMPLETE UI overhaul +* Loading screen +* UI Sounds +* Hotbar organization + ++-+-+- + +-+-+-+ +## Changes & Bugfixes +* Citizen arrival and depart rate modifications +* Performance optimizations +* Small improvements +* Land expansions are now limited to 3x3 +* Useful tooltips +* Better tooltip positioning +* Fixed credit overlapping text ++-+-+- + +-+-+-+ +# Closing + +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. + +Once again, thank you everyone for reading. +This is Altaf. +Stay safe, and see you in the next update on [The Altaf (dev)Blog](/blog/)! + +<span style="color: rgba(0, 0, 0, 0.5);">Steam News Link: [https://steamcommunity.com/games/2381230/announcements/detail/3680055105769610135](https://steamcommunity.com/games/2381230/announcements/detail/3680055105769610135)</span> ++-+-+- diff --git a/data/posts/1.md b/data/posts/1.md index f4c6bbd..41b8c1f 100644 --- a/data/posts/1.md +++ b/data/posts/1.md @@ -28,5 +28,61 @@ Now you may wonder, why did I create a new game? Well it was because... Long story short, I have accidentally teleported simpliCity project folder to a higher dimension that no human could ever even begin to comperhend, aka. deleted all the project files. The long story is... +## The Beginning +It was a normal day. I was thinking of backing up simpliCity using GitHub. Because currently, simpliCity project folder doesn't have any more copies apart from my drive. A month before, I have made a (local) Git repository in my drive. So uploading the simpliCity repo to GitHub should be simple, right? +## The Problem +First, I made a new repo in GitHub, connect the git repo to the GitHub repo using **git remot**e, rename the master branch to main, and push it to GitHub using **git push**- + + fatal: The push operation includes a file which exceeds GitHub's file size restriction of 100MB + +..Alright then. Turns out I included the temporary, automatically-generated Unity project files and folder. To fix this, I added the .gitignore template for Unity to tell Git to simply ignore the files and folder, and upload it again- + + fatal: The push operation includes a file which exceeds GitHub's file size restriction of 100MB + +Still the same error. Turns out that I have to remove the history of the ignored file, alias I have to make git forget about all of the temp files. **And this is where I messed up.** + +After executing the command to do that, I accidentally removed the entire Git commit history. "That's fine," I thought. So I executed another command to finish an operation, and I noticed something weird in the files. + +The Assets folder, aka the most important folder in the project, is **gone**. I have no idea what I did there, but the project was gone. I was panicking, spammed Ctrl + Z in VSCode and Windows Explorer, checked the recycle bin, and tried to undo the previous git operation, and tried to fetch the last commit. +I forgot that the entire git commit history is gone. Git cannot help me. The project is also not yet uploaded to GitHub, so the **only*1. current copy of the project is on my disk, and it's gone. + +I was confused, didn't know what just happened. So I tried downloading various data recovery tool, because I know when a file is deleted, it's not entirely erased from the disk, just flagged as empty and other programs can overwrite it. And it works! ..for just a few files. The Assets folder was already overwritten with another data. I have tried many, many programs, and nothing works. +Which means the Assets folder, is permanently deleted. I was sad, confused, and shocked (nah not really, but kinda sad). I **really*1. did permanently delete almost a year worth of work, and the worst part, I didn't know how and also can avoid it by being more careful. + +## The Light at the End of the Tunnel? +I did mention that I did not have any more copies for the current simpliCity project file (which is beta0.2.1), turns out that I actually have one old copy of beta0.1 (modified) project file. I also have the latest beta0.2 build, and all of the assets. + +So, what does that mean? Well it can mean that I can recover my project, but it needs more work. How you may ask? + +1. First, I will decompile my game to get all the new scripts from the latest build using ILSpy. +1. Download the old copy, and open it in Unity. +1. Update all the scripts to the new one. +1. Update all of the old objects to the new one to adapt to the new scripts. +1. Update all of the old assets to the new assets in my OneDrive. +1. Finish it up and polish it. And it's done! It will not be an exact copy, but all of the new features should still be recovered. And probably will be improved. + +But this needs time. For now, I have decided to stop simpliCity development, and start a new projects. Why? My gamedev journey is still long, and I cannot stick to the same projects for months or years. I decided that this is the time for me to move on, and learn new things. ++-+-+- + +-+-+-+ +# What does it mean for simpliCity? +This means that simpliCity development will be on hold for quite some time until I recovered the project. This also means that I will make a new game! Yay! Finally! ++-+-+- + +-+-+-+ +# What can we learn +1. Back up all of your projects and files. Do NOT have only 1 copy of your project. Have it on a second drive, and also online services like Google Drive and OneDrive. Do this so if something happens to the original, you still have a copy of it. +1. Back up regularly. If you have a back-up but it's old, that is still the same (but better) than having no back-ups at all. Back up your project every week or at least month. +1. Be careful in things that you don't know. Especially file management and Git. Git is hard. And annoying. +1. It's time to learn new things and move on. It is ok to make a big project and spend years on it, but you should also try and making many side-projects and improve over time. ++-+-+- + +-+-+-+ +# Closing +We have reached the end of this devlog. becase I feel I want to say sorry to everyone for dissapointing you because of this mistake. I also want to say please learn from this mistake. Better be safe than sorry! Also thank you, thank you everyone for staying with me in this journey. + +And that's it for this week. Thank you so much everyone for reading. +This is Altaf. +Stay safe, and see you next week on [The Altaf (dev)Blog](/blog/)! +-+-+- @@ -2,138 +2,159 @@ <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">
- <title>This is altaf-creator</title>
- <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+ <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">
+ <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); ">
+ <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>
+ <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/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 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>
- <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 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 style="margin: 5px; display: flex; justify-content: center; gap: 10px;">
+ <a href="projects/" class="button" style="margin: 0">View More</a>
+ <a href="projects/" 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>
- <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 button-social" target="_blank"><i class="fa-brands fa-youtube"></i></a>
- <a href="https://www.instagram.com/athaalaa.altaf9/" class="button button-social" target="_blank"><i class="fa-brands fa-instagram"></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="mailto:athaalaa@gmail.com" class="button button-social" target="_blank"><i class="fa-solid fa-envelope"></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>
- </div>
- </section>
+ </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="//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=""><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 9af538a..ec366fa 100644 --- a/projects/index.html +++ b/projects/index.html @@ -2,117 +2,119 @@ <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">
- <title>Projects • altaf-creator</title>
- <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+ <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">
+ <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="/projects/simpliCity/" class="fill-div gradient-overlay">
- <span>simpliCity</span>
- </a>
+ <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>
+ <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>
+ <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 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/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>
+ </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>
diff --git a/projects/simpliCity/index.html b/projects/simpliCity/index.html index 943e715..ee6692d 100644 --- a/projects/simpliCity/index.html +++ b/projects/simpliCity/index.html @@ -2,110 +2,111 @@ <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">
- <title>simpliCity • altaf-creator</title>
- <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+ <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">
+ <title>simpliCity • 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>
- <script defer src="/scripts/video.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>
- <div class="banner-top-bar flex-container">
+ <script defer src="/scripts/onload.js"></script>
+ <script defer src="/scripts/scroll.js"></script>
+ <script defer src="/scripts/video.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>
+ <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>
- <section style="border-top: none; overflow: hidden;" id="simpliCity-img">
+ </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>
<div class="banner-bottom-bar flex-container">
- <div class="flex">
+ <div class="flex">
<a class="button" href="#" onclick="playVideo('video')">▶ Trailer</a>
<i class="fa-brands fa-windows" title="Windows 8+ 64-bit"></i>
- </div>
- <div class="flex-right">
+ </div>
+ <div class="flex-right">
<a class="button" href="#"><i class="fa-brands fa-windows"></i> Download Demo</a>
<a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy on Steam</a>
- </div>
+ </div>
</div>
- </section>
- <section>
- <div class="center-grid">
- <div class="div-sizing">
+ </section>
+ <section>
+ <div class="center-grid">
+ <div class="div-sizing">
<h1>What is simpliCity?</h1>
<p>simpliCity is a sandboxing game about building a city without all those hassle from complicated systems. The main focus of the game is the building aspect.</p>
<p><i>Build a beautiful city with simple building mechanics and simple working system. Expand your city to whatever you want with no limit!</i></p>
<h1>This Game Offers:</h1>
<ul>
- <li>30+ different buildings</li>
- <li>Save & load system</li>
- <li>Simple worker system</li>
- <li>Relaxing feel & atmosphere</li>
- <li>Simple residential system</li>
- <li>Sandbox mode if you want no challanges at all</li>
+ <li>30+ different buildings</li>
+ <li>Save & load system</li>
+ <li>Simple worker system</li>
+ <li>Relaxing feel & atmosphere</li>
+ <li>Simple residential system</li>
+ <li>Sandbox mode if you want no challanges at all</li>
</ul>
<h1>Gameplay</h1>
<p>The gameplay of the game is simple. You start with an empty island in the middle of the ocean. You start building houses, trees, and offices. Residents will come to your city and you can expand the city into whatever you'd like!</p>
<h1>Feedback & Discord</h1>
<p>Have any feedback? Found some bugs? Or do you want to connect with others about this game? If you're interested, you can join our <a class="link" href="https://discord.gg/Mg5WFqrHk3">Discord Server</a>!</p>
- </div>
- </div>
- </section>
- <section class="normal-section">
+ </div>
+ </div>
+ </section>
+ <section class="normal-section">
<div class="center-grid" style="min-height: 0px;">
- <div class="div-sizing">
+ <div class="div-sizing">
<h1>Minimum System Requirements</h1>
<ul>
- <li><b>Operating System:</b> Windows 8+ 64-bit</li>
- <li><b>Processor:</b> Intel Dual Core 2GHz</li>
- <li><b>Memory:</b> 2 GB of RAM</li>
- <li><b>Graphics:</b> Intergrated Graphics Card</li>
- <li><b>DirectX:</b> Version 11</li>
- <li><b>Storage:</b> 512 MB available space</li>
+ <li><b>Operating System:</b> Windows 8+ 64-bit</li>
+ <li><b>Processor:</b> Intel Dual Core 2GHz</li>
+ <li><b>Memory:</b> 2 GB of RAM</li>
+ <li><b>Graphics:</b> Intergrated Graphics Card</li>
+ <li><b>DirectX:</b> Version 11</li>
+ <li><b>Storage:</b> 512 MB available space</li>
</ul>
- </div>
+ </div>
</div>
- </section>
- <section>
- <div class="center-grid">
- <div class="div-sizing">
+ </section>
+ <section>
+ <div class="center-grid">
+ <div class="div-sizing">
<h1>Downloads</h1>
<div class="flex-container">
- <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy Latest Version on Steam (beta0.2)</a>
- <a class="button" href="#"><i class="fa-solid fa-download"></i> Download Latest Demo (demo0.1)</a>
+ <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy Latest Version on Steam (beta0.2)</a>
+ <a class="button" href="#"><i class="fa-solid fa-download"></i> Download Latest Demo (demo0.1)</a>
</div>
<h1>Older Versions (coming soon)</h1>
<div class="flex-container">
- <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3.1</a>
- <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3</a>
- <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.2</a>
- <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.1</a>
- <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.0</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3.1</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.2</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.1</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.0</a>
</div>
<h1>Changelogs (coming soon)</h1>
<a class="button button-disabled"><i class="fa-solid fa-list"></i> View Changelogs</a>
- </div>
- </div>
- </section>
+ </div>
+ </div>
+ </section>
</body>
</html>
diff --git a/projects/tank-shooter/index.html b/projects/tank-shooter/index.html index 62e2795..a8e2641 100644 --- a/projects/tank-shooter/index.html +++ b/projects/tank-shooter/index.html @@ -2,113 +2,114 @@ <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">
- <title>simpliCity • altaf-creator</title>
- <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script>
+ <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">
+ <title>simpliCity • 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>
- <script defer src="/scripts/video.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>
- <div class="banner-top-bar flex-container">
+ <script defer src="/scripts/onload.js"></script>
+ <script defer src="/scripts/scroll.js"></script>
+ <script defer src="/scripts/video.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>
+ <div class="banner-top-bar flex-container">
<a class="button" href="#"><i class="fa-brands fa-windows"></i> Windows 64-bit</a>
<a class="button" href="#"><i class="fa-brands fa-android"></i> Android</a>
<img class="center-absolute" src="/assets/images/logo/simpliCity.png" alt="">
- </div>
- <section style="border-top: none; overflow: hidden;" id="simpliCity-img">
+ </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>
<div class="banner-bottom-bar flex-container">
- <div class="flex desktop" style="margin-left: 20px;">
+ <div class="flex desktop" style="margin-left: 20px;">
<i class="fa-brands fa-windows" title="Windows 8+ 64-bit"></i>
<i class="fa-brands fa-android" title="Android"></i>
<i class="fa-solid fa-globe" title="Web Browsers (desktop only)"></i>
- </div>
- <div class="flex-right">
+ </div>
+ <div class="flex-right">
<a class="button desktop" href="#"><i class="fa-brands fa-windows"></i> Windows 64-bit</a>
<a class="button" href="#"><i class="fa-brands fa-android"></i> Android</a>
<a class="button" href="#"><i class="fa-solid fa-globe"></i> itch.io (Browser)</a>
- </div>
+ </div>
</div>
- </section>
- <section>
- <div class="center-grid">
- <div class="div-sizing">
+ </section>
+ <section>
+ <div class="center-grid">
+ <div class="div-sizing">
<h1>What is simpliCity?</h1>
<p>simpliCity is a sandboxing game about building a city without all those hassle from complicated systems. The main focus of the game is the building aspect.</p>
<p><i>Build a beautiful city with simple building mechanics and simple working system. Expand your city to whatever you want with no limit!</i></p>
<h1>This Game Offers:</h1>
<ul>
- <li>30+ different buildings</li>
- <li>Save & load system</li>
- <li>Simple worker system</li>
- <li>Relaxing feel & atmosphere</li>
- <li>Simple residential system</li>
- <li>Sandbox mode if you want no challanges at all</li>
+ <li>30+ different buildings</li>
+ <li>Save & load system</li>
+ <li>Simple worker system</li>
+ <li>Relaxing feel & atmosphere</li>
+ <li>Simple residential system</li>
+ <li>Sandbox mode if you want no challanges at all</li>
</ul>
<h1>Gameplay</h1>
<p>The gameplay of the game is simple. You start with an empty island in the middle of the ocean. You start building houses, trees, and offices. Residents will come to your city and you can expand the city into whatever you'd like!</p>
<h1>Feedback & Discord</h1>
<p>Have any feedback? Found some bugs? Or do you want to connect with others about this game? If you're interested, you can join our <a class="link" href="https://discord.gg/Mg5WFqrHk3">Discord Server</a>!</p>
- </div>
- </div>
- </section>
- <section class="normal-section">
+ </div>
+ </div>
+ </section>
+ <section class="normal-section">
<div class="center-grid" style="min-height: 0px;">
- <div class="div-sizing">
+ <div class="div-sizing">
<h1>Minimum System Requirements</h1>
<ul>
- <li><b>Operating System:</b> Windows 8+ 64-bit</li>
- <li><b>Processor:</b> Intel Dual Core 2GHz</li>
- <li><b>Memory:</b> 2 GB of RAM</li>
- <li><b>Graphics:</b> Intergrated Graphics Card</li>
- <li><b>DirectX:</b> Version 11</li>
- <li><b>Storage:</b> 512 MB available space</li>
+ <li><b>Operating System:</b> Windows 8+ 64-bit</li>
+ <li><b>Processor:</b> Intel Dual Core 2GHz</li>
+ <li><b>Memory:</b> 2 GB of RAM</li>
+ <li><b>Graphics:</b> Intergrated Graphics Card</li>
+ <li><b>DirectX:</b> Version 11</li>
+ <li><b>Storage:</b> 512 MB available space</li>
</ul>
- </div>
+ </div>
</div>
- </section>
- <section>
- <div class="center-grid">
- <div class="div-sizing">
+ </section>
+ <section>
+ <div class="center-grid">
+ <div class="div-sizing">
<h1>Downloads</h1>
<div class="flex-container">
- <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy Latest Version on Steam (beta0.2)</a>
- <a class="button" href="#"><i class="fa-solid fa-download"></i> Download Latest Demo (demo0.1)</a>
+ <a class="button" href="https://store.steampowered.com/app/2381230/simpliCity/"><i class="fa-brands fa-steam"></i> Buy Latest Version on Steam (beta0.2)</a>
+ <a class="button" href="#"><i class="fa-solid fa-download"></i> Download Latest Demo (demo0.1)</a>
</div>
<h1>Older Versions (coming soon)</h1>
<div class="flex-container">
- <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3.1</a>
- <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3</a>
- <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.2</a>
- <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.1</a>
- <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.0</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3.1</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.3</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.2</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.1</a>
+ <a class="button button-disabled"><i class="fa-solid fa-download"></i> alpha2.0</a>
</div>
<h1>Changelogs (coming soon)</h1>
<a class="button button-disabled"><i class="fa-solid fa-list"></i> View Changelogs</a>
- </div>
- </div>
- </section>
+ </div>
+ </div>
+ </section>
</body>
</html>
diff --git a/scripts/blog.js b/scripts/blog.js index cef9a28..8f36fdb 100644 --- a/scripts/blog.js +++ b/scripts/blog.js @@ -2,112 +2,115 @@ var evaluatedTags = ""; const clamp = (val, min, max) => Math.min(Math.max(val, min), max) function postList(n = 0) { - fetch("/data/posts.json") - .then((response) => response.json()) - .then((data) => { - n = clamp(n, 0, data.posts.length); - if (n < 1) { - n = data.posts.length; - } - - // i ❤ for loops - for (var i = n - 1; i >= 0; i--) { - console.log("dkfjlaafjsdk" + i) - postCard(data.posts[i]); - } - }); + fetch("/data/posts.json") + .then((response) => response.json()) + .then((data) => { + n = clamp(n, 0, data.posts.length); + if (n < 1) { + n = data.posts.length; + } + + // i ❤ for loops + for (var i = n - 1; i >= 0; i--) { + console.log("dkfjlaafjsdk" + i) + postCard(data.posts[i]); + } + }); } function postCard(post) { - var blogContainer = document.getElementById("blog-container"); - - var title = post.title; - var date = post.date; - var author = post.author; - var tags = post.tags; - var thumbnail = post.thumbnail; - var id = post.id; - - evaluatedTags = ""; - tags.forEach(createTags) - - var template = ` - <div class="card" tabindex="9999"> - <img src="${thumbnail}" - alt=""> - <div> - <div class="flex-container-normal chip-container"> - ${evaluatedTags} - </div> - <a href="/blog/post.html?post=${id}" class="link">${title}</a> - <p>${date}</p> - </div> - </div> - ` - - blogContainer.innerHTML += template; + var blogContainer = document.getElementById("blog-container"); + + var title = post.title; + var date = post.date; + var author = post.author; + var tags = post.tags; + var thumbnail = post.thumbnail; + var id = post.id; + + evaluatedTags = ""; + tags.forEach(createTags) + + var template = ` + <div class="card" tabindex="9999"> + <img src="${thumbnail}" + alt=""> + <div> + <div class="flex-container-normal chip-container"> + ${evaluatedTags} + </div> + <a href="/blog/post.html?post=${id}" class="link">${title}</a> + <p>${date}</p> + </div> + </div> + ` + + blogContainer.innerHTML += template; } function createTags(tag) { - evaluatedTags += `<span class="chip">${tag}</span>` + evaluatedTags += `<span class="chip">${tag}</span>` } function getUrlVars() { - var vars = [], hash; - var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); - for (var i = 0; i < hashes.length; i++) { - hash = hashes[i].split('='); - vars.push(hash[0]); - vars[hash[0]] = hash[1]; - } - return vars; + var vars = [], hash; + var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); + for (var i = 0; i < hashes.length; i++) { + hash = hashes[i].split('='); + vars.push(hash[0]); + vars[hash[0]] = hash[1]; + } + return vars; } // DEPENDENCIES // * /scripts/scroll.js function loadPost(n) { - const md = markdownit({ - 'html': true - }) - - fetch("/data/posts.json") - .then((response) => response.json()) - .then((data) => { - var post = data.posts[n]; - - var banner = document.getElementById("banner"); - var title = document.getElementById("title"); - var date = document.getElementById("date"); - var author = document.getElementById("author"); - var tags = document.getElementById("tag-container"); - var content = document.getElementById("content"); - - banner.src = post.banner; - title.innerHTML = post.title; - date.innerHTML = post.date; - author.innerHTML = post.author; - post.tags.forEach(createTags); - tags.innerHTML = evaluatedTags; - - fetch(post.path) - .then((response) => response.text()) + const md = markdownit({ + 'html': true + }) + + fetch("/data/posts.json") + .then((response) => response.json()) .then((data) => { - data = data.replaceAll("-+-+-+", ` + var post = data.posts[n]; + + var banner = document.getElementById("banner"); + var title = document.getElementById("title"); + var date = document.getElementById("date"); + var author = document.getElementById("author"); + var tags = document.getElementById("tag-container"); + var content = document.getElementById("content"); + + banner.src = post.banner; + title.innerHTML = post.title; + date.innerHTML = post.date; + author.innerHTML = post.author; + post.tags.forEach(createTags); + tags.innerHTML = evaluatedTags; + + document.title = `Blog / ${post.title} • altaf-creator`; + + fetch(post.path) + .then((response) => response.text()) + .then((data) => { + data = data.replaceAll("-+-+-+", ` <section class="normal-section"> <div class="center-grid"> <div class="div-sizing" id="content"> `) - data = data.replaceAll("+-+-+-", ` + data = data.replaceAll("+-+-+-", ` </div> </div> </section> `) - console.log(data); + console.log(data); - var result = md.render(data); - content.innerHTML = result; - }).then(() => addNodes()); - }); + var result = md.render(data); + result = result.replaceAll("<a", `<a class="link"`); + content.innerHTML = result; + }).then(() => addNodes()); + }); } diff --git a/scripts/scroll.js b/scripts/scroll.js index f745db4..ac2be07 100644 --- a/scripts/scroll.js +++ b/scripts/scroll.js @@ -1,6 +1,6 @@ document.addEventListener('scroll', function () {
progress();
- hideSidebar();
+ // hideSidebar();
});
function progress() {
@@ -1,599 +1,644 @@ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,150;0,200;0,400;0,500;0,600;0,700;0,800;1,100;1,150;1,200;1,400;1,500;1,600;1,700;1,800&display=swap');
:root {
- --accent1: #00BA62;
- --accent2: #008C94;
- --accent: #00A37B;
+ --accent1: #00BA62;
+ --accent2: #008C94;
+ --accent: #00A37B;
}
::-moz-selection { /* Code for Firefox */
- color: white;
- background: black;
+ color: white;
+ background: black;
}
::selection {
- color: white;
- background: black;
+ color: white;
+ background: black;
}
html {
- overflow-x: none;
+ overflow-x: none;
}
body {
- margin: 0;
- padding: 0;
- height: 100vh;
- width: 100%;
- font-family: 'JetBrains Mono', monospace;
- word-wrap: break-word;
- text-overflow: ellipsis;
+ 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;
+ font-size: 1.7rem;
+}
+
+h2 {
+ font-size: 1.4rem;
+ font-weight: normal;
}
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;
+ 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;
+ border: none;
+ background-color: black;
+ height: 2px;
+ margin: 20px;
}
pre::before {
- content: "> ";
- color: #00A37B;
+ content: "> ";
+ color: #00A37B;
}
pre {
- font-size: large;
- background-color: #00000010;
- padding: 10px;
- border-radius: 5px;
- color: #444;
- white-space: pre-wrap;
+ font-size: large;
+ background-color: #00000010;
+ padding: 10px;
+ border-radius: 5px;
+ color: #444;
+ white-space: pre-wrap;
+}
+
+li {
+ line-height: 1.6rem;
}
.desktop {
- visibility: visible;
+ visibility: visible;
+}
+
+.mobile {
+ visibility: collapse;
+ display: none;
}
.center {
- text-align: center;
+ text-align: center;
}
.normal-section {
- padding-bottom: 30px;
- min-height: 0;
- height: fit-content;
+ 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;
+ 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;
+ 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;
+ 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));
+ 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;
+ 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;
+ 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;
+ 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;
+ 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;
+ 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;
}
.node {
- width: 13px;
- height: 13px;
- margin-top: 50px;
- margin-bottom: 50px;
- background-color: #555;
- border-radius: 20px;
- transition: all .3s cubic-bezier(0, .38, .48, 1.35);
+ width: 13px;
+ height: 13px;
+ margin-top: 50px;
+ margin-bottom: 50px;
+ background-color: #555;
+ border-radius: 20px;
+ transition: all .3s cubic-bezier(0, .38, .48, 1.35);
}
@keyframes title {
- from {
- bottom: 30%;
- color: transparent;
- letter-spacing: -10px;
- }
+ from {
+ bottom: 30%;
+ color: transparent;
+ letter-spacing: -10px;
+ }
- to {
- letter-spacing: clamp(10px, -0.875rem + 5vw, 30px);
- color: #FFFFFF5A;
- bottom: 46%;
- }
+ 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;
+ 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;
+ 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));
+ 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%;
+ display: grid;
+ place-items: center;
+ min-height: 100vh;
+ width: 100%;
}
.center-absolute {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
.grid {
- display: grid;
- grid-auto-flow: column;
+ display: grid;
+ grid-auto-flow: column;
}
.big-text {
- font-size: clamp(1rem, -0.875rem + 30vw, 2rem);
- max-width: 80%;
+ 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;
+ 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;
+ 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);
+ color: #00000085;
+ background: linear-gradient(180deg, #00000021 calc(100% - 1px), black 0);
}
.flex {
- flex-grow: 1;
+ flex-grow: 1;
}
.flex-container {
- display: flex;
- flex-direction: row;
- width: 100%;
- flex-wrap: wrap;
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ flex-wrap: wrap;
}
.flex-center {
- flex-direction: column;
- place-items: center;
+ flex-direction: column;
+ place-items: center;
}
.flex-center-content {
- place-content: center;
+ place-content: center;
}
.flex-container-normal {
- display: flex;
- width: 100%;
- flex-wrap: wrap;
+ display: flex;
+ width: 100%;
+ flex-wrap: wrap;
}
.flex-container-column {
- flex-direction: column;
- height: 100%;
+ flex-direction: column;
+ height: 100%;
}
.flex-right {
- display: flex;
- flex-direction: row;
- justify-content: right;
+ display: flex;
+ flex-direction: row;
+ justify-content: right;
}
.chip-container {
- margin-left: -5px;
+ margin-left: -5px;
}
.chip {
- background-image: linear-gradient(45deg, var(--accent1), var(--accent2));
- padding: 7px;
- display: block;
- color: white;
- margin-inline: 5px;
- box-sizing: border-box;
+ background-image: linear-gradient(45deg, var(--accent1), var(--accent2));
+ padding: 7px;
+ display: block;
+ color: white;
+ margin-inline: 5px;
+ box-sizing: border-box;
}
.item-left {
- place-self: start;
+ place-self: start;
}
.item-center {
- place-self: center;
+ place-self: center;
}
.full-img-card {
- background-color: var(--accent);
- margin: 5px;
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center;
+ 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;
+ 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;
+ 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;
+ 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;
+ 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;
+ 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);
+ background: linear-gradient(180deg, transparent calc(100% - 2px), white 0);
}
.banner-bottom-bar {
- height: auto;
- width: 100%;
- background-color: #0008;
- backdrop-filter: blur(10px);
- position: absolute;
- bottom: 0;
- left: 0;
- z-index: 4;
- align-items: center;
- color: white;
+ height: auto;
+ width: 100%;
+ background-color: #0008;
+ backdrop-filter: blur(10px);
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ z-index: 4;
+ align-items: center;
+ color: white;
}
.banner-top-bar > img {
- height: 40px;
+ height: 40px;
}
.banner-bottom-bar > i {
- font-size: 1.1rem;
- display: inline-block;
+ font-size: 1.1rem;
+ display: inline-block;
}
.banner-top-bar {
- position: fixed;
- z-index: 3;
- height: 69px;
- width: 100%;
- background-color: #0008;
- backdrop-filter: blur(10px);
- top: 0;
- left: 70px;
- color: white;
- box-sizing: border-box;
- align-content: center;
+ position: fixed;
+ z-index: 3;
+ height: 69px;
+ width: 100%;
+ background-color: #0008;
+ backdrop-filter: blur(10px);
+ top: 0;
+ left: 70px;
+ color: white;
+ box-sizing: border-box;
+ align-content: center;
}
.banner-video {
- position: absolute;
- z-index: 4;
- top: 0;
- left: 0;
- min-width: calc(100vw - 70px);
- min-height: 100%;
- width: calc(100vw - 70px);
- height: auto;
- background-size: cover;
- overflow: hidden;
- object-fit: cover;
- opacity: 0;
- transition: all .5s;
- visibility: hidden;
+ position: absolute;
+ z-index: 4;
+ top: 0;
+ left: 0;
+ min-width: calc(100vw - 70px);
+ min-height: 100%;
+ width: calc(100vw - 70px);
+ height: auto;
+ background-size: cover;
+ overflow: hidden;
+ object-fit: cover;
+ opacity: 0;
+ transition: all .5s;
+ visibility: hidden;
}
.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;
+ 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;
+ box-shadow: rgba(0, 0, 0, 0.15) 0 0 15px 4px;
}
.card > * {
- flex: 1 1;
- width: 50%;
+ flex: 1 1;
+ width: 50%;
}
.card > div {
- position: relative;
- padding: 15px;
+ position: relative;
+ padding: 15px;
}
.card > div > .link {
- font-size: 1.5rem;
- font-weight: 600;
+ font-size: 1.5rem;
+ font-weight: 600;
}
.card > div > .button {
- position: absolute;
- bottom: 15px;
- right: 15px;
+ position: absolute;
+ bottom: 15px;
+ right: 15px;
}
.card > div > .flex-container-normal {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
.card > img {
- object-fit: cover;
+ object-fit: cover;
}
.gallery-card {
- flex: 1 0 400px;
- height: 300px;
+ flex: 1 0 400px;
+ height: 300px;
}
.gradient-overlay {
- width: 100%;
- height: 100%;
- background: linear-gradient(5deg, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 70%);
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(5deg, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 70%);
}
.gradient-overlay:hover {
- background: linear-gradient(5deg, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0) 80%);
+ background: linear-gradient(5deg, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0) 80%);
}
.fill-div {
- display: block;
+ display: block;
}
.button {
- display: inline-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;
- align-content: center;
+ display: inline-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;
+ align-content: center;
}
.button:hover {
- background-color: var(--accent2);
+ 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;
+ 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;
+ box-shadow: inset white 0 0 0 2px, rgba(0, 0, 0, 0.4) 0 0 12px 1px;
}
.button-social {
- font-size: 1.3rem;
- text-align: center;
- display: inline-block;
- width: 1.5rem;
- height: 1.5rem;
+ font-size: 1.3rem;
+ text-align: center;
+ display: inline-block;
+ width: 1.5rem;
+ height: 1.5rem;
+ margin: 0;
+}
+
+.container-social {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 15px;
+ min-height: 0;
}
.banner-shadow {
- filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.4));
+ filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.4));
}
.button-disabled, .button-disabled:hover, .button-disabled:active, .button-disabled:focus {
- cursor: not-allowed;
- opacity: .5;
- background-color: var(--accent1);
- box-shadow: none !important;
+ cursor: not-allowed;
+ opacity: .5;
+ background-color: var(--accent1);
+ box-shadow: none !important;
}
.banner {
- max-width: 100%;
- height: 500px;
- object-fit: cover;
- width: 100%;
- box-sizing: border-box;
+ max-width: 100%;
+ height: 500px;
+ object-fit: cover;
+ width: 100%;
+ box-sizing: border-box;
}
#simpliCity-img {
- z-index: 4;
- background-image: url(/assets/images/game-hero/simpliCity.png);
- background-size: cover;
- background-position: center;
+ z-index: 4;
+ background-image: url(/assets/images/game-hero/simpliCity.png);
+ background-size: cover;
+ background-position: center;
}
#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;
+ 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);
+ 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);
+ color: #ffffff79;
+ background: linear-gradient(180deg, transparent calc(100% - 1px), #ffffff79 0);
}
@media only screen and (max-width: 600px) {
- .desktop {
- visibility: collapse;
- display: none;
- }
-
- .flex {
- flex-direction: column;
- }
-
- .card {
- flex-direction: column;
- height: 400px;
- }
-
- .card > * {
- width: 100%;
- height: 50%;
- box-sizing: border-box;
- }
-
- section {
- padding-inline: 10px;
- }
-
- .gallery-card {
- flex: 1 0 300px;
- }
-
- .banner-top-bar {
- left: 0;
- }
+ .desktop {
+ visibility: collapse;
+ display: none;
+ }
+
+
+ .mobile {
+ visibility: visible;
+ display: inherit;
+ }
+
+ .flex {
+ flex-direction: column;
+ }
+
+ .card {
+ flex-direction: column;
+ height: 400px;
+ }
+
+ .card > * {
+ width: 100%;
+ height: 50%;
+ box-sizing: border-box;
+ }
+
+ section {
+ padding-inline: 10px;
+ margin-left: 0;
+ }
+
+ .gallery-card {
+ flex: 1 0 300px;
+ }
+
+ .banner-top-bar {
+ left: 0;
+ }
+
+ .sidebar {
+ left: -80px;
+ }
+
+ .sidebar-progress-container {
+ left: -11px;
+ }
+
+ .home-title {
+ width: 100%;
+ }
+
+ .banner-video {
+ width: 100%;
+ }
}
|