Lao Tzu
109 lines
8.2 KiB
HTML
Executable File
109 lines
8.2 KiB
HTML
Executable File
<body>
|
|
<title>MY PAGE</title>
|
|
<div id="body">
|
|
<h1>THIS PAGE</h1>
|
|
<h3>PROGRAMMING THE LIKES OF WHICH NASA HAS NEVER SEEN</h3>
|
|
<h6>3/24/2024</h6>
|
|
<p>
|
|
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?
|
|
</p>
|
|
<p>
|
|
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!
|
|
</p>
|
|
<p>
|
|
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!
|
|
</p>
|
|
<p>
|
|
Using a LAMP stack system also allows for <i>dynamic</i> 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...
|
|
</p>
|
|
<h3>UPENDING THE ORDER</h3>
|
|
<h6>2/1/2024</h6>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<h3>10/10/2022</h3>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
I decided to make a webpage for several reasons:
|
|
</p>
|
|
<ul class="number">
|
|
<li>
|
|
I realized my resume is pathetic and doesn't really show off any of my programming skills as of now (being a second-year engineering student with no field experience),
|
|
</li>
|
|
<li>
|
|
I thought it would be a fun challenge and learning experience to flex my dusty web design muscles on a project that has real utility,
|
|
</li>
|
|
<li>
|
|
I was bored of killing my free time playing Disco Elysium and wanted something to do.
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
So I sat down and started throwing some markup together!
|
|
</p>
|
|
<h3>THE JOURNEY</h3>
|
|
<p>
|
|
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 <a href="starsky.html">here</a>.
|
|
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.
|
|
</p>
|
|
|
|
<p>
|
|
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).
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
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!
|
|
</p>
|
|
|
|
<h3>THE END; THE FUTURE</h3>
|
|
<p>
|
|
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!
|
|
</p>
|
|
<p>-James</p>
|
|
|
|
</div>
|
|
</body>
|