diff options
| author | altaf-creator <dev@altafcreator.com> | 2026-06-26 12:06:38 +0800 |
|---|---|---|
| committer | altaf-creator <dev@altafcreator.com> | 2026-06-26 12:06:38 +0800 |
| commit | 3abcae19fefd11bbfba6cbf696b342ea72da6992 (patch) | |
| tree | 37fe730ff6b1475ea24eb0f04df200ef923461c7 /www | |
| parent | 1b14996290f228a329d83c164e50c27364cc0a22 (diff) | |
Diffstat (limited to 'www')
25 files changed, 1006 insertions, 194 deletions
diff --git a/www/209.html b/www/209.html index 0644f4e..9236e8f 100644 --- a/www/209.html +++ b/www/209.html @@ -35,7 +35,7 @@ <section style="border-top: none"> <div class="center-grid"> <div class="div-sizing"> - <span class="big-text">HTTP 209 — Under Construction</span> + <span class="big-text">HTTP 209 – Under Construction</span> <p>Yes. This error is made up. You're not lost; this is going to be a real page, it just doesn't exist yet.</p> <p>Sorry. Come back soon!</p> <a href="/" class="link" style="margin-top: 10px; display: inline-block;">Go back to Root →</a> diff --git a/www/500.html b/www/500.html new file mode 100644 index 0000000..4b11e86 --- /dev/null +++ b/www/500.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="/style.css"> + <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> + <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> + <link rel="me" href="https://mastodon.gamedev.place/@altaf"> + <title>404 • This is altaf-creator</title> + <link rel="stylesheet" href="/packages/fontawesome-free-6.5.2-web/css/all.css"> +</head> + +<body onload="addNodes()"> + <script defer src="/scripts/onload.js"></script> + <script defer src="/scripts/scroll.js"></script> + <div class="floating-nav-container"> + <div class="floating-nav"> + <a href="/" class="mobile"><img src="/assets/images/hero/logo.png" alt="" class="sidebar-img mobile" style="margin-top: 0; margin-left: -20px;"></a> + <a href="/about/" class="link">About Me</a> + <a href="/projects/" class="link">Projects</a> + <a href="/blog/" class="link">Library</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"> + <div class="center-grid"> + <div class="div-sizing"> + <span class="big-text">HTTP 500 – Internal Server Error</span> + <p>The webpage is currently unavailable. This is our fault. Sorry! Come back soon.</p> + <a href="/" class="link" style="margin-top: 10px; display: inline-block;">Go back to Root →</a> + </div> + </div> + </section> +</body> + +</html> diff --git a/www/about/index.html b/www/about/index.html index 039b31b..5eb2362 100644 --- a/www/about/index.html +++ b/www/about/index.html @@ -85,164 +85,277 @@ <section>
<div class="center-grid">
<div class="div-sizing">
- <h1>Passion</h1>
- <p>Under construction.</p>
+ <div class="timeline timeline-before">
+ <div class="timeline-item shadow-filter timeline-highlight">
+ <div>
+ <p>Since little, I've always liked making things, from making things with cardboard, to tinkering with computers and electronics. Even making ROBLOX games!</p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter timeline-highlight">
+ <div>
+ <p>Around the age of 10-12, I've started learning programming more seriously. I started off with game devleopment and web development, and also did some desktop programming.</p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter">
+ <div>
+ <p>At the same time, I also explored other creative media such as videography and others. Programming still remained as my main thing.</p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter">
+ <div>
+ <div class="flex-container horizontal-scroll carousel-container" style="height: 200px;">
+ <img src="/assets/images/game-hero/space_hero.png" alt="Space Shooter Game. ">
+ <img src="/assets/images/game-hero/ball_screenshot.png" alt="">
+ <img src="/assets/images/game-hero/cargame_screenshot.jpg" alt="">
+ <img src="/assets/images/game-hero/duck_screenshot.png" alt="">
+ </div>
+ <p class="half-opacity-text">During these times, I learnt and experimented with Unity game development and web development mostly.</p>
+ </div>
+ </div>
+ </div>
</div>
</div>
</section>
<section>
<div class="center-grid">
<div class="div-sizing">
- <h1>Community and Events</h1>
- <h2>Infocomm (Media Creation) CCA Vice President</h2>
- <h2>Tinkertanker Internship</h2>
+ <div class="timeline">
+ <div class="timeline-milestone">
+ <h1 class="colored-text">2022</h1>
+ <span class="timeline-milestone-left">Middle School</span>
+ <span class="timeline-milestone-right">Indonesia</span>
+ </div>
+ <div class="timeline-item shadow-filter">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-code"></i> Project</span>
+ <h2>Tank Shooter</h2>
+ <p>Created and published my first major game project. A 2D pixel art arcade shooter game.</p>
+ <p><a class="link" href="https://altaf-creator.itch.io/tank-shooter"><i class="fa-brands fa-itch-io"></i> / Tank Shooter →</a></p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-code"></i> Project</span>
+ <h2>simpliCity</h2>
+ <p>The original Unity project for simpliCity, "Sandbox Game", was created. This is a major project that I'm still working on!</p>
+ <p><a class="link" href="/projects/simpliCity/">View simpliCity →</a></p>
+ </div>
+ </div>
+ <div class="timeline-milestone">
+ <h1 class="colored-text">2023</h1>
+ <span class="timeline-milestone-left">Middle School</span>
+ <span class="timeline-milestone-right">Indonesia</span>
+ </div>
+ <div class="timeline-item shadow-filter">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>
+ <h2>Alarm (Al-Azhar Rawamangun) Robotics Competition</h2>
+ <p><b>1st place, Team</b></p>
+ <p>My first major robotics competition. Our team of 3 paritcipated in the creative category. A metropolitan-wide private competition.</p>
+ <p><a class="link" href="/event/alarm_id/">Read more →</a></p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>
+ <h2>ASEAN Robotics Day</h2>
+ <p><b>4th place, Team</b></p>
+ <p>Created a new robot with the theme of environmental sustainability. Our team of 5 participated in the creative category. A public nation-wide and theoretically ASEAN region-wide competition.</p>
+ <p><a class="link" href="/event/aseanrd_id/">Read more →</a></p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>
+ <h2>Trans Studio Bandung Robotics Competition</h2>
+ <p><b>1st place, Team</b></p>
+ <p>Our team of 3 refined our previous robot for the creative category. A pretty major public nation-wide competition.</p>
+ <p><a class="link" href="/event/tsb_id/">Read more →</a></p>
+ </div>
+ </div>
+ <div class="timeline-milestone">
+ <h1 class="colored-text">2024</h1>
+ <span class="timeline-milestone-left">Middle School</span>
+ <span class="timeline-milestone-right">Indonesia</span>
+ </div>
+ <div class="timeline-item shadow-filter timeline-highlight">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-graduation-cap"></i> Opportunity</span>
+ <h2>MOE Singapore ASEAN Scholarship for Indonesia</h2>
+ <p>I've been granted the opportunity to study in Singapore independently for my Upper Secondary to Junior College years from this scholarship.</p>
+ </div>
+ </div>
+ <div class="timeline-milestone">
+ <h1 class="colored-text">2025</h1>
+ <span class="timeline-milestone-left">Secondary 3</span>
+ <span class="timeline-milestone-right">Singapore</span>
+ </div>
+ <div class="timeline-item shadow-filter timeline-highlight">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-people-group"></i> Leadership</span>
+ <h2>CCA Vice President for Infocomm (Media Creation) Club</h2>
+ <p>Became one of the presidents for Ngee Ann Secondary School's Infocomm (Media Creation) Club CCA. (Achievements)</p>
+ <p><a class="link" href="/event/infocomm/">Read more →</a></p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter timeline-highlight">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>
+ <h2>Yellow Ribbon Arts Competition</h2>
+ <p><b>Top Winner</b></p>
+ <p>Participated in my first ever videography competition. This competition is part of Yellow Ribbon Arts Festival 2025 hosted by Yellow Ribbon Singapore.</p>
+ <p><a class="link" href="/video/stringsoffreedom/">Watch my short film →</a></p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-people-group"></i> Service</span>
+ <h2>Class VIA Leader Committe</h2>
+ <p>My form class organised a beach clean-up VIA project, where I helped out organising and creating a video of it.</p>
+ <p><a class="link" href="/video/s3via/">Watch our video →</a></p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter timeline-highlight">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>
+ <h2>National Youth Tech Championship</h2>
+ <p><b>Champion, Team</b></p>
+ <p>Ngee Ann's team of 4 won the 1st place in NYTC in 2025, the premier tech and robotics competition hosted by IMDA. Featured in The Straits Times.</p>
+ <p><a class="link" href="/event/nytc/">Read more →</a></p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-people-group"></i> Service</span>
+ <h2>Infocomm CCA VIA at Tampines East CC</h2>
+ <p>Every year, Ngee Ann's Infocomm Club does VIA projects. This year, the CCA collaborated with People's Association in Tampines East to teach elderly residents videography and editing.</p>
+ <p><a class="link" href="/event/infocomm/">Read more →</a></p>
+ </div>
+ </div>
+ <!--
+ <div class="timeline-item shadow-filter">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-people-group"></i> Service</span>
+ <h2>Scholar's VIA Project with NTUC Health</h2>
+ <p>Description</p>
+ </div>
+ </div>
+ -->
+ <div class="timeline-item shadow-filter timeline-highlight">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-code"></i> Project</span>
+ <h2>NASA Space Apps Challenge</h2>
+ <b>Global Nominee</b>
+ <p>An international hackathon that I participated in with a couple of friends from my school and Dunman Secondary during our end of year holidays.</p>
+ <p><a class="link" href="/projects/deja/">View our project →</a></p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-people-group"></i> Service</span>
+ <h2>MINDS Charity Carwash Video</h2>
+ <p>Infocomm CCA leaders volunteered to create a promotional video for MINDS Charity Carwash at MINDS Community Hub (Geylang Serai). MINDS is a non-profit social agency serving persons with intellectual disability and their families.</p>
+ <p><a class="link" href="/video/minds/">Watch the video →</a></p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-people-group"></i> Service</span>
+ <h2>Ngee Ann Open House Video</h2>
+ <p>In partnership with the school, Infocomm CCA in collaboration with Photography CCA created an appreciation video for all student helpers at NAS Open House 2025.</p>
+ <p><a class="link" href="/video/openhouse/">Watch our video →</a></p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter timeline-highlight">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-briefcase"></i> Internship</span>
+ <h2>Internship at Tinkertanker</h2>
+ <p>Some of my Computing friends and me was granted an internship opportunity from our school with Tinkertanker Pte Ltd during our end of year holidays. This was my first ever internship. We got the opportunity to create some cool projects while we were there too.</p>
+ <p><a class="link" href="/event/tinkertanker/">Read more →</a></p>
+ </div>
+ </div>
+ <div class="timeline-milestone">
+ <h1 class="colored-text">2026</h1>
+ <span class="timeline-milestone-right">Singapore</span>
+ <span class="timeline-milestone-left">Secondary 4</span>
+ </div>
+ <div class="timeline-item shadow-filter">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-people-group"></i> Service</span>
+ <h2>Secondary 1 Orientation Facilitator</h2>
+ <p>I was offered the opportunity to help out with my school's Secondary 1 orientation as a student facilitator.</p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter timeline-highlight">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>
+ <h2>Ngee Ann Secondary School Founder's Day</h2>
+ <p><b>Recipient of Certificate of Merit for Computing</b></p>
+ <p>The school awards Certificate of Merit to the 2 top-performing students of a subject.</p>
+ <p><a class="link" href="/event/foundersday/">Read more →</a></p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter timeline-highlight">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>
+ <h2>Ngee Ann Secondary School Founder's Day</h2>
+ <p><b>Infocomm CCA as Recipient of Certificate of Commendation for Outstanding Community Service</b></p>
+ <p>The school awards this certificate for students and student groups that has shown commitment in service and has brought real impacts, with the goal of cultivating value creators of the community.</p>
+ <p><a class="link" href="/event/foundersday/">Read more →</a></p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>
+ <h2>Temasek Engineering Olympiad</h2>
+ <p><b>Silver Medal</b></p>
+ <p>A 3-day engineering and electronics workshop and competition hosted by Temasek Polytechnic School of Engineering.</p>
+ <p><a class="link" href="/event/temasekeng/">Read more →</a></p>
+ </div>
+ </div>
+ <!-- bebras? -->
+ <div class="timeline-item shadow-filter timeline-highlight">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>
+ <h2>National Olympiad of Informatics 2026 (and 2025)</h2>
+ <p><b>Bronze Medal</b></p>
+ <p>An algorithmic problem-solving contest open to secondary and junior college students in Singapore. I participated in 2025 and 2026, and achieved the bronze medal this year.</p>
+ <p><a class="link" href="/event/noi/">Read more →</a></p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter timeline-highlight">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>
+ <h2>National Olympiad of Artificial Intelligence</h2>
+ <p><b>Bronze Medal</b></p>
+ <p>Held by NTU and AI Singapore, NOAI is a relatively new programming contest about AI programming.</p>
+ <p><a class="link" href="/event/noai/">Read more →</a></p>
+ </div>
+ </div>
+ <div class="timeline-item shadow-filter">
+ <div>
+ <span class="half-opacity-text"><i class="fa-solid fa-trophy"></i> Achievement</span>
+ <h2>Copyright School Challenge '25/26</h2>
+ <p><b>2nd place</b></p>
+ <p>A videography competition held by CLASS Singapore with the theme "The Worlds We Make" in aligment with AFCC 2026.</p>
+ <p><a class="link" href="/video/paperverse/">Watch my submission →</a></p>
+ </div>
+ </div>
+ </div>
</div>
</div>
</section>
<section>
<div class="center-grid">
<div class="div-sizing">
- <h1>Academics and Achievements</h1>
- <h2>National Youth Tech Championship 2025</h2>
- <h2>NOI 2026 (and 2025)</h2>
- <h2>NOAI 2026</h2>
- <h2>Temasek Engineering Olympiad 2026</h2>
- <h2>Trans Studio Bandung Robotic Competition</h2>
- <h2>Alarm Robotic Competition</h2>
- <h2>ASEAN Robotic Day</h2>
- <h2></h2>
- </div>
- </div>
- </section>
- <!--
- <section style="overflow-x: scroll; padding: 30px;" class="flex-container flex-container-column">
- <div class="shadow-filter flex flex-container flex-container-column">
- <div id="about-skills-container" class="flex">
- <!- -
- <div id="a">
- <div id="aa" class="flex-box center-grid" style="min-height: 100%;"><h1 style="font-size: 2.5rem; line-height: 1rem; margin: 0; font-weight: 400;">Skills</h1></div>
- <div id="ab" class="flex-box"></div>
- <div id="ac" class="flex-box center-grid" style="min-height: 100%;"><a class="button" href="">Hire me!</a></div>
- <div id="ad" class="flex-box"></div>
- </div>
- <div id="b" class="flex-box">
- <h1>Godot 4 Programmer</h1>
- <progress max="10" value="7" class="prog"></progress>
- <span class="half-opacity-text">Intermediate</span>
- <p>GDScript</p>
- <img src="/assets/images/skills/godot.png" alt="" class="bento-img-lr">
- <i class="fa-solid fa-code bento-icon-lr"></i>
- </div>
- <div id="c" class="flex-box"><img src="/assets/images/skills/godot_nvim.png" alt="" class="bento-img-full"></div>
- <div id="d" class="flex-box"><h1>Game Design</h1></div>
- <div id="e" class="flex-box"><h1>2D / 3D Artist</h1></div>
- <div id="f" class="flex-box"></div>
- <div id="g" class="flex-box"></div>
- <div id="h" class="flex-box"><h1>Programmer</h1></div>
- </div>- ->
- <div id="a" class="flex-box center-grid" style="min-height: 100%;"><h1 style="position: absolute; font-size: 2.5rem; line-height: 1rem; margin: 0; font-weight: 400;">Skills</h1></div>
- <div id="b" class="flex-box flex-center-content center">
- <a class="button" href="/freelancing/" style="display: inline;">Hire me!</a>
- <a class="button button-alt" href="/projects/" style="display: inline;">Explore my Projects</a>
- </div>
- <div id="c" class="flex-box"></div>
- <div id="d" class="flex-box"></div>
- <div id="e" class="flex-box">
- </div>
- <div id="f" class="flex-box"></div>
- <div id="g" class="flex-box">
- </div>
- <div id="h" class="flex-box"></div>
- <div id="j" class="flex-box">
- </div>
- <div id="k" class="flex-box">
- </div>
- <div id="l" class="flex-box">
- </div>
- <div id="m" class="flex-box"></div>
- <div id="n" class="flex-box"></div>
- <div id="o" class="flex-box"></div>
- <div id="p" class="flex-box">
- </div>
- <div id="q" class="flex-box">
- </div>
- <div id="r" class="flex-box">
- </div>
- <div id="s" class="flex-box"></div>
- <div id="t" class="flex-box">
- </div>
- </div>
- </div>
- </section>
- -->
- <!--
- <section>
- <div class="flex-boxes-container">
- <div class="shadow-filter">
- <div class="flex-box">
- <h1>Skills</h1>
- </div>
- </div>
- <div class="shadow-filter">
- <div class="flex-box">
- <h2>Game Development</h2>
- <ul>
- <li><span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>
- Godot 4 Programmer (GDScript)</li>
- <li><span class="half-opacity-text">[</span>🟩🟩🟩⬛⬛<span class="half-opacity-text">]</span>
- Game Designer</li>
- <li><span class="half-opacity-text">[</span>🟩🟩⬛⬛⬛<span class="half-opacity-text">]</span>
- 2D / 3D Artist</li>
- </ul>
- <h2>Front-end Web Developer</h2>
- <ul>
- <li>
- <span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>
- </li>
- </ul>
- </div>
- </div>
- <div class="shadow-filter">
- <div class="flex-box">
- <h2>Game Development</h2>
- <ul>
- <li><span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>
- Godot 4 Programmer (GDScript)</li>
- <li><span class="half-opacity-text">[</span>🟩🟩🟩⬛⬛<span class="half-opacity-text">]</span>
- Game Designer</li>
- <li><span class="half-opacity-text">[</span>🟩🟩⬛⬛⬛<span class="half-opacity-text">]</span>
- 2D / 3D Artist</li>
- </ul>
- <h2>Front-end Web Developer</h2>
- <ul>
- <li>
- <span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>
- </li>
- </ul>
- </div>
- </div>
- <div class="shadow-filter">
- <div class="flex-box">
- <h2>Game Development</h2>
- <ul>
- <li><span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>
- Godot 4 Programmer (GDScript)</li>
- <li><span class="half-opacity-text">[</span>🟩🟩🟩⬛⬛<span class="half-opacity-text">]</span>
- Game Designer</li>
- <li><span class="half-opacity-text">[</span>🟩🟩⬛⬛⬛<span class="half-opacity-text">]</span>
- 2D / 3D Artist</li>
- </ul>
- <h2>Front-end Web Developer</h2>
- <ul>
- <li>
- <span class="half-opacity-text">[</span>🟩🟩🟩🟩⬛<span class="half-opacity-text">]</span>
- </li>
- </ul>
+ <div class="timeline timeline-future">
+ <div class="timeline-milestone">
+ <h1 class="colored-text">Future?</h1>
+ </div>
</div>
</div>
</div>
</section>
- --->
</body>
</html>
diff --git a/www/assets/images/education/events/ai_jupyter.png b/www/assets/images/education/events/ai_jupyter.png Binary files differnew file mode 100644 index 0000000..94d9465 --- /dev/null +++ b/www/assets/images/education/events/ai_jupyter.png diff --git a/www/assets/images/education/events/av.jpg b/www/assets/images/education/events/av.jpg Binary files differnew file mode 100644 index 0000000..18397a3 --- /dev/null +++ b/www/assets/images/education/events/av.jpg diff --git a/www/assets/images/game-hero/deja_screenshot.png b/www/assets/images/game-hero/deja_screenshot.png Binary files differnew file mode 100644 index 0000000..609643c --- /dev/null +++ b/www/assets/images/game-hero/deja_screenshot.png diff --git a/www/assets/images/hero/altaf.png b/www/assets/images/hero/altaf.png Binary files differdeleted file mode 100644 index ff2ce4b..0000000 --- a/www/assets/images/hero/altaf.png +++ /dev/null diff --git a/www/assets/images/hero/logo.svg b/www/assets/images/hero/logo.svg new file mode 100644 index 0000000..632c0aa --- /dev/null +++ b/www/assets/images/hero/logo.svg @@ -0,0 +1,331 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="1080" + height="1080" + viewBox="0 0 285.74999 285.75" + version="1.1" + id="svg5" + inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)" + sodipodi:docname="altaf-creator Logo.svg" + inkscape:export-filename="altaf-creator Logo.png" + inkscape:export-xdpi="96" + inkscape:export-ydpi="96" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <sodipodi:namedview + id="namedview7" + pagecolor="#ffffff" + bordercolor="#999999" + borderopacity="1" + inkscape:showpageshadow="0" + inkscape:pageopacity="0" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" + inkscape:document-units="mm" + showgrid="false" + inkscape:zoom="0.5" + inkscape:cx="163" + inkscape:cy="600" + inkscape:window-width="1920" + inkscape:window-height="1009" + inkscape:window-x="-8" + inkscape:window-y="-8" + inkscape:window-maximized="1" + inkscape:current-layer="layer1" /> + <defs + id="defs2"> + <inkscape:path-effect + effect="fillet_chamfer" + id="path-effect5846" + is_visible="true" + lpeversion="1" + nodesatellites_param="F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1" + unit="px" + method="auto" + mode="F" + radius="20" + chamfer_steps="1" + flexible="false" + use_knot_distance="true" + apply_no_radius="true" + apply_with_radius="true" + only_selected="false" + hide_knots="false" /> + <inkscape:path-effect + effect="fillet_chamfer" + id="path-effect5842" + is_visible="true" + lpeversion="1" + nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1" + unit="px" + method="auto" + mode="F" + radius="20" + chamfer_steps="1" + flexible="false" + use_knot_distance="true" + apply_no_radius="true" + apply_with_radius="true" + only_selected="false" + hide_knots="false" /> + <inkscape:path-effect + effect="fillet_chamfer" + id="path-effect5826" + is_visible="true" + lpeversion="1" + nodesatellites_param="F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1" + unit="px" + method="auto" + mode="F" + radius="20" + chamfer_steps="1" + flexible="false" + use_knot_distance="true" + apply_no_radius="true" + apply_with_radius="true" + only_selected="false" + hide_knots="false" /> + <inkscape:path-effect + effect="fillet_chamfer" + id="path-effect5818" + is_visible="true" + lpeversion="1" + nodesatellites_param="F,0,0,1,0,0,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1" + unit="px" + method="auto" + mode="F" + radius="20" + chamfer_steps="1" + flexible="false" + use_knot_distance="true" + apply_no_radius="true" + apply_with_radius="true" + only_selected="false" + hide_knots="false" /> + <inkscape:path-effect + effect="fillet_chamfer" + id="path-effect5767" + is_visible="true" + lpeversion="1" + nodesatellites_param="F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,0,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1" + unit="px" + method="auto" + mode="F" + radius="20" + chamfer_steps="1" + flexible="false" + use_knot_distance="true" + apply_no_radius="true" + apply_with_radius="true" + only_selected="false" + hide_knots="false" /> + <inkscape:path-effect + effect="fillet_chamfer" + id="path-effect5765" + is_visible="true" + lpeversion="1" + nodesatellites_param="F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,0,0,1" + unit="px" + method="auto" + mode="F" + radius="20" + chamfer_steps="1" + flexible="false" + use_knot_distance="true" + apply_no_radius="true" + apply_with_radius="true" + only_selected="false" + hide_knots="false" /> + <linearGradient + inkscape:collect="always" + id="linearGradient4932"> + <stop + style="stop-color:#d6d6d6;stop-opacity:1;" + offset="0" + id="stop4928" /> + <stop + style="stop-color:#ffffff;stop-opacity:1;" + offset="1" + id="stop4930" /> + </linearGradient> + <linearGradient + inkscape:collect="always" + id="linearGradient4916"> + <stop + style="stop-color:#ffffff;stop-opacity:1;" + offset="0" + id="stop4912" /> + <stop + style="stop-color:#d6d6d6;stop-opacity:1;" + offset="1" + id="stop4914" /> + </linearGradient> + <linearGradient + inkscape:collect="always" + id="linearGradient2362"> + <stop + style="stop-color:#00ba62;stop-opacity:1;" + offset="0" + id="stop2358" /> + <stop + style="stop-color:#008c94;stop-opacity:1;" + offset="1" + id="stop2360" /> + </linearGradient> + <linearGradient + inkscape:collect="always" + xlink:href="#linearGradient2362" + id="linearGradient2364" + x1="0" + y1="285.75" + x2="285.75" + y2="0" + gradientUnits="userSpaceOnUse" /> + <linearGradient + inkscape:collect="always" + xlink:href="#linearGradient4916" + id="linearGradient4918" + x1="203.14496" + y1="219.38403" + x2="131.17841" + y2="53.705994" + gradientUnits="userSpaceOnUse" /> + <linearGradient + inkscape:collect="always" + xlink:href="#linearGradient4932" + id="linearGradient4934" + x1="59.211742" + y1="219.38393" + x2="131.17841" + y2="53.705994" + gradientUnits="userSpaceOnUse" /> + <inkscape:path-effect + effect="fillet_chamfer" + id="path-effect5767-3" + is_visible="true" + lpeversion="1" + nodesatellites_param="F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1 @ F,0,0,1,0,5.2916667,0,1" + unit="px" + method="auto" + mode="F" + radius="20" + chamfer_steps="1" + flexible="false" + use_knot_distance="true" + apply_no_radius="true" + apply_with_radius="true" + only_selected="false" + hide_knots="false" /> + <linearGradient + inkscape:collect="always" + xlink:href="#linearGradient4932" + id="linearGradient5820" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0,-0.48329724,-0.37696096,0,285.05174,202.93252)" + x1="131.17839" + y1="53.706009" + x2="59.211727" + y2="219.38393" /> + <linearGradient + inkscape:collect="always" + xlink:href="#linearGradient4932" + id="linearGradient5828" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0,0.48329724,-0.37696096,0,285.05174,72.961237)" + x1="62.496445" + y1="219.38391" + x2="134.46309" + y2="53.705986" /> + <linearGradient + inkscape:collect="always" + xlink:href="#linearGradient4932" + id="linearGradient5848" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0,-0.48329724,-0.37696096,0,285.05174,202.93252)" + x1="131.17839" + y1="53.706009" + x2="59.211727" + y2="219.38393" /> + <linearGradient + inkscape:collect="always" + xlink:href="#linearGradient4932" + id="linearGradient5850" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0,0.48329724,-0.37696096,0,285.05174,72.961237)" + x1="62.496445" + y1="219.38391" + x2="134.46309" + y2="53.705986" /> + </defs> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1"> + <rect + style="fill:url(#linearGradient2364);fill-opacity:1;stroke-width:4.99999;stroke-linecap:round;stroke-linejoin:round" + id="rect1516" + width="285.75" + height="285.75" + x="0" + y="0" + sodipodi:insensitive="true" /> + <g + id="g5771" + transform="matrix(0.76687401,0,0,0.76687401,42.290815,38.162268)"> + <path + id="path4903" + style="fill:url(#linearGradient4918);stroke-width:4.57214;stroke-linecap:round;stroke-linejoin:round" + d="m 117.14103,58.559319 31.26555,71.978351 a 3.4574342,3.4574342 123.36158 0 1 -3.18337,4.83489 l -17.40624,-0.0614 a 8.0367077,8.0367077 146.83965 0 0 -7.39975,4.83495 l -8.71734,20.07029 a 3.4708703,3.4708703 56.73863 0 0 3.18355,4.85361 h 43.23146 a 8.0679283,8.0679283 33.260434 0 1 7.39995,4.85354 l 19.37632,44.60692 a 8.0679283,8.0679283 33.260434 0 0 7.39995,4.85354 h 21.70771 a 3.4707573,3.4707573 123.26051 0 0 3.1834,-4.85355 L 147.32382,53.705766 h -26.99938 a 3.4707626,3.4707626 123.26055 0 0 -3.18341,4.853553 z" + inkscape:path-effect="#path-effect5765" + inkscape:original-d="m 115.03277,53.705766 35.48207,81.685454 -27.9895,-0.0987 -12.93358,29.77751 h 53.8148 l 23.59288,54.314 h 32.29105 L 147.32382,53.705766 Z" /> + <path + id="rect4789" + style="fill:url(#linearGradient4934);stroke-width:4.77094;stroke-linecap:round;stroke-linejoin:round" + d="m 120.32446,53.705994 26.99956,0 -69.858398,160.824386 a 8.0679101,8.0679101 146.73951 0 1 -7.399936,4.85355 l -21.707891,0 a 3.4707547,3.4707547 56.739506 0 1 -3.183398,-4.85355 L 112.92452,58.559543 a 8.0679099,8.0679099 146.73951 0 1 7.39994,-4.853549 z" + sodipodi:nodetypes="ccccc" + inkscape:path-effect="#path-effect5767" + inkscape:original-d="m 115.03279,53.705994 h 32.29123 L 75.357353,219.38393 H 43.066128 Z" /> + </g> + <g + id="g5832" + transform="matrix(0.86465773,0,0,0.86465773,33.748785,23.598167)"> + <path + id="path5814" + style="fill:url(#linearGradient5820);stroke-width:2.03638;stroke-linecap:round;stroke-linejoin:round" + d="m 264.80668,147.33751 v -13.4896 a 3.1099523,3.1099523 30.443074 0 0 -4.62309,-2.71703 l -53.20793,29.63201 a 9.0039117,9.0039117 120.44307 0 0 -4.62309,7.86631 v 8.19792 a 3.1099528,3.1099528 30.443078 0 0 4.62309,2.71703 z" + sodipodi:nodetypes="ccccc" + inkscape:path-effect="#path-effect5818" + inkscape:original-d="m 264.80668,147.33751 v -18.78127 l -62.45411,34.78129 v 18.78126 z" /> + <path + id="path5822" + style="fill:url(#linearGradient5828);stroke-width:2.03638;stroke-linecap:round;stroke-linejoin:round" + d="m 264.80668,133.84791 0,13.4896 -57.83102,-32.20664 a 9.0039105,9.0039105 59.556922 0 1 -4.62309,-7.86631 v -8.197926 a 3.1099531,3.1099531 149.55692 0 1 4.62309,-2.717026 l 53.20793,29.631992 a 9.0039096,9.0039096 59.55692 0 1 4.62309,7.86631 z" + sodipodi:nodetypes="ccccc" + inkscape:path-effect="#path-effect5826" + inkscape:original-d="m 264.80668,128.55624 v 18.78127 L 202.35257,112.55623 V 93.774967 Z" /> + </g> + <g + id="g5838" + transform="matrix(-0.86465773,0,0,0.86465773,252.37536,23.598216)"> + <path + id="path5834" + style="fill:url(#linearGradient5848);stroke-width:2.03638;stroke-linecap:round;stroke-linejoin:round" + d="m 264.80668,147.33751 v -13.4896 a 3.1099523,3.1099523 30.443074 0 0 -4.62309,-2.71703 l -53.20793,29.63201 a 9.0039117,9.0039117 120.44307 0 0 -4.62309,7.86631 v 8.19792 a 3.1099528,3.1099528 30.443078 0 0 4.62309,2.71703 z" + sodipodi:nodetypes="ccccc" + inkscape:path-effect="#path-effect5842" + inkscape:original-d="m 264.80668,147.33751 v -18.78127 l -62.45411,34.78129 v 18.78126 z" /> + <path + id="path5836" + style="fill:url(#linearGradient5850);stroke-width:2.03638;stroke-linecap:round;stroke-linejoin:round" + d="m 264.80668,133.84791 0,13.4896 -57.83102,-32.20664 a 9.0039105,9.0039105 59.556922 0 1 -4.62309,-7.86631 v -8.197926 a 3.1099531,3.1099531 149.55692 0 1 4.62309,-2.717026 l 53.20793,29.631992 a 9.0039096,9.0039096 59.55692 0 1 4.62309,7.86631 z" + sodipodi:nodetypes="ccccc" + inkscape:path-effect="#path-effect5846" + inkscape:original-d="m 264.80668,128.55624 v 18.78127 L 202.35257,112.55623 V 93.774967 Z" /> + </g> + </g> +</svg> diff --git a/www/assets/images/logo/deja.png b/www/assets/images/logo/deja.png Binary files differnew file mode 100644 index 0000000..28e9d31 --- /dev/null +++ b/www/assets/images/logo/deja.png diff --git a/www/assets/images/screenshots/.DS_Store b/www/assets/images/screenshots/.DS_Store Binary files differindex 8ac5adc..cfdc9d2 100644 --- a/www/assets/images/screenshots/.DS_Store +++ b/www/assets/images/screenshots/.DS_Store diff --git a/www/assets/images/screenshots/deja/image1.png b/www/assets/images/screenshots/deja/image1.png Binary files differnew file mode 100644 index 0000000..609643c --- /dev/null +++ b/www/assets/images/screenshots/deja/image1.png diff --git a/www/assets/images/screenshots/deja/image2.png b/www/assets/images/screenshots/deja/image2.png Binary files differnew file mode 100644 index 0000000..9f82d2c --- /dev/null +++ b/www/assets/images/screenshots/deja/image2.png diff --git a/www/assets/images/screenshots/deja/image3.png b/www/assets/images/screenshots/deja/image3.png Binary files differnew file mode 100644 index 0000000..c215f0b --- /dev/null +++ b/www/assets/images/screenshots/deja/image3.png diff --git a/www/assets/images/screenshots/deja/image4.png b/www/assets/images/screenshots/deja/image4.png Binary files differnew file mode 100644 index 0000000..d663345 --- /dev/null +++ b/www/assets/images/screenshots/deja/image4.png diff --git a/www/assets/images/screenshots/deja/image5.png b/www/assets/images/screenshots/deja/image5.png Binary files differnew file mode 100644 index 0000000..5d9e57a --- /dev/null +++ b/www/assets/images/screenshots/deja/image5.png diff --git a/www/assets/images/screenshots/deja/image6.png b/www/assets/images/screenshots/deja/image6.png Binary files differnew file mode 100644 index 0000000..9cfe87a --- /dev/null +++ b/www/assets/images/screenshots/deja/image6.png diff --git a/www/assets/images/screenshots/deja/image7.png b/www/assets/images/screenshots/deja/image7.png Binary files differnew file mode 100644 index 0000000..6c03909 --- /dev/null +++ b/www/assets/images/screenshots/deja/image7.png diff --git a/www/blog/index.html b/www/blog/index.html index ac05222..e5c9967 100644 --- a/www/blog/index.html +++ b/www/blog/index.html @@ -34,7 +34,7 @@ <section style="border-top: none;" class="top-section-margin">
<div class="center-grid">
<div class="div-sizing">
- <div class="flex-container flex-container-column flex-center-content" id="blog-container">
+ <div class="flex-container flex-container-column flex-center" id="blog-container">
<span class="heading">(dev)Blog</span>
</div>
</div>
diff --git a/www/codehilite-style.css b/www/codehilite-style.css new file mode 100644 index 0000000..c8a2540 --- /dev/null +++ b/www/codehilite-style.css @@ -0,0 +1,83 @@ +pre { line-height: 125%; } +td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; } +span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; } +td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; } +span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; } +.codehilite .hll { background-color: #ffffcc } +.codehilite .c { color: #8F5902; font-style: italic } /* Comment */ +.codehilite .err { color: #A40000; border: 1px solid #EF2929 } /* Error */ +.codehilite .g { color: #000 } /* Generic */ +.codehilite .k { color: #204A87; font-weight: bold } /* Keyword */ +.codehilite .l { color: #000 } /* Literal */ +.codehilite .n { color: #000 } /* Name */ +.codehilite .o { color: #CE5C00; font-weight: bold } /* Operator */ +.codehilite .x { color: #000 } /* Other */ +.codehilite .p { color: #000; font-weight: bold } /* Punctuation */ +.codehilite .ch { color: #8F5902; font-style: italic } /* Comment.Hashbang */ +.codehilite .cm { color: #8F5902; font-style: italic } /* Comment.Multiline */ +.codehilite .cp { color: #8F5902; font-style: italic } /* Comment.Preproc */ +.codehilite .cpf { color: #8F5902; font-style: italic } /* Comment.PreprocFile */ +.codehilite .c1 { color: #8F5902; font-style: italic } /* Comment.Single */ +.codehilite .cs { color: #8F5902; font-style: italic } /* Comment.Special */ +.codehilite .gd { color: #A40000 } /* Generic.Deleted */ +.codehilite .ge { color: #000; font-style: italic } /* Generic.Emph */ +.codehilite .ges { color: #000; font-weight: bold; font-style: italic } /* Generic.EmphStrong */ +.codehilite .gr { color: #EF2929 } /* Generic.Error */ +.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */ +.codehilite .gi { color: #00A000 } /* Generic.Inserted */ +.codehilite .go { color: #000; font-style: italic } /* Generic.Output */ +.codehilite .gp { color: #8F5902 } /* Generic.Prompt */ +.codehilite .gs { color: #000; font-weight: bold } /* Generic.Strong */ +.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ +.codehilite .gt { color: #A40000; font-weight: bold } /* Generic.Traceback */ +.codehilite .kc { color: #204A87; font-weight: bold } /* Keyword.Constant */ +.codehilite .kd { color: #204A87; font-weight: bold } /* Keyword.Declaration */ +.codehilite .kn { color: #204A87; font-weight: bold } /* Keyword.Namespace */ +.codehilite .kp { color: #204A87; font-weight: bold } /* Keyword.Pseudo */ +.codehilite .kr { color: #204A87; font-weight: bold } /* Keyword.Reserved */ +.codehilite .kt { color: #204A87; font-weight: bold } /* Keyword.Type */ +.codehilite .ld { color: #000 } /* Literal.Date */ +.codehilite .m { color: #0000CF; font-weight: bold } /* Literal.Number */ +.codehilite .s { color: #4E9A06 } /* Literal.String */ +.codehilite .na { color: #C4A000 } /* Name.Attribute */ +.codehilite .nb { color: #204A87 } /* Name.Builtin */ +.codehilite .nc { color: #000 } /* Name.Class */ +.codehilite .no { color: #000 } /* Name.Constant */ +.codehilite .nd { color: #5C35CC; font-weight: bold } /* Name.Decorator */ +.codehilite .ni { color: #CE5C00 } /* Name.Entity */ +.codehilite .ne { color: #C00; font-weight: bold } /* Name.Exception */ +.codehilite .nf { color: #000 } /* Name.Function */ +.codehilite .nl { color: #F57900 } /* Name.Label */ +.codehilite .nn { color: #000 } /* Name.Namespace */ +.codehilite .nx { color: #000 } /* Name.Other */ +.codehilite .py { color: #000 } /* Name.Property */ +.codehilite .nt { color: #204A87; font-weight: bold } /* Name.Tag */ +.codehilite .nv { color: #000 } /* Name.Variable */ +.codehilite .ow { color: #204A87; font-weight: bold } /* Operator.Word */ +.codehilite .pm { color: #000; font-weight: bold } /* Punctuation.Marker */ +.codehilite .w { color: #F8F8F8 } /* Text.Whitespace */ +.codehilite .mb { color: #0000CF; font-weight: bold } /* Literal.Number.Bin */ +.codehilite .mf { color: #0000CF; font-weight: bold } /* Literal.Number.Float */ +.codehilite .mh { color: #0000CF; font-weight: bold } /* Literal.Number.Hex */ +.codehilite .mi { color: #0000CF; font-weight: bold } /* Literal.Number.Integer */ +.codehilite .mo { color: #0000CF; font-weight: bold } /* Literal.Number.Oct */ +.codehilite .sa { color: #4E9A06 } /* Literal.String.Affix */ +.codehilite .sb { color: #4E9A06 } /* Literal.String.Backtick */ +.codehilite .sc { color: #4E9A06 } /* Literal.String.Char */ +.codehilite .dl { color: #4E9A06 } /* Literal.String.Delimiter */ +.codehilite .sd { color: #8F5902; font-style: italic } /* Literal.String.Doc */ +.codehilite .s2 { color: #4E9A06 } /* Literal.String.Double */ +.codehilite .se { color: #4E9A06 } /* Literal.String.Escape */ +.codehilite .sh { color: #4E9A06 } /* Literal.String.Heredoc */ +.codehilite .si { color: #4E9A06 } /* Literal.String.Interpol */ +.codehilite .sx { color: #4E9A06 } /* Literal.String.Other */ +.codehilite .sr { color: #4E9A06 } /* Literal.String.Regex */ +.codehilite .s1 { color: #4E9A06 } /* Literal.String.Single */ +.codehilite .ss { color: #4E9A06 } /* Literal.String.Symbol */ +.codehilite .bp { color: #3465A4 } /* Name.Builtin.Pseudo */ +.codehilite .fm { color: #000 } /* Name.Function.Magic */ +.codehilite .vc { color: #000 } /* Name.Variable.Class */ +.codehilite .vg { color: #000 } /* Name.Variable.Global */ +.codehilite .vi { color: #000 } /* Name.Variable.Instance */ +.codehilite .vm { color: #000 } /* Name.Variable.Magic */ +.codehilite .il { color: #0000CF; font-weight: bold } /* Literal.Number.Integer.Long */ diff --git a/www/index.html b/www/index.html index ce89d90..b76faf4 100644 --- a/www/index.html +++ b/www/index.html @@ -7,7 +7,6 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> - <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"> <link rel="me" href="https://mastodon.gamedev.place/@altaf"> <title>altaf-creator</title> <link rel="stylesheet" href="/packages/fontawesome-free-7.2.0-web/css/all.css"> @@ -70,7 +69,7 @@ <div class="div-sizing" style="height: 100%;"> <div class="flex-container flex-container-column"> <span class="heading">Highlighted Works</span> - <div class="flex-container flex gap" style="min-height: 600px;"> + <div class="flex-container flex-container-dynamic flex gap" style="min-height: 600px;"> <div class="flex full-img-card highlight-card" style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); "> <a href="/projects/simpliCity/" class="fill-div gradient-overlay"> @@ -137,9 +136,9 @@ <span class="heading">Library</span> <p>my (dev)Blog and other things I'd like to share</p> <h1>Blog Posts</h1> - <div class="flex-container flex-center" id="blog-container"> + <div class="flex-container flex-x-center" id="blog-container"> </div> - <div class="flex-container flex-center"> + <div class="flex-container flex-x-center"> <a href="blog/" class="button" style="margin-left: auto; margin-right: auto;">View More</a> </div> <h1>Stuff</h1> diff --git a/www/projects/index.html b/www/projects/index.html index 27c532e..b3cb586 100644 --- a/www/projects/index.html +++ b/www/projects/index.html @@ -62,7 +62,7 @@ <i class="fa-brands fa-git-alt"></i> Source Code for My Projects ↗
</a>
</p>
- <div class="flex-container flex gap" id="top-project-highlight">
+ <div class="flex-container flex-container-dynamic flex gap" id="top-project-highlight">
<div class="flex full-img-card highlight-card top-gallery-card"
style="background-image: url(/assets/images/game-hero/simplicity_screenshot.png); ">
<a href="/projects/simpliCity/" class="fill-div gradient-overlay">
@@ -109,12 +109,12 @@ </a>
<div class="img-card-titlebox">
<span class="img-card-subtitle"><i class="fa-solid fa-briefcase"></i> Internship</span>
- <span class="img-card-title">Internship Projects</span>
+ <span class="img-card-title">Tinkertanker Web Dev</span>
</div>
</div>
<div class="flex full-img-card gallery-card"
- style="background-image: url(/assets/images/game-hero/.png);">
- <a href="https://deja.earth/" class="fill-div gradient-overlay">
+ style="background-image: url(/assets/images/game-hero/deja_screenshot.png);">
+ <a href="./deja/" class="fill-div gradient-overlay">
</a>
<div class="img-card-titlebox">
<span class="img-card-subtitle"><i class="fa-solid fa-people-group"></i> Team</span>
@@ -375,7 +375,7 @@ <img src="/assets/images/video-hero/paperverse.png" alt="">
<a href="/video/paperverse/" class="video-play-cover">⏵</a>
</div>
- <div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content">
+ <div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center">
<a href="/video/paperverse/" class="link monospaced">Paperverse Hub</a>
<span>2026</span>
</div>
@@ -385,7 +385,7 @@ <img src="/assets/images/video-hero/eid2026.png" alt="">
<a href="/video/eid2026" class="video-play-cover">⏵</a>
</div>
- <div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content gap">
+ <div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center gap">
<a href="/video/eid2026/" class="link monospaced">A message for this Eid</a>
<span>2026</span>
</div>
@@ -395,7 +395,7 @@ <img src="/assets/images/video-hero/openhouse.png" alt="">
<a href="/video/openhouse/" class="video-play-cover">⏵</a>
</div>
- <div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content gap">
+ <div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center gap">
<a href="/video/openhouse/" class="link monspaced">Ngee Ann Open House 2025</a>
<span><i class="fa-solid fa-people-group"></i> 2025</span>
</div>
@@ -405,7 +405,7 @@ <img src="/assets/images/video-hero/via3rp.png" alt="">
<a href="/video/s3via/" class="video-play-cover">⏵</a>
</div>
- <div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center-content gap">
+ <div class="video-gallery-card-text flex-container flex-container-normal flex-container-dynamicwrap flex-spacebetween flex-center gap">
<a href="/video/s3via/" class="link monospaced">Secondary 3 VIA Project</a>
<span>2025</span>
</div>
diff --git a/www/scripts/constants.js b/www/scripts/constants.js index b2b7894..1c2812e 100644 --- a/www/scripts/constants.js +++ b/www/scripts/constants.js @@ -1,2 +1,2 @@ -//const API_URL = "https://altafcreator.com/api" -const API_URL = "http://localhost:9091/api" +const API_URL = "https://altafcreator.com/api" +//const API_URL = "http://localhost:9091/api" diff --git a/www/scripts/onload.js b/www/scripts/onload.js index 3bc9cf3..539df36 100644 --- a/www/scripts/onload.js +++ b/www/scripts/onload.js @@ -1,22 +1,35 @@ function addNodes() {
- const collection = document.getElementsByTagName("section");
- const container = document.getElementById("progressContainer");
+ const collection = document.getElementsByTagName("section");
+ const container = document.getElementById("progressContainer");
- for (var i = 0; i < collection.length; i++) {
+ for (var i = 0; i < collection.length; i++) {
+ if (collection.item(i).getAttribute('data-excluded') != null) {
+ continue;
+ }
var node = document.createElement("a");
node.className = "node";
- container.appendChild(node);
+ container.appendChild(node);
if (collection.item(i).getAttribute('id') == null) {
- collection.item(i).setAttribute('id', `section-${i}`);
+ collection.item(i).setAttribute('id', `section-${i}`);
}
node.setAttribute('id', `node-${i}`)
node.href = `#${collection.item(i).getAttribute('id')}`
- }
+ }
+
+ replaceExternalLinks();
+}
+
+function replaceExternalLinks() {
+ for (var links = document.links, i = 0, a; a = links[i]; i++) {
+ if (a.host !== location.host) {
+ a.target = '_blank';
+ }
+ }
}
function blog(n) {
- // addNodes is called in loadPost(n);
- loadPost(n);
+ // addNodes is called in loadPost(n);
+ loadPost(n);
}
function index() {
diff --git a/www/scripts/scroll.js b/www/scripts/scroll.js index d7ab5da..6a61015 100644 --- a/www/scripts/scroll.js +++ b/www/scripts/scroll.js @@ -11,9 +11,13 @@ nodeBigSize = "25px"; nodeDefaultSize = "16px";
function progress() {
- const sections = document.getElementsByTagName("section");
+ const sections = [...document.getElementsByTagName("section")].filter(e => {
+ return e.getAttribute("data-excluded") == null;
+ });
const nodes = document.getElementsByClassName("node");
+ console.log(sections);
+
if (nodes[0]) {
for (var i = 0; i < sections.length; i++) {
if (isInViewport(sections[i])) {
diff --git a/www/style.css b/www/style.css index f454dd9..40d8392 100644 --- a/www/style.css +++ b/www/style.css @@ -30,6 +30,7 @@ --accent1: #00BA62;
--accent2: #008C94;
--accent: #00A37B;
+ --home-title-offset: 20px;
}
::-moz-selection { /* Code for Firefox */
@@ -46,6 +47,10 @@ html { overflow-x: none;
}
+p {
+ line-height: 1.5rem;
+}
+
body {
margin: 0;
padding: 0;
@@ -67,6 +72,11 @@ h2 { font-family: "JetBrains Mono", monospace;
}
+
+h1:target, h2:target, h3:target, h4:target, h5:target, h6:target, p:target {
+ background-color: color-mix(in srgb, var(--accent1) 25%, transparent);
+}
+
section {
padding-inline: 50px;
min-height: 100%;
@@ -82,6 +92,11 @@ section { section:first-of-type {
border-top: none;
+ min-height: calc(100vh - 20px);
+}
+
+section:first-of-type > .center-grid {
+ min-height: calc(100vh - 20px);
}
hr {
@@ -91,18 +106,25 @@ hr { margin: 20px;
}
-pre::before {
+.pre > pre::before {
content: "> ";
color: #00A37B;
}
+.long-code {
+ max-height: 16rem;
+ margin-bottom: 1rem;
+}
+
pre {
font-size: large;
background-color: #00000010;
padding: 10px;
border-radius: 5px;
color: #444;
- white-space: pre-wrap;
+ white-space: pre;
+ margin: 0;
+ overflow: auto;
}
li {
@@ -114,10 +136,6 @@ img { color: #000000AA;
}
-p {
- line-height: 1.5rem;
-}
-
.desktop {
visibility: visible !important;
}
@@ -141,12 +159,12 @@ p { }
.normal-section {
- min-height: 0;
+ min-height: 0 !important;
height: fit-content;
}
.normal-section > .center-grid {
- min-height: 0;
+ min-height: 0 !important;
}
.video-section {
@@ -166,6 +184,7 @@ p { margin-top: 1rem;
margin-bottom: 1rem;
font-family: "JetBrains Mono", monospace;
+ line-height: 3.3rem;
}
.colored-text {
@@ -283,7 +302,7 @@ p { to {
letter-spacing: clamp(10px, -0.875rem + 5vw, 30px);
color: #FFFFFF5A;
- bottom: 46%;
+ bottom: calc(46% + var(--home-title-offset));
}
}
@@ -296,7 +315,7 @@ p { text-align: center;
width: calc(100% - 70px);
line-height: 65%;
- bottom: 46%;
+ bottom: calc(46% + var(--home-title-offset));
z-index: 0;
letter-spacing: clamp(10px, -0.875rem + 5vw, 30px);
animation-name: title;
@@ -312,11 +331,20 @@ p { box-sizing: border-box;
}
+.div-sizing-bare {
+ width: 100%;
+ max-width: 1200px;
+}
+
.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));
max-width: 100%;
}
+.nopath {
+ clip-path: none !important;
+}
+
.center-grid {
display: grid;
place-items: center;
@@ -408,16 +436,15 @@ p { clip-path: polygon(0 10.00px, 10px 10px, 10.00px 0, calc(100% - 10.00px) 0, calc(100% - 10px) 10px, 100% 10.00px, 100% calc(100% - 10.00px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10.00px) 100%, 10.00px 100%, 10px calc(100% - 10px), 0 calc(100% - 10.00px));
}
-.flex-center {
- flex-direction: column;
+.flex-x-center {
place-items: center;
}
-.flex-center-content {
+.flex-center {
place-content: center;
}
-.flex-aligncenter {
+.flex-y-center {
align-items: center;
}
@@ -553,12 +580,12 @@ p { box-sizing: border-box;
}
-.bottom-bar > img {
+.bottom-bar > div > img {
height: 40px;
transition: height .4s;
}
-.bottom-bar > img:hover {
+.bottom-bar > div > img:hover {
height: 45px;
transition: height .4s;
}
@@ -811,6 +838,7 @@ p { z-index: 4;
background-size: cover;
background-position: center;
+ min-height: 100vh !important;
}
.bento-img-lr {
@@ -1148,6 +1176,136 @@ p { margin-top: .9rem;
}
+.timeline {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.timeline::after {
+ content: "";
+ position: absolute;
+ left: 50%;
+ top: 0;
+ bottom: 0;
+ margin-left: -2px;
+ width: 4px;
+ background: linear-gradient(180deg, var(--accent2) 0, var(--accent1) 100%);
+ z-index: -1;
+}
+
+.timeline-before::after {
+ background:
+ repeating-linear-gradient(180deg, white, white 10px, var(--accent2) 10px, var(--accent2) 20px),
+ var(--accent2);
+ background-size: 100% 100px, 100% 100%;
+ background-repeat: no-repeat;
+ mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) calc(100% - 200px), black 100%);
+ -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) calc(100% - 200px), black 100%);
+}
+
+.timeline-before > .timeline-item::after {
+ background-color: #7ec5c9;
+}
+
+.timeline-before > .timeline-highlight::after {
+ background-color: white;
+ border-color: #7ec5c9;
+}
+
+.timeline-future::after {
+ background: repeating-linear-gradient(180deg, var(--accent1), var(--accent1) 10px, transparent 10px, transparent 20px);
+ -webkit-mask-image: linear-gradient(180deg, black 0, rgba(0, 0, 0, 0.5) 200px, rgba(0, 0, 0, 0.5) calc(100% - 200px), transparent 100%);
+ mask-image: linear-gradient(180deg, black 0, rgba(0, 0, 0, 0.5) 200px, rgba(0, 0, 0, 0.5) calc(100% - 200px), transparent 100%);
+}
+
+.timeline-future > .timeline-milestone {
+ border-color: var(--accent1);
+}
+
+.timeline > * {
+ margin-bottom: 20px;
+}
+
+.timeline-milestone {
+ place-self: center;
+ background-color: white;
+ z-index: 2;
+ border: var(--accent) 4px solid;
+ padding-inline: 8px;
+ position: relative;
+}
+
+.timeline-milestone > h1 {
+ margin: 0;
+ text-align: center;
+}
+
+.timeline-milestone > span {
+ top: 50%;
+ transform: translateY(-50%);
+ font-family: "JetBrains Mono";
+ position: absolute;
+ width: fit-content;
+ width: 200px;
+ opacity: .5;
+}
+
+.timeline-milestone-right {
+ left: calc(100% + 20px);
+ text-align: left;
+ font-weight: bold;
+ opacity: .8 !important;
+}
+
+.timeline-milestone-left {
+ right: calc(100% + 20px);
+ text-align: right;
+}
+
+.timeline-item::after {
+ content: '';
+ position: absolute;
+ height: 4px;
+ width: 20px;
+ background-color: var(--accent);
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.timeline-highlight::after {
+ height: 12px;
+ width: 12px;
+ background-color: white;
+ border: 4px solid var(--accent);
+ transform: rotate(45deg) translate(-50%, -50%);
+ margin-left: -10px;
+}
+
+.timeline-milestone::after {
+ display: none;
+}
+
+.timeline-item > div {
+ padding: 20px;
+ clip-path: polygon(0 10.00px, 10px 10px, 10.00px 0, calc(100% - 10.00px) 0, calc(100% - 10px) 10px, 100% 10.00px, 100% calc(100% - 10.00px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10.00px) 100%, 10.00px 100%, 10px calc(100% - 10px), 0 calc(100% - 10.00px));
+ background-color: white;
+}
+
+.timeline-item > div > h2 {
+ margin-top: .5rem;
+}
+
+.timeline-item:nth-child(odd of .timeline-item) > div {
+ margin-left: calc(50% + 25px);
+}
+
+.timeline-item:nth-child(even of .timeline-item) > div {
+ margin-right: calc(50% + 25px);
+}
+
#video-controls-progress {
width: 100%;
}
@@ -1281,6 +1439,10 @@ p { background-image: url(/assets/images/game-hero/laundryweb.png);
}
+#deja-img {
+ background-image: url(/assets/images/game-hero/deja_screenshot.png);
+}
+
#simpliCity-link {
position: absolute;
right: 30px;
@@ -1333,6 +1495,14 @@ p { aspect-ratio: 16/9;
}
+#flex-300 {
+ flex: 0 1 300px;
+}
+
+.flex-500 {
+ flex: 0 1 500px;
+}
+
.footnote {
font-size: .9rem;
opacity: .75;
@@ -1362,12 +1532,20 @@ li:target { .iframe-manual-warning {
position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+.iframe-manual-warning > * {
+ position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
-.iframe-manual-warning > div {
+.iframe-manual-notice {
display: flex;
gap: 10px;
flex-direction: column;
@@ -1379,6 +1557,10 @@ li:target { }
@media only screen and (max-width: 600px) {
+ :root {
+ --home-title-offset: 60px;
+ }
+
.desktop {
visibility: collapse !important;
display: none !important;
@@ -1398,10 +1580,6 @@ li:target { display: inline;
}
- .flex {
- flex-direction: column;
- }
-
.card {
flex-direction: column;
height: auto;
@@ -1453,7 +1631,7 @@ li:target { width: 100%;
}
- .div-sizing {
+ .div-sizing, .div-sizing-bare {
max-width: calc(100vw - 30px);
}
@@ -1469,10 +1647,10 @@ li:target { left: 0;
}
- .bottom-bar > img {
+ .bottom-bar > div > img {
height: 30px;
}
- .bottom-bar > img:hover {
+ .bottom-bar > div > img:hover {
height: 35px;
}
@@ -1499,16 +1677,61 @@ li:target { }
.gap-row {
- gap: 0px;
+ gap: 10px;
+ }
+
+ #flex-300 {
+ flex: 1 1;
+ }
+
+ .flex-500 {
+ flex: 1 1;
+ }
+
+ .timeline::after {
+ left: auto;
+ margin-left: 20px;
+ }
+
+ .timeline-milestone {
+ place-self: start
+ }
+
+ .timeline-item::after {
+ left: 22px;
+ }
+
+ .timeline-item > div {
+ margin-left: 45px !important;
+ margin-right: 0 !important;
+ }
+
+ .timeline-milestone-left {
+ right: auto;
+ left: calc(100% + 20px);
+ text-align: left;
+ top: calc(50% + .65rem) !important;
+ }
+
+ .timeline-milestone-right {
+ top: calc(50% - .65rem) !important;
+ }
+
+ section:first-of-type {
+ min-height: calc(100vh - 80px);
+ }
+
+ section:first-of-type > .center-grid {
+ min-height: calc(100vh - 80px);
}
}
@media only screen and (max-width: 1000px) {
- .flex {
+ .flex-container-dynamic {
flex-direction: column;
}
-
+
#top-project-highlight {
height: 200vh;
}
|
