Friends on Website

I decided to create a page where I put my friends information like their name, description, and social links which helps others (who visit my website) to connect with them.

Planning

Define a JSON schema for friends.yaml file. See the json-schema.
Use builtin Grids to showcase the friend’s information. See some experimental layouts.
Friends’ description must be between 50-70 words. If they fail to maintain them then use ChatGPT to reduce the size.

How Do each Friend’s Section Looks?

More certainly they look similar to one another because the web pages is being gets rendered from a yaml file to maintain the certainty.

[!question] Why render from yaml format?

Because I am going to define a schema for that which follows a certain format and using that format the webpage is being rendered using mkdocs-markdownextradata-plugin.

How to Add Friends?

I can manually asks their infos and add into yaml files.

I can open a discussion where my friends provide their infos and request me to add them on the web page.

My friends can open a PULL REQUEST into the repo which will automatically add them on webpage.

Layouts

These are my rough ideas which I prefer to replicate on my website’s page to display the friends’ information.

:material-numeric-1-box:{ .lg } Layout 1

{ .twemoji .xxl .middle .round } Anshul Raj Verma

<p align=justify>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus urna et pharetra pharetra massa massa ultricies mi. Adipiscing enim eu turpis egestas. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sapien pellentesque habitant morbi tristique senectus et. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget.
</p>

<p align=center>
[:simple-github:{ .lg }](https://linkedin.com/in/arv-anshul) &nbsp;
[:simple-linkedin:{ .lg }](https://github.com/arv-anshul) &nbsp;
</p>

[![avatar]{ .twemoji .xxl .middle .round }][primary-url] **Anshul Raj Verma**

<p align=justify>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus urna et pharetra pharetra massa massa ultricies mi. Adipiscing enim eu turpis egestas. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sapien pellentesque habitant morbi tristique senectus et. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget.
</p>

<p align=center>
[:simple-github:{ .lg }](https://linkedin.com/in/arv-anshul) &nbsp;
[:simple-linkedin:{ .lg }](https://github.com/arv-anshul) &nbsp;
</p>

:material-numeric-2-box:{ .lg } Layout 2

{ .twemoji .xxl .middle .round } Anshul Raj Verma

<p align=justify>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus urna et pharetra pharetra massa massa ultricies mi. Adipiscing enim eu turpis egestas. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sapien pellentesque habitant morbi tristique senectus et. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget.
</p>

<p align=center>
[:simple-github:{ .lg }](https://linkedin.com/in/arv-anshul) &nbsp;
[:simple-linkedin:{ .lg }](https://github.com/arv-anshul) &nbsp;
</p>

[![avatar]{ .twemoji .xxl .middle .round }][primary-url] **Anshul Raj Verma**

<p align=justify>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus urna et pharetra pharetra massa massa ultricies mi. Adipiscing enim eu turpis egestas. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sapien pellentesque habitant morbi tristique senectus et. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget.
</p>

<p align=center>
[:simple-github:{ .lg }](https://linkedin.com/in/arv-anshul) &nbsp;
[:simple-linkedin:{ .lg }](https://github.com/arv-anshul) &nbsp;
</p>

:material-numeric-3-box:{ .lg } Layout 3

[![avatar]{ .twemoji .xxxl .round }][primary-url]

**Anshul Raj Verma**

[:simple-github:{ .lg }](https://linkedin.com/in/arv-anshul) [:simple-linkedin:{ .lg }](https://github.com/arv-anshul)

<p align=justify>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus urna et pharetra pharetra massa massa ultricies mi. Adipiscing enim eu turpis egestas. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sapien pellentesque habitant morbi tristique senectus et. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget.
</p>

[![avatar]{ .twemoji .xxxl .round }][primary-url]

**Anshul Raj Verma**

<p align=center>
[:simple-github:{ .lg }](https://linkedin.com/in/arv-anshul) &nbsp;
[:simple-linkedin:{ .lg }](https://github.com/arv-anshul) &nbsp;
</p>

<p align=justify>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus urna et pharetra pharetra massa massa ultricies mi. Adipiscing enim eu turpis egestas. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sapien pellentesque habitant morbi tristique senectus et. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget.
</p>

[![avatar]{ .twemoji .xxxl .round }][primary-url]

**Anshul Raj Verma**

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus urna et pharetra pharetra massa massa ultricies mi. Adipiscing enim eu turpis egestas. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Egestas egestas fringilla phasellus faucibus scelerisque eleifend. Sapien pellentesque habitant morbi tristique senectus et. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget.

<p align=center>
[:simple-github:{ .lg }](https://linkedin.com/in/arv-anshul) &nbsp;
[:simple-linkedin:{ .lg }](https://github.com/arv-anshul) &nbsp;
</p>