Portfolio
Here are a few projects I've worked on recently.
Todo Vue
I've most recently been learning the Vue.js frontend framework. To test myself on this I've made yet another to do list! This list is based on a mockup from frontendmentor.io and features a filter, dark mode, and the ability to drag and drop list items to re-order them.
- Front End Development
- Vue.js
Notetaker
This simple notepad app uses the Laravel framework with React for the front end. A user can write their own notes notes which are sorted within folders. CRUD operations are performed on the notes and folders, which are saved in a MySQL database. Bootstrap was used to quickly style the app. This is a work in progress and will ultimately have more functionality, such as sorting notes by tags, and an improved UI.
- Design /
- Front & Back End Development
- Laravel /
- React /
- SQL /
- Bootstrap
Doob
This is a responsive landing page that was done to a specified design. The contact form is saved to a SQL database using PHP and there is another page which displays all the submitted contact forms. The Swiper JS API was used to make the three carousels on the page, allowing a user to scroll through additional blocks of content. For the image gallery carousel, I wrote some Javascript to manipulate the DOM to change the arrangement of images in the slides based on the window size to make it more responsive.
- Front & Back End Development
- HTML /
- Sass /
- JS /
- PHP /
- SQL
Scoot
This project was a challenge from Frontend Mentor, a platform that enables you to practise building websites to a design and project brief. Each challenge includes mobile and desktop designs to show how the website should look at different screen sizes. Creating these projects has helped me refine my workflow and solve real-world coding problems.
This project required me to build a fully responsive four-page website to the designs provided. I used HTML5 along with SASS and Javascript for the areas that required interactivity, such as the FAQ section and mobile navigation dropdown menu.
- Front End Development
- HTML /
- Sass /
- JS
REST Countries
This project is based on another Frontend Mentor challenge that required integrating with the REST Countries API to pull country data and display it. I used React for the front-end of the website, while the project needed the use of asynchronous Javascript for fetching the API data. The application includes a dark theme switcher, country search field and region filter.
- Front End Development
- React /
- Sass
Elizabeth Bennett Photography
This project was for a photographer to display their work. I created a minimal design and layout to allow Elizabeth’s photography to stand out without distractions. This included me building a custom image carousel with Javascript. I optimised the image files for different screen sizes and used the HTML picture element to load the best image file for the user's screen.
- Design /
- Front End Development
- HTML /
- CSS /
- JS
To-do List
I created a simple to-do list app to brush up on my React skills. I wanted to enable the user to create multiple lists and switch between them. This required the use of the State and Effect hooks as well as extensive use of React Context to share properties between components.
- Design /
- Front End Development
- React /
- CSS
Easybank Landing Page
This was another Frontend Mentor challenge. I’ve learned something new with each project, helping me to improve and adapt my style. This project is a single landing page for a fictitious digital bank. Coding the design tested my layout skills, particularly when positioning the background patterns for different screen sizes. I used a combination of CSS flexbox and grid for the responsive layout of the main content sections of the page.
- Front End Development
- HTML /
- Sass /
- JS
Static Job Listings
This Frontend Mentor challenge allowed me to use React to make a static job listings page. I used React to display the provided JSON data file as a styled list of job listing components. The most challenging part was coding the filter component, which allows the user to see a list of job adverts depending on their preferred job categories.
- Front End Development
- React /
- CSS
Social Media Dashboard
This was also a Frontend Mentor challenge. The social media dashboard required a dark mode theme switcher, which I coded using Javascript and CSS variables. The page does not import any real data, but could be adapted to do this.
- Front End Development
- HTML /
- Sass /
- JS
Manage Landing Page
Another Frontend Mentor challenge, the Manage landing page is a single-page website for a fictitious digital product. The challenge tested my layout skills again and includes a carousel and very basic form validation done in Javascript. I used Flickity for the carousel, so it can be accessed effectively on a touchscreen device as well as with a computer and styled this to meet the design brief.
- Front End Development
- HTML /
- Sass /
- JS