At University, we were tasked with creating a website that uses some basic JavaScript and solves a real-world problem. I made a website that displays conspiracy theories in a news website form as most information is only available on YouTube.
In 2017 I approached the National Hyacinth Collection asking if they wanted a website. I decided it would be a good opportunity to teach myself HTML and CSS. However, the project never came to fruition.
In order to use many of the new Web Technologies you first need a platform to test them on. This is my photography website. I am very passionate about photography and like to keep my website as close to the cutting edge as possible.
I’ve just finished recreating my portfolio using React. There aren’t very many visual changes apart from changing the hover effects a little. The site features a lot of repetitive content, such as portfolio items. React is good for this because I can create a component for the item which minimizes the amount of coding required. Having components also saves time in the long run because if I want to update a component I’ll only have to do it once rather than multiple times. As part of the process, I tried to make the code more readable, by including comments in each file, and separating out the Sass so it’s more manageable.
After attending several interviews, there was a common question that came up: What technologies did I use for a particular project? As a result of this, I have included icons beneath each project in my portfolio indicating the different technologies that I used. I have also brought back the GitHub contributions image.
My friend made a weather app so that they could learn APIs. I decided to fork it and take it a step further by experimenting with CSS Houdini, Variable Fonts, CSS Variables, and new browser APIs such as the Speech Synthesis API.
Features
- This App uses experimental CSS Houdini features that are currently only supported in Google Chrome.
- Variable Fonts. You will need to have an up to date operating system to use them.
- Geolocation.
- There is a reduced motion mode of this App.
- CSS Variables.
- Share API.
- Speech Synthesis API.
- Service Worker and notifications. It can be installed on many operating systems.
- Dark Sky API and Skycons.
Future Ideas
- Turn notifications on and off and have icon reflect that.
- Send notifications every 30 minutes even if app is not opened.
- Use more bleeding edge APIs (Suggestions welcome).
To mark the beginning of my second year at University I thought that I would try learning a new skill, namely Vue.js. I usually struggle to learn something if I don’t see any real practical application for it, but this time I figured I could turn my photography portfolio into a dynamic Vue.js enhanced page.
I started with creating a component for the portfolio elements on the homepage. I created a data set that contained all the information for the component. Vue then iterated over each one and created them. I then did the same for the images, once you’d clicked through to a specific component.
Next, I had to implement Vue Router, in order to get dynamic URLs. This was very tricky and took me a while to figure out that I needed to place the Portfolio page within a subfolder to apply .htaccess rules to it. Everything works now and it’s even a better way of showing all the images at once compared to the old method of just having the images pop up in a Lightbox. This would have never been possible without Vue as it would have taken too much time to hard code each image (there are 100s).
The next steps are to do a bit more styling and arrange the photos so that portraits and landscapes aren’t all next to each other breaking the flow of the page. I’m also going to take this as an opportunity to go through my portfolio and slim them down to around 25 of my best photos. The code is quite messy too so I might put each component in its own Vue file. In the far future, I’m thinking about possibly using Vue Native to turn the portfolio into an app.
Overall, it’s been a great experience learning Vue and it’s one step closer to a full-time developer role after I graduate.
Over the past couple of months, I’ve added some Analytics software to my site such as Google Analytics and Facebook Pixel. As my website serves customers in the EU, the Cookie Law applies. I have used JavaScript to ensure that cookies are not fired until the user has explicitly accepted them on the website. A button and banner are shown at the bottom of the screen for new users.
