Skip to content
Websites developed, renovated, designed and maintained by Muhammad Muzzammil
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
archives/halcyoninc.xyz
images
.gitattributes
LICENSE
README.md
bg.png
data.json
fontawesome.ttf
index.php
main.css
main.js

README.md

websitesby.muzzammil.xyz GitHub license CodeFactor Twitter

A collection of some of the websites I made. :) image It accesses data stored in data.json file which is then decoded by php to produce an output to show as a card on website. Nothing fancy.

JSON structure

[{
	"url": "If website has a link; link for website",
	"image": "Location of screenshot of website",
	"github": "If website has a github repo; link to the github repository",
	"archive": "If website is archived; link to archive",
	"class": "If extra styling is needed"
}]

Only requirements are "image" key and its value and atleast one of the other keys and values.

Example:

[{
	"image": "./images/muzzammil.xyz",
	"url": "//muzzammil.xyz"
}]

Example of a generated card:

<div class="card">
    <img src="./images/muzzammil.xyz.png">
    <cover><a href='//muzzammil.xyz' target='_blank'><url></url></a></cover>
</div>

Effect: Normal

image

Effect: Hovered (normal)

image

Effect: Hovered (backdrop-filter)

image

Dummy card with all keys

JSON object

[{
	"url": "//muzzammil.xyz",
	"image": "./images/muzzammil.xyz",
	"github": "//github.com/muhammadmuzzammil1998/muzzammil.xyz",
	"archive": "//old.muzzammil.xyz",
	"class": "extra-class-for-card"
}]

Generated HTML code (formatted)

<div class="card extra-class-for-card">
	<img src="./images/muzzammil.xyz.png">
	<cover>
		<a href="//github.com/muhammadmuzzammil1998/muzzammil.xyz" target="_blank">
			<github></github>
		</a>
		<a href="//muzzammil.xyz" target="_blank">
			<url></url>
		</a>
		<a href="//old.muzzammil.xyz" target="_blank">
			<archive></archive>
		</a>
	</cover>
</div>

image

You can’t perform that action at this time.