Ali Kamel

Man using a laptop

About me

Since childhood, I have always been fascinated with computers and the countless things that can be created using them — books, interactive slideshows, and, the most exciting of all, software.

I am currently learning web development in the Full Stack JavaScript path of The Odin Project , and I am proud of what I have created so far !

Photo by Vitaly Gariev on Unsplash .

My work

Projects are sorted from the latest.

To-Do List

MinimaList is a web-based to-do list app designed to be, well, you guessed it — minimalist…

It aims to achieve simplicity and elegance, helping you actually do your tasks instead of wasting your time exploring unnecessary feature bloat.

Homepage

The page you are viewing right now.

A responsive portfolio site homepage, with three layouts: desktop, tablet and mobile, covering a broad range of viewport widths.

The page has some focus on accessibility, and features some neat animations as well.

A desktop monitor, a tablet, and a mobile displaying their respective layouts of the responsive homepage.

Restaurant Page

A restaurant homepage acting as a single-page website with tabbed browsing, thanks to JavaScript-powered dynamic content replacement.

My fictional take on the restaurant is The Gilded Fork, a luxury restaurant with absurd dishes and over-the-top prices.

Screenshot of The Gilded Fork's homepage, featuring from top downwards: the restaurant logo, three tabs — Home, Menu, and About, and the content of the currently active tab, which is the Home tab, featuring an image of a golden plate, fork, and knife, followed by a heading and a series of paragraphs introducing the restaurant.

Tic-Tac-Toe

A game of tic-tac-toe that you can play with a friend on your browser.

To make the experience more fun, the game uses a colorful, vibrant and childlike design, and allows playing on bigger gameboards than the typical 3-by-3 one.

Screenshot of Xs and Os, featuring from top downwards: the game logo, player names, with the name of the player of the current turn being highlighted by a surrounding box, the typical 3-by-3 tic-tac-toe gameboard with player marks on it, an input for the gameboard size and the name of the winning player.

Library

A simple e-library to put your beloved books in one place.

The app tracks various statistics, such as the total number of books, total number of pages, and number and percentage of books read and unread.

Screenshot of Library, featuring a library section and a log section. The library section has a button to add a new book, and one book card displaying book title and metadata, with a button to toggle its read status and a button to delete it. The log section has a table that tracks global library statistics.

Admin Dashboard

A full dashboard design, created using CSS Grid.

Screenshot of Admin Dashboard, featuring a sidebar on the left side, with the right side divided into a top header section and a bottom main section, the latter being divided into a larger projects section on the left side, and announcements and trending sections occuping the top and bottom halves of the right side, respectively.

Sign-Up Form

A front-end for a sign-up form for an imaginary service, created as a practice on HTML forms and HTML form styling.

Screenshot of a sign-up page with a left sidebar featuring the brand logo and a decorative image background, and a right main section featuring introductory and call-to-action text and the sign-up form, with different border colors for focused and unfocused input fields, as well as input fields with invalid values.

Etch-A-Sketch

A pretty neat browser-based toy loosely based on the Etch A Sketch.

This electronic version features vibrant colors close to those of the original mechanical counterpart, and extra features such as the ability to change the resolution of the drawing grid.

Screenshot of Etch-A-Sketch, featuring an 8-by-8 drawing grid containing a diamond-like drawing whose forming cells have different, random colors. Below the drawing grid are controls for setting the grid resolution and toggling the visibility of grid lines, and a field containing the description of the currently hovered control button.

Rock Paper Scissors

A game of rock, paper, scissors that you can play against a computer opponent in your browser.

The game features both mouse and keyboard controls — choose whichever suits you.

Do you think I won on the first try before taking the game screenshot? 🤔
Screenshot of Rock Paper Scissors, featuring three large square buttons for rock, paper, and scissors, with the corresponding keyboard controls described under each of them, a round counter, and a panel showing the last choices and the scores of the human and computer players. I won 5 to 2!

Landing Page

A simple landing page created from a given design using CSS Flexbox.

Screenshot of Landing Page, featuring from top downwards a header with a navigation bar on top, an information section with placeholders for illustrations and images and their subtext, a quote section, a call-to-action section, and a footer.

Recipes

My first project with The Odin Project.

A basic recipes website consisting of a main index page with links to a few pages for different recipes.

This is my first web dev project, so don't expect it to look good!
An image featuring some dishes: Lasagna, Koshari, and Pad Thai.