AyDeveloper/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="IPFS-Website With Unstoppable Domain"/>
    <meta name="author" content="IPFS-Website With Unstoppable Domain" />
    <title>0xpampam.blockchain</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>

        body {
            width: 800px;
            max-width: 600px;
            height: 100%;
            margin: 0px auto;
            padding: 40px 35px;
        }

        .mainContainer {
            background-color: #1A1B21;
        }

        .mainContainerCenter {
            width: 400px;
            max-width: 300px;
            height: 100%;
            margin: 0px auto;
            padding: 30px 0;
            background-color: #161619;
        }

        .header {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .header .imgBox {
            width: 100%;
            max-width: 300px;
            height: 30% !important;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }
        .header img {
            width: 100%;
            object-fit: contain;
            background-repeat: no-repeat;
            background-position: center;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }

        .info {
            display: block;
            text-align: center;
        }

        .info h3 {
            color: #ffffff;
        }

        .info h4 {
            color: #F3BF99;
        }

        .info p {
            color: #F5F5F5;
        }

        .infoBtn {
            display: flex;
            flex-direction: row;
            gap: 10px;
            justify-content: center;
        }

        .infoBtn a i {
            color: #ffffff;
        }

        .infoBtn a .btnEmail i {
            color: #1A1B21;
        }

        .infoBtnItem {
            text-decoration: none;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            width: 95px;
            height: 30px;
            padding: 5px 10px;
            border-radius: 8px;
            background-color: #ffffff;
        }

        .btnLinkedin {
            background-color: #5093E2 !important;
        }

        .infoBtnItem p {
            color: #1A1B21;
            font-size: 15px;
        }

        .btnLinkedin p {
            color: #ffffff;
        }

        .aboutBody {
            padding: 10px 30px 0px 30px;
        }

        .aboutBody h2 {
            color: #ffffff;
            text-align: left;
        }

        .aboutBody p {
            color: #ffffff;
            text-align: left;
            line-height: 20px;
        }

        .footer {
            background-color: #000;
            padding: 10px 20px;
             margin-top: 2rem;
            display: flex;
            flex-direction: row;
            gap: 18px;
            justify-content: center;
        }

        .footer a i {
            color: #ffffff;
            font-size: 20px;
        }


    </style>
</head>
<body>
    <div class="mainContainer">

        <div class="mainContainerCenter">

        <header class="header">
            <div class="imgBox">
                <img src="pampam.jpg" width="100px"  alt="Pampam Portrait"  />
            </div>

            <div class="info">
                <h3>Ayomitan Pamilerin</h3>
                <h4>Developer Advocate 🥑</h4>
                <p>https://linktr.ee/oxpam_pam</p>
            </div>

            <div class="infoBtn">
                <a href="ayoayobami20@gmail.com" class="infoBtnItem btnEmail">
                    <i class="fa-sharp fa-solid fa-envelope"></i>
                    <p>Email</p>
                </a>

                <a href="http://www.linkedin.com/in/oxpampam" class="infoBtnItem btnLinkedin">
                    <span><i class="fa-brands fa-linkedin"></i></span>
                    <p>LinkedIn</p>
                </a>
            </div>
        </header>


        <div class="aboutBody">
            <h2>About</h2>
            <p>Hi there!👋 I am Ayobami Pamilerin. I'm a Smart Contract Developer 👨‍💻 , Technical Writer ✍️ and Developer Advocate 🥑.</p>
        </div>

        <div class="aboutBody">
            <h2>Interest</h2>
            <p>🌱 I’m open to building scalable solutions in the web3 space, onboarding the next wave of seasoned Web3 Developers. <br /> ⚡ Fun fact: I love playing bass guitar</p>
        </div>

        <footer class="footer">
            <a href="https://twitter.com/Oxpam_pam" class="footerSocial">
                <i class="fa-brands fa-square-twitter"></i>
            </a>

            <a href="https://github.com/AyDeveloper" class="footerSocial">
                <i class="fa-brands fa-square-github"></i>
            </a>

            <a href="https://oxpampam.hashnode.dev/" class="footerSocial">
                <i class="fa-brands fa-hashnode"></i>
            </a>

            <a href="https://www.polywork.com/ayo_ayobami" class="footerSocial">
                <i class="fa-regular fa-book-open-reader"></i>
            </a>
        </footer>

    </div>

    </div>


</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="IPFS-Website With Unstoppable Domain"/>
	<meta name="author" content="IPFS-Website With Unstoppable Domain" />
	<title>0xpampam.blockchain</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<style>

	body {
	width: 800px;
	max-width: 600px;
	height: 100%;
	margin: 0px auto;
	padding: 40px 35px;
	}

	.mainContainer {
	background-color: #1A1B21;
	}

	.mainContainerCenter {
	width: 400px;
	max-width: 300px;
	height: 100%;
	margin: 0px auto;
	padding: 30px 0;
	background-color: #161619;
	}

	.header {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	}

	.header .imgBox {
	width: 100%;
	max-width: 300px;
	height: 30% !important;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	}
	.header img {
	width: 100%;
	object-fit: contain;
	background-repeat: no-repeat;
	background-position: center;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	}

	.info {
	display: block;
	text-align: center;
	}

	.info h3 {
	color: #ffffff;
	}

	.info h4 {
	color: #F3BF99;
	}

	.info p {
	color: #F5F5F5;
	}

	.infoBtn {
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: center;
	}

	.infoBtn a i {
	color: #ffffff;
	}

	.infoBtn a .btnEmail i {
	color: #1A1B21;
	}

	.infoBtnItem {
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 95px;
	height: 30px;
	padding: 5px 10px;
	border-radius: 8px;
	background-color: #ffffff;
	}

	.btnLinkedin {
	background-color: #5093E2 !important;
	}

	.infoBtnItem p {
	color: #1A1B21;
	font-size: 15px;
	}

	.btnLinkedin p {
	color: #ffffff;
	}

	.aboutBody {
	padding: 10px 30px 0px 30px;
	}

	.aboutBody h2 {
	color: #ffffff;
	text-align: left;
	}

	.aboutBody p {
	color: #ffffff;
	text-align: left;
	line-height: 20px;
	}

	.footer {
	background-color: #000;
	padding: 10px 20px;
	margin-top: 2rem;
	display: flex;
	flex-direction: row;
	gap: 18px;
	justify-content: center;
	}

	.footer a i {
	color: #ffffff;
	font-size: 20px;
	}




	</style>
	</head>
	<body>
	<div class="mainContainer">

	<div class="mainContainerCenter">

	<header class="header">
	<div class="imgBox">
	<img src="pampam.jpg" width="100px" alt="Pampam Portrait" />
	</div>

	<div class="info">
	<h3>Ayomitan Pamilerin</h3>
	<h4>Developer Advocate 🥑</h4>
	<p>https://linktr.ee/oxpam_pam</p>
	</div>

	<div class="infoBtn">
	<a href="ayoayobami20@gmail.com" class="infoBtnItem btnEmail">
	<i class="fa-sharp fa-solid fa-envelope"></i>
	<p>Email</p>
	</a>

	<a href="http://www.linkedin.com/in/oxpampam" class="infoBtnItem btnLinkedin">
	<span><i class="fa-brands fa-linkedin"></i></span>
	<p>LinkedIn</p>
	</a>
	</div>
	</header>


	<div class="aboutBody">
	<h2>About</h2>
	<p>Hi there!👋 I am Ayobami Pamilerin. I'm a Smart Contract Developer 👨‍💻 , Technical Writer ✍️ and Developer Advocate 🥑.</p>
	</div>

	<div class="aboutBody">
	<h2>Interest</h2>
	<p>🌱 I’m open to building scalable solutions in the web3 space, onboarding the next wave of seasoned Web3 Developers. <br /> ⚡ Fun fact: I love playing bass guitar</p>
	</div>

	<footer class="footer">
	<a href="https://twitter.com/Oxpam_pam" class="footerSocial">
	<i class="fa-brands fa-square-twitter"></i>
	</a>

	<a href="https://github.com/AyDeveloper" class="footerSocial">
	<i class="fa-brands fa-square-github"></i>
	</a>

	<a href="https://oxpampam.hashnode.dev/" class="footerSocial">
	<i class="fa-brands fa-hashnode"></i>
	</a>

	<a href="https://www.polywork.com/ayo_ayobami" class="footerSocial">
	<i class="fa-regular fa-book-open-reader"></i>
	</a>
	</footer>

	</div>

	</div>



	</body>
	</html>