What is better than a website that works on all
devices?!! That's where responsive magic works
SEO Friendly
Want to publish your site and reach for your customers
easily?! Well, SEO-friendly features can help.
Debugging
Errors are the loyal companions of programmers. luckly,
debugging these errors is my hobby ;)
Maintenance
With time, your site will need regular maintenance &
modifications to be up to date with latest updates.
To me, developing a website is similar to constructing
Meccano "my favourite game." In Meccano we start by an image
for a model. Then, plan our roadmap by making decisions
about the chronological order for constructing. While
listening to our favorite songs, we follow the plan by
combining the metallic pieces and connect them using bolts
and nuts. After we finish we look to the model & examine
what we have accomplished. That's when we start to feel
something sweet is called Happiness.
HTML5
CSS3
ES2015
REACT JS
Redux
Bootstrap
Tailwind
Git/Github
Cross-device compatibility
Photoshop
PROJECTS
DelaRose
DelaRose
My first trial as an amature frontend developer.
I've designed and developed a fully responsive frontend page using
HTML5, CSS3 & Bootstrap
Wedding Album
Wedding Album (freelance)
The site is personal wedding album that displays daily new images and quotes. It's a great birthday present from a husband to his lovely wife
Role
- Designed and developed a fully responsive one page website
- Used HTML5, CSS3 & Bootstrap for responsive layout.
- Used javascript to manage daily changing data.
- Used MySql & Sql to store data.
- Developed backend using PHP.
Fitness
Fitness
Fitness was part of out training at M3ntorship initiative. It's aim was to learn how to work remotely within ateam
to develop a collaborative project. Also, to deepen our expeerience using git and github.
Fitness is not a real project, it's just meant to be non responsive front page.
Role & Tasks
- Developed responsive navbar using flexbox
- Developed main Header Using CSS3 Positioning.
- Collaborated with my team members to align sections perfectly together.
- Assisted in debugging final result.
The task wasn't meant to be responsive from the start. However, I developed my task as responsive.
That's why you may notice some responsive sections while others are not.
Greenhouse Monitor
Greenhouse Monitor NTI Graduation Project
Degree: Excellent with Honours
Web application that monitors plants in
greenhouses. The app is connected online with though embedded systems device that implanted in the greenhouse and reads temprature,
Humidity, light and other vital signs of the plants.
The whole project was an application of IOT & it was a collaboration between web developers team & the embedded systems team.
Roles and Tasks
• Initiated a collaboration between Web track and Embedded Systems
• Nominated and selected to work as a team leader
• Developed a web application that monitors plants in greenhouses. The app is connected online with a device that was
developed by the embedded systems team
• Collaborated with the embedded and web development teams to design and develop the system logic
• Developed system cases
• Participated in coding frontend & backend
• Used chart.js library & gauges to enhance UI design
• Participated in coding backend using PHP and SQL
• Participated in designing Entity-relationship Diagram (ERD) design
• Implemented MySQL database to maintain & retrieve data
• Used MySQL/python connector ODBC
• Distributed tasks on members
• Assisted the team in debugging codes
• Conducted workshops to enhance the team's knowledge & skills in specific areas.
Ghirass Charity
Ghirass Charity
Ghirass Site is our final and a life project at M3ntorship Training. The site was a collaboration between team members.
to develop a static website for Ghirass Charity.
The project developed using latest technologies like React, Redux & mainly developed to work with APIs (RESTful API ).
Ghirass is a scalable, responsive website & SEO-friendly.
The site developed with a new Arabic version which designed specifically for Ghirass Charity.
The Site developed using:
React js
React Router
Tailwind
Redux
Next-js
Restful API
Strapi
Github/Git
Roles and Tasks
• Developed Welcoming section & Upcoming events using React
• Used Tailwind for styling pages
• Created data in APIs using Strapi CMS
• Linked components with API using React Hooks
• Fetched data from api using ES2015 maps and js promises
• Used React-router to navigate between pages
• Used Redux for managing application state.
• Used Next-js to build server-side rendering
• Practiced ownership & distributed tasks on the team to fix site bugs and enhance site styling.
• Assisted the team in debugging codes
