We’re done!

After covering a lot of work over the past few days and facing multiple issues, I’m done. I’ll send a demo link and share more details tomorrow in the morning but overall, it has all been about getting all the code to work and co-exist with each other.

Some screenshots and a personal score tracker of your overall score, i hope it’s good.

It was pretty cool working on a project like this!

any issues?

I just faced some issues with my keyboard absolutely blowing up and some other hiccups I made in the code. Otherwise, I had some issues with the movement for the arrow keys and a little with regards to the movement of it.

Follow along for more! @Danu.journey on instagram

Finally cracked it

I re-shifted the code in multiple places, and it worked. All I have to do now is clean it up and make it seem more user-friendly, if you do have tips, do let me know! Since i’m basically done here, do follow along for more!

ps: i’m still using Pyodide

Devlog 2 python 2048 game

Right, so to discuss what changed and what’s wrong?

What changed?

I’ve just switched out the Brython for Pyodide script now, which is all good; it’s working pretty well, and hosting isn’t an issue either.

The 4*4 table is set too! With loads of div containers.

What’s wrong?

I’m extremely unsure why exactly are there no boxes appearing like the 2, 4, 8, etc. and it has been that way for the past 1 hour and I’m unable to find a solution!

Thanks for reading and follow along! My username is @Danu.journey on instagram I post loads of different content about engineering and other disciplines!

New web game!

Here we go! So initially, I came up with the idea of having a Python web game, which would be a 2048 game, something I did work on around 4-5 years back when I was a kid, toying around with code.

How am i going to run it?

So instead of someone just opening the file straight up, you run a small command in your terminal or the command prompt.

python -m http.server 8000

when you run this it just starts everything up for you and you don’t really have to focus on it with a headache!

What’s the issue?

I used an on-the-fly translator, aka Brython, which is a widely available resource i used - CDNJS library.
Unfortunately, it’s getting blocked by my browser, and so is it for a few others. I’ve decided to switch it out for Pyodide which acts as a WebAssembly, basically packing Python as an engine and putting it into a web page (for everyone to use and understand)

What’s next?

Well, since I came across a mix of errors i’m going to be re-editing the code and breaking stuff up into different parts to adjust things for Pyodide!

Thanks for reading!

Thanks for reading my Devlog! If you did find it interesting, do follow my professional account on Instagram @Danu.journey i’m going to be posting some of my work there too! If you’d like to add me on LinkedIn, my username is Daniyal Ali. See you around i hope you tag along on the journey!

Bugs and critters

Okay, so Devlog 3, here we go!

So to start things off, I rehauled the design and everything.

Polaroid cards

I used Vanilla JavaScript to have a feature where you click the Polaroid card and then you’re able to get a close-up of the photo/card itself. Unfortunately, it isn’t working, and it’s just bugging a lot.

Setting up the sticker tape

Apparently, I spent a good 10 minutes conversing with myself and me about why exactly the yellow translucent tape is not appearing and/or isn’t appearing in its designated spot, i come to realise I’m using the wrong class.

ie: i used tape-sticker instead of just tape

OH YEAH AND 💀 I HAD DUPLICATE CLASSES so yeah what a bummer.

The looks of the website

It isn’t much i’ll be honest but it did take me time and did take me ages to get fluent with how do i want everything to look, it took me an hour and a half just to get the whole thing looking normal after quite a while which is the last (4th) photo you see.

What’s next

• I hope to make the Polaroid cards interactive so when someone clicks on one, it shows a close-up.
• I’m to be adding a lot more content to the web so it looks more full and appropriate (everyone can see stuff properly duh )
• I gotta think more, my mind is dry rn, it’s 5 am

Anyways thank you for reading. If you’d like to have a convo about something, do let me know!!

So Part 2 of my Devlogs for the revamp!

I’ve only worked on the background set, things i want for this website which will be different to the other inital design I wanted, aside from that i’m going to be adding somewhat of a corkboard image as a background and that’s about it what i’ve covered for the initial 1 hour and a quarter aside from just trashing the code deleting stuff and thinking about what can be salvaged.

I guess i’m restarting the whole thing due to getting flagged

so basically i’m going to be reworking on the whole thing due to code being flagged for AI, i’ll be going for a more scrapbook like look now (i dont really know how but i’ll try)!

The old UI is gonna be completely gone

Second Project

Okay so nothing too interesting to start things off BUT

All I’ve done so far after staring at JavaScript and just processing it for 2 hours is do something, and i did plan a little ahead on how I’m going to be taking things forward!

Follow along and stay updated!

Hello world!

It’s been an absolute grind, but I’ve logged over 5 active hours on my portfolio and completely transformed it from a basic setup into a high-contrast, command center!

🛠️🖥️Here’s a breakdown of all the massive upgrades I’ve shipped:

1. New Features & Overhauls ✏️

Root System Console (Interactive Terminal) 💻

• Built an actual retro terminal emulator right on the homepage using custom JavaScript.

-You can click inside and type live commands like help, projects, nasa, and kanye to get custom system outputs!

1. Active Status Ticker Tape 🚨

• Added a CSS-animated retro marquee running right under the navigation bar to give it a constant “live-system” broadcast feel.

1. Brutalist Custom Cursor 🖱️

• Completely hid the boring default system cursor and designed a dual-color neon square cursor that dynamically scales up when you hover over links and cards.

