You are browsing as a guest. Sign up (or log in) to start making projects!

Open comments for this post

53m 41s logged

Bugs and critters

Okay, so Devlog 3, here we go! :yay:

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 :sob-hole: 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 :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!! :bye:

0
0
13
Open comments for this post

1h 14m 59s logged

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.

0
0
13
Open comments for this post

28m 45s logged

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)! :bye:

The old UI is gonna be completely gone

0
0
12
Ship #1 Changes requested

# 1. What did you make?

A two-page personal portfolio (index.html and blog.html) featuring an interactive, custom JavaScript terminal , a live scrolling marquee status bar, a dynamic custom square cursor that tracks mouse movement, and an animated spinning vinyl record widget.

# 2. What was challenging?

Handling a global script (terminal.js) across multiple pages. The cursor script crashed on the blog page because the terminal elements didn't exist there. I solved this by writing defensive JS to check for DOM elements before executing the terminal code.

# 3. What are you proud of?
Building a fully functional custom terminal emulator from scratch in vanilla JS, and getting the custom cursor to scale and change colors smoothly whenever it hovers over interactive cards.

# 4. What should people know so they can test your project?
Move your mouse to see the custom cursor in action! Then, scroll to the bottom of the homepage, click the terminal, and type these commands:

help (see all commands)
projects (my work)
nasa (citizen science info)
kanye (album metric easter egg)
clear (wipe terminal)

Try project → See source code →
Open comments for this post

2h 14m 56s logged

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! :write: That should be it :yay: . Bye :bye:

1
1
58
Open comments for this post

1h 48m 27s logged

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 :yay:

  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 :backgrounds:

  • 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 :lazy: to paste all the CSS rules here :lol: - 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! :write: That should be it :yay: . Bye :bye:

0
0
7
Open comments for this post

48m 1s logged

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!

0
0
8

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…