Website Development

Useful Sources

The chatbox on the home page was created by Virtual Observer. It's actually just a reskinned Google Form that displays responses as comments--neat!

The contact page form runs through FormSubmit. Responses are sent directly to my email address.

The home page music player was based on code made by Oddity Commodity, a fellow Neocities user (I highly recommend checking out their website). I modified this base code pretty heavily, so let me know if you have any questions about what's going on.

Tim Holman created this excellent project: a set of cursors with unique trailing effects. I'm using the emojis trail option on this website, with an equal chance for the cursor to drop any of the following: :3 :D >:) ❤️ 💛 🎨 💥 💫 🪐 ⭐ ✨ ⚡️ 🌈 ☀️

I mostly learned HTML, CSS, and JavaScript by messing around, trying things out, and googling questions. The most helpful resource by far has been the W3 Schools tutorials. I definitely recommend starting there if you're new to website building.

Website Vision

Eventually I want this website to be an all-around homepage for me, with both a professional side where everyone can check out my projects in optics, biophysics, engineering, and programming, as well as a friend side of the site for my art and writing projects and my Telegram tweeter channel feed.

But those are all big dreams... What's actually gonna happen on this website in the near future? (by that I mean in December 2023 and summer 2024, when I actually get time off from classes)

1. Fix the main page header text.
2. Fill in the Projects boxes. Ideally, each project should have a short summary and then its own full page with descriptions and images. Publications should include links to journals and other authors’ and labs’ websites.
3. Set up project tag navigation.
4. Improve the favicon.
5. Make things look better: choose fonts for real, fix up the sticky boxes.
6. Replace the temporary header with a real one. Maybe incorporate some animation. Create a smaller version for the sub-pages.
7. Add small animations–the header moves when you hover over it. Hovering over links makes them wobble on the Projects page.
8. Add a select-a-font box on the main page right bar.
9. Add a “you are the nth visitor” box on the right bar.
10. Add buttons to get to my friends’ websites.
11. Add a button where you have to input a password that takes you to the friends side of the site–the only difference is that there’s also a tab that has my Telegram channel embedded.
12. Fix the way the website compresses with half-screens and mobile displays. Maybe check in on the large computer design too.
13. With everything accomplished (as if), go check out other cool websites on the Internet and see if I can find anything to incorporate. There's always new things to do!!!

Stuff that's already done:

• Fix whatever is going on with the header image height.
• Add chickens up top, image dimension 78px 750px, make sure it compresses correctly.
• Make a real website background image.
• Create a custom cursor–perhaps it trails chickens when you move through.
• Write up an About section
• Make the website updates bar look like a stack of post-its.
• Add a music player on the right bar.
• Make the sticky contact bar actually usable with links.
• Add a guestbook.
• Add a Send A Message form to the Contact page.
• Add in projects to the Home page as highlights.