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

Personal-Site

  • 4 Devlogs
  • 22 Total hours

This is a personal website that is designed to feel like a live desktop rather than a static page. It has lots of different features to make it accessible and convenient to use.

Ship #1 Changes requested

Introduction:

This is a personal website that is designed to feel like a live desktop rather than a static page. It has lots of different features to make it accessible and convenient to use.

Features:

Clock:

It has both a world clock and a local clock feature; it will show how long the other country is ahead of or behind you. This also gives UTC offset info.

Weather:

It will use your location API to see where you are. It will tell you what the weather is like in your area; it also tells you the wind speed in your area.

To Do List:

This is where you add your tasks. Local storage will store your tasks, and it separates them into low, medium, and high categories; it will help you prioritise the urgency.

Playlist:

I orginally tried to build a custom YouTube playlist, but it got blocked by the party. Instead, I switched to a Spotify playlist, which is embedded into the site, is more reliable, and also comes with a polished player UI for free.

Projects:

This is a window showcasing my projects, each attached with a short description, tags and a link back to the repo.

Calculator:

This started as a basic four-function calculator, and it expanded to show the running expression live above the main display. Added a history panel that saves the last 10 calculations, so past results are there to review or reuse even after a page reload, like what the phone does.

Pomodoro Timer:

Focus on short breaks, with 2 different countdown lengths, plus it has an animated progress ring so the user can see the remaining time. It also adds daily focus tracking, where you can track back how long you have done in each section via History.

Unit Converter:

Covers length, weight and temperature conversions with a swap button between units.

Mascot:

A small character sit on bottom-right corner; after 15 seconds of no activity, it starts a little wiggle instead of just sitting still. Click it, and it pops up a random speech-bubble tip. It also alternates between 2 different characters every 30 seconds.

Draggable window:

When you click the app, you can grab any title bar and move it anywhere on the screen

Resize and Minimise screen:

You can drag the bottom-right corner to make a window bigger or smaller. You can also click to collapse a window down to a small chip in the taskbar.

Command Palette:

Press Ctrl+K on Windows to bring up a searchable list of every app on the site; type to filter, arrow keys to move through results.

Wallpaper Switch:

There are 5 different gradient backgrounds; change them via the right-click menu, with a smooth crossfade between them.

Quick Links

Adding a matching set of icon links to GitHub and LinkedIn

Sticky Notes

This is just a quick coloured note people can jot down and delete; it is saved locally so you can still see your note next time.

Serial Monitor:

It has 4 metrics (CPU, memory, network latency, temperature); it will update constantly, mixed with occasional system events logged at different severity levels. It also includes pause/resume, clear and export to TXT.

QR Code Generator:

You can type any URL, and it will generate a QR code instantly. It includes a download button that allows you to download the QR code as a PNG file.

AI Usage:

I have used Claude AI to debug the code, including both syntax and logic errors. The whole website is made from personal experience. The website layout, idea, and main coding come from my idea.

  • 4 devlogs
  • 22h
Try project → See source code →
Open comments for this post

2h 48m 29s logged

Devlog 4:

I have added 2 more features:

Serial Monitor:

It has 4 metrics (CPU, memory, network latency, temperature). It updates constantly; it is mixed with occasional system events logged at different severity levels. It also includes pause/resume, clear and export to TXT.

QR Code Generator:

You can type any URL, and it will generate a QR code instantly. It includes a download button that allows you to download the QR code as a PNG file.

Shipping:

I have just finished modifying the README and testing all the function ensure it is working.

0
0
26
Open comments for this post

3h 24m 31s logged

Devlog 3:

Hi, welcome to another devlog. In this devlog, I am focusing on improving the apps and making this website look like an actual desktop environment.

Window feature :

Draggable window:

When you click the app, you can grab any title bar and move it anywhere on the screen

Resize and Minimise screen:

You can drag the bottom-right corner to make a window bigger or smaller. You can also click to collapse a window down to a small chip in the taskbar.

Command Palette:

Press Ctrl+K on Windows to bring up a searchable list of every app on the site; type to filter, arrow keys to move through results.

Wallpaper Switch:

There are 5 different gradient backgrounds; change them via the right-click menu, with a smooth crossfade between them.

Quick Links

Adding a matching set of icon links to GitHub and LinkedIn

Sticky Notes

This is just a quick coloured note people can jot down and delete; it is saved locally so you can still see your note next time.

0
0
10
Open comments for this post

6h 46m 54s logged

Devlog 2:

Hi, welcome to this devlog. My personal site keeps growing- this update adds six different features to the site.

Playlist:

I orginally tried to build a custom YouTube playlist, but it got blocked by the party. Instead, I switched to a Spotify playlist, which is embedded into the site, which is more reliable, and it also comes with a polished player UI for free.

Projects:

This is a window showcasing my projects, each attached with a short description, tags and a link back to the repo

Calculator:

This started as a basic four-function calculator, and it expanded to show the running expression live above the main display. Added a history panel that saves the last 10 calculations, so past results are there to review or reuse even after a page reload, like what the phone does.

Pomodoro Timer:

Focus on short breaks, with 2 different countdown lengths, plus it has an animated progress ring so the user can see the remaining time.

Unit Converter:

Covers length, weight and temperature conversions with a swap button between units.

Mascot:

A small character sit on bottom-right corner; after 15 seconds of no activity, it starts a little wiggle instead of just sitting still. Click it, and it pops up a random speech-bubble tip.

0
0
30
Open comments for this post

9h 7m 29s logged

Devlog 1:Hi, welocome to this devlog. I want to pause on pantry scanner for a bit, as I am figuring out how to link hardware coding program to the software site. So, I decide to make my own personal Website.This personal website current have 3 features:## Clock:It has both world clock and local clock feature, it will show how long the other country are ahead or behind you.## Weather:It will use your location API to see where you are, it will tell you what the weather is like in your area, it also tell you the wind speed in your area## TO Do List:This is where you add your task in here, the local storage will store your task, and it seperate into low, medium ,high catogeries, it will help you proitize the urgentness.

0
0
11

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…