About
this site.

WHAT am I LOOKING at?!
(it looks so old and gross!)

No, this is... NOT in fact a site that hasn't been updated since 2004.

I deliberately designed it with that style in mind, and a huge appreciation of 90's-early 2000's web design.

I wanted this site to feel just as fun and engaging, having a touch of personality-- something I feel that modern web design is missing these days.

Originally, this was made as a final project for my Intro to Web Design class I took in Spring 2024 before graduating.

(Keep in mind-- this site's still a work in progress. I plan on adding more pages over time and tweaking stuff here and there. Please leave some feedback on what I should change/fix, I'd appreciate it!)

Why build a personal site?
What's the goal here?

The point of this site is to have everything I've made in one place.

First of all, I'm not exactly the best at keeping up with all my socials or posting to each of them regularly... so why not just have a central place to keep all my stuff up?

Second of all, I want this site to be an archival of the many art pieces I've done over the years up to current year. I might not be proud of most of them, but hey. Live and learn, yknow?

And thirdly, it's to also serve as a sort of portfolio, a showcase of my work,.

This had been a long time coming too. I had a disorganized Weebly page many years ago that I made in my early teens, but that's been long gone. I've been wanting to do a personal site for a really long time, free from the basic click-and-drag type of deal you get with certain website builders. A website that feels more personal.

Site development

We had free reign to do whatever we wanted with our sites, no strict style to stick to. The instructor was very lenient on creative freedom for our sites.

First we've learned the fundamentals of HTML and CSS in Dreamweaver, (i used BlueGriffon and Notepad++ at home. did not want any Adobe product on my computer.) then we spent time trying to apply that knowledge to working on a site dedicated to our favorite books.

(It didn't have to be books, just any kinda media really.)

For that assignment, I made mines about Who Framed Roger Rabbit*. an all-time classic and probably one of my favorite movies of all time.

(click to enlarge.)

I was proud of this one too-- tried going for a skeuomorphic look, using whatever I found around the house to make it feel like you're sitting in front of a detective's desk, looking through evidence. I even went as far as to draw some custom stills for the header too, instead of grabbing stock PNGs from Google images.

(click to enlarge.)

And then came time to work on the site.

I already knew what I had in mind for the look and feel of this site. I already had a concept of the layout sketched out.

All I had to do was put it all to code.

Thanks to the experience from cobbling together what was basically a fansite for the movie for 8 weeks straight, I had a much easier time laying out the site.

It took about another 8 weeks for me to get it to a complete(ish) state to turn it in.

One thing that really stumped me, however, was the art gallery.

Particularly the full-screen pop-up effect when you click on one of these images.

Following this video tutorial, I managed to get the whole pop-up effect working all right. I even followed the JavaScript portion of the video... even though we have not covered that in class.
Yep. Everything was working just fine until I had this bright idea:

what if i added a title, date and description whenever it pops up?

Sounds like an easy task, right?

Here comes the nerdy part:

So I got to work. I figured since the JavaScript is pulling data from the <img> tag to change based on what image you've clicked on, what if it can pull data from the <h2> and <p> tags as well?

So I wrote in hidden metadata under each image, that way it would ONLY show up in a little window underneath if I click on an image.

However, even though the code had no problem with the images, I couldn't figure out for the life of me how to get the description, title and date to change, so for a while, the metadata would just stay the exact same for each image. I've tried everything I could think of. I even had my instructor involved, she even gave me suggestions on multiple ways I could possibly solve this issue. Finally, it got to a point where I needed outside resources.

The deadline was quickly creeping up on us the more time I spent on this, and I really wanted to work on other areas of the website, so my instructor had her coworker, Tad S. who specializes more in JavaScript take a look at the code to see what I was doing wrong.

I sent him the files for the art gallery, and he reviewed the code.

As it turns out, the issue was that JavaScript wasn't getting the context.

Paraphrasing from what he explained-- even though the code was looping over the collection of images, the line "document.getElementsByClassName("title")" returns a collection of elements with that class, which is "title", the one I used to get the title within the image.

If I changed the click event to reference the <div> tags with the .image class instead of directly referencing the <img> tag itself, then it makes it easier to work with the elements contained inside the <div>. (i.e. the date, title, description AND the img)

Then the query child selectors should now be relative to the image container. (that means the code should now be able to read the contents inside the image container that relates to each image you click on.)