Skip to content

Commit ec27fdd

Browse files
Azbar-coderAzbar-coder
committed
Fix: Added email settings
0 parents  commit ec27fdd

28 files changed

+514
-0
lines changed

‎.gitignore

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# Ignore files generated by your IDEs or code editors
2+
.vscode/
3+
.idea/
4+
*.sublime-project
5+
*.sublime-workspace
6+
7+
# Ignore build artifacts and compiled code
8+
/build/
9+
/dist/
10+
/out/
11+
/node_modules/
12+
*.log
13+
14+
# Ignore temporary files
15+
*.tmp
16+
*.swp
17+
*.bak
18+
19+
# Ignore package lock files
20+
package-lock.json
21+
yarn.lock
22+
23+
# Ignore sensitive or environment-specific information
24+
.env
25+
.env.local
26+
.env.*.local
27+
.env.development
28+
.env.test
29+
.env.production
30+
31+
# Ignore dependency directories
32+
bower_components/
33+
jspm_packages/
34+
35+
# Ignore image thumbnails and caches
36+
Thumbs.db
37+
.DS_Store
38+
39+
# Ignore user-specific files
40+
npm-debug.log*
41+
yarn-debug.log*
42+
yarn-error.log*
43+
44+
# Ignore IDE-specific files
45+
*.iml
46+
*.ipr
47+
*.iws
48+
49+
# Ignore project specific files
50+
*.idea/
51+
52+
# Ignore Mac-specific files
53+
.AppleDouble
54+
.DS_Store
55+
56+
# Ignore Windows-specific files
57+
Desktop.ini
58+
ehthumbs.db
59+
Thumbs.db
60+
61+
# Ignore custom build or deployment directories
62+
/build/
63+
/deploy/

‎README.md

220 Bytes

portfolio-website-using-tailwind-css

portfolio website using tailwind css

