Hyde Design

Building this website, Part 2 - December 15, 2024

Since my last post I've built a portfolio page to highlight a few of my more recent web projects. I'll go over some of the goals I had and then some of the challenges I've run into.

I suppose the goals for a portfolio are relatively straightforward -- to highlight the projects and features that best showcase your abilities as a designer. I didn't want to just link to my work both because that both forces the viewer off of my website and because in some cases viewing any relevant content would require that the viewer be able to login, so I figured it made sense to provide screenshots that highlighted some of the features/design elements on those sites. I also wanted to have some expository text for each site that was highlighted.

To showcase the images I could have just lined them up vertically and allowed the user to scroll down the page to view them, but I thought a carousel would be more fun to implement and save some vertical space. I initially tried to build my own, and made a significant amount of progress, but it broke on page resizing (because I realized I wasn't using relative units to control the position of the slides), and I decided to just import Bootstrap and use its carousel implementation, which works well and probably saved a good bit of time.

I also wanted users to be able to zoom in on photos, so I've built a full screen image viewer that comes up when an image within one of the carousels is clicked or tapped. The viewer allows mobile users to zoom in on an image and move it around the screen, and to double tap to zoom in on a particular point on the image. The implementation has been rather difficult but I've gotten to something I'm decently happy with, although the two finger zoom/pan still needs some work. I haven't come across many mobile websites that implement the feature, but both the eBay and Reddit iOS apps have similar functionality and I don't see any reason that it should be impossible to get right on the web. I'll hopefully one day be able to sit down and both refactor the code and get an implementation I'm fully satisfied with, but for the moment I think it's time to move on to something else.

I do want to highlight one of the significant challenges in building the image viewer. The behavior that makes the most sense both for zooming with two fingers and by double tapping is to zoom the image around either the center of the two touch points (for two fingers) or at the tap point (in the case of a double tap), which is easy enough using the transform-origin property of the image element, but the issue I keep running into is that adjusting the tranform origin also means that any translation applied to the image (from panning) is also applied relative to the new transform origin, and converting the panning units from one transform origin to another hasn't proven to be straightforward. I keep feeling like I'm getting lost in all of the coordinate systems I'm trying to maintain, and I think there has to be easier way but as of yet I haven't see it. Like I said earlier, hopefully I can come back to this down the road and maybe glean some new insight that makes the implementation more straightforward. For now I'm finding myself ready to move on.

As far as next steps go, I'd like to set up a page detailing and linking to some of my hobby projects. I've done a good bit of work with Three.js and a couple of small WebAudio experiments that I'd like viewers to be able to try out. There's some overlap between some of the projects -- 2d Canvas and WebAudio for instance -- and I'd like to set the page up in a way that allows users to filter the projects by technologies incorporated, which will necessitate setting up a backend and dynamically generating listings for each project, filtered by tags perhaps. Easy enough, but more work. We'll see. For now I need to gather all of the project files from various computers and hard drives around the house and determine which ones are still working and which aren't.

Stay tuned for more updates.

Building this website - Early December 2024

I've decided to build this website to showcase my web design portfolio as well as some of the fun/challenges I've had with programming and with tech in general. I'd like to document new challenges as well as past experiences, but I think it makes sense to start with my thought process and experience in setting up this site and then move on to some of the other projects highlighted here.

As of right now, I've set up only the home page of the site (which you may be currently viewing -- it's possible I'll have a separate link to the blog on its own), and my next move may be one of many; I'm not sure yet whether I'll set up a backend (or what backend techonology I want to use), create pages documenting some of my web experiments (or create a blog post for each), or work on my portfolio. I think the latter should be the priority.

As far as the portfolio is concerned, I'm not sure whether to involve the back end at all and have a separate database entry for each site or just create a static page. I'll probably just go with a static page as I think it will allow me more customization for each entry and the content isn't likely to change much. As I mentioned earlier I'm also still not sure which backend technology I want to use. I'm fairly experienced with PHP and MySQL but there may be benefit in picking up something new. Node.JS has always seemed interesting; on the other hand I'm hosting this page on my local apache instance and I don't see any sense in running a separate server for this site only. We'll see I suppose.

I have nothing further to add. I'll make some updates and check back in.