1. “Now Spinning” Media Widget 💿

• Added a custom dashboard widget to showcase current rotation (Late Registration on repeat, obviously) with a spinning vinyl record animation!

1. A Dedicated Logbook (Blog Page) 📓

• Created a second page with custom rounded cards highlighting my latest citizen scientist tracking and calculus logs.

`

<div class="system-ticker">...</div>

<section class="terminal-block">
    <div class="brutal-terminal">
        <div id="terminalBody">...</div>
        <input id="terminalInput" placeholder="type a command...">
    </div>
</section>

<script src="terminal.js" defer></script>

(This is my updated index.html. I also have index.css running a custom repeating radial dot-matrix background pattern to make the viewport look incredibly busy and complex, and a fail-safe terminal.js script so the custom cursor glides smoothly across both HTML pages without throwing errors!)

This officially wraps up V1! Time to deploy this build on GitHub Pages, secure my custom domain through the mission approval, and start plotting the next build. 🚀Let me know if you have any cool suggestions for the console commands! That should be it . Bye

Hello world!

It’s been an absolute grind, but I’ve logged over 5 active hours on my portfolio and completely transformed it from a basic setup into a high-contrast, command center!

🛠️🖥️Here’s a breakdown of all the massive upgrades I’ve shipped:

1. New Features & Overhauls ✏️

Root System Console (Interactive Terminal) 💻

• Built an actual retro terminal emulator right on the homepage using custom JavaScript.

-You can click inside and type live commands like help, projects, nasa, and kanye to get custom system outputs!

1. Active Status Ticker Tape 🚨

• Added a CSS-animated retro marquee running right under the navigation bar to give it a constant “live-system” broadcast feel.

1. Brutalist Custom Cursor 🖱️

• Completely hid the boring default system cursor and designed a dual-color neon square cursor that dynamically scales up when you hover over links and cards.

1. “Now Spinning” Media Widget 💿

• Added a custom dashboard widget to showcase current rotation (Late Registration on repeat, obviously) with a spinning vinyl record animation!

1. A Dedicated Logbook (Blog Page) 📓

• Created a second page with custom rounded cards highlighting my latest citizen scientist tracking and calculus logs.

`

<div class="system-ticker">...</div>

<section class="terminal-block">
    <div class="brutal-terminal">
        <div id="terminalBody">...</div>
        <input id="terminalInput" placeholder="type a command...">
    </div>
</section>

<script src="terminal.js" defer></script>

(This is my updated index.html. I also have index.css running a custom repeating radial dot-matrix background pattern to make the viewport look incredibly busy and complex, and a fail-safe terminal.js script so the custom cursor glides smoothly across both HTML pages without throwing errors!)

This officially wraps up V1! Time to deploy this build on GitHub Pages, secure my custom domain through the mission approval, and start plotting the next build. 🚀Let me know if you have any cool suggestions for the console commands! That should be it . Bye

Hello there! It’s been a while since my last update, and I’ve completely overhauled the personal portfolio site to get rid of the boring, default minimalist look. Here are all the massive upgrades I’ve added to turn it into a high-contrast maximalist dashboard 🚀

New Features & Styling Overhauls ✏️

1. Interactive Project Cards 📇

• Turned the boring, plain vertical bulleted list of projects into thick-bordered cards.

• Added alternating neon drop-shadows (green, blue, and gold) that physically “pop” when you hover over them

1. Bold Editorial Typography 🅰️

• Swapped sterile, generic fonts for massive, loud headers (Impact/Arial Black).

• Used letter-spacing to track out the letters so they look extremely polished, editorial, and easy to read 🆒

1. Brutalist Buttons 🔘

• Replaced the standard blue underlined text link for my CV with a heavy-duty, thick-bordered green button.

1. Retro-Tech Grid & Dynamic Layout 🌐

• Threw a retro-tech grid pattern onto the dark background

• Used CSS Grid to arrange the sections side-by-side like an active control dashboard instead of a boring single-column list.

Here’s a code summary:

`

<main class="maximalist-container">
    <header>
        <span class="glitch-tag">STATUS: STUDENT // POLYMATH</span>
        <h1>...</h1>
        <h2>...</h2>
    </header>

    <section class="cv-highlight">
        <span class="card-tag">DOCUMENTATION</span>
        <h3>...</h3>
        <a href="...">DOWNLOAD FULL CV →</a>
    </section>

    <section class="projects-block">
        <h3>Projects</h3>
        <div class="brutal-list">
            <div class="brutal-item color-1">01 ...</div>
            <div class="brutal-item color-2">02 ...</div>
            <div class="brutal-item color-3">03 ...</div>
            </div>
    </section>
</main>

<footer>...</footer>

`

(This is my updated index.html . I also have index.css for the custom layout, grid pattern, and letter-spacing, but I’m too lazy to paste all the CSS rules here - just know that index.css holds all the visual styling and transitions!)

Next, I’ll be setting up my Blog page to support separate visual cards (including custom social blocks for Instagram and LinkedIn updates) and integrating my calculus study logs 📚 .Oh yeah, feel free to comment if you have any suggestions or design ideas! That should be it . Bye

So, a little update by the 45th-ish or 50th-minute mark, this is how my website is looking. I love the simplicity, but I’m going to be working more on how I can make this more attractive, and the design should be something like a maximalist design, so yeah!

I just started my first project for Stardance i’m so happy :D