Hey, what's the deal with the URL up there? It's not just a simple filesystem, there's a question mark and some text. What's going on?
The site may look effectively the same, but the backend has been completely overhauled and launched into 1996! The old architecture was a basic filesystem hosting static html with a little bit of client-side javascript. This was acceptable, but as my ideas increase in complexity I realize that making new pages is more and more of a pain with this old setup. So welcome to the future!
Now all page content is managed by PHP and served up by an internal SQL server! This means in order to add a page, I just have to write the html for the body of text and PHP deals with the rest. It also makes my system more modular. I can specify the type of page (article, video page, image gallery, interactive app, etc) to change the styling, format, header/footer, etc. of the page. I can also add entirely new page types whenever I please and I can specify what to do when a type is given. At the moment, the only implemented page type is the simple tex article like what you're reading now. But I can make new ones as I please. Pretty cool!
Using a LAMP stack system also allows for dynamic webpages! I can pull in data and then swap it for something else! I can get videos up and running, or send machine learning data back and forth for fun interactive ML toys! Fun stuff is abound...
Starting October 2023, I began working as an all-purpose programmer for the USGS in Flagstaff. Effectively, my job is to run their web services and help develop data visualization apps for them. As a refult, I have learned a lot about modern web architecture. Looking back here at this website, I realized an overhaul was in order. So over the last few weeks, I've been fixing up the backend.
The main thing I've done so far was to get each service and put it in a Docker container which pulls all its web content from Github. This means each service can be invididually controlled and deployed on any machine and setup can be highly automated and synced quickly. This makes everything easier.
This humble website I've made to host my portfolio is the first serious trek I've made into web design. Of course, I've played around with style sheets and javascript here and there, but this is the first time I've tried to make something polished. I learned some about neat css styling, javascript, and a lot about mobile web design. The site is not at all perfect (I threw the first version together in a week with only a little knowledge of web design), but it's something I'm actually happy with and even a little proud of. Hopefully this page will give some insight to my journey down the web-hole.
I decided to make a webpage for several reasons:
So I sat down and started throwing some markup together!
The first thing I wanted to do was make a really slick home page that was like a night sky overlooking a synthwave landscape thing. The problem was, I can't draw nor do I have experience in graphic design, so I wrote up some scripts for making a night sky and a gridded landscape. The landscape was the easy one. All I did was draw some horizontal lines with a distance between them that decreases as they approach the horizon , then draw angled lines radiating from the horizon and BOOM! done. Next was the starry night. For full detail on this side-project, see my page on it here. I basically just draw stars with random temperatures, sizes, and locations. I also have a cluster drawn along a randomly defined line, to simulate a galaxy. As of writing I'm not done with this night sky project, I have plans to add more galaxy clusters and nebulae and all that. But that's for another time.
Next, I had to actually put this pictures onto a webpage. I wanted the viewport to be filled with the night sky and a title heading: 'JAMES WITZEMAN.' Then if the user scrolls down, they're taken to the land where the navbar is. I also wanted there to be a nice parallax effect between the sky and the landscape, to really make it feel like it was behind the land. This was challenging part for me to wrap my head around. What I ended up doing was employing the z-index and transform attributes to get the desired effect. The end result is a simple but pretty home page. Next, I want to include some 'fun' activities to play around with on the homepage (if I find time).
The next challenge was trying to make sure the site loads properly on mobile. I probably could have just built a style sheet that can flex enough to work on a totally different viewport, but frankly I am not capable enough for that. So instead I decided to throw a little javascript together that detects if the page is loaded with a giant regex that returns true if the device is a phone. If the device is a smartphone, then the javascript replaces the main css pointer with a different pointer to a mobile css file. The mobile file has everything arranged vertically, instead of a standard sort of desktop blend of wide bodies and left-to-right navbars. To get a feel for what a readable text-heavy mobile page looks like, I tried to take some pointers from Wikipedia. Wikipedia's mobile pages are text-heavy, but the text is often broken by paragraph spaces, lists, photos, and title headings. The text is also in a no-abrasive font, the line spacing keeps the paragraphs from being too dense and intimidating, and the margins are tight. I tried to lift as much of this advice as I could to keep my pages readable.
Finally I had a somewhat readable page on mobile, but the navbar was totally broken. It was made for a page with planty of horizontal space to fill, but on mobile there's barely space for a single link. So I decided to build a simple drop-down bar for mobile only. This meant I needed to add some kind of single button or element that, when clicked, reveals a hidden vertical navbar. Because the original HTML doesn't have any kind of button element, I needed to add it in wih JS when a mobile device is detected. I threw this in the main javascript file, and added some code that reveals the vertical navbar when the button is clicked. Now I have a nice mobile dropdown!
So that's about it. As far as the website goes for now, that's all I've gotten to. I think it's been a rewarding challenge for myself and I learned some about how all this works. The website is still pretty barebones, and I want to try to add some fun physics stuff, encryption and security, a blog-editor GUI so I don't have to type all this in raw HTML, and maybe a login-password system for fun. Until then, that's all for now I think. Thanks!
-James