https://github.com/jdegand/devchallenges-portfolio
DevChallenges - Legacy - Responsive Web Developer - Portfolio
https://github.com/jdegand/devchallenges-portfolio
css devchallenges devchallenges-legacy html javascript
Last synced: 11 months ago
JSON representation
DevChallenges - Legacy - Responsive Web Developer - Portfolio
- Host: GitHub
- URL: https://github.com/jdegand/devchallenges-portfolio
- Owner: jdegand
- Created: 2022-04-13T20:37:49.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-12-03T00:22:39.000Z (about 1 year ago)
- Last Synced: 2025-01-22T09:12:39.505Z (about 1 year ago)
- Topics: css, devchallenges, devchallenges-legacy, html, javascript
- Language: HTML
- Homepage: https://jdegand.github.io/devchallenges-portfolio/
- Size: 313 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Portfolio
## Table of Contents
- [Overview](#overview)
- [Built With](#built-with)
- [Features](#features)
- [Requirements](#requirements)
- [Thoughts](#thoughts)
- [Useful Resources](#useful-resources)
## Overview
***
***
### Built With
- HTML
- CSS
- JS
## Features
This application/site was created as a submission to a [DevChallenges](https://devchallenges.io/challenges) challenge. The [challenge](https://web.archive.org/web/20240417025422/https://legacy.devchallenges.io/challenges/5ZnOYsSXM24JWnCsNFlt) was to build an application to complete the given user stories. **Note**: The previous design document may be incomplete, as you need to find an archived version of the challenge as all `legacy` challenges have had their documentation removed from DevChallenges.
## Requirements
- [x] I can see personal details
- [x] I can see skills
- [x] I can see projects
- [x] I can filter projects by tag
- [x] I can see hobbies or certificates
Optional
- [ ] I can see experiences
- [ ] I can see blogs
- [ ] I can see projects on different pages
## Thoughts
- I used Example 2 as my design template.
- I have resisted creating a portfolio. Portfolios and personal websites can become a timesink that you are **never** satisfied with.
- I tried using a progress tag and a label for the skill bar. The WAVE accessibility tool complains about an orphaned label, even when the label's "for" attribute is linked to an ID of the progress bar. Apparently, if a label is not used inside a form, this warning will be thrown.
- It is debatable if skill bars are good for your resume or portfolio. Since the design used them, I replicated it.
- I periodically update my numbers, but I haven't changed the projects.
- I used the Github API in another [porfolio project](https://github.com/jdegand/odin-project-personal-portfolio).
## Useful Resources
- [Steps to replicate a design with only HTML and CSS](https://devchallenges-blogs.web.app/how-to-replicate-design/)
- [Dev.to](https://dev.to/10xlearner/how-to-get-the-profile-picture-of-a-github-account-1d82) - get profile pic of github account
- [Bashooka](https://bashooka.com/coding/25-amazing-css-range-slider-designs/) - range slider designs
- [CSS Tricks](https://css-tricks.com/css3-progress-bars/) - progress bars
- [Codepen](https://codepen.io/vskand/pen/MWKKKYK) - vanilla js filtering example
- [Stack Overflow](https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link) - html button that acts like a link
- [Stack Overflow](https://stackoverflow.com/questions/42290719/custom-styling-progress-bar-in-css) - styling progress element
- [Geeks for Geeks](https://www.geeksforgeeks.org/how-to-calculate-the-number-of-days-between-two-dates-in-javascript/) - calculate number of days between dates in JS