A group of achievements, projects and skills that i've gain with HTML, CSS and Javascript, frameworks used Bootstrap and Sass

  • By Federico Luna
  • Last update: Sep 2, 2022
  • Comments: 13

Federico's Portfolio

A little history of me, thinking of a future with You in here: https://flunavgt.github.io/Federico-s_Portfolio/

Built With

  • HTML
  • CSS

Getting Started

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

Copy all files with the same file sturcture.


👤 Federico Luna V.


👤 Tahseen Zahra

👤 Norman Ainobushoborozi

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


  • Hat tip to anyone whose code was used
  • Inspiration
  • etc

📝 License

This project is MIT licensed.




  • 1

    Popup project window

    In this PR worked on the following items:

    • associate each project with the popup window details, used JavaScript array to store all of the information for all projects.

    • For each project I stored the following pieces of data in a JavaScript object:

    • name,

    • description,

    • featured image,

    • technologies,

    • link to live version,

    • link to source.

    • implement the popup window.

  • 2

    Published Federico's Portfolio on Github pages

    On this assignment:

    1. I updated the ReadMe file including a link to the online version.
    2. Checked all links and different size screens for responsiveness.

    The link to the online version: https://flunavgt.github.io/Federico-s_Portfolio/

  • 3

    Desktop version

    In this branch, the task completed is to set the desktop version of my portfolio using media queries in order to have a responsive website.

    reviewed and modified to fit desktop version: Margins Positioning Image size and contact form width

  • 4

    add first project to Portfolio

    I am currently working on improving the layout of my To Do List, the picture will be updated now that I will add more colors and features.

    The live link to the Project and to repo is working.

    I am also working on improvements on my portfolio, I created this branch to lower the amount of listeners that I have, I have reduced but still working on them.

  • 5

    set save in local storage java

    On this PR the following was completed:

    • When the user changes the content of any input field, the data is saved to the local storage.
    • When the user loads the page, if there is any data in the local storage the input fields are pre-filled with this data.
    • for the Object it complies to create a single JavaScript object with all the data from the entire form and save it in local storage.
  • 6

    Validation form

    In this PR the following feature is completed:

    The content of the email field has to be in lower case.

    • When the user submits the form, the email has to be in lower case.

    • If the validation is OK, the form is sent.

    • If the validation is not OK, an error message shows the user near the submit button informing them of the error and the form is not sent.

  • 7

    Feature nav bar

    On this PR completed the following:

    • Created a mobile menu that deploys with the click of the hamburger menu
    • Links from the menu direct user to the desired section
    • Anchor tags will transition color and underline while pointed
    • Mobile menu will close when any link or the close button is clicked
  • 8

    check labels and accessibility

    On this PR we have checked the following for accessibility:

    • Page titles: Checked title and add an icon (line 8)
    • Image text alternatives** (alt text) : no Issues found
    • Text headings: No issues found structure is compliant
    • Color contrast: No issues found
    • Resize: modified font measurement scale from pixels to Rem on line (72, 81,89, 112, 120, 149,160, 165, 192, 200, 220, until 409 on CSS file)
    • Interaction (labels are optional but recommended as voiceover tools can read them, and should be set as invisible to match the Figma design) : completed on lines 182, 184,186 add lines on CSS 353
    • Moving content: no issue found
    • Multimedia: no issue found
    • The basic structure of the page: checked that page titles include a header, a main, and a footer
  • 9

    #1 Comments on Desktop version

    Good morning/afternoon. Good job working on your web page. Keep working! 💪

    You need to work on these issues to improve your page and reach a fantastic webpage display.

    ✅ Please make the pictures responsive. ✅ Apply some style to the 'work title'.

    Cheers! 👍

  • 10

    Works section

    On this section i completed the skills and languages section. Lay out the elements in "Works" section use CSS Grid and Flexbox combined Adjust all the background images.

  • 11

    Header front page

    In this PR is included the following actions:

    • Complete license information
    • complete Readme file
    • Set up a icon bar
    • Set a Nav bar and set flex in icon and nav-bar.
    • Set background color and images
    • Complete text with Name, Profession and description
  • 12

    Bugs: Hide and seek

    Hello Federico I learned a lot by reading your code, for this hide and seek task I found the following:

    ✔️ There is a missing query selector on line 44. ✔️ On line 127 you did not declare the variable ✔️ there is an incomplete expression missing parentheses.

    Keep rocking!

  • 13

    PP review - 07/21/2022

    Hi Federico Good job working on your web page. Keep working! 💪

    You need to work on these issues to improve your page and reach a fantastic webpage display.

    ✅ Please try to use loops to avoid DRY in the script.js.

    Cheers! 👍