Hi there, my name is Andrew and I’m a 25-year-old Front-End Web Dev from Ireland. From a young age I have loved to build things from gaming PCs to PVC airsoft guns. Over the last two years I have been building websites and progressive web apps using HTML CSS and JavaScript.I have a hunger to learn and develop as a person; I’m using this desire to further my knowledge in web and software development. I hope you find my person portfolio pleasing to the eye and gives you a view of my front-end capabilities.
I built this ecommerce site to showcase my knowledge of building and working with a large code base. I used Figma to mock up a wireframe of how I wanted the landing page to look and also for showcase sections on the main index.html landing page. I used bootstrap 4 for the main UI element as responsiveness is always near the top of my priorities when building websites, with such a large website I knew the bootstrap classes would speed up development, mainly in terms of responsive images as there are many on an ecommerce site.
I used a library that’s based off of vue.js to add functionality to the website. When a user clicks the add to cart button, the item price, item description and the item image will be added to the cart and gives the user the option to input card details and take payment for the items using stripe.
My portfolio is my biggest project to date. I really wanted to combine all of my front-end knowledge to showcase what I can do. I really like clean simple websites as I find they are easy to navigate and pleasing to the eye. In 2020 having a responsive website is one of the most important factors when building a website. I used a combination of media queries, CSS grids and Flexbox to achieve this. The hamburger overlay adds to the complexity of my portfolio site and was probably the most difficult part. I used JavaScript in part to remove the overlay on clicking on link elements. I also used a JavaScript Typewriter effect on my landing page to make my website less static
I wanted to build something function with what I have learned in JavaScript. I kept the UI simple so I could focus on using the Skycons animated canvas glyphs. To get the weather information I used the popular Dark Sky api. I used an event listening on the page load to grab the users location to give the relevant weather date. As the Dark Sky api uses Fahrenheit I used a simple formula to convert it to Celsius. Finally I used a function to display the relevant Skycon in accordance to the weather.
