I'm Mohammed Abdul Abi, a soon-to-be graduate with a Higher Professional Degree in Front-End Development from NorOff Education AS. I also hold a Master’s in Synthetic Organic Chemistry from the Norwegian University of Life Sciences, where I developed strong analytical and problem-solving skills. After working as a chemist, I found my true passion in web development. For the past 2-3 years, I’ve been learning and practicing HTML, CSS, and JavaScript, and I’m eager to keep improving and learning more. I’d love the opportunity to connect and discuss how I can contribute to your team while continuing to grow as a front-end developer.

• 🌍  I'm based in Norway Oslo
• 🖥️  See my portfolio at https://app.netlify.com/teams/mohammedabi/sites
• ✉️  You can contact me at [email protected]
• 🚀  I'm currently working on Completing all the projects in my front-end development education, while also working on some personal side projects to further enhance my skills and creativity.
• 🧠  I'm learning advanced JavaScript, modern frameworks, and improving responsive design, accessibility, and performance optimization for user-friendly web applications.
• 🤝  I'm open to collaborating on Here’s a shorter version: I’m open to collaborating on front-end projects involving API integration, database interaction, and dynamic, data-driven web applications that enhance user experiences through seamless front-end and back-end communication.
• ⚡  I left a well-paying career in chemistry to pursue my passion for front-end development. I’m committed to learning and growing in this field, and I hope to work with companies that value dedication and passion while allowing me to contribute and evolve as a developer.

• Explore My Netlify Projects

A simple currency converter built with React.js and styled using Tailwind CSS. This app fetches the current exchange rates and allows users to convert between currencies.

• Real-time currency conversion: Fetches live exchange rates and converts amounts between different currencies.
• Favorite currencies: Users can mark currencies as favorites for quicker access.
• Swap currencies: Easily swap the source and destination currencies.
• Amount input: Users can input the amount they want to convert.

• React: JavaScript library for building user interfaces.
• Tailwind CSS: Utility-first CSS framework for styling the app.
• Frankfurter API: API used for currency conversion and fetching available currencies.

Hosted On netlify:
Currency Converter App

GitHub Repository:
GitHub repo

This is a full-stack travel agency website built with React for the frontend and Node.js/Express for the backend. It provides an intuitive platform for booking various travel services, exploring popular destinations, and viewing customer testimonials.

• Frontend:

  • Built with React and Vite for fast development.
  • Displays popular travel destinations and services.
  • Fetches data for destinations and testimonials from the backend.
  • TailwindCSS for styling and responsive design.

• Backend:

  • Express-based API server.
  • Provides endpoints to fetch popular destinations and testimonials.

This is a full-stack travel agency website built with React for the frontend and Node.js/Express for the backend. It provides an intuitive platform for booking various travel services, exploring popular destinations, and viewing customer testimonials.

Hosted On netlify:
Travel Agency Website

GitHub Repository:
GitHub repo

This image showcases the user interface of the weather application, providing real-time weather updates and forecasts.

This is a weather app built using React and Tailwind CSS. The app fetches real-time weather data and a 4-day forecast from the OpenWeatherMap API.

• Display current weather and forecast for the next 4 days.
• Built with React and styled using Tailwind CSS.
• Responsive design that works on both desktop and mobile devices.
• Search functionality to check the weather of any location.

Hosted On netlify:
Weather-app-react-tailwind

GitHub Repository:
GitHub repo

This project is a client-side social media application developed as part of the JavaScript 2 course assignment and later enhanced during the CSS Frameworks course assignment. It implements core CRUD (Create, Read, Update, Delete) functionalities for posts and includes a user authentication system. The application is styled using Tailwind CSS and built with modern web development tools like Vite and Vitest. While essential features are implemented, additional functionalities are planned for future contributors.

• Register New User: Allows users to create accounts.
• Login User: Authenticates users and provides access to protected features.

• Create Post: Users can create new posts with a title, body, tags, and media attachments.
• Read Posts:
  • View all posts.
  • View a single post by ID.
  • View posts by specific users.
• Update Post: Edit existing posts (title, body, tags, and media).
• Delete Post: Remove a post from the system.
• React to Posts: Add emoji reactions (e.g., likes, dislikes) to posts.
• Search Posts: Search functionality for posts by keywords or tags.
• Sort Posts: Sorting functionality for posts by "Sort by Latest" or "Sort by Popularity".

Hosted On Netlify: Social Media Application

GitHub Repository: Social Media Application

This image showcases the homepage of the EchoPost website,

Description:
EchoPost is a responsive web application designed for managing blog posts. It serves as the front-end user interface for an existing API blogging application, allowing users to view dynamic blog posts and providing admin functionalities for managing content. The project is developed using only HTML, CSS, and JavaScript, demonstrating proficiency in core web technologies.

Hosted On Netlify: echopost

GitHub Repository: FED1-PE1-MohammedAbi

This is a Todo application designed to help users manage tasks based on their current flow state and the difficulty of the tasks. The app categorizes tasks into three levels: Green (Easy), Orange (Moderate), and Red (Hard). Tasks are displayed and interacted with based on the user's optimal times for different levels of difficulty.

Hosted On netlify:
Flow State Todo App

GitHub Repository: Flow State Todo App

This image showcases the product display, featuring images, descriptions, and pricing.

Description:
This project focuses on creating an interactive online store that displays products fetched from an API. The initial phase involved designing the layout using HTML and CSS, followed by adding interactivity with JavaScript.

Features:

• View product list and details
• Filter products by category, gender, or genre
• Add and remove items from the basket
• Checkout process with order confirmation

Hosted On netlify:
JavaScript Course Assignment

GitHub Repository:
GitHub repo

This image showcases the homepage of the Community Science Museum.

Description:
For my first semester exam at Noroff, I developed an interactive science museum website aimed at children aged 7-15 and their families. This project combined project planning, web design, and development within a set timeframe.

Grade:
92/100

Built With:

• HTML
• CSS
• Figma

Hosted On Netlify: Community Science Museum

**GitHub Repository: Community Science Museum

Figma High Fidelity Wireframe:

• Desktop
• Mobile

Figma Style Guide:
Style Guide

Project Kanban Board:
Kanban Board

My GitHub Stats

Top Repositories