Spaces:
Running
Running
CHANGE MY EMAIL INTO AFZALBILALAFZAL50@GMAI.COM AND PHONE NUMBER INTO 03214165227 AND ADRESS INTO LAHORE,PAKISTAN - Initial Deployment
Browse files- README.md +7 -5
- index.html +352 -18
- prompts.txt +25 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: bilalportfolio
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: blue
|
| 5 |
+
colorTo: pink
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,353 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Bilal Designs | Freelance Designer & Developer</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
| 10 |
+
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
| 11 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 12 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 13 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
|
| 14 |
+
<style>
|
| 15 |
+
.hero-bg {
|
| 16 |
+
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.8) 100%);
|
| 17 |
+
}
|
| 18 |
+
.project-card:hover {
|
| 19 |
+
transform: translateY(-5px);
|
| 20 |
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 21 |
+
}
|
| 22 |
+
.skill-bar {
|
| 23 |
+
transition: width 1.5s ease-in-out;
|
| 24 |
+
}
|
| 25 |
+
</style>
|
| 26 |
+
</head>
|
| 27 |
+
<body class="font-sans antialiased text-gray-800">
|
| 28 |
+
<!-- Hero Section with Vanta.js Background -->
|
| 29 |
+
<div id="vanta-bg" class="min-h-screen flex items-center justify-center">
|
| 30 |
+
<div class="hero-bg backdrop-blur-sm p-8 rounded-xl shadow-lg max-w-4xl mx-auto">
|
| 31 |
+
<header class="flex justify-between items-center mb-16">
|
| 32 |
+
<h1 class="text-2xl font-bold">Bilal<span class="text-blue-600">Designs</span></h1>
|
| 33 |
+
<nav class="hidden md:block">
|
| 34 |
+
<ul class="flex space-x-8">
|
| 35 |
+
<li><a href="#work" class="hover:text-blue-600 transition">Work</a></li>
|
| 36 |
+
<li><a href="#about" class="hover:text-blue-600 transition">About</a></li>
|
| 37 |
+
<li><a href="#skills" class="hover:text-blue-600 transition">Skills</a></li>
|
| 38 |
+
<li><a href="#contact" class="hover:text-blue-600 transition">Contact</a></li>
|
| 39 |
+
</ul>
|
| 40 |
+
</nav>
|
| 41 |
+
<button class="md:hidden">
|
| 42 |
+
<i data-feather="menu"></i>
|
| 43 |
+
</button>
|
| 44 |
+
</header>
|
| 45 |
+
|
| 46 |
+
<main class="text-center">
|
| 47 |
+
<h1 class="text-4xl md:text-6xl font-bold mb-6" data-aos="fade-up">Design & Development<br>With Purpose</h1>
|
| 48 |
+
<p class="text-xl text-gray-600 mb-10 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
|
| 49 |
+
I create beautiful, functional digital experiences that tell your brand's story.
|
| 50 |
+
</p>
|
| 51 |
+
<div class="flex justify-center space-x-4" data-aos="fade-up" data-aos-delay="200">
|
| 52 |
+
<a href="#work" class="px-6 py-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition">View Work</a>
|
| 53 |
+
<a href="#contact" class="px-6 py-3 border border-gray-300 rounded-full hover:bg-gray-100 transition">Get in Touch</a>
|
| 54 |
+
</div>
|
| 55 |
+
</main>
|
| 56 |
+
</div>
|
| 57 |
+
</div>
|
| 58 |
+
|
| 59 |
+
<!-- Work Section -->
|
| 60 |
+
<section id="work" class="py-20 px-4 max-w-6xl mx-auto">
|
| 61 |
+
<h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">Selected Projects</h2>
|
| 62 |
+
|
| 63 |
+
<div class="grid md:grid-cols-2 gap-8">
|
| 64 |
+
<!-- Project 1 -->
|
| 65 |
+
<div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300" data-aos="fade-up">
|
| 66 |
+
<img src="https://i.ibb.co/TBVrDRp7/Fast-Food-Burger-Social-Media-Design-Post.jpg" alt="Fast Food Burger Social Media Design" class="w-full h-64 object-cover">
|
| 67 |
+
<div class="p-6">
|
| 68 |
+
<h3 class="text-xl font-bold mb-2">Fast Food Social Media Design</h3>
|
| 69 |
+
<p class="text-gray-600 mb-4">Eye-catching burger promotional design</p>
|
| 70 |
+
<span class="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Social Media</span>
|
| 71 |
+
</div>
|
| 72 |
+
</div>
|
| 73 |
+
|
| 74 |
+
<!-- Project 2 -->
|
| 75 |
+
<div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100">
|
| 76 |
+
<img src="https://i.ibb.co/XfNxppPs/Food-Poster-Templates-Photoshop-Tutorial.jpg" alt="Food Poster Template" class="w-full h-64 object-cover">
|
| 77 |
+
<div class="p-6">
|
| 78 |
+
<h3 class="text-xl font-bold mb-2">Food Poster Template</h3>
|
| 79 |
+
<p class="text-gray-600 mb-4">Professional food photography template</p>
|
| 80 |
+
<span class="inline-block px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Poster Design</span>
|
| 81 |
+
</div>
|
| 82 |
+
</div>
|
| 83 |
+
|
| 84 |
+
<!-- Project 3 -->
|
| 85 |
+
<div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200">
|
| 86 |
+
<img src="https://i.ibb.co/Q3tJsCgj/food-template-design.jpg" alt="Food Template Design" class="w-full h-64 object-cover">
|
| 87 |
+
<div class="p-6">
|
| 88 |
+
<h3 class="text-xl font-bold mb-2">Food Template Design</h3>
|
| 89 |
+
<p class="text-gray-600 mb-4">Minimalist food menu template</p>
|
| 90 |
+
<span class="inline-block px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Template Design</span>
|
| 91 |
+
</div>
|
| 92 |
+
</div>
|
| 93 |
+
|
| 94 |
+
<!-- Project 4 -->
|
| 95 |
+
<div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300">
|
| 96 |
+
<img src="https://i.ibb.co/5W3BGB0N/Headphones-post-special-arrival-order-now-post-social-media-Ubaid-khan-graphics-design.jpg" alt="Headphones Social Media Post" class="w-full h-64 object-cover">
|
| 97 |
+
<div class="p-6">
|
| 98 |
+
<h3 class="text-xl font-bold mb-2">Headphones Promo Design</h3>
|
| 99 |
+
<p class="text-gray-600 mb-4">Special arrival announcement design</p>
|
| 100 |
+
<span class="inline-block px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Product Design</span>
|
| 101 |
+
</div>
|
| 102 |
+
</div>
|
| 103 |
+
</div>
|
| 104 |
+
|
| 105 |
+
<div class="grid md:grid-cols-2 gap-8 mt-8">
|
| 106 |
+
<!-- Additional Projects -->
|
| 107 |
+
<div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300" data-aos="fade-up">
|
| 108 |
+
<img src="https://i.ibb.co/35C4pJcR/Nike-Air-Force-Nike-Shoes.jpg" alt="Nike Air Force Shoes" class="w-full h-64 object-cover">
|
| 109 |
+
<div class="p-6">
|
| 110 |
+
<h3 class="text-xl font-bold mb-2">Nike Air Force Design</h3>
|
| 111 |
+
<p class="text-gray-600 mb-4">Sneaker promotional social media post</p>
|
| 112 |
+
<span class="inline-block px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Branding</span>
|
| 113 |
+
</div>
|
| 114 |
+
</div>
|
| 115 |
+
|
| 116 |
+
<div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100">
|
| 117 |
+
<img src="https://i.ibb.co/ks8T30Qw/Nike-poster-design-in-Adobe-Photoshop.jpg" alt="Nike Poster Design" class="w-full h-64 object-cover">
|
| 118 |
+
<div class="p-6">
|
| 119 |
+
<h3 class="text-xl font-bold mb-2">Nike Poster Design</h3>
|
| 120 |
+
<p class="text-gray-600 mb-4">Dynamic sports brand poster</p>
|
| 121 |
+
<span class="inline-block px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Poster Design</span>
|
| 122 |
+
</div>
|
| 123 |
+
</div>
|
| 124 |
+
|
| 125 |
+
<div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200">
|
| 126 |
+
<img src="https://i.ibb.co/GfHCbBd6/NIKE-Poster-simple.jpg" alt="Nike Simple Poster" class="w-full h-64 object-cover">
|
| 127 |
+
<div class="p-6">
|
| 128 |
+
<h3 class="text-xl font-bold mb-2">Minimal Nike Poster</h3>
|
| 129 |
+
<p class="text-gray-600 mb-4">Clean and impactful brand poster</p>
|
| 130 |
+
<span class="inline-block px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Minimal Design</span>
|
| 131 |
+
</div>
|
| 132 |
+
</div>
|
| 133 |
+
|
| 134 |
+
<div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300">
|
| 135 |
+
<img src="https://i.ibb.co/rGZyw7H3/Nike.jpg" alt="Nike Social Media Post" class="w-full h-64 object-cover">
|
| 136 |
+
<div class="p-6">
|
| 137 |
+
<h3 class="text-xl font-bold mb-2">Nike Social Media</h3>
|
| 138 |
+
<p class="text-gray-600 mb-4">Engaging brand social content</p>
|
| 139 |
+
<span class="inline-block px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Social Media</span>
|
| 140 |
+
</div>
|
| 141 |
+
</div>
|
| 142 |
+
|
| 143 |
+
<div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300" data-aos="fade-up">
|
| 144 |
+
<img src="https://i.ibb.co/Kp0XhBWg/Premium-PSD-Headphone-offer-banner-social-media-psd.jpg" alt="Headphone Banner" class="w-full h-64 object-cover">
|
| 145 |
+
<div class="p-6">
|
| 146 |
+
<h3 class="text-xl font-bold mb-2">Headphone Banner</h3>
|
| 147 |
+
<p class="text-gray-600 mb-4">Premium product offer design</p>
|
| 148 |
+
<span class="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Banner Design</span>
|
| 149 |
+
</div>
|
| 150 |
+
</div>
|
| 151 |
+
|
| 152 |
+
<div class="project-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100">
|
| 153 |
+
<img src="https://i.ibb.co/bgnMB194/Premium-PSD-Smart-watch-social-media-and-instagram-post-template.jpg" alt="Smart Watch Post" class="w-full h-64 object-cover">
|
| 154 |
+
<div class="p-6">
|
| 155 |
+
<h3 class="text-xl font-bold mb-2">Smart Watch Post</h3>
|
| 156 |
+
<p class="text-gray-600 mb-4">Modern tech product showcase</p>
|
| 157 |
+
<span class="inline-block px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Product Design</span>
|
| 158 |
+
</div>
|
| 159 |
+
</div>
|
| 160 |
+
</div>
|
| 161 |
+
</section>
|
| 162 |
+
|
| 163 |
+
<!-- About Section -->
|
| 164 |
+
<section id="about" class="py-20 bg-gray-50">
|
| 165 |
+
<div class="max-w-4xl mx-auto px-4">
|
| 166 |
+
<div class="flex flex-col md:flex-row items-center">
|
| 167 |
+
<div class="md:w-1/3 mb-8 md:mb-0" data-aos="fade-right">
|
| 168 |
+
<a href="https://ibb.co/MxBVz1Zt"><img src="https://i.ibb.co/cSYFW8kZ/5ac1f021-49cb-4ab5-b439-e832c5451f47.jpg" alt="Bilal" class="rounded-full w-48 h-48 object-cover mx-auto shadow-lg" border="0"></a>
|
| 169 |
+
</div>
|
| 170 |
+
<div class="md:w-2/3 md:pl-12" data-aos="fade-left">
|
| 171 |
+
<h2 class="text-3xl font-bold mb-6">About Me</h2>
|
| 172 |
+
<p class="text-lg text-gray-600 mb-6">
|
| 173 |
+
Welcome to Bilal Designs, the creative hub of a professional Graphic Designer & Web Developer with over 4 years of experience. This portfolio showcases my expertise in posters, logos, packaging, social media content, and website design.
|
| 174 |
+
</p>
|
| 175 |
+
<p class="text-lg text-gray-600 mb-6">
|
| 176 |
+
Every project here reflects my commitment to quality, creativity, and client satisfaction. I combine modern design trends with practical solutions to help businesses stand out visually.
|
| 177 |
+
</p>
|
| 178 |
+
<p class="text-lg text-gray-600 mb-6">
|
| 179 |
+
Browse through my work to see how I turn ideas into engaging and impactful designs. Whether it's for digital media, branding, or web projects, my goal is to deliver designs that not only look great but also communicate effectively.
|
| 180 |
+
</p>
|
| 181 |
+
<p class="text-lg text-gray-600">
|
| 182 |
+
Let's collaborate to bring your ideas to life!
|
| 183 |
+
</p>
|
| 184 |
+
</div>
|
| 185 |
+
</div>
|
| 186 |
+
</div>
|
| 187 |
+
</section>
|
| 188 |
+
|
| 189 |
+
<!-- Skills Section -->
|
| 190 |
+
<section id="skills" class="py-20 max-w-4xl mx-auto px-4">
|
| 191 |
+
<h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">Skills & Expertise</h2>
|
| 192 |
+
|
| 193 |
+
<div class="space-y-8">
|
| 194 |
+
<div data-aos="fade-up">
|
| 195 |
+
<div class="flex justify-between mb-2">
|
| 196 |
+
<span>Logo Designing</span>
|
| 197 |
+
<span>95%</span>
|
| 198 |
+
</div>
|
| 199 |
+
<div class="w-full bg-gray-200 rounded-full h-2">
|
| 200 |
+
<div class="skill-bar bg-blue-600 h-2 rounded-full" style="width: 95%"></div>
|
| 201 |
+
</div>
|
| 202 |
+
</div>
|
| 203 |
+
|
| 204 |
+
<div data-aos="fade-up" data-aos-delay="100">
|
| 205 |
+
<div class="flex justify-between mb-2">
|
| 206 |
+
<span>Poster Design</span>
|
| 207 |
+
<span>90%</span>
|
| 208 |
+
</div>
|
| 209 |
+
<div class="w-full bg-gray-200 rounded-full h-2">
|
| 210 |
+
<div class="skill-bar bg-green-600 h-2 rounded-full" style="width: 90%"></div>
|
| 211 |
+
</div>
|
| 212 |
+
</div>
|
| 213 |
+
|
| 214 |
+
<div data-aos="fade-up" data-aos-delay="200">
|
| 215 |
+
<div class="flex justify-between mb-2">
|
| 216 |
+
<span>Packaging Design</span>
|
| 217 |
+
<span>85%</span>
|
| 218 |
+
</div>
|
| 219 |
+
<div class="w-full bg-gray-200 rounded-full h-2">
|
| 220 |
+
<div class="skill-bar bg-purple-600 h-2 rounded-full" style="width: 85%"></div>
|
| 221 |
+
</div>
|
| 222 |
+
</div>
|
| 223 |
+
|
| 224 |
+
<div data-aos="fade-up" data-aos-delay="300">
|
| 225 |
+
<div class="flex justify-between mb-2">
|
| 226 |
+
<span>Illustrations & Vector Art</span>
|
| 227 |
+
<span>75%</span>
|
| 228 |
+
</div>
|
| 229 |
+
<div class="w-full bg-gray-200 rounded-full h-2">
|
| 230 |
+
<div class="skill-bar bg-yellow-600 h-2 rounded-full" style="width: 75%"></div>
|
| 231 |
+
</div>
|
| 232 |
+
</div>
|
| 233 |
+
</div>
|
| 234 |
+
</section>
|
| 235 |
+
|
| 236 |
+
<!-- Contact Section -->
|
| 237 |
+
<section id="contact" class="py-20 bg-gray-900 text-white">
|
| 238 |
+
<div class="max-w-4xl mx-auto px-4">
|
| 239 |
+
<h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">Let's Work Together</h2>
|
| 240 |
+
|
| 241 |
+
<div class="flex flex-col md:flex-row gap-12">
|
| 242 |
+
<div class="md:w-1/2" data-aos="fade-right">
|
| 243 |
+
<h3 class="text-xl font-semibold mb-6">Get in touch</h3>
|
| 244 |
+
<p class="text-gray-300 mb-8">
|
| 245 |
+
Have a project in mind or want to discuss potential collaboration? I'd love to hear from you.
|
| 246 |
+
</p>
|
| 247 |
+
|
| 248 |
+
<div class="space-y-4">
|
| 249 |
+
<div class="flex items-center">
|
| 250 |
+
<i data-feather="mail" class="mr-4"></i>
|
| 251 |
+
<span>afzalbilalafzal50@gmail.com</span>
|
| 252 |
+
</div>
|
| 253 |
+
<div class="flex items-center">
|
| 254 |
+
<i data-feather="phone" class="mr-4"></i>
|
| 255 |
+
<span>03214165227</span>
|
| 256 |
+
</div>
|
| 257 |
+
<div class="flex items-center">
|
| 258 |
+
<i data-feather="map-pin" class="mr-4"></i>
|
| 259 |
+
<span>Lahore, Pakistan</span>
|
| 260 |
+
</div>
|
| 261 |
+
</div>
|
| 262 |
+
|
| 263 |
+
<div class="flex space-x-4 mt-8">
|
| 264 |
+
<a href="#" class="p-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">
|
| 265 |
+
<i data-feather="twitter"></i>
|
| 266 |
+
</a>
|
| 267 |
+
<a href="#" class="p-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">
|
| 268 |
+
<i data-feather="instagram"></i>
|
| 269 |
+
</a>
|
| 270 |
+
<a href="#" class="p-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">
|
| 271 |
+
<i data-feather="dribbble"></i>
|
| 272 |
+
</a>
|
| 273 |
+
<a href="#" class="p-2 bg-gray-800 rounded-full hover:bg-gray-700 transition">
|
| 274 |
+
<i data-feather="github"></i>
|
| 275 |
+
</a>
|
| 276 |
+
</div>
|
| 277 |
+
</div>
|
| 278 |
+
|
| 279 |
+
<div class="md:w-1/2" data-aos="fade-left">
|
| 280 |
+
<form class="space-y-6">
|
| 281 |
+
<div>
|
| 282 |
+
<label for="name" class="block mb-2">Name</label>
|
| 283 |
+
<input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600">
|
| 284 |
+
</div>
|
| 285 |
+
<div>
|
| 286 |
+
<label for="email" class="block mb-2">Email</label>
|
| 287 |
+
<input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600">
|
| 288 |
+
</div>
|
| 289 |
+
<div>
|
| 290 |
+
<label for="message" class="block mb-2">Message</label>
|
| 291 |
+
<textarea id="message" rows="5" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"></textarea>
|
| 292 |
+
</div>
|
| 293 |
+
<button type="submit" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition w-full">
|
| 294 |
+
Send Message
|
| 295 |
+
</button>
|
| 296 |
+
</form>
|
| 297 |
+
</div>
|
| 298 |
+
</div>
|
| 299 |
+
</div>
|
| 300 |
+
</section>
|
| 301 |
+
|
| 302 |
+
<!-- Footer -->
|
| 303 |
+
<footer class="py-8 text-center text-gray-500 text-sm">
|
| 304 |
+
<p>© 2023 Bilal Designs. All rights reserved.</p>
|
| 305 |
+
</footer>
|
| 306 |
+
|
| 307 |
+
<script>
|
| 308 |
+
// Initialize Vanta.js globe background
|
| 309 |
+
VANTA.GLOBE({
|
| 310 |
+
el: "#vanta-bg",
|
| 311 |
+
mouseControls: true,
|
| 312 |
+
touchControls: true,
|
| 313 |
+
gyroControls: false,
|
| 314 |
+
minHeight: 200.00,
|
| 315 |
+
minWidth: 200.00,
|
| 316 |
+
scale: 1.00,
|
| 317 |
+
scaleMobile: 1.00,
|
| 318 |
+
color: 0x3b82f6,
|
| 319 |
+
backgroundColor: 0xf8fafc,
|
| 320 |
+
size: 0.8
|
| 321 |
+
});
|
| 322 |
+
|
| 323 |
+
// Initialize AOS animations
|
| 324 |
+
AOS.init({
|
| 325 |
+
duration: 800,
|
| 326 |
+
easing: 'ease-in-out',
|
| 327 |
+
once: true
|
| 328 |
+
});
|
| 329 |
+
|
| 330 |
+
// Animate skill bars on scroll
|
| 331 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 332 |
+
const skillBars = document.querySelectorAll('.skill-bar');
|
| 333 |
+
|
| 334 |
+
const observer = new IntersectionObserver((entries) => {
|
| 335 |
+
entries.forEach(entry => {
|
| 336 |
+
if (entry.isIntersecting) {
|
| 337 |
+
const width = entry.target.style.width;
|
| 338 |
+
entry.target.style.width = '0';
|
| 339 |
+
setTimeout(() => {
|
| 340 |
+
entry.target.style.width = width;
|
| 341 |
+
}, 100);
|
| 342 |
+
}
|
| 343 |
+
});
|
| 344 |
+
}, {threshold: 0.5});
|
| 345 |
+
|
| 346 |
+
skillBars.forEach(bar => {
|
| 347 |
+
observer.observe(bar);
|
| 348 |
+
});
|
| 349 |
+
});
|
| 350 |
+
</script>
|
| 351 |
+
<script>feather.replace();</script>
|
| 352 |
+
</body>
|
| 353 |
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
Create a modern, clean, and professional portfolio website for Bilal Designs, a freelance graphic designer and web developer. The website should have a minimal aesthetic with white space, smooth animations, and a focus on visuals.
|
| 2 |
+
CHANGE WORK INTO <a href="https://ibb.co/wN9YZC3P"><img src="https://i.ibb.co/TBVrDRp7/Fast-Food-Burger-Social-Media-Design-Post.jpg" alt="Fast-Food-Burger-Social-Media-Design-Post" border="0"></a>
|
| 3 |
+
<a href="https://ibb.co/rKT2MMh6"><img src="https://i.ibb.co/XfNxppPs/Food-Poster-Templates-Photoshop-Tutorial.jpg" alt="Food-Poster-Templates-Photoshop-Tutorial" border="0"></a>
|
| 4 |
+
<a href="https://ibb.co/JwgcXy1F"><img src="https://i.ibb.co/Q3tJsCgj/food-template-design.jpg" alt="food-template-design" border="0"></a>
|
| 5 |
+
<a href="https://ibb.co/27rgWg9D"><img src="https://i.ibb.co/5W3BGB0N/Headphones-post-special-arrival-order-now-post-social-media-Ubaid-khan-graphics-design.jpg" alt="Headphones-post-special-arrival-order-now-post-social-media-Ubaid-khan-graphics-design" border="0"></a>
|
| 6 |
+
<a href="https://ibb.co/CpHmbrQP"><img src="https://i.ibb.co/35C4pJcR/Nike-Air-Force-Nike-Shoes.jpg" alt="Nike-Air-Force-Nike-Shoes" border="0"></a>
|
| 7 |
+
<a href="https://ibb.co/PvhyT4wP"><img src="https://i.ibb.co/ks8T30Qw/Nike-poster-design-in-Adobe-Photoshop.jpg" alt="Nike-poster-design-in-Adobe-Photoshop" border="0"></a>
|
| 8 |
+
<a href="https://ibb.co/ZR2cktfj"><img src="https://i.ibb.co/GfHCbBd6/NIKE-Poster-simple.jpg" alt="NIKE-Poster-simple" border="0"></a>
|
| 9 |
+
<a href="https://ibb.co/6R4sWnF8"><img src="https://i.ibb.co/rGZyw7H3/Nike.jpg" alt="Nike" border="0"></a>
|
| 10 |
+
<a href="https://imgbb.com/"><img src="https://i.ibb.co/Kp0XhBWg/Premium-PSD-Headphone-offer-banner-social-media-psd.jpg" alt="Premium-PSD-Headphone-offer-banner-social-media-psd" border="0"></a>
|
| 11 |
+
<a href="https://imgbb.com/"><img src="https://i.ibb.co/bgnMB194/Premium-PSD-Smart-watch-social-media-and-instagram-post-template.jpg" alt="Premium-PSD-Smart-watch-social-media-and-instagram-post-template" border="0"></a>
|
| 12 |
+
<a href="https://ibb.co/Mk1H1sNR"><img src="https://i.ibb.co/s914123F/Product-Poster-Design-Sudarshan-Bhutada-Blantech.jpg" alt="Product-Poster-Design-Sudarshan-Bhutada-Blantech" border="0"></a>
|
| 13 |
+
<a href="https://ibb.co/mFFgpVND"><img src="https://i.ibb.co/4gg3kn1m/Social-Media-Banner-Watch-Banner-Web-Banner-Rashed-Mamun.jpg" alt="Social-Media-Banner-Watch-Banner-Web-Banner-Rashed-Mamun" border="0"></a>
|
| 14 |
+
<a href="https://ibb.co/TMMVhz82"><img src="https://i.ibb.co/YBBzjvkQ/Social-Media-Post-Design-1.jpg" alt="Social-Media-Post-Design-1" border="0"></a>
|
| 15 |
+
<a href="https://ibb.co/RkWK22Sw"><img src="https://i.ibb.co/nNSyrr0J/Tech-Nook.jpg" alt="Tech-Nook" border="0"></a>
|
| 16 |
+
CHANGE MY ABOUT ME INTOWelcome to Bilal Designs, the creative hub of a professional Graphic Designer & Web Developer with over 4 years of experience. This portfolio showcases my expertise in posters, logos, packaging, social media content, and website design.
|
| 17 |
+
|
| 18 |
+
Every project here reflects my commitment to quality, creativity, and client satisfaction. I combine modern design trends with practical solutions to help businesses stand out visually.
|
| 19 |
+
|
| 20 |
+
Browse through my work to see how I turn ideas into engaging and impactful designs. Whether it’s for digital media, branding, or web projects, my goal is to deliver designs that not only look great but also communicate effectively.
|
| 21 |
+
|
| 22 |
+
Let’s collaborate to bring your ideas to life!
|
| 23 |
+
CHANGE MY IMAGE INTO <a href="https://ibb.co/MxBVz1Zt"><img src="https://i.ibb.co/cSYFW8kZ/5ac1f021-49cb-4ab5-b439-e832c5451f47.jpg" alt="5ac1f021-49cb-4ab5-b439-e832c5451f47" border="0"></a>
|
| 24 |
+
CHANGE MY SKILS INTO UI UX DESIGN INTO LOGO DEIGNING AND CHANGE FRONT ENG DEVELOPMENT INTO POSTER DESIGN AND CHANEG BRAND IDENTITY INTO Packaging Design AND CHANGE MOTION GRAPHICS INTO Illustrations & Vector Art
|
| 25 |
+
CHANGE MY EMAIL INTO AFZALBILALAFZAL50@GMAI.COM AND PHONE NUMBER INTO 03214165227 AND ADRESS INTO LAHORE,PAKISTAN
|