Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Muhammad Awais Alyan - Web Developer</title>
<!-- Tailwind CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" href="1.svg" type="image/svg+xml">
<style>
body {
background-color: #0D1117;
color: #ffffff;
}
a { transition: all 0.3s; }
a:hover { color: #FFD700; }
input, textarea { background-color: #1B1F27; color: #fff; border: 1px solid #444; }
input:focus, textarea:focus { outline: none; border-color: #FFD700; }
</style>
</head>
<body class="scroll-smooth font-sans">
<!-- HERO SECTION -->
<section class="min-h-screen flex flex-col justify-center items-center text-center relative px-4">
<img src="1.svg" class="absolute top-10 right-10 w-32 opacity-20" alt="Decorative">
<h1 class="text-5xl font-bold mb-4">Muhammad Awais Alyan</h1>
<p class="text-xl mb-6">Full Stack Web Developer | React, Next.js, Tailwind, JavaScript, HTML, CSS</p>
<div>
<a href="#projects" class="bg-yellow-500 text-black px-6 py-3 rounded mr-4 hover:bg-yellow-400">View Projects</a>
<a href="#contact" class="bg-transparent border border-yellow-500 px-6 py-3 rounded hover:bg-yellow-500 hover:text-black">Contact Me</a>
</div>
</section>
<!-- ABOUT ME -->
<section id="about" class="py-20 px-6 text-center relative">
<img src="2.svg" class="absolute left-10 top-10 w-24 opacity-20" alt="Decorative">
<h2 class="text-3xl font-semibold mb-4">About Me</h2>
<p class="max-w-2xl mx-auto text-gray-300 mb-4">
Hi! I’m Muhammad Awais Alyan from Okara, Punjab, Pakistan. I specialize in building modern, responsive web applications and WordPress websites. My expertise spans React, Next.js, Tailwind, HTML, CSS, JavaScript, with some backend development experience. I love transforming ideas into functional, user-friendly websites.
</p>
<div class="flex justify-center gap-6 mt-6">
<a href="https://www.instagram.com/muhammad_awaisalyan/" target="_blank">Instagram</a>
<a href="https://www.facebook.com/muhammad.awais.alyan.2025" target="_blank">Facebook</a>
<a href="https://github.com/Awais6601" target="_blank">GitHub</a>
<a href="https://www.linkedin.com/in/muhammad-awais-alyan-0572aa390/" target="_blank">LinkedIn</a>
</div>
</section>
<!-- SKILLS -->
<section id="skills" class="py-20 px-6 text-center">
<h2 class="text-3xl font-semibold mb-10">Skills</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
<div class="p-4 bg-gray-800 rounded shadow hover:shadow-lg transition">
<h3 class="font-semibold mb-2">React</h3>
<div class="h-2 bg-gray-600 rounded"><div class="h-2 bg-yellow-500 w-4/5 rounded"></div></div>
</div>
<div class="p-4 bg-gray-800 rounded shadow hover:shadow-lg transition">
<h3 class="font-semibold mb-2">Next.js</h3>
<div class="h-2 bg-gray-600 rounded"><div class="h-2 bg-yellow-500 w-4/5 rounded"></div></div>
</div>
<div class="p-4 bg-gray-800 rounded shadow hover:shadow-lg transition">
<h3 class="font-semibold mb-2">Tailwind CSS</h3>
<div class="h-2 bg-gray-600 rounded"><div class="h-2 bg-yellow-500 w-4/5 rounded"></div></div>
</div>
<div class="p-4 bg-gray-800 rounded shadow hover:shadow-lg transition">
<h3 class="font-semibold mb-2">JavaScript</h3>
<div class="h-2 bg-gray-600 rounded"><div class="h-2 bg-yellow-500 w-4/5 rounded"></div></div>
</div>
<div class="p-4 bg-gray-800 rounded shadow hover:shadow-lg transition">
<h3 class="font-semibold mb-2">HTML & CSS</h3>
<div class="h-2 bg-gray-600 rounded"><div class="h-2 bg-yellow-500 w-4/5 rounded"></div></div>
</div>
<div class="p-4 bg-gray-800 rounded shadow hover:shadow-lg transition">
<h3 class="font-semibold mb-2">WordPress</h3>
<div class="h-2 bg-gray-600 rounded"><div class="h-2 bg-yellow-500 w-3/4 rounded"></div></div>
</div>
<div class="p-4 bg-gray-800 rounded shadow hover:shadow-lg transition">
<h3 class="font-semibold mb-2">Backend Dev</h3>
<div class="h-2 bg-gray-600 rounded"><div class="h-2 bg-yellow-500 w-1/2 rounded"></div></div>
</div>
</div>
</section>
<!-- PROJECTS -->
<section id="projects" class="py-20 px-6 text-center relative">
<img src="4.svg" class="absolute right-10 top-0 w-24 opacity-20" alt="Decorative">
<h2 class="text-3xl font-semibold mb-10">Projects</h2>
<div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<!-- Project 1 -->
<div class="bg-gray-800 p-6 rounded shadow hover:shadow-lg transition text-left">
<h3 class="text-xl font-semibold mb-2">Clergy’s Website</h3>
<p class="text-gray-300 mb-2">Modern, responsive site for a clergy organization.</p>
<a href="https://nexoraclergys.com" target="_blank" class="text-yellow-500 hover:underline">View Project</a>
<p class="mt-2 text-green-400">⭐⭐⭐⭐⭐ “Extremely satisfied with the design and functionality.”</p>
</div>
<!-- Project 2 -->
<div class="bg-gray-800 p-6 rounded shadow hover:shadow-lg transition text-left">
<h3 class="text-xl font-semibold mb-2">Vein-2-Vein</h3>
<p class="text-gray-300 mb-2">Blood donation website built with GitHub deployment.</p>
<a href="https://github.com/Awais6601" target="_blank" class="text-yellow-500 hover:underline">View Project</a>
<p class="mt-2 text-green-400">⭐⭐⭐⭐⭐ “User-friendly and impactful for donors.”</p>
</div>
<!-- Project 3 -->
<div class="bg-gray-800 p-6 rounded shadow hover:shadow-lg transition text-left">
<h3 class="text-xl font-semibold mb-2">Aprons Website</h3>
<p class="text-gray-300 mb-2">E-commerce website for aproncrafts.com</p>
<a href="https://aproncrafts.com" target="_blank" class="text-yellow-500 hover:underline">View Project</a>
<p class="mt-2 text-green-400">⭐⭐⭐⭐⭐ “Great UI and smooth shopping experience.”</p>
</div>
<!-- Project 4 -->
<div class="bg-gray-800 p-6 rounded shadow hover:shadow-lg transition text-left">
<h3 class="text-xl font-semibold mb-2">Leather Products</h3>
<p class="text-gray-300 mb-2">E-commerce website for snagleather.com</p>
<a href="https://snagleather.com" target="_blank" class="text-yellow-500 hover:underline">View Project</a>
<p class="mt-2 text-green-400">⭐⭐⭐⭐⭐ “Perfectly organized product showcase.”</p>
</div>
<!-- Project 5 -->
<div class="bg-gray-800 p-6 rounded shadow hover:shadow-lg transition text-left">
<h3 class="text-xl font-semibold mb-2">T-shirt & Hoodie</h3>
<p class="text-gray-300 mb-2">Custom clothing, embroidery, and DTF printing website vpfu.co.uk</p>
<a href="https://vpfu.co.uk" target="_blank" class="text-yellow-500 hover:underline">View Project</a>
<p class="mt-2 text-green-400">⭐⭐⭐⭐⭐ “Highly professional and responsive.”</p>
</div>
<!-- Project 6 -->
<div class="bg-gray-800 p-6 rounded shadow hover:shadow-lg transition text-left">
<h3 class="text-xl font-semibold mb-2">Rental System</h3>
<p class="text-gray-300 mb-2">Fleetyfit project for rental management (in progress)</p>
<p class="mt-2 text-green-400">⭐⭐⭐⭐⭐ “Excellent implementation of rental functionality.”</p>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact" class="py-20 px-6 text-center">
<h2 class="text-3xl font-semibold mb-6">Contact Me</h2>
<p class="text-gray-300 mb-6">Want to work together? I’m available for freelance projects. Contact me for pricing.</p>
<form class="max-w-lg mx-auto flex flex-col gap-4">
<input type="text" placeholder="Name" required class="p-3 rounded">
<input type="email" placeholder="Email" required class="p-3 rounded">
<textarea placeholder="Message" required class="p-3 rounded h-32"></textarea>
<button type="submit" class="bg-yellow-500 text-black p-3 rounded hover:bg-yellow-400">Send Message</button>
</form>
<p class="mt-6">Phone: +92 309 837 2179</p>
</section>
<!-- FOOTER -->
<footer class="py-6 text-center border-t border-gray-700 mt-12">
© 2026 Muhammad Awais Alyan | Web Developer | Okara, Punjab, Pakistan
</footer>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
6
Requests
2
Domains
133KB
Transfer Size
407KB
Content Size
424.0ms
Dom Content Loaded
480.0ms
First Paint
426.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...