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

Portfolio

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

Deployment

For a live demo please click on the following link:

https://juanse7793.github.io/Portfolio/

Authors

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

Github

https://github.com/Juanse7793/Portfolio

Comments(10)

  • 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

    Functionality:

    • 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

    Accessibility

    -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.

    https://github.com/Juanse7793/Portfolio/compare/accessibility?expand=1#diff-b78be019f1dc6d57753ea900c3805b114cd53ab7c0db836cc081836df1b99b7aR170-R171

    https://github.com/Juanse7793/Portfolio/compare/accessibility?expand=1#diff-b78be019f1dc6d57753ea900c3805b114cd53ab7c0db836cc081836df1b99b7aR533-R534)

    -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. https://github.com/Juanse7793/Portfolio/blob/dd9ffe9ad96b1af2a91e010e1a092eb0c0007857/portfolioScript.js#L18 2 you missed the right side operand in your for loop ➿ I+= ➿ that ends up in wrong termination of the program. https://github.com/Juanse7793/Portfolio/blob/dd9ffe9ad96b1af2a91e010e1a092eb0c0007857/portfolioScript.js#L84
    • Fixing these issues will make your script flawless.
  • 9

    Peer-Review-Morning-Session-2022-03-04

    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

    https://github.com/Juanse7793/Portfolio/blob/35ddb9fa67e5ceac417825c96e084ee895826685/style.css#L181

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