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

theodora

@theodora

Joined July 9th, 2026

  • 26Devlogs
  • 6Projects
  • 5Ships
  • 86Votes
Hi, I'm Theodora, 18 years old
Aspiring to become an electronic engineer
Learning coding from scratch
Ship 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
44
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
31
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
Open comments for this post

1h 47m 18s logged

Devlog 2:

This devlog, it records how the front end works. I use arduino IDE with coding language C+ to make the ESP32 Camera work, It can capture 1600x1200px, which is useful for the backend.
The backend is used to store the captured picture and analyse the expiry date of the food.

0
0
83
Open comments for this post

3h 56m 24s logged

#Devlog 1:
Hi, welcome to a hardware project devlog. In this project, I am creating a pantry scanner. I have drawn my schematic board and am soldering the PCB. I forgot to record my soldering part, but here is the overview of the project.

0
0
5
Ship

About Medisite

MedSite is a website designed to help people who are struggling to understand and navigate the UK healthcare system. I built MedSite because I know how confusing the NHS can be, especially when you are unfamiliar with how the system works. I was born in Hong Kong and moved to the UK when I was 14. The healthcare system here was completely different from what I used to. Then, when I was 17, my health suddenly started declining. That began my own NHS journey–from visiting my GP and local pharmacy to A&E, hospital appointments and everything in between. Over the past two years, I’ve had to learn how to navigate the system, figure out what questions to ask, understand what support was available and sometimes work out where I was supposed to go next. That experience is what led me to start building MedSite.

MedSite Component:

Guide:

The guide is separated into 6 different categories, from self-care to calling 999. This site has input for common symptoms and illnesses, explains what you can expect from the NHS, what questions you can ask, and when you need further help.

Support:

Support is a place to support your healthcare journey, what you can get away from the NHS, what you can ask for when you are discharged from the hospital, etc.
Sometimes the hardest part isn’t the treatment itself- it’s knowing what happens afterwards.

Story:

Story is a place where I documented what has happened throughout these past two years, what I’ve experienced, what I’ve asked, what I’ve been told and what support I’ve been given.

Find nearest function

Find nearest function allows users to find the nearest pharmacy, GP, urgent treatment centre, and A&E. This feature requires users to permit the website to have access to their location before using Google Maps as an external tool to find the nearest services.

Declaration Page

This indicates that the information on the website is meant to be useful but not entirely accurate and applicable to all users and cases; thus, seeking professional medical advice is strongly recommended.

First Aid:

First aid explains when first aid may be needed and provides clear, step-by-step guidance to help users understand what they should do. The information comes from trusted medical sources (Mayo Clinic, NHS)

Condition A-Z:

Condition A-Z this provide a complete browse of the 45 conditions included in the guide, organised into different health categories.

AI Usage:

I have used Claude AI to translate between English and traditional Chinese, and it also helps me debug my code. The whole website is made based on personal experience. The website layout, idea, and main coding come from my idea.

  • 4 devlogs
  • 21h
  • 16.88x multiplier
  • 350 Stardust
Try project → See source code →
Open comments for this post

8h 2m 47s logged

Devlog 3:

Hi and welcome to another Devlog

What have I added?

Story update:

Orginally, I had added a section called story. I finished styling
the section and added both languages, making it more engaging and accessible. I have also added a timeline to show what has happened throughout my journey and make the story easier to follow. The story will continue to be updated as I am still investigating my illness.

Conditions A-Z

Adding a new tab called Condition A-Z provides a complete browse of the 45 conditions included in the guide, organised into different health categories. Each condition has a ‘View in Guide’ button that links back to the first tab of the guide. This allows users to quickly find the condition and see the recommended steps and information provided in the guide. I also added an NHS reference for each condition. This links to a Google search for relevant NHS information, making it easier for users to find trusted guidance and learn more about each condition.

First Aid

I have also added a new tab called First Aid. It is designed to teach users what to do during an emergency situation. This section explains when first aid may be needed and provides clear, step-by-step guidance to help users understand what they should do. The information comes from trusted medical sources (Mayo Clinic, NHS)

Thanks for reading! 😊

0
0
10
Open comments for this post

5h 2m 32s logged

Devlog 2:

Hi and welcome back to another Devlog.

What have I added?:

Find nearest function

A new feature has been added called Find Nearest under some cards, where users can find the nearest pharmacy, GP, urgent treatment centre, and A&E. This feature requires users to permit the website to have access to their location before using Google Maps as an external tool to find the nearest services.

Declaration Page

