Making my website
Prologue
Being a young tech person can be quite daunting especially once you get into the graduate bubble and you start to foresee that which you can have and that which you may desire. It seems like a never-ending labyrinth of thoughts if you decide to soliloquize about your endless opportunities. However, the journey of a thousand steps begins with one.
I have always thought about having a website that I could showcase some of my works but as aforementioned, getting round to it has always been my foible. Also, what didn’t help much was once I decided to go down this rabbit hole of how to design my website, I saw some websites that gave me some ridiculous ideas that I can neither fabricate, comprehend, or elucidate. Such examples are this, this, and this(ps: these are clickable links :) ). These are only a few websites I encountered during this search. I would like to think that these websites are interesting even to the least tech-friendly people.
Finally, I decided to throw away all of my extravagant idea(nonetheless from external influence) and just keep it simple. I decided to finally make my website and THIS IS THAT STORY(Well kind of).
Although they are not similar in the slightest, deciding a stack to develop/ work with is as difficult as trying to decide what to have for dinner on payday. In my situation, this was an early battle, caught in between should I learn and develop on the fly, or shall I use a fairly familiar stack, solidify my knowledge and carry on. I decided with the latter and decided to use the Angular framework coupled with passing in an external API to receive emails.
Main
The Angular Framework is a superset of Javascript. The Angular framework explicitly does not use Javascript but rather Typescript. However, it is not uncommon to use Javascript syntax. It is commonly referred to as ECMAScript. It enforces strong typing when necessary and it can be quite easy to understand(Although the learning curve can be quite steep).
There are several features such as its component-based architecture where it can help separate unnecessary code that would usually belong together on a particular page. This feature allows these created components to be reusable as they all exist as separate entities. The massive community also made it an easy choice as I have previously experienced how important a community can be especially after venturing into the Python Community previously. There are several benefits to using this framework such as its ability to incorporate several libraries such as RxJs, NgRx, and ng-bootstrap, etc. More information on its benefits can be found here. It also helps that companies at the forefront of their respective industries utilise it.
The website code in my regards all sits in the app.component.html file which is quite odd. I decided to have my application as a single-page application as I felt it would allow for ease of use. I decided to have the whole page sit in several sections.
The first page proved the most difficult as I had to understand how I would handle the images during the development process. In Angular, the images have to sit in the assets folder to use them. This is only the first step as there have to be other properties set to allow for interaction i.e position, size, etc. Here is an extract of one of the CSS classes I used to handle the image.
It is self-explanatory to make sure that the width and height of the section are set to the maximum width and height of the viewport. The image is also given a size to cover the whole container(On extremely large screens, the image might be cut off). The text in the middle of the photo sits in a container and is easily centered.
The about section container was similar to the way the first image was handled. However, for this image, the background-position needed to be specified as the image was significantly smaller, and more texts were needed for description.
The nav bar at the top required some handling as on a transparent page, the texts blended in with the background, and the user could find it hard to navigate. Initially, I tried changing the color on hover but it didn't suit my needs. I then decided to change the transparency on scrolling.To this end, the idea was to first get the header, and simply change the class on that header when the user scrolled. I added a listener for when there is a vertical window index is passed.
As seen above, selectHeader is the variable used to store the value of the retrieved header. If it is then retrieved, we then assign a boolean to a lambda function and that can be called within that particular function. In this case, if the user scrolls window is scrolled more than 100px vertically the CSS class header scrolled is added. This class adds the color black as the background for the header as seen below. the class list property is used to add and remove CSS classes where necessary.
The third section is my resume and this just highlights my experience in the industry. This is exactly the same as the first section of the page but here I added a row and container classes to contain the information coupled with a different type of “h”, <p>, and <li>tags to hold the tasks that I carried out. I also appended my full CV which is hosted permanently on a google link.
The final portion of the website just entails a few of my projects and a few interests of mine that I am keen on learning about/working on. They are all listed in an order of no particular importance. However, I hold the last interest quite highly on my list as seen below.
The website ends with the user being able to view my social links and being able to send an email directly from the website. I was nearing completion and the end goal was in sight. Initially, I had my mind set on a Java Backend. At this point, I was not too keen on this feature and the photo below best describes my mood swing at the time.
Initially, I thought I should publish a CSV file on the web directly and pass the form data from my website directly to the CSV so I receive the email as if you were to open it in Excel but this proved quite difficult. I decided to use FormSpree which allows you to append your form data to a rest endpoint. This service also helps forward the email to your work/personal email also. I was not too worried about spam emails however, I added a honeypot to prevent spam emails.
Honeypots are fields that you can add to a form that a user would not see but a bot would, as bots access the whole form and “touch” every field where necessary. In conjunction with this, the form spree service helps parse the message sent and deciphers it. If the message is incomprehensible it classes it as spam. The way I achieved this can be seen below.
Prologue
I am actually quite chuffed with the process. Now whilst I do understand that I still have a long way to go in this world of programming. I am happy as this was my first foray into front-end development and luckily it makes up some part of my current job. It was nice to learn some extra skills that I have found useful and I can only keep going.
I will start pushing my projects soon and I will “try” to release an article/write-up explaining the thought process behind them all. Albeit, I have written this in a colloquial/semi-informal this so even readers with the slightest knowledge in technology can understand the rubrics of a website and enjoy it. I am keen to have a more technical conversation if more information is needed on how the website was made. I am also very open to feedback. Please feel free to contact me to this end.
Thanks for taking the time to read this article. It really does mean a lot.
