{"id":21199108,"url":"https://github.com/nitbravoa92/portfolio-setup-and-mobile-first","last_synced_at":"2025-09-28T14:31:33.972Z","repository":{"id":157479856,"uuid":"633504359","full_name":"NitBravoA92/portfolio-setup-and-mobile-first","owner":"NitBravoA92","description":"This project consists of the design of a Personal Portfolio using HTML, CSS and Javascript, applying the Mobile first approach.","archived":false,"fork":false,"pushed_at":"2024-01-04T03:32:24.000Z","size":13883,"stargazers_count":14,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-04T18:19:26.783Z","etag":null,"topics":["css-grid","css3","html","javascript"],"latest_commit_sha":null,"homepage":"http://softwaredevone.me/portfolio-setup-and-mobile-first/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NitBravoA92.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-04-27T16:36:16.000Z","updated_at":"2023-12-15T19:26:45.000Z","dependencies_parsed_at":"2023-12-21T02:08:23.271Z","dependency_job_id":"34ea571c-3041-4752-b40e-3b41e68139b8","html_url":"https://github.com/NitBravoA92/portfolio-setup-and-mobile-first","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/NitBravoA92/portfolio-setup-and-mobile-first","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NitBravoA92%2Fportfolio-setup-and-mobile-first","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NitBravoA92%2Fportfolio-setup-and-mobile-first/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NitBravoA92%2Fportfolio-setup-and-mobile-first/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NitBravoA92%2Fportfolio-setup-and-mobile-first/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NitBravoA92","download_url":"https://codeload.github.com/NitBravoA92/portfolio-setup-and-mobile-first/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NitBravoA92%2Fportfolio-setup-and-mobile-first/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277379961,"owners_count":25808429,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-28T02:00:08.834Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-grid","css3","html","javascript"],"created_at":"2024-11-20T19:56:55.283Z","updated_at":"2025-09-28T14:31:33.179Z","avatar_url":"https://github.com/NitBravoA92.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\u003cb\u003ePortfolio Website\u003c/b\u003e\u003c/h3\u003e\n\u003c/div\u003e\n\n# 📗 Table of Contents\n\n- [📖 About the Project](#about-project)\n  - [🛠 Built With](#built-with)\n    - [Tech Stack](#tech-stack)\n    - [Key Features](#key-features)\n  - [🚀 Live Demo](#live-demo)\n- [💻 Getting Started](#getting-started)\n  - [Setup](#setup)\n  - [Prerequisites](#prerequisites)\n  - [Install](#install)\n  - [Usage](#usage)\n- [👥 Authors](#authors)\n- [🔭 Future Features](#future-features)\n- [🤝 Contributing](#contributing)\n- [⭐️ Show your support](#support)\n- [🙏 Acknowledgements](#acknowledgements)\n- [📝 License](#license)\n\n# 📖 Portfolio Website \u003ca name=\"about-project\"\u003e\u003c/a\u003e\n\n**Portfolio Website** is a project made with HTML, CSS and Javascript, which consists of the mobile and desktop design of a Professional Web Portfolio. This project is focused on testing the skills for web layout using the mobile-first approach.\n\nThe following link is a video presentation of the project. In this video I explained the details of the project, the main sections, the challenges and contributions that the project left in me. You will also be able to learn about what the future of the project will be.\n- [Presentation of the Project](https://www.loom.com/share/10a78a3677ad4b28b10a114cba3d1aa2)\n\nThe following link is a video presentation of the project. In this video I explained the details of the project, the main sections, the challenges and contributions that the project left in me. You will also be able to learn about what the future of the project will be.\n- [Presentation of the Project](https://www.loom.com/share/10a78a3677ad4b28b10a114cba3d1aa2)\n\n## 🛠 Built With \u003ca name=\"built-with\"\u003e\u003c/a\u003e\n\n### Tech Stack \u003ca name=\"tech-stack\"\u003e\u003c/a\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eClient\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://webhint.io/\"\u003eWebhint.io\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://stylelint.io/\"\u003eStylelint.io\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://eslint.org/\"\u003eESlint.org\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://nodejs.org\"\u003eNode.js\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n### Key Features \u003ca name=\"key-features\"\u003e\u003c/a\u003e\n\n- **Responsive Design**\n- **Support for all Browsers**\n- **SEO Friendly**\n- **Use of semantic HTML in the code structure**\n- **Combination of the Grid and Flexbox system to build the layout**\n- **Client side form Validations**\n- **Form data preserve in local storage to improve user experience**\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 🚀 Live Demo \u003ca name=\"live-demo\"\u003e\u003c/a\u003e\n\nTo see the project working live, you can click on the following link that contains the demo version:\n- [Live Demo Link](https://nitbravoa92.github.io/portfolio-setup-and-mobile-first)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 💻 Getting Started \u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\nTo get a local copy up and running, follow these steps.\n\n### Setup\n\nClone this repository to your desired folder:\n\n```sh\n  cd my-folder-name\n  git clone git@github.com:NitBravoA92/portfolio-setup-and-mobile-first.git\n```\n\n### Prerequisites\nIn order to install, modify and run this project, it is necessary to have the following applications installed:\n- **Git:** to manage the project versions of source code. [You can Download Git here](https://git-scm.com/)\n- **Nodejs and NPM:** to install and manage the project dependencies. [Nodejs and NPM installation guide](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n- **A code editor** like Visual Studio Code (Recommended) or any other of your preference. It is necessary to open the project and add or modify the source code. [You can Download Visual Studio Code here](https://code.visualstudio.com/)\n\nIt is also important to have at least basic knowledge of HTML, CSS and Javascript languages, so you will be able to understand and work with the html and css code of the project. \n- [Learn the basics of HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)\n- [Semantic HTML: What It Is and How to Use It Correctly](https://www.semrush.com/blog/semantic-html5-guide/)\n- [Learn the basics of CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)\n- [Basic concepts of flexbox](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)\n- [Learn flexbox playing with FROGGY](https://flexboxfroggy.com/)\n- [A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)\n- [Web forms — Working with user data](https://developer.mozilla.org/en-US/docs/Learn/Forms)\n- [The HTML5 input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types)\n- [Client-side form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\n- [JavaScript basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)\n- [JavaScript Tutorial](https://www.w3schools.com/js/)\n- [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)\n- [JavaScript Forms](https://www.w3schools.com/js/js_validation.asp)\n- [JavaScript Form Validation](https://www.javatpoint.com/javascript-form-validation)\n- [Window: localStorage property](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)\n\n### Install\n\nInstall this project by running the next command into your project folder:\n\n```sh\n  npm install\n```\n\n### Usage\n\nOpen the HTML, CSS or Javascript files and modify the internal code and then run the following command:\n\n```sh\n  npx run .\n  npx stylelint \"**/*.{css,scss}\"\n  npx eslint .\n```\nThis will show you a log with details about errors (if any) and changes that would be necessary to solve those errors and improve the code.\n\n**Note**: Please only modify the HTML, CSS and Javascript files. Do not modify the configuration files of the project.\n\n## 👥 Authors \u003ca name=\"authors\"\u003e\u003c/a\u003e\n\n👤 **Nitcelis Bravo**\n\n- GitHub: [Nitcelis Bravo](https://github.com/NitBravoA92)\n- Twitter: [@softwareDevOne](https://twitter.com/softwareDevOne)\n- LinkedIn: [LinkedIn](https://www.linkedin.com/in/nitcelis-bravo-alcala-b65340158)\n\n👤 **Syeda Masuma Fatima**\n\n- GitHub: [@MasumaJaffery](https://github.com/MasumaJaffery)\n- Twitter: [@MasumaJaffery](https://twitter.com/MasumaJaffery)\n- LinkedIn: [Masuma Jaffery](https://www.linkedin.com/in/masuma-jaffery-797a29256/)\n\n👤 **Kenneth Agyare Kissi**\n\n- GitHub: [@over-geek](https://github.com/over-geek)\n- Twitter: [@KissiKenneth](https://twitter.com/KissiKenneth)\n- LinkedIn: [Kenneth Agyare Kissi](https://www.linkedin.com/in/kenneth-agyare-kissi-673a01186/)\n\n👤 **Luis Renan Pavanello**\n\n- GitHub: [@luisrpavanelli](https://github.com/luisrpavanelli)\n- Twitter: [@luisrpavanello](https://twitter.com/luisrpavanello)\n- LinkedIn: [Luis Pavanello](https://www.linkedin.com/in/luisrpavanello/)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 🔭 Future Features \u003ca name=\"future-features\"\u003e\u003c/a\u003e\n\n- [x] **Create the mobile version of a new section to list all portfolio Projects**\n- [x] **Create the mobile version of the contact section**\n- [x] **Create the desktop version of the webpage**\n- [x] **Create animations for some elements of the web page with css**\n- [x] **Create the mobile navigation menu**\n- [x] **Create the mobile version of a popup window to show the details of a project**\n- [x] **Create the desktop version of a popup window to show the details of a project**\n- [x] **Add validations to the contact form using Javascript to optimize functionality**\n- [x] **Implement the persistence of Works section data using Local storage**\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 🤝 Contributing \u003ca name=\"contributing\"\u003e\u003c/a\u003e\n\nContributions, issues, suggestions and feature requests are welcome!\nFeel free to check the [issues page](../../issues/).\n\nTo do Contributions, please fork this repository, create a new branch and then create a Pull Request from your branch. You can find detailed description of this process in: [A Step by Step Guide to Making Your First GitHub Contribution by Brandon Morelli](https://codeburst.io/a-step-by-step-guide-to-making-your-first-github-contribution-5302260a2940)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## ⭐️ Show your support \u003ca name=\"support\"\u003e\u003c/a\u003e\n\nIf you liked this project, give me a \"Star\" (clicking the star button at the beginning of this page), share this repo with your developer community or make your contributions.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## 🙏 Acknowledgments \u003ca name=\"acknowledgements\"\u003e\u003c/a\u003e\n\nI would like to thank my Microverse teammates for their support. They have supported me a lot in carrying out this project, giving me suggestions, good advice and solving my code doubts.\n\n\n## 📝 License \u003ca name=\"license\"\u003e\u003c/a\u003e\n\nThis project is [MIT](./LICENSE) licensed.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitbravoa92%2Fportfolio-setup-and-mobile-first","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitbravoa92%2Fportfolio-setup-and-mobile-first","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitbravoa92%2Fportfolio-setup-and-mobile-first/lists"}