- HTTP 209 — Under Construction + HTTP 209 – Under Construction

Yes. This error is made up. You're not lost; this is going to be a real page, it just doesn't exist yet.

Sorry. Come back soon!

Go back to Root → 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 @@ + + + + + + + + + + + + 404 • This is altaf-creator + + + + + + +

+ + About Me + Projects + Library +

+ + +

+ HTTP 500 – Internal Server Error +

The webpage is currently unavailable. This is our fault. Sorry! Come back soon.

+ Go back to Root → +

+ + + 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 @@

Passion

Under construction.

Since little, I've always liked making things, from making things with cardboard, to tinkering with computers and electronics. Even making ROBLOX games!

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.

At the same time, I also explored other creative media such as videography and others. Programming still remained as my main thing.

During these times, I learnt and experimented with Unity game development and web development mostly.

Community and Events

Infocomm (Media Creation) CCA Vice President

Tinkertanker Internship

2022

+ Middle School + Indonesia +

+ Project +

Tank Shooter

Created and published my first major game project. A 2D pixel art arcade shooter game.

/ Tank Shooter →

+ Project +

simpliCity

The original Unity project for simpliCity, "Sandbox Game", was created. This is a major project that I'm still working on!

View simpliCity →

2023

+ Middle School + Indonesia +

+ Achievement +

Alarm (Al-Azhar Rawamangun) Robotics Competition

1st place, Team

My first major robotics competition. Our team of 3 paritcipated in the creative category. A metropolitan-wide private competition.

+ Achievement +

ASEAN Robotics Day

4th place, Team

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.

+ Achievement +

Trans Studio Bandung Robotics Competition

1st place, Team

Our team of 3 refined our previous robot for the creative category. A pretty major public nation-wide competition.

2024

+ Middle School + Indonesia +

+ Opportunity +

MOE Singapore ASEAN Scholarship for Indonesia

I've been granted the opportunity to study in Singapore independently for my Upper Secondary to Junior College years from this scholarship.

2025

+ Secondary 3 + Singapore +

+ Leadership +

CCA Vice President for Infocomm (Media Creation) Club

Became one of the presidents for Ngee Ann Secondary School's Infocomm (Media Creation) Club CCA. (Achievements)

+ Achievement +

Yellow Ribbon Arts Competition

Top Winner

Participated in my first ever videography competition. This competition is part of Yellow Ribbon Arts Festival 2025 hosted by Yellow Ribbon Singapore.

Watch my short film →

+ Service +

Class VIA Leader Committe

My form class organised a beach clean-up VIA project, where I helped out organising and creating a video of it.

Watch our video →

+ Achievement +

National Youth Tech Championship

Champion, Team

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.

+ Service +

Infocomm CCA VIA at Tampines East CC

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.

+ +

+ Project +

NASA Space Apps Challenge

+ Global Nominee +

An international hackathon that I participated in with a couple of friends from my school and Dunman Secondary during our end of year holidays.

View our project →

+ Service +

MINDS Charity Carwash Video

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.

Watch the video →

+ Service +

Ngee Ann Open House Video

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.

Watch our video →

+ Internship +

Internship at Tinkertanker

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.

2026

+ Singapore + Secondary 4 +

+ Service +

Secondary 1 Orientation Facilitator

I was offered the opportunity to help out with my school's Secondary 1 orientation as a student facilitator.

+ Achievement +

Ngee Ann Secondary School Founder's Day

Recipient of Certificate of Merit for Computing

The school awards Certificate of Merit to the 2 top-performing students of a subject.

+ Achievement +

Ngee Ann Secondary School Founder's Day

Infocomm CCA as Recipient of Certificate of Commendation for Outstanding Community Service

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.

+ Achievement +

Temasek Engineering Olympiad

Silver Medal

A 3-day engineering and electronics workshop and competition hosted by Temasek Polytechnic School of Engineering.

+ +

+ Achievement +

National Olympiad of Informatics 2026 (and 2025)

Bronze Medal

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.

+ Achievement +

National Olympiad of Artificial Intelligence

Bronze Medal

Held by NTU and AI Singapore, NOAI is a relatively new programming contest about AI programming.

+ Achievement +

Copyright School Challenge '25/26

2nd place

A videography competition held by CLASS Singapore with the theme "The Worlds We Make" in aligment with AFCC 2026.

Watch my submission →

Academics and Achievements