In addition to that, a Declaration section has been added in Legal & Privacy. This indicates that the information on the website is meant to be useful but not entirely accurate and applicable to all users and cases, thus, seeking professional medical advice is strongly recommended.

Zoom In/Out

Zoom-in/out features have been added to make the website more accessible to elderly users and those who have difficulty reading.

Thanks for reading! 😊

0
0
11
Open comments for this post

6h 21m 42s logged

Devlog 1:

Welcome to my first devlog of MedSite:

What is MedSite?

MedSite is a website designed to help people who are struggling to understand and navigate the UK healthcare system.
I built MedSite because I know how confusing the NHS can be, especially when you are unfamiliar with how the system works.
I was born in Hong Kong and moved to the UK when I was 14. The healthcare system here was completely different from what I used to.
Then, when I was 17, my health suddenly started declining. That began my own NHS journey–from visiting my GP and local pharmacy to A&E, hospital appointments and everything in between.
Over the past two years, I’ve had to learn how to navigate the system, figure out what questions to ask, understand what support was available and sometimes work out where I was supposed to go next.
That experience is what led me to start building MedSite.

At the moment, MedSite is made up of three main components:

Guide:

Guide is designed to help people understand where they might need to go when they have a particular symptom or health problem. This site has input information on common symptoms and illnesses; it will explain what you can expect from the NHS, what questions you can ask, and when you may need to seek further help.
This is not a diagnostics tools. This is used to make the healthcare system easier to navigate and help people feel more prepared when seeking care.

Support:

Support is a place to support your healthcare journey, what you can get away from the NHS, what you can ask for when you are discharged from the hospital, etc…
Sometimes the hardest part isn’t the treatment itself- it’s knowing what happens afterwards.

Story:

Story is the most personal part of MedSite.
It’s where I want to document what has happened throughout these past two years, what I’ve experienced, what I’ve asked, what I’ve been told and what support I’ve been given.
I want to share my experience because I know other people may be going through something similar and wondering, ‘What am I supposed to do?’

Thanks for reading.

0
0
2
Ship ✨ Blessed

World Food Explorer🌍🍜
This is an interactive way to explore the world’s food.
Spin a 3D globe on desktop, pan a 2D map on mobile, tap a city and discover its signature dish and where to actually go eat it.
Live demo: https://theodora-sin.github.io/World-Food-Explore/

Features:
🌍 3D globe (desktop) / 2D map (mobile) — automatically switches based on screen width, so the experience fits any device
📍 Tap any city to open a food card: dish photo, description, cuisine type, meal course, and a recommended restaurant with address + Google Maps link
🔍 Search by city name, country, dish, or cuisine type; when it does not match, it will show “no matches”
🎲 Surprise Me — jumps to a random city (with a “spin then land” flourish on the 3D globe)
📍 Near Me — uses your device’s location to find and fly to the closest city in the dataset
★ Favourites — save cities to revisit later, stored locally in your browser
🕘 History — a running timeline of the last 10 cities you’ve explored this session
👋 Start screen with instructions and character guides, shown on first loading screen

Data Structure:
Each city in the dataset follow this shape:

cityName
country
latitude
longitude
Type of Cuisine (Chinese, Western, Italian, etc.)
dish_name
course (e.g. Main,Dessert, Brunch,B reakfast)
A photo of the famous dish
A short description of the famous dish
Name of the restaurant which served this dish
priceRange ($, $$, $$$)
address
hyperlink to Google Maps

Tech Stack:
globe.gl — 3D globe rendering (built on Three.js)
Leaflet + Leaflet.markercluster — 2D map and marker clustering
CARTO Dark Matter tiles — dark map theme matching the 3D globe’s aesthetic
Vanilla JavaScript (ES modules) — no framework or build step; every feature is a small, focused module
localStorage — persists favourites across visits
Browser Geolocation API — powers the Near Me feature
No backend, no database, no build tooling — the whole thing is static files, deployed via GitHub Pages.

AI Usage:
AI was used to assist with development — debugging code, explaining errors, and helping me think through what users would actually want from the experience. The concept, design direction, and feature decisions were all mine.

  • 4 devlogs
  • 29h
  • 13.73x multiplier
  • 479 Stardust
Try project → See source code →
Open comments for this post

7h 13m 25s logged

Devlog #4

Final data were added to the Americas globe to cover the entire globe. It does not include all cities in the world, but it at least offers good representation of cuisine from around the world.
Today’s main focus was adding the timeline, the Near Me button, and the start screen with favicon— the last few features on my list before shipping.
This is the day when the project goes live. Thanks for following and supporting the project!