‎build.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+231
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Portfolio Website using Tailwind CSS</title>
8+
<link href="/dist/output.css" rel="stylesheet" />
9+
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
11+
<link href="./dist/output.css" rel="stylesheet">
12+
</head>
13+
14+
<body class="bg-background overflow-x-hidden">
15+
<!-- header -->
16+
<header class="fixed top-0 right-0 left-0 md:py-1 transition-all duration-300">
17+
<nav class="max-w-7xl mx-auto bg-gray-800 md:bg-transparent p-5 order-[10001]">
18+
<div class="flex items-center justify-between">
19+
<a href="/" class="text-white font-bold text-lg flex items-center gap-3"><img src="src/img/Logo.svg" alt=""
20+
class="w-8 h-8" /> Portfolio</a>
21+
<!-- only for large device -->
22+
<div class="hidden md:flex space-x-10">
23+
<a href="/" class="text-primary hover:text-gray-300">Home</a>
24+
<a href="#about" class=" text-white hover:text-gray-300">About</a>
25+
<a href="#projects" class="text-white hover:text-gray-300">Projects</a>
26+
<a href="#skills" class="text-white hover:text-gray-300">Skills</a>
27+
<a href="#contact" class="text-white hover:text-gray-300">Contact Us</a>
28+
29+
</div>
30+
<!-- menu btn, only disply on mobile -->
31+
<div class="md:hidden">
32+
<button id="mobile-menu-button" class="text-white text-2xl">
33+
<i class="bx bx-menu"></i>
34+
</button>
35+
</div>
36+
</div>
37+
38+
<!-- mobile menu -->
39+
<div id="mobile-menu" class="hidden md:hidden">
40+
<a href="#" class="block text-white py-2 mt-3 hover:bg-gray-700">Home</a>
41+
<a href="#about" class=" hover:text-gray-300 text-white">About</a>
42+
<a href="#projects" class="block text-white py-2 hover:bg-gray-700">Projects</a>
43+
<a href="#skills" class="text-white hover:text-gray-300">Skills</a>
44+
<a href="#contact" class="text-white hover:text-gray-300">Contact Us</a>
45+
</div>
46+
</nav>
47+
</header>
48+
49+
<!-- banner section -->
50+
<section class="max-w-7xl mx-auto px-5 my-12" id="about">
51+
<div class="flex md:flex-row flex-col justify-between items-center text-white gap-4 py-10">
52+
<div class="md:w-1/2">
53+
<p class="text-xl font-medium mb-4">
54+
Hello, <span class="text-white">I'm</span>
55+
</p>
56+
<h1 class="font-bold text-4xl tracking-[3.22px] mb-5"><span class="text-primary">Mohd Azbar Khan</span></h1>
57+
<p class="text-2xl font-montserrat mb-5">
58+
Frontend Web Developer
59+
</p>
60+
<p class="text-xl mb-12 md:w-3/4 text-justify leading-8">
61+
I am committed to finding innovative solutions and continuously
62+
experimenting to help an organization to success growth at immense rate.
63+
</p>
64+
<button class="py-4 px-10 rounded-md bg-primary text-white font-bold">
65+
Let's Talk
66+
</button>
67+
<!-- social btn -->
68+
<div class="mt-12 mb-8 flex gap-4 items-center">
69+
<p>Check out My:</p>
70+
<div class="flex space-x-3">
71+
72+
<a href="https://www.linkedin.com/in/mohd-azbar-khan-303107245/" target="_blank"><img
73+
src="src/icons/linkedIn.svg" alt="" class="w-8 h-8" /></a>
74+
<a href="#" target="_blank"><img src="src/icons/twitter.svg" alt="" class="w-8 h-8" /></a>
75+
76+
</div>
77+
</div>
78+
</div>
79+
<div class="md:w-1/2 order-first md:order-none">
80+
<img src="src/img/hero.jpg" alt="my-image" class="md:ml-20 w-full rounded-full " />
81+
</div>
82+
</div>
83+
</section>
84+
85+
<!-- What I Do -->
86+
<section class="max-w-7xl mx-auto px-5 my-6 text-white" id="Services">
87+
<div class="text-center">
88+
89+
<h3 class="text-primary text-3xl font-bold mb-16">What I Do</h3>
90+
</div>
91+
92+
<div class="my-16 flex flex-col md:flex-row justify-around items-center gap-12">
93+
<div class="w-[354px] px-5 py-8 rounded-lg border border-primary shadow-[#5dadec3b] cursor-pointer shadow-xl">
94+
<img src="src/img/graphic-design.svg" alt="" class="w-[196px] mb-12 mx-auto" />
95+
<h5 class="text-center my-5 text-xl">Web Developer</h5>
96+
<p class="text-justify">
97+
Strive to create visually impact designs that effectively
98+
communicate ,messages & meet their unique needs.
99+
</p>
100+
</div>
101+
<div class="w-[354px] px-5 py-8 rounded-lg border border-primary shadow-[#5dadec3b] cursor-pointer shadow-xl">
102+
<img src="src/img/graphic-design.svg" alt="" class="w-[196px] mb-12 mx-auto" />
103+
<h5 class="text-center my-5 text-xl">Frontend Developer</h5>
104+
<p class="text-justify">
105+
Passionate Frontend Developer with a keen eye for design and a strong foundation in modern web technologies.
106+
</p>
107+
</div>
108+
<div class="w-[354px] px-5 py-8 rounded-lg border border-primary shadow-[#5dadec3b] cursor-pointer shadow-xl">
109+
<img src="src/img/graphic-design.svg" alt="" class="w-[196px] mb-12 mx-auto" />
110+
<h5 class="text-center my-5 text-xl">UI/UX</h5>
111+
<p class="text-justify">
112+
My work in UI (User Interface) design focuses on crafting clean, modern layouts and interactive elements that
113+
captivate users at first glance.
114+
</p>
115+
</div>
116+
</div>
117+
</section>
118+
119+
<!-- skills section -->
120+
<section class="max-w-7xl mx-auto px-5 my-6 text-white" id="skills">
121+
<div class="text-center">
122+
123+
<h3 class="text-primary text-3xl font-bold mb-16">What Skills I have</h3>
124+
</div>
125+
<div class="my-16 flex flex-col md:flex-row justify-around items-center gap-12">
126+
<div class="w-[354px] px-5 py-8 rounded-lg border border-primary shadow-[#5dadec3b] cursor-pointer shadow-xl">
127+
<img src="src/img/graphic-design.png" alt="" class="w-[196px] mb-12 mx-auto" />
128+
<h5 class="text-center my-5 text-xl">HyperText <span class="text-primary">Markup </span>Languaga</h5>
129+
<p class="text-justify">
130+
It's a markup language to struture content of the webpage
131+
</p>
132+
</div>
133+
<div class="w-[354px] px-5 py-8 rounded-lg border border-primary shadow-[#5dadec3b] cursor-pointer shadow-xl">
134+
<img src="src/img/css.png" alt="" class="w-[196px] mb-12 mx-auto" />
135+
<h5 class="text-center my-5 text-xl">Cascading <span class="text-primary">Style </span> Sheets</h5>
136+
<p class="text-justify">
137+
It is used for styling purpose for styling the webpages
138+
</p>
139+
</div>
140+
<div class="w-[354px] px-5 py-8 rounded-lg border border-primary shadow-[#5dadec3b] cursor-pointer shadow-xl">
141+
<img src="src/img/js.png" alt="" class="w-[196px] mb-12 mx-auto" />
142+
<h5 class="text-center my-5 text-xl">JavaScript
143+
<p class="text-justify">
144+
It allows the user to make an interactive websites
145+
</p>
146+
</div>
147+
</div>
148+
</section>
149+
150+
<!-- projects -->
151+
<section class="px-5 my-32 mx-auto max-w-7xl" id="projects">
152+
<div class="text-center text-white">
153+
<h3 class="text-3xl font-bold mb-5">
154+
Recent <span class="text-primary">Projects</span>
155+
</h3>
156+
<p class="mb-6 md:w-3/4 mx-auto">
157+
I am passionate about crafting user-friendly experiences and staying ahead of design trends and technologies to
158+
deliver high-quality designs that not only meet user needs but also exceed their expectations.
159+
</p>
160+
</div>
161+
<div class="flex md:flex-row flex-col items-center justify-between gap-8 my-20">
162+
<div
163+
class="border border-primary shadow-xl shadow-[#5dadec3b] md:w-[741px] md:h-96 mx-auto rounded-2xl p-5 md:p-0">
164+
<img src="src/img/project-1.png" alt="" class="p-5 w-full" />
165+
</div>
166+
<div class="border border-primary shadow-xl shadow-[#5dadec3b] md:w-[741px] md:h-96 mx-auto rounded-2xl p-5">
167+
<img src="src/img/project-2.png" alt="" class="w-full p-5" />
168+
</div>
169+
</div>
170+
</section>
171+
172+
<!-- Contact Form-->
173+
<div class="contactus-form-container " id="contact">
174+
<div class="container">
175+
<h1 class="contactus-heading text-center">Contact me</h1>
176+
177+
<h3 class="contactus-subheading text-center ">Want to <span class="text-primary">discuss</span> something?</h3>
178+
179+
<div class="contactus-form-container">
180+
<form class="form w-full md:w-3/4 lg:w-2/3" action="">
181+
<div class="formfield-container">
182+
<input
183+
class="formfield w-full md:w-5/6 lg:w-4/5 h-12 px-4 text-lg rounded-md shadow-md border border-gray-300 focus:ring-2 outline-none"
184+
type="text" name="name" id="" placeholder="Enter your name">
185+
186+
<input
187+
class="formfield w-full md:w-5/6 lg:w-4/5 h-12 px-4 text-lg rounded-md shadow-md border border-gray-300 focus:ring-2 outline-none"
188+
type="email" name="email" id="" placeholder="Enter your email" />
189+
190+
<input
191+
class="formfield w-full md:w-5/6 lg:w-4/5 h-12 px-4 text-lg rounded-md shadow-md border border-gray-300 focus:ring-2 outline-none"
192+
type="text" name="subject" id="" placeholder="Enter your subject">
193+
194+
<textarea
195+
class="formfield formfield-textarea w-full md:w-5/6 lg:w-4/5 h-12 px-4 text-lg rounded-md shadow-md border border-gray-300 focus:ring-2 outline-none"
196+
name="message" type="text" id="" cols="30" rows="10" placeholder="Enter your message"></textarea>
197+
198+
<div>
199+
<button type="submit" class="btn font-bold bg-primary text-white" id="submit-btn">Send Message
200+
</button>
201+
</div>
202+
203+
204+
</div>
205+
</form>
206+
</div>
207+
208+
</div>
209+
210+
211+
212+
213+
</div>
214+
215+
216+
<footer class="bg-gray-900 text-white py-10 flex flex-col items-center justify-center space-y-2 relative">
217+
<!-- Faded Portfolio Text -->
218+
<h1 class="text-lg font-bold text-white opacity-10">Portfolio</h1>
219+
220+
<!-- Copyright Text -->
221+
<p class="text-sm text-gray-400 opacity-60">Copyright©2025</p>
222+
</footer>
223+
224+
225+
<!-- script tags -->
226+
<script src="src/app.js"></script>
227+
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
228+
<script src="src/review.js"></script>
229+
</body>
230+
231+
</html>

‎package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "tailwind-css",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"build": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"devDependencies": {
13+
"tailwindcss": "^3.3.3"
14+
}
15+
}

0 commit comments

Comments
 (0)