National Youth Tech Championship 2025

NOI 2026 (and 2025)

NOAI 2026

Temasek Engineering Olympiad 2026

Trans Studio Bandung Robotic Competition

Alarm Robotic Competition

ASEAN Robotic Day

- - diff --git a/www/assets/images/education/events/ai_jupyter.png b/www/assets/images/education/events/ai_jupyter.png new file mode 100644 index 0000000..94d9465 Binary files /dev/null and b/www/assets/images/education/events/ai_jupyter.png differ diff --git a/www/assets/images/education/events/av.jpg b/www/assets/images/education/events/av.jpg new file mode 100644 index 0000000..18397a3 Binary files /dev/null and b/www/assets/images/education/events/av.jpg differ diff --git a/www/assets/images/game-hero/deja_screenshot.png b/www/assets/images/game-hero/deja_screenshot.png new file mode 100644 index 0000000..609643c Binary files /dev/null and b/www/assets/images/game-hero/deja_screenshot.png differ diff --git a/www/assets/images/hero/altaf.png b/www/assets/images/hero/altaf.png deleted file mode 100644 index ff2ce4b..0000000 Binary files a/www/assets/images/hero/altaf.png and /dev/null differ 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 @@ + + + + diff --git a/www/assets/images/logo/deja.png b/www/assets/images/logo/deja.png new file mode 100644 index 0000000..28e9d31 Binary files /dev/null and b/www/assets/images/logo/deja.png differ diff --git a/www/assets/images/screenshots/.DS_Store b/www/assets/images/screenshots/.DS_Store index 8ac5adc..cfdc9d2 100644 Binary files a/www/assets/images/screenshots/.DS_Store and b/www/assets/images/screenshots/.DS_Store differ diff --git a/www/assets/images/screenshots/deja/image1.png b/www/assets/images/screenshots/deja/image1.png new file mode 100644 index 0000000..609643c Binary files /dev/null and b/www/assets/images/screenshots/deja/image1.png differ diff --git a/www/assets/images/screenshots/deja/image2.png b/www/assets/images/screenshots/deja/image2.png new file mode 100644 index 0000000..9f82d2c Binary files /dev/null and b/www/assets/images/screenshots/deja/image2.png differ diff --git a/www/assets/images/screenshots/deja/image3.png b/www/assets/images/screenshots/deja/image3.png new file mode 100644 index 0000000..c215f0b Binary files /dev/null and b/www/assets/images/screenshots/deja/image3.png differ diff --git a/www/assets/images/screenshots/deja/image4.png b/www/assets/images/screenshots/deja/image4.png new file mode 100644 index 0000000..d663345 Binary files /dev/null and b/www/assets/images/screenshots/deja/image4.png differ diff --git a/www/assets/images/screenshots/deja/image5.png b/www/assets/images/screenshots/deja/image5.png new file mode 100644 index 0000000..5d9e57a Binary files /dev/null and b/www/assets/images/screenshots/deja/image5.png differ diff --git a/www/assets/images/screenshots/deja/image6.png b/www/assets/images/screenshots/deja/image6.png new file mode 100644 index 0000000..9cfe87a Binary files /dev/null and b/www/assets/images/screenshots/deja/image6.png differ diff --git a/www/assets/images/screenshots/deja/image7.png b/www/assets/images/screenshots/deja/image7.png new file mode 100644 index 0000000..6c03909 Binary files /dev/null and b/www/assets/images/screenshots/deja/image7.png differ 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 @@

(dev)Blog

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 @@ - altaf-creator @@ -70,7 +69,7 @@

Highlighted Works -

@@ -137,9 +136,9 @@ Library

my (dev)Blog and other things I'd like to share

Blog Posts

Stuff

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 @@ Source Code for My Projects ↗

@@ -109,12 +109,12 @@

Internship - Internship Projects + Tinkertanker Web Dev

- + style="background-image: url(/assets/images/game-hero/deja_screenshot.png);"> +

Team @@ -375,7 +375,7 @@

⏵

Paperverse Hub 2026

@@ -385,7 +385,7 @@

⏵

A message for this Eid 2026

@@ -395,7 +395,7 @@

⏵

Ngee Ann Open House 2025 2025

@@ -405,7 +405,7 @@

⏵

Secondary 3 VIA Project 2025

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; @@ -1361,13 +1531,21 @@ 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; } -- cgit v1.2.3