Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/deponte-designer/deponte-web-portfolio
Discover my portfolio, where design meets responsiveness and media query with a focus on semantic coding practice.
https://github.com/deponte-designer/deponte-web-portfolio
Last synced: 3 days ago
JSON representation
Discover my portfolio, where design meets responsiveness and media query with a focus on semantic coding practice.
- Host: GitHub
- URL: https://github.com/deponte-designer/deponte-web-portfolio
- Owner: deponte-designer
- License: mit
- Created: 2023-10-27T18:14:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-08T00:58:15.000Z (about 1 year ago)
- Last Synced: 2023-11-08T06:52:29.587Z (about 1 year ago)
- Language: CSS
- Homepage: https://deponte-designer.github.io/deponte-web-portfolio/
- Size: 9.58 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# dePonte Web Portfolio
This is my personal portfolio website showcasing my work and providing information about me.
## Description about me
Hello, I'm Sofia, and I'm on a journey of reinvention and exploration.
With a Bachelor's degree in Design and a decade of experience in both the private and public sectors, I've honed my creative and problem-solving skills. My work as a designer has allowed me to tackle a wide range of challenges, from crafting captivating visuals to designing user-friendly interfaces.
My career path has led me to the United Kingdom, and I've decided to embark on an exciting new adventure - a career change into the world of web development. I'm currently enrolled in a Front-End Web Development bootcamp, where I'm immersing myself in the world of HTML, CSS, and JavaScript, and learning to transform ideas into interactive digital experiences.
My journey is marked by a passion for design, a dedication to continuous learning, and an unquenchable curiosity about the ever-evolving tech landscape. I'm eager to leverage my unique blend of skills and experiences in the web development field and contribute to innovative projects and teams.
Feel free to connect with me to discuss collaboration opportunities, share insights, or just have a good tech chat.
Thank you for visiting my portfolio, and I look forward to connecting with you!
## Table of Contents
Use this table of contents to quickly navigate to the information you need:
- [User Story](#user-story)
- [Acceptance Criteria](#acceptance-criteria)
- [Screenshot](#screenshot)
- [Usage](#usage)
- [Credits](#credits)
- [Features](#features)
- [Deployment](#deployment)
- [License](#license)
- [Badges](#badges)## User Story
**AS A** prospective employer or visitor to my portfolio website,
**I WANT** to easily navigate through the sections of the portfolio,
**SO THAT** I can quickly learn about the author, view their work, and find their contact information, all in one place.## Acceptance Criteria
Here are the critical requirements necessary to develop a portfolio that satisfies a typical hiring manager’s needs:
- When the page is loaded the page presents your name, a recent photo or avatar, and links to sections about you, your work, and how to contact you.
- When one of the links in the navigation is clicked then the UI scrolls to the corresponding section.
- When viewing the section about your work then the section contains titled images of your applications.
- When presented with the your first application then that application's image should be larger in size than the others.
- When images of the applications are clicked then the user is taken to that deployed application.
- When the page is resized or viewed on various screens and devices then the layout is responsive and adapts to my viewport.## Screenshot
![Website Screenshot on laptop](./images/portfolio-screenshot-laptop.png)
*The image above provides a visual representation of the main page. It showcases both the appearance and functionality of the web application on laptop with the mouse hover on 'About Me'.*
![Website Screenshot on tablet](./images/portfolio-screenshot-tablet.png)
*The image above provides a visual representation on tablet.*
![Website Screenshot on mobile](./images/portfolio-screenshot-mobile.png)
*The image above provides a visual representation on mobile.*
## Usage
To view this Portfolio project locally or make use of the code, follow these steps:
1. **Clone the Repository:**
`git clone https://github.com/deponte-designer/deponte-web-portfolio.git`2. **Navigate to the Project Directory:**
`cd deponte-web-portfolio`3. **Open the HTML File:**
- Locate the `index.html` file in your code editor.
- Open it in a web browser to view the project.Feel free to explore the code, make modifications, and provide feedback. If you have suggestions or improvements to share, please don't hesitate to create a pull request or submit an issue on the GitHub repository.
>Your input and contributions are highly valuable, and they will help enhance the project further!
## Credits
### Tutorials and Resources
#### For the README.md file
- [Acceptance Criteria for User Stories: Purposes, Formats, Examples, and Best Practices](https://www.altexsoft.com/blog/business/acceptance-criteria-purposes-formats-and-best-practices/)
- [Markdown Cheat Sheet](https://www.markdownguide.org/cheat-sheet)
- [Markdown Badges](https://github.com/Ileriayo/markdown-badges)#### For the index.html file
- [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)
- [The Anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
- [Hamburger menu](https://www.w3schools.com/howto/howto_js_mobile_navbar.asp)#### For the style.css file
- [CSS CheatSheet](https://htmlcheatsheet.com/css/)
- [Google Fonts](https://fonts.google.com/)
- [Hover effect: expand bottom border](https://stackoverflow.com/questions/28623446/hover-effect-expand-bottom-border)
- [Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid)#### Website Accessibility Testing
- [Web Accessibility Evaluation Report](https://wave.webaim.org/report#/https://deponte-designer.github.io/deponte-web-portfolio/)## Features
To complete.
>Your support and feedback are greatly appreciated as I work on these improvements!
## Deployment
This project is deployed and accessible at the following URLs:
- [Live Application](https://deponte-designer.github.io/deponte-web-portfolio): Explore the demo live version of the website.
- [GitHub Repository](https://github.com/deponte-designer/deponte-web-portfolio): Visit the repository for the project, which includes a README describing the details.
## Conclusion
Thank you for visiting this Portfolio project. Your support, feedback, and contributions are greatly appreciated as we work to make the web more accessible and user-friendly. If you have any suggestions, issues to report, or ideas for collaboration, please don't hesitate to reach out. Together, we can continue to improve this project and create a better web experience for everyone.
**Happy coding!**
## License
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
Copyright (c) 2023 [dePonte](https://github.com/deponte-designer)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
## Badges
![edX](https://img.shields.io/badge/edX-%2302262B.svg?style=for-the-badge&logo=edX&logoColor=white)
![Markdown](https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&logo=markdown&logoColor=white)
![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
![Windows 11](https://img.shields.io/badge/Windows%2011-%230079d5.svg?style=for-the-badge&logo=Windows%2011&logoColor=white)
![Slack](https://img.shields.io/badge/Slack-4A154B?style=for-the-badge&logo=slack&logoColor=white)
![Google Chrome](https://img.shields.io/badge/Google%20Chrome-4285F4?style=for-the-badge&logo=GoogleChrome&logoColor=white)
![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)
![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white)
![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)
![Github Pages](https://img.shields.io/badge/github%20pages-121013?style=for-the-badge&logo=github&logoColor=white)
![GitLab](https://img.shields.io/badge/gitlab-%23181717.svg?style=for-the-badge&logo=gitlab&logoColor=white)