James

Sandford

Smith's

Portfolio

This page is really just here so I could have six buttons on my splashscreen!
But seeing as you're here... welcome to my webpage! With this webpage I hope to share with you a little bit about...
Who I am

Why I'd like to pursue a career in WebDev

What I've learnt over the last few months

You can navigate through the site using the tabs above. I hope you enjoy my site and feedback is always welcome!
If you'd like to see what's happening under the hood you can find the github repository for this site here:
github.com/JamesESS/FandCWebPage

About me

Hi there, I'm James I'm I was born and raised in London. I loved growing up in such a diverse place full of life with something interesting round every corner! I still get great pleasure exploring with my friends, stumbling across pockets of culture.
I studied Electrical and Electronic engineering at Plymouth university. I really enjoyed the more coding focused aspects of the course and late nights with a big group of us crowded round a library table bouncing ideas off of each other. Unfortunately my enjoyment for those parts of the course were far outweighed by how much I hated the more physics heavy aspects which led to me dropping out after my second year. I briefly moved to Montpellier in the south of France and then returned to London where I've been since.
For the last 7 years I've been working as a bicycle mechanic in north London. Nowadays most of my free time is spent riding one of my (many) bikes or cooking. If I’m being honest of the two I’m far more likely to be found baking a cake or smoking salmon than riding my bike.

Photo of me infront of bamboo taken with infrared camera causing everything to be pink
Photo of me with some friends
Photo of me forging a kinfe
Photo of me in bicycle workshop witha dog
Photo of me on bike by field
Photo of me by tent and bikes on a hill overlooking village

Why web dev

In a weird way I think there's quite a lot of overlap between my current job and being a web developer. Most of my day is spent tracking down faults on bikes, working out how to fix them and then implementing the fix. Standards in cycling change needlessly frequently so I'm very used to tracking down technical documents and write ups for specific parts to make sure I understand how they work and what compatibility issues there might be.
My role at work is very customer facing so I'm comfortable explaining complicated jargon laden problems to people with little knowledge of the subject. Over the last seven years some of my absolute favourite times have been sharing my knowledge with new apprentices or regular customers with time to kill.
I'm hoping that becoming a web developer will let me continue doing the parts of my job I love the most whilst getting to learn a whole new skill set and being a bit less taxing on my body. I've really enjoyed working through the prerequisites for the course. I’ve found myself getting totally absorbed by the projects before and after work every day, pretty much all day I’m thinking about how to implement a feature I want or how to layout a section of my site.
It's been incredibly interesting seeing what happens behind the scenes, I've found myself opening the developer tools for Firefox on pretty much every new website I visit trying to see how a certain feature was implemented.
It's also been very eye-opening finding out how much thought goes in to making the web accessible for everyone, it's not something I'd ever really thought about before and I really appreciate getting this new perspective on the web. This is an area I need to work on there’s some small changes I made on this page as I’ve learnt a bit more, for instance originally near enough all of my buttons were actually divs. After getting everything set up I watched a video that mentioned how much accessibility was lost with this method I went straight back and changed them all to buttons. If I had more time I’d love to go through and add correct ARIA to my HTML. I’ll definetly be reading more about it once I’ve finished my projects.

Why FaC

Having worked at a small local bike shop for the last seven years I’ve got very used to a work environment with a sense of community, getting to see familiar faces every day. Some of my favourite times over the last seven years have been teaching work experience kids, apprentices and well anyone that seems interested in learning a bit more about how their bike works. I’ve found it incredibly rewarding sharing my knowledge with others and I always come away having learnt something new or looking at why I’m doing something a certain way. Founders and Coders seems like an incredible opportunity to get involved in tech while getting to keep that sense of community. On top of this it would give me an easy way to continue sharing my knowledge with others and learning from them. I’ve only been able to come to a few of the Tuesday sessions but in those I found that just being around other people all working towards the same goal filled me with excitement. Seeing other peoples design choices and how they’d implemented similar functionality was super helpful.

My recent projects

Screenshot of my hobby page site

