feat: add dynamic Open Graph image for homepage

[saurabhsingh72487-hub]

Problem

The OSSfolio homepage did not have an og:image configured, causing shared links on platforms such as Twitter, LinkedIn, WhatsApp, and Discord to appear without a preview image.

Solution

Implemented a dynamic Open Graph image using Next.js ImageResponse and integrated it with the site's metadata.

Changes

• Added src/app/opengraph-image.tsx to generate the Open Graph image dynamically.
• Updated homepage Open Graph metadata to use the generated image.
• Added metadataBase for proper absolute URL resolution.
• Ensured the generated image follows the required 1200×630 Open Graph dimensions.
• Used OSSfolio branding and metadata integration for link previews.

Implementation Notes

The issue recommended a static image approach (public/og-image.png), but this PR uses the Next.js native Open Graph image generation approach (opengraph-image.tsx).

This provides:

• Easier future maintenance.
• Dynamic image generation through code.
• Centralized branding and metadata management.

Testing

• Verified the Open Graph image route renders successfully.
• Confirmed metadata is generated correctly.
• Tested link preview metadata locally.

Related Issue

Closes #19

[PRODHOSH]

@saurabhsingh72487-hub pls edit ur pr description according to the template
u can find the template in the repo
and also join the discord -> https://discord.gg/4VsyzxaNd6

and instead i see u did thru code instead of a image
but thats fine since ur a first time contributor

Generall workflow please read #19 and the CONTRIBUTING.md

For now edit the pr description with the template from the repo
and then i will merge

But before raising a pull request u hav to get assigned to an issue
so first u hav to comment in the issue explaining ur approach
next up after assigning u only u hav to raise a pr

pls join the discord if u have any doubts
thanks !

[PRODHOSH]

i can give u a top label if u implement this

if u create a image using gemini nano banana for the open graph image
but the gemini image colors and everything should be relevant to our website

pls join the discord so i can explain u clearly

[PRODHOSH]

@saurabhsingh72487-hub star the repo

[Copilot]

Pull request overview

Adds a dynamic Open Graph image for the homepage using Next.js metadata image generation, and updates site metadata to resolve OG URLs correctly.

Changes:

• Added src/app/opengraph-image.tsx to generate the OG image at runtime via next/og ImageResponse.
• Added metadataBase and introduced homepage openGraph metadata in src/app/layout.tsx.
• Updated Twitter card metadata to use a large-image card layout (but currently references a non-existent image path—see comments).

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
src/app/opengraph-image.tsx	Introduces runtime OG image generation for the root route segment.
src/app/layout.tsx	Updates global metadata (base URL, Open Graph, Twitter) to integrate OG image behavior.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[PRODHOSH]

@saurabhsingh72487-hub pls do the changes as i said in the comments
why is there documentation code in this pull request
Remove that

Pls ask doubts in the discord if u dont know the workflow in opensource
Happy to help!

Thanks