Repository OpenGraph Card

[smaranjitghose]

• Create a promotional card with dimensions 1280×640px for the repository (This appears when the link to the repository is shared across various social media, even WhatsApp!)
• The Name of the project should be prominent.
• The background should resonate well with the goal of the project

Sample Reference

[varunwho]

Hey can you assign this to me

[varunwho]

Something like this?

[smaranjitghose]

Please have a look at the reference.

[varunwho]

Please have a look at the reference.

This one right?

Something like this?

In this, I've used the ParticlesJs background, male-female DP image and the same colour (purple) to resonate with the project. Did you want something different? Can you tell me more specific details please

[smaranjitghose]

I don't have the time to explain this issue any further than what is present in the issue description as I would take much less time to actually finish the work myself.

[shreya0204]

Hey, as I understood, You want to say that you want a promotional card design for your projects to be published along with your GitHub repo.

So, I have designed this card attached below.

• It is simple, elegant, as your mentioned reference image.
• It is of size 1280 x 640 as mentioned.
• You can add your project image in place of the reference image along with Project Title.
• Description and link to the repo are totally optional ( can be changed )

Also, let me know if you like it, then you want its code to be in vanilla HTML CSS, or use of any framework is allowed.

[smaranjitghose]

@shreya0204 Yes.

I have put one in the README myself.

Your suggestion seems cool too. However, avoid using any pictures that indicate a relationship with food and try to select one which is more suitable for our project.

Currenly, we are using HTML, CSS, JS along with some Bootstrap, Jquery,AOS and Particle.jS. We plan to shift to React soon!

[shreya0204]

Yes, I have seen which you have put in README. But, that is am image. So you want an image card or you want HTML coded card. Please clarify.

[smaranjitghose]

Yes, I have seen which you have put in README. But, that is am image. So you want an image card or you want HTML coded card. Please clarify.

Image

[shreya0204]

Okay. That's cool. So I'll be making one card for your portfolio website. The content is the same as you have written in the image in the README file or the content would be different.

[smaranjitghose]

Okay. That's cool. So I'll be making one card for your portfolio website. The content is the same as you have written in the image in the README file or the content would be different.

It can be different. Feel free to be creative. But should reflect the goal of the project

[shreya0204]

Okay thank you for giving flexibility, I'll be sending the card soon.

[shreya0204]

I have attached the image card below

[anushbhatia]

Heading should a little bit more clear and bolder so that they will be able to remember the name of the project at least

[shreya0204]

Okay, I'll do that and I have to put the card in the assets --> images section, right?

[shreya0204]

Do let me know if any further changes are required. I made the title bold so it is clearly visible and catchy.

[smaranjitghose]

Okay, I'll do that and I have to put the card in the assets --> images section, right?

No. Put it in readme_assets

[smaranjitghose]

@shreya0204

Feedback

• Would it be possible for you to take a snapshot of our current version of the website (perhaps different pages) and put it inside the laptop, mobile, tablet, and monitor screen objects in the above image?
• Kindly make the text as: " We aim to make your personal website creation simple and elegant af while you can focus on your innovation and learning".
• Kindly make the words "personal website" "innovation" and "learning" bold
• Replace the hyphen after the word link with a colon
• Could you provide a PDF Card for the same with the link embedded. ( Rephrase the text as Check it Out for the PDF and remove the entire text for link)

@anushbhatia do let us know if you have any further suggestions.

[shreya0204]

@shreya0204

Feedback

• Would it be possible for you to take a snapshot of our current version of the website (perhaps different pages) and put it inside the laptop, mobile, tablet, and monitor screen objects in the above image?
• Kindly make the text as: " We aim to make your personal website creation simple and elegant af while you can focus on your innovation and learning".
• Kindly make the words "personal website" "innovation" and "learning" bold
• Replace the hyphen after the word link with a colon
• Could you provide a PDF Card for the same with the link embedded. ( Rephrase the text as Check it Out for the PDF and remove the entire text for link)

@anushbhatia do let us know if you have any further suggestions.

Thank you for your feedback.

Yes, I can change the inside screen images with your website images but it will result in a change in the layout of devices. Images don't have links embedded in the text. For that either you need a web page function or HTML template.

[smaranjitghose]

Yes I am aware of that. I meant, convert the image into a PDF and then have a link. (That is optional for now)

[shreya0204]

Okay, I'll do that.

[shreya0204]

I have attached the image below.

• I have put your website images on the screen of the device.
• Changed the text along with the highlighted text.
• Removed Hyphen.
• Convert the image as pdf and put up the link of the repo as Check It Out.

Do let me know if any further changes are required.

[smaranjitghose]

Looks Awesome. Please give a PR.

So are you giving one image and one pdf:

• Image: The check it out text is replaced by the original link of the repo (text)
• PDF: Exactly the same, except that the link is embedded.

[shreya0204]

Which link should I put up in the hyperlink then? and both image and pdf will be in readme assets?

[smaranjitghose]

• Ya both in readme assets.
• The Hyperlink (text) would be in the image

[shreya0204]

Yeah. Done!