For this project I had to build a webpage about a hobby I'm interested in. The main focus of this page was getting started with Document Object Model (DOM).
We had to display an up-to-date time on our webpage I also decided to add a countdown timer to get some extra experience using JavaScript and DOM. Once I'd managed to get my date displaying correctly I realised it wouldn't update unless I found a way to periodically call the relevant function. Thankfully I came across the setInterval() method quite quickly, using this I was able to call my function once every second
I didn't know about CSS flex or grid at this point so everything is held in place with padding, I used percentages for my padding hoping it would help improve responsiveness. If I were to build this site again I think I would approach it in a different way. My stylesheet would definitely look quite different!

screenshot of my project gallery

For this project I made a gallery showcasing all the other projects I've done for the FaC prerequisites.
This was an introduction to using flex display. One of the main challenges for this project was making sure that the content displayed in a certain way on different display sizes. I used the clamp() function in CSS to help achieve this. Clamp allowed me to set a minimum a maximum and a preferred size for my elements, this meant I was able to scale my elements to match the size of the display.
One specific requirement was having my projects show in a single column on mobile devices. With lots of experimentation and pixel measuring I was able to achieve this using the clamp function. I think it would have been better to use a media query allowing me to effectively have a seperate stylesheet for mobile devices as there's a few issues I couldn't resolve on smaller display sizes.

screenshot of my moviedatabase

This project was used as an introduction to JavaScript objects and how to manipulate them. I was given a small movie database and free reign on what to do with it as long as the user was able to interact with the data in some way.
I already wanted to make a site that picked a random film to help with option paralysis on various streaming sites so I knew I wanted to have that functionality in my site. This was the first feature I built and was actually quite easy to implement, although I don't know how well my method would scale.
I then wanted a way to see all titles available and finally make it possible to add your own film to the database. All of the functionality in this site relies heavily on the Object.keys() method, this helped me be able to display data about different films dynamically so that everything still worked when a new film was added. This project was very JavaScript heavy so there was a fair bit of debugging and fault finding along the way. I made constant use of console.log to check if I was actually reaching the functions I wanted to and the values of various arrays, objects and other variables along the way.
One point I got especially stuck on was stopping my form submit from refreshing the page, from lots of googling I managed to get it working the way I wanted, this issue gave me a chance to better understand the way JavaScript event handlers work (there's still a lot more to learn here!). Another feature that gave me a fair bit of grief was the alphabetical sort, for some reason I decided it would be best to ignore 'The' at the beginning of titles when sorting. I realised while playing around with this that my sorting method didn't account for capitalization so I went back and fixed that. However if I'd worked on data sanitization when new films are inputted this wouldn't be an issue.
I actually did this project before the project gallery and I think it has suffered for that. I'm very happy with the functionality of the site but visually it leaves a lot to be desired.

screenshot of my about me webpage for Founders and Coders

This project was about combining everything I'd learnt so far in to a website about myself and why I'm interested in web development with Founders and Coders.
To start I sketched out some basic layouts for how I might want the site to look. I knew I wanted a splashcreen for my site but couldn't decide what that should look like. I came across a youtube video by Hyperplexed showcasing a very cool splashscreen and breaking down how they would go about making it. Using this I made my own (admittedly very similar) version this introduced me to the data attribute in HTML and making use of it as a style selector in CSS. I wanted the splashcreen to be interactive so it made sense to have it navigate to a section of the main site. Then using data attributes I made it so the splashscreen buttons became my navigation bar, this meant I could keep my eventlisteners from the splashscreen and combine the splashscreen and navigation bar functions in to one.

screenshot of my javascript game

The final project was to make a game using HTML, CSS and JavaScript. Reading around it seemed like the best way of doing this would be with the HTML canvas element.
I decided to try and remake a classic arcade game Galaga. If I'd spent a bit more time getting familiar with canvas before deciding on this I'd have definetly picked something simpler!!!
This project was challenging from start to finish. I'd love to go back and improve it more once I've got a better handle on JavaScript.











Github
Instagram
Linkedin