Slack Mockup (Homepage)
This project recreates Slack's homepage using PHP and CSS. The index.php file dynamically assembles content from various PHP files, while style.css provides consistent styling with flexbox for a polished, responsive layout.
- PHP
- JavaScript
- HTML
- CSS
Software Company Website (Homepage)
A pure HTML, CSS & JavaScript redesign and build of a local software company website homepage
- JavaScript
- HTML
- CSS
Executive Therapy Website
Professional website built for an Executive Therapist Company. UI implementation, component build, state-management, prop-management and TypeScript.
- React
- JavaScript
- TypeScript
Recruitment Website (UI Focus)
Professional website presentation. Testing my React Router skills, UI implementation, UX understanding as well as state-management, prop-management and Tailwind.
- React
- JavaScript
- Tailwind
KIA Website Clone (Home Page Only)
Replicating UI and professional website presentation. Testing my UI implementation, UX understanding as well as state-management and prop-management and Tailwind by cloning KIA's Home page
- React
- JavaScript
- Tailwind
Professional Landing Page #1
Focused on recreating UI and professional website presentation. Improving UI and its implementation, state-management, prop-management and form validation
- React
- JavaScript
Monzo Bank Clone (Home Page Only)
Professional website presentation. Testing my UI implementation, UX understanding as well as state-management and prop-management and Tailwind via a Monzo Bank clone
- React
- JavaScript
- Tailwind
Professional Landing Page #2
Focused on replicating UI and professional website presentation. Testing my UI implementation, UX understanding as well as state-management, prop-management and form validation
- React
- JavaScript
Small Business Landing Page
This project allowed me to build upon my React learning. Implemented state management in the application, utilising React's state mechanism to handle and update the dynamic content of the user interface. Incorporated local data files to store and retrieve data within the application. I also implemented state management in the application, utilising React's state mechanism to handle and update the dynamic content of the user interface. Plus, used 'props' to ensure a modular and maintainable structure. A fun project to build!
- React
- Node
- JavaScript
Invoice Builder
This project tested my form validation, array manipulation and event handling. The invoice builder allows users to create and print invoices. Users can input item details such as name, cost, and quantity, which are then dynamically added to the invoice. The invoice builder code simplifies the process of generating professional invoices for various business needs.
- Array Manipulation
- Event Handling
- DOM Manipulation
e-learning Landing Page
My challenge was to build out a landing page and get it looking as close to the design as possible. The challenge was created by Frontend Mentor, using their detailed Figma file as a design guide. Flex-box and Grid would come in handly as well as utilising background images. My methodology for this project focuses on ‘mobile-first’ design principles.
- CSS
- HTML
- Responsive Design, Flexbox, Grid, Figma
Music App Landing Page
With thi sbuild, the challenge was to build out a landing page and get it looking as close to the Figma design as possible. I also wanted the landing page to closely follow the brief detailed by Frontend Mentor (using their detailed Figma file). Flex-box and Grid would come in handly as well as utilising background images. Similar to the above project, my methodology for this project focuses on ‘mobile-first’ design principles.
- CSS
- HTML
- Responsive Design, , Grid, Flexbox, Figma
Agency Landing Page
Mobile navigaion and responsive design were key requirements with this build. Social media agency landing page using JavaScript to effectively guide potential clients towards the business contact form. The focus was on creating a seamless and efficient user experience, so I opted for a single, continuous scrolling page design to eliminate distractions and keep the user engaged.
- JavaScript
- Flexbox
- Grid
- Media Queries
eCommerce Product Landing Page
A small but technical build. With this, I leveraged the Document Object Model (DOM) to dynamically update the content of HTML elements based on user interactions. Implemented conditional rendering to display different product images based on the clicked thumbnail, and to adjust the cart modal content based on whether the cart is empty or contains items. Managed variables like setNumber, cartEmpty, and notification to keep track of the selected quantity, cart status, and added products, respectively.
- uuid
- Conditional logic
- Template literals
- forEach
- .filter
- export
Travel Info Website
A fun project. Implemented functions like signup and login to toggle the visibility of signup and login modals, respectively, and dynamically render HTML content within these modals based on user interactions. Utilised template literals to create and insert dynamic HTML content within the signup and login modals, providing a flexible and concise way to structure the modal elements.
- Responsive Design
- Radio Btns
- inputs
- template literals
Chore List
A ‘to-do’ list type application. This particular project is from an online course. I’ve added a number of additional functionalities to the project brief such as local storgae, 'dark-mode' and an mp3 sound file.
- JavaScript
- Local Storage
- Inputs
- Keypress
.png)
Random Name Generator
A hobby focused tool allowing Warhammer board game players to easily generate team names, skills and other properties required for the game.
- JavaScript
- .map()
- Radio Btns
- inputs
Currency Converter
During a recent trip to Thailand I needed a quick way to covert currency. I took the opportunity to code a handy app, to use on the go.
- .push
- .toFixed
- .innerHTML
- Boolean
.png){kind=icon}