This website shows a sneak peek of what I have done, projects developed and deployed, and what I can do to your projects! Developed with HTML, CSS, and JavaScript

  • By Omar Salem
  • Last update: May 9, 2022
  • Comments: 11

My Portfolio Project

This website to show all my projects, and it is my gallary to show my projects.

screenshot

Main Features of the Project:

To give you a better idea of what I can achieve for your project, I've created a portfolio webpage. To provide you a tour of the project, a live demo link has been created utilising github pages! As you click on the navigation button on your mobile device, enjoy the speed of the mobile menu; we've also incorporated dynamic data utilising javascript objects (modal window and dynamic presentation of the works section) Have fun surfing!

Built With

  • Major languages

    - (HTML, CSS, JavaScript)
    • Technologies/ Tools used
    - Git(version control)
- LocalStorage
- Linters

Live Demo

Live Demo Link

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

  • A text editor(preferably Visual Studio Code)

Install

Usage

Clone this repository

$ git clone https://github.com/omarsalem7/Portfolio.git
$ cd Portfolio

Run project

- Open index.html in browser

Authors

👤 Omar Salem

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.

Github

https://github.com/omarsalem7/Portfolio

Comments(11)

  • 1

    Preserve data in local storage

    What does this PR do?

    This PR is raised to store form data in the browser local storage

    Description of the task to be completed

    • [x] Store data in local storage
    • [x] fetch data from local storage
    • [x] display data in the form

    How should it be tested

    Clone the repository

    git clone https://github.com/omarsalem7/Portfolio.git

    Navigate to the folder

    cd Portfolio

    Checkout the branch

    git checkout preserve-data
  • 2

    Milestone6 Add Accessibility

    What does this PR do?

    This PR is raised to add accessibility

    Description of the task to be completed

    • [x] Page titles - add a good title - title
    • [x] Image text alternatives - add alt name to images - alt
    • [x] Text headings - no issues found
    • [x] Color contrast - Edit color to accessibility - logo-color - change color for works-list-project
    • [x] Resize - no issues found
    • [x] Interaction - added focus to highlighted input link
    • [x] Moving content - no issues found
    • [x] Multimedia - no issues found
    • [x] The basic structure of the page - no issues found

    How should it be tested

    Clone the repository

    git clone https://github.com/omarsalem7/Portfolio.git

    Navigate to the folder

    cd Portfolio

    Checkout the branch

    git checkout Accessibility

    Thanks for reviewing my PR 😊

  • 3

    MORNING SESSION GROUP CODE REVIEW

    • Good use of the background-position-y property for alignment.
    • I suggest you avoid using
      for purposes of responsive design, instead use the right CSS property to do that.
    • Professional class naming is great
    • I suggest you use a dynamic unit when dealing with values for font-size measurements to help with responsiveness.
    • Everything seems perfect for me. Good code. -Try as much as possible to design your code to match the template provided.
  • 4

    Morning Session Day 4 Week 4 Portal

    Great Work so far 👍 . I can see your hard work and you are following the Figma very well. Everything is good but there is a thing which you need to follow. After these changes your project is complete.

    • [x] You should add a footer in your index.html file and I am sending you the link of the line number.

    https://github.com/omarsalem7/Portfolio/blob/main/index.html#L184

  • 5

    Validate form

    What does this PR do?

    This PR is raised to validate form

    Description of the task to be completed

    • [x] Add required validation to the email input
    • [x] Add validation to check if email is in lower case to submit

    How should it be tested

    Clone the repository

    git clone https://github.com/omarsalem7/Portfolio.git

    Navigate to the folder

    cd Portfolio

    Checkout the branch

    git checkout validate-form
  • 6

    Popup window

    What does this PR do?

    This PR is raised to popup window

    Description of the task to be completed

    • [x] Create work's project dynamically by using JavaScript.
    • [x] Create a popup modal for mobile and desktop versions.

    How should it be tested

    Clone the repository

    git clone https://github.com/omarsalem7/Portfolio.git

    Navigate to the folder

    cd Portfolio

    Checkout the branch

    git checkout pop-window
  • 7

    Add Mobile Menu

    What does this PR do?

    This PR is raised to Add Mobile Menu

    Description of the task to be completed

    • [x] Add open layout when user click on hamburger icon
    • [x] Menu layout closed when user click on the cross icon
    • [x] Add navigation to section when user clicks the link in the menu
    • [x] Mobile menu disappears when the user clicks on any of the mobile menu options.

    How should it be tested

    Clone the repository

    git clone https://github.com/omarsalem7/Portfolio.git

    Navigate to the folder

    cd Portfolio

    Checkout the branch

    git checkout Mobile-menu

    Thanks for reviewing my PR 😊

  • 8

    Analytics

    What does this PR do?

    This PR is raised to add google analytics to the project

    Description of the task to be completed

    • [x] Add google analytics script in the header

    How should it be tested

    Clone the repository

    git clone https://github.com/omarsalem7/Portfolio.git

    Navigate to the folder

    cd Portfolio

    Checkout the branch

    git checkout Analytics

    Thanks for reviewing my PR 😊

  • 9

    Deploy my portfolio

    What does this PR do?

    This PR is raised to add demo link for the project

    Description of the task to be completed

    • [x] Added a live link to the README file.

    How should it be tested

    Clone the repository

    git clone https://github.com/omarsalem7/Portfolio.git

    Navigate to the folder

    cd Portfolio

    Checkout the branch

    git checkout Deploy-portfolio

    Thanks for reviewing my PR 😊

  • 10

    Add animation

    What does this PR do?

    This PR is raised to add animations

    Description of the task to be completed

    • [x] Add scale image animation
    • [x] Add hover transitions to buttons
    • [x] Add rotate tab Icons animation

    How should it be tested

    Clone the repository

    git clone https://github.com/omarsalem7/Portfolio.git

    Navigate to the folder

    cd Portfolio

    Checkout the branch

    git checkout Animation

    Thanks for reviewing my PR 😊

  • 11

    Desktop version

    Use a media query to make the website responsive on all screens in these sections:

    What does this PR do?

    This PR is raised to add a desktop version of the portfolio

    Description of the task to be completed

    • [x] Add a media query to make the website responsive on all screens in these sections:

    How should it be tested

    Clone the repository

    git clone https://github.com/omarsalem7/Portfolio.git

    Navigate to the folder

    cd Portfolio

    Checkout the branch

    git checkout Desktop-version

    Thanks for reviewing my PR 😊

Popular Tag

Related