Portfolio Website

Tags: Webdesign and javascript

I created this website as a means of showcasing my technical skills and resume, while also showing a bit of my character and personality. It also serves as a sources page in case you're interested in the frameworks, APIs, and libraries I've used. This page is more for those curious on how I created this website. I'll only be covering the more technical side of things as there is a lot to cover. This website was a blast to make and I look forward to regularly updating it.

Technical Details

Contact Form

Image of the form I used

I created the contact form by creating a bunch of text fields that would send data using the Formspree API to send the data to my email. The Formspree would scour the HTML for tags that matches what its looking for. It then parses the message and sends it to my email. In the future I could use the Google Captcha API to prevent bots from sending things to my email but the Formspree API was hard enough to set up. For now, please dont spam me 🥺

Interactive Maps

Picture of the map I created

To create the interactive maps on the work page, I used the leaflet javascript library. Using this library, I created several pins and event handlers to create custom messages and add a little extra interactive element to my website. This library works by creating map objects from a map object that you can modify with different attributes. You can then attach pin objects to the map object and give those pins messages or even create event listeners to make them pop up under specific conditions. I just made an initial pop up so that the user knows that the map is interactive and I made a few more event listeners to show where the coordinates the user clicked or to display a message about the place they clicked.

Autoscrolling gallery

picture of the image carousel I used

I created the autoscrolling gallery on my about and work page by using the Slick JavaScript Library. I would definitely recommend against using it however as the API was very difficult and the documentation was sparse. After a lot of trial and error I managed to get the carousels working. This library works similar to the Formspree framework in that it searchs through your html code to find tags that match a specific condition you're looking for. It then creates a carousel of the object that you can modify by changing the attributes of the carousel generated. For this website I choose to implement an autoscrolling feature and arrows so that you could manually scroll through the images if you wanted. I did this by changing the values of the carousel object created.