Skip to content

Commit 98bad1f

Browse files
CodeWIthAbdullah-007CodeWIthAbdullah-007
committed
Update HTML, CSS, and JAVASCRIPT
1 parent 470136b commit 98bad1f

File tree

3 files changed

+109
-98
lines changed

3 files changed

+109
-98
lines changed

‎index.html‎

Lines changed: 40 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,14 @@
88
<link href="style.css" rel="stylesheet">
99
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"
1010
rel="stylesheet">
11-
<link rel="shortcut icon" href="images/logo.png" type="">
11+
<link rel="shortcut icon" href="images/logo.png" type="">
1212
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js" defer></script>
1313
<script src="script.js" defer></script>
1414
</head>
1515

1616
<body>
1717

18-
<header>
18+
<header class="reveal">
1919
<nav>
2020
<div class="left">Abdullah's Portfolio</div>
2121
<ul>
@@ -28,159 +28,114 @@
2828
</nav>
2929
</header>
3030

31-
<div class="theme-buttons">
31+
<div class="theme-buttons reveal">
3232
<button id="darkBtn">🌙 Dark</button>
3333
<button id="lightBtn">☀️ Light</button>
34-
3534
</div>
3635

37-
<section id="home" class="firstSection">
36+
<section id="home" class="firstSection reveal">
3837
<div class="leftSection">
3938
Hi, My name is <span>Abdullah</span>
4039
<div>and I am a passionate</div>
4140
<span id="element"></span>
4241
</div>
4342
<div class="rightSection">
44-
<img src="images/ProfilePicture.png.jfif" class="profile-img">
43+
<img src="images/ProfilePicture.png.jfif" class="profile-img reveal">
4544
</div>
4645
</section>
4746

48-
<hr>
47+
<hr class="reveal">
4948

50-
<section id="about">
49+
<section id="about" class="reveal">
5150
<h1>About Me</h1>
5251
<p style="text-align:center; margin-top:20px; line-height:1.8; color:inherit;">
5352
Hello! 👋 I am <strong>Abdullah</strong>, a passionate <span style="color:#38bdf8;">Web Developer</span> and
5453
<span style="color:#38bdf8;">UI/UX Designer</span> dedicated to crafting modern, interactive, and
5554
user-friendly websites.
5655
<br><br>
5756
I specialize in <strong>HTML, CSS, JavaScript</strong>, and modern frameworks like
58-
<strong>React.js</strong>. I also have experience in <strong>Node.js</strong> for backend development, and I
59-
love turning ideas into fully functional, responsive applications. 🌐💻
57+
<strong>React.js</strong>. I also have experience in <strong>Node.js</strong> for backend development.
6058
<br><br>
6159
Beyond coding, I enjoy <strong>designing intuitive interfaces</strong> with tools like
62-
<strong>Figma</strong> and <strong>Adobe XD</strong>, and creating visually appealing graphics using
63-
<strong>Photoshop</strong> and <strong>Illustrator</strong>. 🎨✨
64-
<br><br>
65-
When I am not building websites, I explore <strong>video editing</strong> and <strong>digital
66-
creativity</strong> to enhance my projects and bring extra value to clients. 🚀
67-
<br><br>
68-
I am passionate about continuous learning and always excited to work on projects that challenge me and push
69-
my creativity to the next level.
60+
<strong>Figma</strong> and <strong>Adobe XD</strong>. 🎨✨
7061
</p>
7162
</section>
7263

73-
<hr>
64+
<hr class="reveal">
7465

75-
<section id="skills">
66+
<section id="skills" class="reveal">
7667
<h1>Skills & Technologies</h1>
7768
<div class="skills">
78-
<div class="skillBox">🌐 HTML5</div>
79-
<div class="skillBox">🎨 CSS3</div>
80-
<div class="skillBox">⚡ JavaScript (ES6+)</div>
81-
<div class="skillBox">📱 Responsive Design</div>
82-
<div class="skillBox">🧩 Flexbox & Grid</div>
83-
<div class="skillBox">🖌️ UI / UX Design</div>
84-
<div class="skillBox">🔧 Git & GitHub</div>
85-
<div class="skillBox">🚀 Bootstrap / Tailwind CSS</div>
86-
<div class="skillBox">⚛️ React.js</div>
87-
<div class="skillBox">🛠️ Node.js / Express.js</div>
88-
<div class="skillBox">🗄️ Database Basics</div>
89-
<div class="skillBox">📐 Figma / Adobe XD</div>
90-
<div class="skillBox">🖼️ Photoshop / Illustrator</div>
91-
<div class="skillBox">🎬 Video Editing</div>
92-
<div class="skillBox">📊 MS Office Expertise</div>
93-
69+
<div class="skillBox reveal">🌐 HTML5</div>
70+
<div class="skillBox reveal">🎨 CSS3</div>
71+
<div class="skillBox reveal">⚡ JavaScript (ES6+)</div>
72+
<div class="skillBox reveal">📱 Responsive Design</div>
73+
<div class="skillBox reveal">🧩 Flexbox & Grid</div>
74+
<div class="skillBox reveal">🖌️ UI / UX Design</div>
75+
<div class="skillBox reveal">🔧 Git & GitHub</div>
76+
<div class="skillBox reveal">🚀 Bootstrap / Tailwind CSS</div>
77+
<div class="skillBox reveal">⚛️ React.js</div>
78+
<div class="skillBox reveal">🛠️ Node.js / Express.js</div>
79+
<div class="skillBox reveal">🗄️ Database Basics</div>
80+
<div class="skillBox reveal">📐 Figma / Adobe XD</div>
81+
<div class="skillBox reveal">🖼️ Photoshop / Illustrator</div>
82+
<div class="skillBox reveal">🎬 Video Editing</div>
83+
<div class="skillBox reveal">📊 MS Office Expertise</div>
9484
</div>
9585
</section>
9686

