Skip to content

Commit db4ed67

Browse files
muhammad-awais-web-devmuhammad-awais-web-dev
committed
image for about changed might have some errors left
1 parent e53937c commit db4ed67

File tree

4 files changed

+149
-16
lines changed

4 files changed

+149
-16
lines changed

‎card.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
2+
.card {
3+
max-width: 400px;
4+
max-height: 400px;
5+
height: 100%;
6+
width: 100%;
7+
border: 1px solid #ccc;
8+
border-radius: 12px;
9+
background: #0f0f0f;
10+
display: flex;
11+
flex-direction: column;
12+
justify-content: space-between;
13+
padding: 12px;
14+
position: relative;
15+
cursor: none;
16+
}
17+
18+
.card-image {
19+
width:100%;
20+
height: auto;
21+
margin: auto;
22+
overflow: hidden;
23+
border-radius: 8px;
24+
}
25+
26+
.card-image img {
27+
width: 100%;
28+
height: 100%;
29+
object-fit: cover;
30+
}
31+
32+
.custom-cursor {
33+
position: absolute;
34+
top: 0;
35+
left: 0;
36+
opacity: 0;
37+
pointer-events: none;
38+
}
39+
40+
.cursor-icon {
41+
color: #4ecdc4;
42+
margin-bottom: 4px;
43+
}
44+
45+
.name-tag {
46+
display: flex;
47+
align-items: center;
48+
gap: 6px;
49+
padding: 4px 8px;
50+
background: #4ecdc4;
51+
border-radius: 12px;
52+
transform: scale(0);
53+
}
54+
55+
.name-tag img {
56+
width: 20px;
57+
height: 20px;
58+
border-radius: 50%;
59+
}
60+
61+
@media (max-width: 880px) {
62+
.card {
63+
max-width: 250px;
64+
max-height: 250px;
65+
}
66+
}

‎card.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const card = document.querySelector(".card");
2+
const cursor = document.querySelector(".custom-cursor");
3+
const nameTag = document.querySelector(".name-tag");
4+
const pointerIcon = document.querySelector(".cursor-icon");
5+
6+
const colorPairs = [
7+
{ primary: "#FF6B6B", secondary: "#4ECDC4" },
8+
{ primary: "#A17FB0", secondary: "#000" },
9+
{ primary: "#FF9F43", secondary: "#FF5E7D" },
10+
{ primary: "#00D2FF", secondary: "#f00" },
11+
{ primary: "#08AEEA", secondary: "#2AF598" },
12+
];
13+
14+
function getRandomColorPair() {
15+
return colorPairs[Math.floor(Math.random() * colorPairs.length)];
16+
}
17+
18+
let colors = getRandomColorPair();
19+
20+
card.addEventListener("mouseenter", () => {
21+
colors = getRandomColorPair();
22+
nameTag.style.backgroundColor = colors.secondary;
23+
pointerIcon.style.color = colors.secondary;
24+
25+
gsap.to(cursor, { opacity: 1, duration: 0.1 });
26+
gsap.to(nameTag, { scale: 1, duration: 0.3 });
27+
card.style.border = `1px solid ${colors.secondary}`;
28+
});
29+
30+
card.addEventListener("mouseleave", () => {
31+
gsap.to(cursor, { opacity: 0, duration: 0.1 });
32+
gsap.to(nameTag, { scale: 0, duration: 0.1 });
33+
card.style.border = `1px solid #ccc`;
34+
});
35+
36+
card.addEventListener("mousemove", (e) => {
37+
const rect = card.getBoundingClientRect();
38+
const x = e.clientX - rect.left;
39+
const y = e.clientY - rect.top;
40+
gsap.to(cursor, { x, y, duration: 0.1 });
41+
});

‎index.html‎

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Muhammad Awais | Web Developer & Ux/Ui Designer</title>
77
<link rel="stylesheet" href="styles.css">
8-
<link rel="stylesheet" href="Decor.css">
8+
<link rel="stylesheet" href="Decor.css">
9+
<link rel="stylesheet" href="card.css" />
910
<link rel="icon" href="Favicon.svg" type="image/x-icon">
1011
<meta name="description" content="Portfolio of Muhammad Awais, showcasing web development and UX/UI design skills.">
1112
<meta name="keywords" content="Web Developer, UX/UI Designer, Portfolio, Muhammad Awais, Frontend Developer, Web Design, User Experience, User Interface">
@@ -135,7 +136,39 @@ <h2>About Me</h2>
135136
</table>
136137
</div>
137138
<div id="about-pic">
138-
<img src="Profile.jpg" alt="Profile Picture">
139+
<div class="card">
140+
<div class="card-image">
141+
<img
142+
src="Profile.jpg"
143+
alt="image"
144+
/>
145+
</div>
146+
147+
148+
149+
<!-- Custom cursor element -->
150+
<div class="custom-cursor">
151+
<div class="cursor-icon">
152+
<svg
153+
style="rotate: -70deg"
154+
stroke="currentColor"
155+
fill="currentColor"
156+
viewBox="0 0 16 16"
157+
height="20"
158+
width="20"
159+
xmlns="http://www.w3.org/2000/svg"
160+
>
161+
<path
162+
d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z"
163+
></path>
164+
</svg>
165+
</div>
166+
<div class="name-tag">
167+
<p>Muhammad Awais</p>
168+
</div>
169+
</div>
170+
</div>
171+
<!-- <img src="Profile.jpg" alt="Profile Picture"> -->
139172
<!-- From Uiverse.io by Sharkotech -->
140173
<!-- <div class="main">
141174
<div class="card" id="c1"></div>
@@ -145,10 +178,16 @@ <h2>About Me</h2>
145178
</div> -->
146179
</div>
147180
</section>
148-
<section id="skills"><h2>Skills</h2></section>
181+
<section id="skills">
182+
<h2>Skills</h2>
183+
184+
185+
</section>
149186
<section id="certifications"><h2>Certifications</h2></section>
150187
<section id="contact"><h2>Contact</h2></section>
151188
</main>
189+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
190+
<script src="card.js"></script>
152191
<script src="javascript.js"></script>
153192
<script src="https://kit.fontawesome.com/4cfda748cf.js" crossorigin="anonymous"></script>
154193
</body>

‎styles.css‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -277,13 +277,6 @@ h2{
277277
justify-content: center;
278278
align-items: center;
279279
}
280-
#about-pic img{
281-
width: 70%;
282-
max-width: 400px;
283-
height: auto;
284-
border-radius: 20px;
285-
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
286-
}
287280

288281

289282
@media(max-width: 880px){
@@ -346,12 +339,6 @@ h2{
346339
align-items: center;
347340
justify-content: center;
348341
}
349-
#about-pic img{
350-
width: 300px;
351-
height: auto;
352-
border-radius: 20px;
353-
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
354-
}
355342
#about-info table tr{
356343
flex-direction: column;
357344
align-items: center;

0 commit comments

Comments
 (0)