This Portfolio was built entirely in HTML/CSS and JavaScript for DOM Manipulation, using technologies such as Flexbox and Grid, and applying Responsive design. It is based on a FIGMA design

  • By Carlos Molina
  • Last update: Aug 23, 2022
  • Comments: 7

Portfolio: Mobile and Desktop version

This is a last milestone in the process of creating a portfolio website. Now, I'm adding the preservation of the data added to the Contact Form, in the browser.

Built With

  • HTML / CSS (Flexbox-Grid) / JavaScript

Online version

Carlos's Portfolio

Getting Started

  • To get a local copy up, clone the repo like this: git clone [email protected]:cmolinan/Portfolio-setup-and-mobile-version-skeleton.git

Authors

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page. Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

To my teammates on Microverse:

  • Matias Aguirre
  • Haftamu Desta
  • David Isea

📝 License

This project is MIT licensed.

Github

https://github.com/cmolinan/Portfolio-project

Comments(7)

  • 1

    Details popup window

    Changes

    -Creation of a JavaScript array to store the information for all projects. -Update of the main page so that the projects section is created dynamically using the information stored in that JavaScript object. -Implementation of a popup window to show the project details,

  • 2

    Preservation of form data in the Browser

    CHANGES

    -Code to save of the form data in the local storage of the browser. So that, when the user reloads the page the data they filled out in the form will be preserved.

  • 3

    Accessibility updates

    Changes for Accessibility

    • Page titles Change title to: Carlos Molina Portfolio https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L6

    • Image text alternatives** (alt text) Changes alt to "" -- lines 72,74,101,103,131,133,161,163 (only icons) https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L72-L74 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L101-L103 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L131-L133 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L161-L163

      Changes alt to "" -- lines 66, 95, 124, 154 (card images are not critical info) https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L66 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L95 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L124 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L154

      Changes alt to "" -- lines 221, 235, 240 (only icons) https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L221 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L235 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L240

      Changes alt to "JavaScript" -- lines 224 and 229 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L224 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L229

      Changes alt to "HTML" -- lines 225 and 230 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L225 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L230

      Changes alt to "CSS" -- lines 226 and 231 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L226 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L231

      Change alt to "End of Portfolio"to line 279 https://github.com/cmolinan/Portfolio-project/blob/main/index.html#L279

    • Color contrast -No issues found

    • Resize -No issues found

    • Interaction -No issues found

    • Moving content -No issues found

    • Multimedia -No issues found

    • The basic structure of the page -No issues found

  • 4

    Script section not working

    Your script was not working due to the misspelling of Id in your first query selector.

    https://github.com/cmolinan/Portfolio-project/blob/6377e320a02671485e099e3e247c2fea786beb0c/code.js#L1

    I already changed 'mobileMenu' to 'MobileMenu'

  • 5

    Peer to Peer Code Review

    Suggestion from Morning Team

    • Please consider centering the elements in your navbar so they align, I suggest you use the justify_content align property.

    It Would be good if you consider these changes

  • 6

    Add linters to local enviroment to avoid meaningless commits for linter checks

    I think it would make it easier for you to work if you installed the linters locally so you could check for linters locally instead of pushing them to GitHub and letting GitHub Actions check linters for you.

    You can find more information on this link:

    https://github.com/microverseinc/linters-config/tree/master/html-css

  • 7

    issues found in carlos mobile version

    hi Carlos your design is fascinating we liked a lot your choice of colors and your implementation of Figma design however here is a list of things we thought you need to invest more time to improve:-

    1. you need to put a link to your website inside your logo class
    2. your CSS code is too long because you have repetitive lines of code you can reduce your total lines of code by creating general classes and including them inside your HTML tags this will make your code more readable and easy to follow
    3. try to centralize your page content in the middle because aligning your content in the left leave a lot of space and disturb the view of your page a little bit
    4. I saw there were big margin values between each section try to decrease that a little bit this will your website more visual as I think finally, you did a great job till now and we really enjoyed seeing your website congratulation to reach this far 🥳 🥳 🥳

Popular Tag

Related