Skip to content

Commit eea8f11

Browse files
iamabdullah-aiamabdullah-a
authored
Add files via upload
0 parents  commit eea8f11

3 files changed

Lines changed: 313 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
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>Abdullah</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<div class="header">
12+
<h1 class="name">Abdullah</h1>
13+
<span class="contact">
14+
Contact: 03115381762 |
15+
Email:
16+
<a href="mailto:iamabdullahakhtar@gmail.com">iamabdullahakhtar@gmail.com</a>
17+
</span>
18+
</div>
19+
20+
<div class="about-me" data-aos="fade-up">
21+
<h2>About Me:</h2>
22+
<p>👋 Hi, I'm <strong>Abdullah</strong>, a Full Stack Developer building clean, modern, and functional websites and software.</p>
23+
<p>💡 I work on turning concepts into practical code with a focus on clarity and performance.</p>
24+
<p>🖥️ I use <strong>HTML, CSS, and JavaScript</strong> to develop responsive web interfaces and dynamic user experiences.</p>
25+
<p>🎮 I build 2D and simple 3D <strong>games</strong> with modern tools and engines, focusing on mechanics, performance, and design.</p>
26+
<p>📱 I develop <strong>mobile applications</strong> with clean UI, smooth functionality, and real-world use cases.</p>
27+
<p>🤖 I work with <strong>AI integrations</strong> using APIs and automation tools to build smart systems for websites, apps, and games.</p>
28+
<p>🤝 Open to collaborations and projects where I can apply these skills effectively.</p>
29+
</div>
30+
31+
<div class="skills-section">
32+
<h2>Skills & Tools</h2>
33+
<ul>
34+
<li>💻 Frontend: HTML, CSS, JavaScript</li>
35+
<li>🎮 Game Development: GDevelop, Godot, Unity basics</li>
36+
<li>📱 App Development: Flutter, Android basics</li>
37+
<li>🤖 AI Integration: OpenAI APIs, Automation</li>
38+
</ul>
39+
</div>
40+
41+
<div class="projects-section" data-aos="fade-right">
42+
<h2>Projects</h2>
43+
<div class="project-grid">
44+
<div class="project-item">
45+
<h3>Inventory Management System</h3>
46+
<p>Built for a local retailer with real-time stock tracking, automated low-stock alerts, and sales reporting. Reduced inventory errors by 40%.</p>
47+
<p><strong>Tech:</strong> JavaScript, Node.js, MongoDB</p>
48+
</div>
49+
<div class="project-item">
50+
<h3>Procedural Game Map Generator</h3>
51+
<p>Created an algorithm that generates unique 2D game maps with balanced terrain distribution and pathfinding-ready layouts.</p>
52+
<p><strong>Tech:</strong> Godot, GDScript</p>
53+
</div>
54+
<div class="project-item">
55+
<h3>Mobile Farm Management App</h3>
56+
<p>Helps small farmers track crop cycles, expenses, and yields. Offline-capable with cloud sync for rural areas with poor connectivity.</p>
57+
<p><strong>Tech:</strong> Flutter, Firebase</p>
58+
</div>
59+
<div class="project-item">
60+
<h3>Document Processing Automation</h3>
61+
<p>System that extracts key data from scanned documents, validates it against business rules, and integrates with existing databases.</p>
62+
<p><strong>Tech:</strong> Python, OpenCV, Tesseract OCR</p>
63+
</div>
64+
</div>
65+
</div>
66+
67+
<div class="stack-section">
68+
<h2>Tech Stack</h2>
69+
<div class="stack-grid">
70+
<div class="stack-item"data-aos="zoom-in">
71+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" alt="HTML">
72+
<span>HTML</span>
73+
</div>
74+
<div class="stack-item" data-aos="zoom-in">
75+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" alt="CSS">
76+
<span>CSS</span>
77+
</div>
78+
<div class="stack-item" data-aos="zoom-in">
79+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript">
80+
<span>JavaScript</span>
81+
</div>
82+
<div class="stack-item" data-aos="zoom-in">
83+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/godot/godot-original.svg" alt="Godot">
84+
<span>Godot</span>
85+
</div>
86+
<div class="stack-item" data-aos="zoom-in">
87+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/flutter/flutter-original.svg" alt="Flutter">
88+
<span>Flutter</span>
89+
</div>
90+
<div class="stack-item" data-aos="zoom-in">
91+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" alt="Python">
92+
<span>Python</span>
93+
</div>
94+
</div>
95+
</div>
96+
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
97+
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
98+
99+
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
100+
101+
<script src="script.js"></script>
102+
103+
104+
</body>
105+
</html>
106+
107+
108+

