Even though there are exams and what not, a geek can still eek out a little bit of time here and there for passion projects. It used to be blogger hosting all of my blog posts but ever since switching over to WordPress, I now have a “free” domain waiting to be used.
I finally created a portfolio site for myself, even though I’m not quite sure what to put on it yet. In fact, most of it is still work in progress but I thought it would make more sense to have this rather than a page that isn’t working at all.
Since there are only 3 pages, I wrote it entirely in HTML, hoping to convert it to some form of static NodeJS page in the future. However, I’ve employed all the new techniques I’ve recently, as well as some concepts that I’ve learnt in school.
CSS Grid
One of the latest updates to CSS3 is CSS Grid which allows you to be really flexible with your template. If you have not heard of it, you definitely need to check it out because this reduces a lot of hacky code and reduces the need to use templating systems.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
That’s two links to get started, but I also recommend watching some YouTube videos that will speed up the initial understanding process. I built the portfolio page using this new syntax, as well as flex-box for some responsive goodness.
ES6 Syntax
The “new” Javascript syntax. Probably not that new at this point in time but I’ve never used it before until now. The greeting that changes dynamically every 4 seconds is built using purely Javascript without and jQuery functions in order to make it more efficient.
In the search for efficiency, I used a generator function that yields a value only when it’s called. Using the default JS setInterval() for the call, then used a timeout function to set the animation timing. The animation itself is done using CSS transitions, and since only opacity is being controlled, everything is extremely streamlined.
“MVC” Template (in progress)
MVC comes in quotation marks because it really isn’t, it just kind of seems like it (firstly because there’s no model).
(Couldn’t avoid it) Using jQuery’s load() function, I could split up the main content into different views, then dynamically load them into the page by calling upon it.
This allows me to simply each page to essential this block of code.
The custom Javascript (copied from Stackoverflow) allows me to load the views in automatically without me having to specify it for every single page.
However, for some reasons I can’t understand, this seems to be a finicky solution as it would refuse to load the page correctly from time to time, from browser to browser. This erratic behaviour leads me to create another page in order to beta test it before I push it out officially.
Writing this was really troublesome because I couldn’t get the syntax highlighting to work, possibly because of the mobile optimization as well as the Grammarly plugin to help with my writing. Hopefully, I can get it to work next time because screenshotiing is a major pain in the butt.