stardance has been extended another month! the new deadline is october 31 :)

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

Personal Site

By @lantern

  • 8 Devlogs
  • 27 Total hours

Built this site because I wanted a portfolio that felt like an actual tool rather than a static resume page. Took a deep dive into vanilla JS to build out an interactive terminal overlay , hooked up GitHub's API to pull my project cards dynamically, and spent a lot of time wrestling with Web Audio API garbage collection to keep the visualizer running at a smooth 60fps. Focused heavily on clean CSS glassmorphism, responsive contrast, and making sure every interactive element gives instant feedback.

Source
Ship #2

@lantern on Personal Site

Finally calling it done and shipping this project! I wanted to build a portfolio that felt like an actual interactive tool rather than just another static resume page, so I spent the last several hours(27hrs to be exact) diving deep into modern vanilla JS to pull it together.

What I Built:

  1. Terminal Overlay: Built a retro-modern CLI modal from scratch. You can hit keyboard shortcuts anywhere on the site to bring up an interactive terminal to navigate sections, run commands (help, projects, skills, clear, theme), and inspect site metadata with full keyboard focus locking.

  2. Live GitHub API Integration: Connected the site directly to GitHub’s REST API to dynamically fetch and build my project cards on the fly. Added local storage caching so it won’t hit unauthenticated rate limits.

  3. Web Audio Canvas Visualizer: Embedded a custom synth engine and visualizer that renders sound frequencies in real-time. Had to refactor the typed arrays in requestAnimationFrame to fix JavaScript garbage collection lag and keep rendering locked at 60fps.

  4. Glassmorphism UI Refactor: Upgraded the whole visual layout with crisp dark/light themes, smooth backdrop blurs, dynamic card hover elevations, and responsive mobile breakpoints.

  • 6 devlogs
  • 25h
  • 4.48x multiplier
  • 110 Stardust
Try project → See source code →
Open comments for this post

@lantern on Personal Site

6h 51m logged

Progress…..

  1. Built a custom modal command palette from scratch in vanilla JSSupported commands include help, projects, skills, clear, theme, and contact with active autocomplete and history navigation (Up/Down arrow keys)

  2. Upgraded the static section panels to responsive glassmorphism containers utilizing backdrop-filter: blur(), dynamic hover glows, and crisp CSS variables for theme switching

  3. Added smooth scroll-triggered reveal animations for project cards, dynamic hover tilt states, and fixed mobile layout breaking points for the terminal modal

.. the personal site is almost complete only a few UI modifications are left . I think i have used up all my thinking capability on adding stuff to it…I just hope this will turn out good!!

0
0
8
Open comments for this post

@lantern on Personal Site

8h 31m logged

Progress So Far:-

  1. Built an async fetchProjects() module calling the GitHub REST API .It dynamically filters out forks, maps repo tags, and builds project cards automatically.

3)Handled GitHub’s unauthenticated rate limits (60 req/hr) by saving the payload to localStorage with a 1-hour expiration.(i actually hit GitHub’s 60-request hourly limit almost instantly because the fetch call was firing inside a component re-render)

fixed it by wrapping the API call inside a strict initial load check and serving cached local JSON if rate-limited

been working on this all night !!! just took last project review personally

Next i want add to add a interactive terminal and make some changes to the theme

0
0
28
Open comments for this post

@lantern on Personal Site

1h 34m logged

While reading my previous project reviews
–>I found there is no value for normal project unless you have something extraordinary idea and i absolutely hate this because this program should motivate people to build projects and not demotivate them.

–> Moving on (cause what can i even do) i decided do something “extraordinary “ and wanted to integrate something with my personal site as its a
“basic mission”.( things i do for things i want )

1
0
74
Open comments for this post

@lantern on Personal Site

2h 19m logged

Progress so far:-

  1. Built out a sticky top navbar with quick anchor links (About, Skills, Achievements, Projects, Contact) alongside a working dark mode toggle button.

  2. Designed custom card containers for the “Achievements & Recognition” section. Added hover shadow elevations, custom icon badges, and year tag

  3. Styled smooth scroll behavior across sections, cleaned up the overall CSS color palette

0
0
31
Ship #1

@lantern on Personal Site

This is my first site as a standalone project i used HTML and CSS to build this site with the help of the guide in hackclub i hope you will like it✨

Features:-

1 photos
2 link to my hackclub profile
3 A nav bar (i will keep updating it)
4 changing image size

Try project → See source code →

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…