‎script.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// AOS for scroll animations
2+
AOS.init({
3+
duration: 1000,
4+
once: true
5+
});
6+
7+
// Smooth scrolling for internal links
8+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
9+
anchor.addEventListener('click', function(e) {
10+
e.preventDefault();
11+
document.querySelector(this.getAttribute('href')).scrollIntoView({
12+
behavior: 'smooth'
13+
});
14+
});
15+
});
16+
17+
// Sticky shrinking header on scroll
18+
const header = document.querySelector('.header');
19+
window.addEventListener('scroll', function() {
20+
if (window.scrollY > 100) {
21+
header.style.padding = '20px 20px';
22+
header.style.boxShadow = '0 6px 15px rgba(0,0,0,0.15)';
23+
} else {
24+
header.style.padding = '40px 20px';
25+
header.style.boxShadow = '0 4px 10px rgba(0,0,0,0.2)';
26+
}
27+
});
28+
29+
window.chatbaseConfig = {
30+
chatbotId: "JF64T1C2Flr1C4Xv_mSmw"
31+
};

‎style.css‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
background-color: #f5f7fa;
6+
color: #333;
7+
}
8+
9+
.header {
10+
background: linear-gradient(135deg, #1e3c72, #2a5298);
11+
color: white;
12+
padding: 40px 20px;
13+
text-align: center;
14+
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
15+
}
16+
17+
.name {
18+
font-size: 3.5rem;
19+
margin-bottom: 15px;
20+
font-weight: 800;
21+
}
22+
23+
.contact a {
24+
color: #ffd700;
25+
text-decoration: none;
26+
}
27+
28+
.about-me, .skills-section, .projects-section, .stack-section {
29+
max-width: 1000px;
30+
margin: 30px auto;
31+
padding: 20px;
32+
background: white;
33+
border-radius: 15px;
34+
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
35+
transition: transform 0.3s;
36+
}
37+
38+
.about-me:hover, .skills-section:hover, .stack-section:hover {
39+
transform: translateY(-5px);
40+
}
41+
42+
h2 {
43+
color: #1e3c72;
44+
border-bottom: 2px solid #1e3c72;
45+
padding-bottom: 10px;
46+
}
47+
48+
/* Skills Section */
49+
.skills-section ul {
50+
list-style-type: none;
51+
padding-left: 0;
52+
}
53+
54+
.skills-section li {
55+
margin: 10px 0;
56+
font-size: 1.1rem;
57+
}
58+
59+
/* Projects Section */
60+
.projects-section {
61+
background-color: #f0f8ff;
62+
border: 2px solid #1e3c72;
63+
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
64+
transition: transform 0.3s;
65+
}
66+
67+
.projects-section:hover {
68+
transform: translateY(-5px);
69+
}
70+
71+
.project-grid {
72+
display: grid;
73+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
74+
gap: 20px;
75+
margin-top: 20px;
76+
}
77+
78+
.project-item {
79+
background: #ffffff;
80+
padding: 20px;
81+
border-radius: 15px;
82+
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
83+
transition: transform 0.3s, box-shadow 0.3s;
84+
border: 1px solid #e0e0e0;
85+
}
86+
87+
.project-item:hover {
88+
transform: translateY(-10px);
89+
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
90+
}
91+
92+
.project-item h3 {
93+
margin-top: 0;
94+
font-size: 1.4rem;
95+
color: #1e3c72;
96+
}
97+
98+
.project-item p {
99+
margin: 10px 0;
100+
line-height: 1.6;
101+
}
102+
103+
/* Tech Stack */
104+
.stack-grid {
105+
display: grid;
106+
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
107+
gap: 30px;
108+
text-align: center;
109+
margin-top: 20px;
110+
}
111+
112+
.stack-item {
113+
background: #f0f8ff;
114+
border-radius: 15px;
115+
padding: 15px;
116+
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
117+
transition: transform 0.3s, box-shadow 0.3s;
118+
}
119+
120+
.stack-item:hover {
121+
transform: scale(1.08);
122+
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
123+
}
124+
125+
.stack-item img {
126+
width: 60px;
127+
height: 60px;
128+
margin-bottom: 10px;
129+
}
130+
131+
.stack-item span {
132+
display: block;
133+
margin-top: 5px;
134+
font-weight: bold;
135+
font-size: 1.1rem;
136+
}
137+
138+
/* Footer Section */
139+
.footer {
140+
background: linear-gradient(135deg, #1e3c72, #2a5298);
141+
color: white;
142+
text-align: center;
143+
padding: 40px 20px;
144+
margin-top: 50px;
145+
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
146+
}
147+
148+
.footer h2 {
149+
margin-bottom: 10px;
150+
font-size: 2rem;
151+
}
152+
153+
.footer p {
154+
margin-bottom: 20px;
155+
font-size: 1.2rem;
156+
}
157+
158+
.contact-btn {
159+
background: #ffd700;
160+
color: #1e3c72;
161+
padding: 15px 35px;
162+
border-radius: 30px;
163+
font-size: 1.2rem;
164+
text-decoration: none;
165+
font-weight: bold;
166+
transition: background 0.3s, transform 0.3s;
167+
}
168+
169+
.contact-btn:hover {
170+
background: #ffcc00;
171+
transform: scale(1.05);
172+
}
173+
174+

0 commit comments

Comments
 (0)