Skip to content

Week 7 | GitHub Tracker | Amanda Tilly - #13

Open
amandatilly wants to merge 15 commits into
Technigo:mainfrom
amandatilly:main
Open

Week 7 | GitHub Tracker | Amanda Tilly#13
amandatilly wants to merge 15 commits into
Technigo:mainfrom
amandatilly:main

Conversation

@amandatilly

Copy link
Copy Markdown

GitHub Tracker

Creating a place to keep track of the GitHub repos that I am using at Technigo. Using JavaScript, html, css and fetching data from API's from the JSON response.

The problem

Focused on the blue requirements and mostly on JavaScript this week. I found it challenging but asked for help and worked a lot with my team. I feel like I learned a lot this week and I am happy with the final result.

My page includes:

  • A list of all repos that are forked from Technigo
  • Username and profile picture
  • Most recent update (push) for each repo
  • Name of default branch for each repo
  • URL to the actual GitHub repo
  • Number of commits for each repo
  • It is responsive (mobile-first)
  • A visualisation, a donut chart, of how many projects I've done so far, compared to how many I will do.

View it live

https://elegant-pasteur-b7cf22.netlify.app/

@KaraHowes KaraHowes left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a great project, Amanda, you should be very proud.

Overall I really liked the aesthetics of this project, the Hero image in particular is excellently done. The Repository cards are well-styled, with all the information displayed to meet all blue requirements. I especially like the hover effect on the chart.

Your code is easy to follow and semantically correct.

You might want to look at using rem values for your font-sizes (so that you don't have to set them all manually), but this is just a preference and opinions are divided on this!

A fantastic project!

Comment thread code/chart.js
"rgb(255, 205, 86)",
],
hoverOffset: 4,
},

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like the hover effect on the chart. Great idea

Comment thread code/style.css
}
.user {
text-shadow: 5px 5px 10px black;
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like this text-shadow effect. It adds a professional touch and depth as well

Comment thread code/style.css
@media (min-width: 768px) {
.projects {
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This empty-set should probably be removed :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants