Created a new layout for GitHub projects

[MUmarShahbaz]

Preview

Additions

1. Add repositories, type you repo name in the front matter as the following

repositories:
  - KingHowler/Arduino-Language-Support
  - KingHowler/Oscilloscope-Online
  - alshedivat/al-folio

2. Add icons to your title, to show which languages and tools were used

icons:
  - https://skillicons.dev/icons?i=processing
  - javascript/javascript-original.svg # Note: You don't have to specify the full link to devicons, only the foldername and filename
  - html5/html5-original.svg

[MUmarShahbaz]

Fixed layout issues for mobile phones

Preview

[MUmarShahbaz]

@george-gca kindly review this as well

[MUmarShahbaz]

I know this was previously discussed, but this is the updated version. I am using this for my projects section and it felt like a waste for it to not be a feature.

Next I am thinking about adding some default badges to include
for example I am using this in my about page :

Light Mode

Dark Mode

the above are the ones for my GitHub stars

Light Mode

Dark Mode

And these 2 are for installs on my VS extension

I was thinking about adding a little bit more like these so that they can make them easily? or should they do this themselves?

[george-gca]

I was thinking about adding a little bit more like these so that they can make them easily? or should they do this themselves?

I believe they should add them themselves.

I am not sure about the layout of the icons in the desktop version, but tbh I don't currently have a counter-proposal. Have you tested it in the description as smaller icons maybe? But I like the idea of this being a different layout available for the users. Can you create (or maybe modify) a project so it uses this layout, so it can be an example of usage?

[MUmarShahbaz]

I was thinking about adding a little bit more like these so that they can make them easily? or should they do this themselves?

I believe they should add them themselves.

I am not sure about the layout of the icons in the desktop version, but tbh I don't currently have a counter-proposal. Have you tested it in the description as smaller icons maybe? But I like the idea of this being a different layout available for the users. Can you create (or maybe modify) a project so it uses this layout, so it can be an example of usage?

Then should I center align the title and add the icons below it? Like in the mobile version?

In my opinion it will make the description look awkward, it should be with the title but if we center align it, I don't think it will give a professional look

[george-gca]

I think the current desktop version doesn't look very professional, but the mobile one looks nice. I agree to not center align it in the desktop version. What about putting it after the description and before the repo card?

[MUmarShahbaz]

I think the current desktop version doesn't look very professional, but the mobile one looks nice. I agree to not center align it in the desktop version. What about putting it after the description and before the repo card?

That was how I did it initially but it looked like I was just dumping everything to the left side

[MUmarShahbaz]

This is the new design I have come up with

PC Version

Mobile Version

The icons and the repositories can be any number the user wills it to be

The {{ page.icon }} shown in the project card at the all projects page is displayed as an icon on the page

[MUmarShahbaz]

If the new design is better, should I add the description before or after the icons?

Preview : Description before code icons

[MUmarShahbaz]

I am also thinking about adding a divider right before the repositories, it will keep it separated from the center-aligned content

[MUmarShahbaz]

I am using the design on my website, you can take a look directly if you want to
https://kinghowler.github.io/projects/

[george-gca]

Can you make it look like this?

I believe left aligned keeps the layout more similar to the other ones we are already using. If the user provides an image it could be shown in the left previous to the title like in this image, if not, it could be hidden and the title and everything would be left aligned.

Also I agree to adding a divider before and after the repo cards.

[MUmarShahbaz]

I'll try to make it look like that

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[MUmarShahbaz]

Oh wow, I had my exams and completely forgot about this. I'll get working on this one.

[netlify]

❌ Deploy Preview for relaxed-lollipop-b6bc17 failed. Why did it fail? →

Name	Link
🔨 Latest commit	d6d86b1
🔍 Latest deploy log	https://app.netlify.com/sites/relaxed-lollipop-b6bc17/deploys/676952e62a17b200089c8ebf

[MUmarShahbaz]

@george-gca I've edited according to your reqiurements.

Preview

Requesting for a review. Also idk what the new 4 failed checks are, there were only 3 when I made the PR.

[george-gca]

It is best to search for :// since it could include files from other sources (e.g. ftp://)

[george-gca]

2 more things:

1. Can you make that the image ends with the icons? In your example the icons are positioned at half the image height. Like this:

2. Can you create or modify one of the projects so that it showcases this new template? You can link to this repository as the code example, and even add the information you showed in your previous comment so users get to know how to do this.

[MUmarShahbaz]

It's a bit different actually, It's not that the icons are placed at the middle of the image, the Entire Right section starts with the the top of the Image. I could add a simple padding-top to resolve it but I wanted to leave it so that we can use Multiline descriptions. If the description uses multiple line it will automatically shift the icons below.

Or I could have the right section be aligned to the bottom of the image.

[george-gca]

Can't you instead make the image size relative to the right section, starting it and ending it with the section, but always scaling it? This way the image could be always squared and it would increase its size if the user added a large description.

[MUmarShahbaz]

Interesting, I'll look into it