97-
<hr>
87+
<hr class="reveal">
9888

99-
<section id="projects">
89+
<section id="projects" class="reveal">
10090
<h1>Projects</h1>
10191
<p>Here Is Recent Projects 🚀</p>
10292
<div class="projects">
10393
<a href="https://codewithabdullah-007.github.io/HTML_-_CSS_-_JAVASCRIPT_DICE_ROLL_GAME/" target="_blank"
104-
class="projectCard">
105-
🎲 Dice Roll Game
106-
</a>
94+
class="projectCard reveal">🎲 Dice Roll Game</a>
10795
<a href="https://codewithabdullah-007.github.io/JAVASCRIPT_SMIT_-18-_TODO_LIST_CREATE/" target="_blank"
108-
class="projectCard">
109-
📝 Todo App
110-
</a>
96+
class="projectCard reveal">📝 Todo App</a>
11197
<a href="https://codewithabdullah-007.github.io/JAVASCRIPT_STOP_WATCH_SMIT_BATCH_-18-/" target="_blank"
112-
class="projectCard">
113-
⏱️ Stopwatch
114-
</a>
98+
class="projectCard reveal">⏱️ Stopwatch</a>
11599
<a href="https://codewithabdullah-007.github.io/JAVASCRIPT_SMIT_BATCH_-18-_ASSIGNMENT_5_AGE_CALCULATOR/"
116-
target="_blank" class="projectCard">
117-
📅 Age Calculator
118-
</a>
119-
<a href="https://codewithabdullah-007.github.io/Assignment_31/" target="_blank" class="projectCard">
120-
🏨 Roberto Website
121-
</a>
122-
<a href="https://codewithabdullah-007.github.io/Assignment_30/" target="_blank" class="projectCard">
123-
🐾 PetVet Website
124-
</a>
125-
<a href="https://codewithabdullah-007.github.io/Assignment_29/" target="_blank" class="projectCard">
126-
🏢 Lendo Website
127-
</a>
128-
<a href="https://codewithabdullah-007.github.io/Assignment_28/" target="_blank" class="projectCard">
129-
🦷 Dentist Website
130-
</a>
131-
<a href="https://codewithabdullah-007.github.io/Assignment_27/" target="_blank" class="projectCard">
132-
🚗 Car Rentals Website
133-
</a>
134-
<a href="https://codewithabdullah-007.github.io/Assignment_26/" target="_blank" class="projectCard">
135-
🍔 Yummy Website
136-
</a>
137-
<a href="https://codewithabdullah-007.github.io/Assignment_25/" target="_blank" class="projectCard">
138-
🧱 Props Website
139-
</a>
140-
<a href="https://codewithabdullah-007.github.io/Assignment_24/" target="_blank" class="projectCard">
141-
🚀 Startup Website
142-
</a>
100+
target="_blank" class="projectCard reveal">📅 Age Calculator</a>
101+
<a href="https://codewithabdullah-007.github.io/Assignment_31/" target="_blank" class="projectCard reveal">🏨 Roberto Website</a>
102+
<a href="https://codewithabdullah-007.github.io/Assignment_30/" target="_blank" class="projectCard reveal">🐾 PetVet Website</a>
143103
</div>
144104
</section>
145105

146-
<hr>
106+
<hr class="reveal">
147107

148-
<section class="contact-cta">
108+
<section class="contact-cta reveal">
149109
<div class="cta-container">
150110
<h2>🚀 Let’s Build Something Amazing Together!</h2>
151111
<p>Have an idea, project, or just want to connect? Reach out below.</p>
152112
<a href="#contactForm" class="cta-btn">Contact Me Now</a>
153113
</div>
154114
</section>
155115

156-
<hr>
157-
158-
<section class="contact-section" id="contactForm">
159-
<div class="contact-container">
116+
<hr class="reveal">
160117

118+
<section class="contact-section reveal" id="contactForm">
119+
<div class="contact-container reveal">
161120
<div class="contact-info">
162121
<h2>💬 Get in Touch</h2>
163122
<p>Send me a message and I’ll get back to you as soon as possible.</p>
164-
165123
<div class="contact-details">
166124
<span>📧 abdullah.dev@gmail.com</span>
167125
<span>🌍 Remote / Pakistan</span>
168126
<span>⏱ Reply within 24 hours</span>
169127
</div>
170128
</div>
171129

