web dev image

About Me

Hello! My name is Mohammad Ahnaf, and I am a passionate web developer and designer with a keen eye for detail and a love for creating dynamic, user-friendly websites. With a strong foundation in Python, JavaScript, React, HTML, and CSS, I have the skills and expertise to bring your digital vision to life.

My Work

Shopping Cart

shopping cart project

Created a template online shopping site using data from fakeStore API! Implemented a live search filter as well as a sort by price feature. Used React concepts including the React Router to form a multipage shopping site. Also implemented unit tests using the RTL (React testing library) library. Made custom error pages to handle bad URL endpoints! Cached the data fetched from API so it only fetches on app mount to minimise load times

github icon open in new icon

CV App

cv project

Generate your CV on the fly using my cv generator, featuring download and print functionality. Made use of React state hooks. Used the react to print library to implement a pdf download and print function

github icon open in new icon

To Do List

to do list project

Created a To Do List application using JS HTML CSS and Webpack to bundle all files together. Used javascript OOP principles to create project folders using javascript classes as well as a task object using classes to hold tasks inside of project folders. Also used the date-fns library for date manipulation and to display tasks due within a month!

github icon open in new icon

Memory card game

memory card game project

Created a simple memory cards game using the React library, making use of React hooks. Used the PokeAPI to fetch pokemon images on app mount. Test your memory, try and get all 16 points

github icon open in new icon

Weather App

weather app project

Track the weather with this App! Made using Visual Crossing API! Used javascript HTML CSS to design a weather app using the Grid layout in CSS. Implemented a converter between Celsius and Fahrenheit. Used JS DOM manipulation concepts to display data from the API

github icon open in new icon

Battleship

battleship project

Recreated the online battleship game using JS HTML CSS and webpack for file managing and bundling! Implemented JS OOP concepts with the use of javascript classes to create Gameboard, Player and Ship classes! Applied a random ship placement function for the user. Enhanced Computer AI by implementing a Level Order Traversal algorithm with the use of the queue data structure to enable computer to attack adjacent ships! Try and sink all the computer's ships!

github icon open in new icon

Python Countdown Timer

timer project

Created a Python Timer app using tkinter! Used Python OOP principles with the use of classes to create each part of the apps layout! Added functionality to support date inputs in 3 formats! Also added a beep sound once timer ends as well as a snooze button to pause the beep. Used various python libraries for formatting date and time to show a countdown!

github icon open in new icon

Restaurant Page

restaurant page project

Made a template restaurant page including menu, contact and about tabs! Made using Javascript HTML and CSS! Bundled files using Webpack!

github icon open in new icon

calculator

calculator project

Calculator made using JavaScript/HTML/CSS with keyboard support! Used JS DOM manipulation techniques as well as event handlers for the keyboard support

github icon open in new icon

Admin Dashboard

dashboard project

Created a template admin dashboard using HTML and CSS! Made using CSS Grid layouts and as well as Flexbox

github icon open in new icon