This personal portfolio website is developed using HTML5, CSS3 and JavaScript DOM. The website has contents which are past completed projects in a grid layout on the home page. And have link for the live demo and the source code.

  • By Kumilachew Getie
  • Last update: Oct 11, 2022
  • Comments: 9

Personal-Portfolio

This project is mainly about creating personal portfolio by HTML5 and CSS3.

Built With

  • Major languages: HTML5,CSS3
  • Technologies used: linters, Lighthouse, Webhint, Stylelint

Getting Started

To access a local copy up and runn follow these simple steps.

Prerequisites

  • web browser

Live Demo

Live Demo

Usage

  • clone this repository into your local machine
  • unzip it
  • open the 'index.html' file with your browser

Authors

👤 Kumilachew Getie

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐ if you like this project!

Acknowledgments

  • To team microverse and those who wrote the readme template

📝 License

Github

https://github.com/Kumilachew-g/Personal-Portfolio

Comments(9)

  • 1

    Validate-Contact-Form

    I have done the following tasks.

    1. Added JS validation for Gmail
    2. Created JS folder for js files
    3. Added JS extension in HTML

    The screenshot looks like this...

    image

  • 2

    Popup-Window-JS

    I have done the following tasks.

    1. Modified HTML skeleton for popup windows
    2. Fixed linter JS errors
    3. Fixed linter CSS errors
    4. Added JS functionalities on the popup window

    The screenshot looks like when popup

    image

  • 3

    Mobile-Menu-With JS

    I have done the following tasks.

    1. Added hamburger in the HTML navbar part
    2. Added styling for mobile menu
    3. Added JS function in the mobile menu
    4. Added HTML, CSS, and JS linter dependencies

    Tasks look like

    image

  • 4

    Accessibilty-Check-Pair-Programming

    We have done the following tasks.

    1. Page titles - no issues found
    2. image text alternative -no issues found
    3. text heading-no issues found
    4. color contrast -no issues found
    5. resize-no issues found
    6. interaction-no issues found
    7. moving content-no issues found
    8. multimedia- we can't use multimedia
    9. the basic structure of the page-no issues found
  • 5

    Animations-Transitions

    I have done the following tasks.

    1. Added a color transition when the user hovers over one of the buttons.
    2. Made increased size of images when hovering them
    3. Made logo to rotate when loading...
  • 6

    Desktop-Portfolio

    I have done the following tasks.

    1. Added and modified HTML skeleton to create a comfortable environment for desktop and mobile.
    2. Added and modified styling to create a comfortable environment for desktop and mobile.
    3. Installed project dependencies.
    4. Fixed linter errors encountered during the modification.

    Desktop Skeleton image

    image

    image

    image

  • 7

    Bugs: hide-and-seek

    1. I introduce a bug into the repo and I gate such error: "uncaught typeerror cannot read property 'style' of undefined"
    2. I have inspect it using google chrome dev tool to practice debeging
  • 8

    Peer-to-peer review

    Your project looks good! keep up the hard work.

    here are some detail you need to address

    • [ ] in the textarea of the message add a little padding to make it look like the inputs just above.
  • 9

    Peer to peer code review

    Great work Champ! Good job so far, there are just some changes that need to be addressed. 1- The scale of the images is quite bigger than needed So you can set it to 1.05 it would be much better. 2- While hovering the images they lay over the navbar so it is better to add a higher z-index to the navbar than the image z-index. 3- Button borders are not the same as the Figma design so it is better to set it to 1px solid gray. 4- The "Get In Touch" button is centered on the Figma design. S it is better to make it center.

Popular Tag

Related