This repository will be used to work on a project that emulates a porfolio page.

  • By Sergio.valera
  • Last update: Mar 30, 2022
  • Comments: 9

My work portfolio

This project is a personal portfolio of my work. On Information Technology. It will be bould using HTML, css, and javascript. It also wil have a framework that is still to be defined. It could be bootstrap or something similar. I Will be creating all the code of this project on VScode and the repository will be on GitHub.

screenshot

Additional description about the project and its features.

Built With

  • Major languages: HTML, CSS, Javascript, GIT.
  • Frameworks: Bootstrap
  • Technologies used: mozilla, github, vscode, windows 10 and linux ubintu.

Live Demo

Click here to see the live demo.

Getting Started

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

Prerequisites

A PC with a Windows 10 or Linux Ubuntu operating system. It has to have GIT installed.

Setup

Go to the following site and clone the repository (https://github.com/sergiogval/sergiogval.github.io)

Author

Sergio Valadez

🤝 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

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

📝 License

This project is MIT licensed.

Github

https://github.com/sergiogval/sergiogval.github.io

Comments(9)

  • 1

    Peer-to-peer-review (David-Dennis-Sergio-Sam)

    You did awesomely great; however, it could be nice if you implement ES6 syntax (Arrow function to be precise) when constructing your function. For instance,

    Instead of this:
function saveLocalStore() {
            const data = {
              name: nameI.value,
              email: emails.value,
              message: message.value,
            }; 

Do this:

const saveLocalStore = () => {
 const data = {
    name: nameI.value,
    email: emails.value,
    message: message.value,
  };

    review

  • 2

    Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 3

    Layout desktop version

    This PR includes the code to show the portfolio section with a layout made using grid. This matches with original template. It also adds the functionality of show the info of the project once the user hovers the image regarding it.

  • 4

    Final milestone delivery

    Create dynamical pages.

    This branch includes a code that creates cards and modals dynamically using JS. It complies with the milestone requirements as follow.

    • [x] When the user clicks (or taps) the button to check project details, the popup with details about the project appears.

    • [x] When the user clicks (or taps) the close (X) button, the popup disappears.

    • [x] You should implement popups for both mobile and desktop screen sizes

    • [x] You must stick to the design as much as possible (e.g., font, colors, images, tests, margins) using the templates in Figma.

    • [x] In order to associate each project with the popup window details, you must use a JavaScript array to store all of the information for all projects.

    • [x] For each project you need to store the following pieces of data in a JavaScript object, at a minimum: name, description, featured image, technologies, link to live version, link to source.

    • [x] You need to update the main page so that the projects section is created dynamically using the information stored in that JavaScript object. Remember, all of the HTML in that section is created when the page loads.

        After that, you could implement the popup window.

    • [x] You need to use pair-programming for this project. We will check to make sure that both partners have contributed to the project by looking at the commit history for each project. Therefore you need to implement the above features in all of the portfolios in your pair-programming group.

  • 5

    Preserve data in the local storage

    This PR includes the feature of preving data in the inputs fields. So, if the user closes the page. When he come back, the data will be there. Notice that if the user is in private mode, data won't be storaged.

  • 6

    Email format checking feature

    This PR includes a JS code that validates the rule requiered. All letters should be in lower case for the email input. If not, the document shows an error message in red. This message will grow if the user hovers on it.

  • 7

    navigation menu on both screen sizes.

    This feature includes:

    • [x] Menu mobile functionality.
    • [x] Responsivness to mobile and desktop version.
    • [x] The firste versión of the landing page.

    I have to point out that I'm making the all page from the scratch. Pure vanilla flavor.

  • 8

    Bump minimatch from 3.0.4 to 3.1.2

    Bumps minimatch from 3.0.4 to 3.1.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 9

    Code review - Dennis and Sergio

    Good implementation of features. Optionally, you might also want to try out using forEach for this and see how it also work. Keep it up and happy coding.

    https://github.com/sergiogval/temporal-portfolio-repo/blob/fcba498702873988d6c2cb0189ec5d36cf5f4a14/js/dinamic.js#L86-L101

Popular Tag

Related