172-
<form class="contact-form">
130+
<form class="contact-form reveal">
173131
<input type="text" placeholder="Your Name">
174132
<input type="email" placeholder="Your Email">
175133
<textarea placeholder="Your Message"></textarea>
176134
<button type="submit">Send Message 🚀</button>
177135
</form>
178-
179136
</div>
180137
</section>
181138

182-
</section>
183-
184139
</body>
185140

186141
</html>

‎script.js‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,23 @@ new Typed('#element', {
55
});
66

77
const reveals = document.querySelectorAll(".reveal");
8-
window.addEventListener("scroll", () => {
8+
9+
function revealOnScroll() {
10+
const windowHeight = window.innerHeight;
11+
const revealPoint = 150;
12+
913
reveals.forEach(el => {
10-
const top = el.getBoundingClientRect().top;
11-
if (top < window.innerHeight - 100) { el.classList.add("active") }
14+
const elementTop = el.getBoundingClientRect().top;
15+
if (elementTop < windowHeight - revealPoint) {
16+
el.classList.add("active");
17+
} else {
18+
el.classList.remove("active"); // optional: remove if you want repeat
19+
}
1220
});
13-
});
21+
}
22+
23+
window.addEventListener("scroll", revealOnScroll);
24+
revealOnScroll();
1425

1526
document.getElementById('darkBtn').onclick = () => document.body.classList.remove("light");
1627
document.getElementById('lightBtn').onclick = () => document.body.classList.add("light");

‎style.css‎

Lines changed: 54 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,28 @@ nav ul li a {
3737
text-decoration: none;
3838
color: #ffffff;
3939
transition: 0.3s, transform 0.2s;
40+
position: relative;
41+
}
42+
43+
nav ul li a::after {
44+
content: '';
45+
position: absolute;
46+
width: 0%;
47+
height: 2px;
48+
background: #38bdf8;
49+
left: 0;
50+
bottom: -5px;
51+
transition: 0.3s;
4052
}
4153

4254
nav ul li a:hover {
4355
color: #38bdf8;
4456
transform: scale(1.05);
4557
}
4658

59+
nav ul li a:hover::after {
60+
width: 100%;
61+
}
4762
body.light nav ul li a {
4863
color: #020617;
4964
}
@@ -56,6 +71,28 @@ body.light nav ul li a:hover {
5671
.left {
5772
font-size: 1.4rem;
5873
font-weight: 600;
74+
cursor: pointer;
75+
position: relative;
76+
transition: 0.3s;
77+
}
78+
79+
.left::after {
80+
content: '';
81+
position: absolute;
82+
width: 0%;
83+
height: 2px;
84+
background: #38bdf8;
85+
left: 0;
86+
bottom: -5px;
87+
transition: 0.3s;
88+
}
89+
90+
.left:hover {
91+
color: #38bdf8;
92+
}
93+
94+
.left:hover::after {
95+
width: 100%;
5996
}
6097

6198
.theme-buttons {
@@ -161,11 +198,18 @@ section h1 {
161198
color: inherit;
162199
margin: 50px 0 30px;
163200
margin-top: -50px;
164-
background-color: aqua;
165-
border-radius: 10px;
201+
background: linear-gradient(135deg, #38bdf8, #60a5fa);
202+
box-shadow: 0 4px 20px rgba(56, 189, 248, 0.5);
203+
transition: 0.4s;
204+
border-radius: 99px;
166205
margin-bottom: 85px;
167206
}
168207

208+
section h1:hover {
209+
transform: scale(1.05);
210+
box-shadow: 0 6px 25px rgba(56, 189, 248, 0.7);
211+
}
212+
169213

170214
.skills,
171215
.projects {
@@ -185,16 +229,17 @@ section h1 {
185229
text-align: center;
186230
font-weight: 600;
187231
border: 1px solid rgba(255, 255, 255, 0.15);
188-
transition: 0.3s, transform 0.2s, box-shadow 0.3s;
232+
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s, background 0.3s;
189233
text-decoration: none;
190234
color: white;
191235
}
192236

193237
.skillBox:hover,
194238
.projectCard:hover {
195-
transform: translateY(-8px);
196-
box-shadow: 0 0 20px #38bdf8, 0 0 40px #38bdf8, 0 0 60px #38bdf8;
239+
transform: translateY(-8px) scale(1.03);
240+
box-shadow: 0 0 25px #38bdf8, 0 0 40px #38bdf8, 0 0 60px #38bdf8;
197241
border-color: #38bdf8;
242+
background: rgba(56, 189, 248, 0.15);
198243
}
199244

200245
body.light .contactSection input,
@@ -386,11 +431,11 @@ body.light .vertical {
386431

387432
.reveal {
388433
opacity: 0;
389-
transform: translateY(40px);
390-
transition: 0.8s ease
434+
transform: translateY(50px);
435+
transition: all 0.8s ease-out;
391436
}
392437

393438
.reveal.active {
394439
opacity: 1;
395-
transform: translateY(0)
396-
}
440+
transform: translateY(0);
441+
}

0 commit comments

Comments
 (0)