This is my personal Portfolio which show my projects and information, I used HTML, CSS and JavaScript to create this project.

  • By Juan Sebastian Sotomayor
  • Last update: Apr 11, 2022
  • Comments: 10


this repository is for creating the Portfolio.

Built With

  • HTML
  • CSS
  • Git
  • JavaScript

Getting Started

In this repository I will create my personal Portfolio with some of my projects.

Run it

Use the following steps to run this Portfolio locally:

  • open the terminal

  • get in the directory you want this folder to appear

  • put: git clone [email protected]:Juanse7793/Portfolio.git

  • open the folder with a code editor (VS Code preferred)

  • go to the index.html file and open it with live server


For a live demo please click on the following link:


👤 Author1

🤝 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!



  • 1

    Add the toolbar and the header for the personal portfolio.

    Toolbar & Header

    I tried to make as similar as possible template #3

    here I include:

    • index.html
    • style.css
    • .gitignore
    • folders and images for the background of the page
  • 2

    Email Validation

    Here I add:

    • A validation for the email form in order to alert the user to put all the text in lowercase.
    • I add a red border in the email input in order to make it more visual where the error is


    • When the user submits the form, you check if the email is in lower case.
    • If the validation is OK, the form is sent.
    • If the validation is not OK, shows an error message to the user near the submit button informing them of the error, and the form is not sent.
  • 3

    Portfolio Pop-up-detail

    Here I implement:

    • A pop-up window that includes the project details.
    • All the details are rendered dynamically :sunglasses:
    • Here I create an object with all the information of the main page and the pop-up :muscle:
    • Render dynamically all the works section and all the pop-up details. :smiley:

    The pop-up functionality is:

    • When the user clicks (or taps) the button to check project details, the popup with details about the project appears.
    • When the user clicks (or taps) the close (X) button or anywhere in the overlay, the popup disappears.
  • 4

    Mobile menu

    Here I add :

    • the menu for the mobile version
    • the script.js file for the functionality of the menu
    • the js linters.
    • edited the CSS file in order to work as supposed.

    the mobile menu fulfilled these requirements:

    • When the user clicks (or taps) the hamburger button, the mobile menu appears.
    • When the user clicks (or taps) the close (X) button, the mobile menu disappears.
    • When the user clicks (or taps) any of the mobile menu options, the mobile menu disappears.
    • When the user clicks (or taps) any of the mobile menu options, a correct part of the page is displayed.
  • 5

    Accessibility - Pair Programming


    -Page titles- No issues found -Image text alternatives- No issues found -Text headings- No issues found -Color contrast- Changes were made in order to get a 100% of accessibility (e.g.

    -The basic structure of the page- No issues found

  • 6

    Desktop version

    Here I add the desktop version for the portfolio

    • Changes added to the index.html file
    • Changes added to the style.css file
    • Media queries added
    • Background images added

    I choose template number 5.

  • 7

    Add the works and the about me sections

    Works & About me Sections

    in this branch I added:

    • works and about me sections in the index.html file
    • add the style.css for those sections
    • add images and background images

    the template I used is #3

  • 8

    Bug Report

    Hello @Juanse7793

    • Salute 🖖 on your job sofar, although I found the following bugs 🐛 in your new branch. 1 you have used a single quote ' and a double quote " at the same time. that caused an exception to your project. 2 you missed the right side operand in your for loop ➿ I+= ➿ that ends up in wrong termination of the program.
    • Fixing these issues will make your script flawless.
  • 9


    Positive Observations 🙌

    • Nicely structured HTML code. 🤓
    • Very semantic. 💪
    • Easy to understand CSS classes. 🙂
    • Great git-flow! 🎉

    Improvements ♲

    • Should maybe 🧐 try to name CSS animations in lower-case exmple-code
    • Try not to repeat the same values in the media queries because they are already inherited. 👪
    • You could use javascript modules to make separation of concerns, for example placing the data in another .js file and importing it in your main javascript file. data object
  • 10

    Adjust contrast in language hover

    I advise you to increase the contrast of the language while being hovered in order to improve visibility.