2
0
7
Open comments for this post

6h 21m 52s logged

Devlog #3
Added some new cities in Africa to our dataset, going further than just covering Asia and Europe.

The main highlight of today’s work was improving the 2D mobile interface, where the city card now appears with a slide-up animation from the bottom and is dismissed with a swipe-down action, not only a close button.

But I also added three new features, working simultaneously for the 2D map and 3D globe:

Search bar – search by city name, dish or cuisine
Surprise me – navigate to some random city
Favourites – mark your favourite city with a star, and open the list of saved cities (locally stored in the browser) later

That’s all for today’s developer log, will see you in the next one.

0
0
6
Open comments for this post

7h 9m 48s logged

Devlog #2

Today I started working on my project. I made a map based on Leaflet.js that people can interact with.

When people look at the site on their phones, they will see the 2D map. But if they are using a screen like a computer and the screen is wider than 768 pixels, then they will see a 3D globe instead of the 2D map.

I have been putting places on my map. Today I worked on Asia and Europe. I also drew the favicon by hand.

That’s it for today’s devlog. Thanks for reading, and see you in the next update!

0
0
4
Open comments for this post

8h 21m 14s logged

Devlog #1
Today I made a start on the project by creating a cool interactive 3D globe using Globe.gl.

The application is built around three things:

City (on the globe:)

  1. cityName
  2. country
  3. Use the pin to pinpoint the exact location using longitude and latitude

Cuisine:

  1. Type of Cuisine (Chinese, Western, Italian, etc.)
  2. dish_name
  3. course (e.g. Main, Dessert, Brunch, Breakfast)
  4. A photo of the famous dish
  5. A short description of the famous dish

Place:

  1. Name of the restaurant which served this dish
  2. priceRange ($, $$, $$$)
  3. address
  4. hyperlink to Google Maps

Each cuisine links to recommended places where users can try authentic local food.

0
0
5
Ship ✨ Blessed

A thrilling story-based decision game where every choice shapes your path–and where you’ll need to piece together a hidden word to unlock the true ending.
Each person has their own beginning and an end, but no one knows when their final moment will come.
Every decision, every step you take is going to shape your future.
Inside every person, there is a shiny star shining through their life. As long as hope remains, the star burns brightly. When hope is lost, the star slowly fades into darkness, turning positive energy into dark energy. Hope is contagious — but so is despair. People surrounding you don’t just affect themselves; they influence the people they meet and the world around them.

How to Play

–Can play with any device
–Choose your character and begin the journey
–Make choices at each story point–every decision affects what happens next
–Collect gems along the way, each hiding a letter of a secret word
–At the end, guess the hidden word to determine your true ending.

##Controls:
–Mouse/tap: buttons and story choices
–Arrow keys or drag the sliding object using touchscreen in maze and catch the gem
–Arrow keys or touch the inbuilt arrow key button to play the snake

Built With

p5.js, p5play

  • 5 devlogs
  • 36h
  • 4.15x multiplier
  • 180 Stardust
Try project → See source code →
Open comments for this post

3h 50m 17s logged

#DEVLOG 5
Welcome to my final devlog!
Today, I focused on finishing the conclusion of the screen. I created two different endings just to make the experience more fun.

🛠️ What’s New:

  1. Added the final chapter with two different story ending
  2. Adding sound effects to improve the overall expereience
  3. creating canvas to 400 x 800, so it can be play on the mobile device. Although the canvas might be small when people play on computer, this size allow the game to work across all devices
    Thank you for following the development of The Last Star! I hope you will enjoy the game.
0
0
6
Open comments for this post

8h 26m 16s logged

Devlog #4:
Welcome to my fourth devlog!
This week, I focused on developing the next three chapters leading up to the ending of The Last Star.Over the past two days, I have been working on these final chapters. I’m happy to say that I have finished writing the ending and created the snake game that appears in the story.I have also been working on adding arrow controls to the snake game so that players can enjoy it on iPads and mobile phones more easily.
🛠️ What’s New

  1. Created the final three story scenarios.
  2. Finished developing the snake game using p5.play, instead of relying mainly on CSS and JavaScript.

🔮 What’s Next

  1. Finish the conclusion and polish the final chapters.
  2. Add more features, including sound effects and images, to improve the overall experience.

Thank you for following the development of The Last Star! I’m hoping to ship the project in the next devlog. Stay tuned!

0
0
3
Loading more…

Followers

Loading…