Skip to content

Commit a464d15

Browse files
Himanshu SharmaHimanshu Sharma
Himanshu Sharma
authored and
Himanshu Sharma
committed
Added my first profile card
1 parent 5b834bc commit a464d15

6 files changed

Lines changed: 234 additions & 2 deletions

File tree

‎readme files/resources.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,4 +130,6 @@ I [Prachi Vaishnav](https://github.com/vaishnavprachi98) would like to recommend
130130

131131
I [Areen](https://github.com/Areen161) would like to recommend [Sololearn](https://www.sololearn.com/)
132132

133-
I [Muteeb](https://github.com/Muteeb489) would like to recommend [Meta](https://www.coursera.org/professional-certificates/meta-front-end-developer?utm_medium=sem&utm_source=gg&utm_campaign=b2c_apac_meta-front-end-developer_meta_ftcof_professional-certificates_cx_dr_bau_gg_pmax_pr_s2-v2_en_m_hyb_25-08_x&campaignid=22913750309&adgroupid=&device=c&keyword=&matchtype=&network=x&devicemodel=&creativeid=&assetgroupid=6603183056&targetid=&extensionid=&placement=&gad_source=1&gad_campaignid=22913754413&gbraid=0AAAAADdKX6bultO1bjGu4nTeIzAF97mdY&gclid=CjwKCAjw6P3GBhBVEiwAJPjmLhCIA0JKc3aJB1sb1d8-e8M9eXYktBnoau5yDkjbiz1S1VmST7sHCBoCBP8QAvD_BwE)
133+
I [Muteeb](https://github.com/Muteeb489) would like to recommend [Meta](https://www.coursera.org/professional-certificates/meta-front-end-developer?utm_medium=sem&utm_source=gg&utm_campaign=b2c_apac_meta-front-end-developer_meta_ftcof_professional-certificates_cx_dr_bau_gg_pmax_pr_s2-v2_en_m_hyb_25-08_x&campaignid=22913750309&adgroupid=&device=c&keyword=&matchtype=&network=x&devicemodel=&creativeid=&assetgroupid=6603183056&targetid=&extensionid=&placement=&gad_source=1&gad_campaignid=22913754413&gbraid=0AAAAADdKX6bultO1bjGu4nTeIzAF97mdY&gclid=CjwKCAjw6P3GBhBVEiwAJPjmLhCIA0JKc3aJB1sb1d8-e8M9eXYktBnoau5yDkjbiz1S1VmST7sHCBoCBP8QAvD_BwE)
134+
135+
I [Himanshu Sharma](https://github.com/Himma08) recommend [w33schools](https://www.w3schools.com/)

‎readme files/suggestions.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,6 @@ I [Harpreet Madaan] (https://github.com/harpreet199) I would like to suggest for
5454
I [Prateek](https://github.com/Ocoderdude) suggest you to not memorizing the solutions to the competetive problems, instead understand the logic or the pattern used in the problem. Try to make your code optimised always with good space and time complexity.
5555

5656
I [Muteeb](https://github.com/Muteeb489) would like to suggest you to pick up a project
57-
and try to start coding it. Tutorials are nice and all but to make exponential progress you need hands on practice at some point. So use building projects as your learning model instead of getting stuck in tutorial hell.
57+
and try to start coding it. Tutorials are nice and all but to make exponential progress you need hands on practice at some point. So use building projects as your learning model instead of getting stuck in tutorial hell.
58+
59+
I [Himanshu Sharma](https://github.com/Himma08) suggests you to never stop learning.

‎web/Images/Himanshu.JPG‎

80.6 KB
Loading

‎web/pages/Himanshu.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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>Profile Card</title>
7+
8+
<!-- Google Font -->
9+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
10+
11+
<!-- Font Awesome -->
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
13+
14+
<!-- Styles -->
15+
<link rel="stylesheet" href="/Web-a-Thon/web/stylesheet/Himanshu.css">
16+
</head>
17+
18+
<body>
19+
<main class="wrapper">
20+
<div class="profile-card">
21+
<div class="highlight"></div>
22+
<div class="inner">
23+
<div class="avatar">
24+
<img src="/Web-a-Thon/web/images/Himanshu.JPG" alt="Profile photo">
25+
</div>
26+
<h2 class="name">Himanshu Sharma</h2>
27+
<h4 class="role">Frontend Engineer</h4>
28+
29+
<ul class="tech-list">
30+
<li>Next.js</li>
31+
<li>Tailwind</li>
32+
<li>Node.js</li>
33+
<li>MongoDB</li>
34+
<li>TypeScript</li>
35+
</ul>
36+
37+
<div class="socials">
38+
<a href="https://github.com/Himma08"><i class="fa-brands fa-github"></i></a>
39+
<a href="https://www.linkedin.com/in/himanshu-sharma-574977365/"><i class="fa-brands fa-linkedin"></i></a>
40+
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
41+
<a href="#"><i class="fa-solid fa-envelope"></i></a>
42+
</div>
43+
</div>
44+
</div>
45+
</main>
46+
47+
<script src="/Web-a-Thon/web/scripts/Himanshu.js"></script>
48+
</body>
49+
</html>

‎web/scripts/Himanshu.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const wrapper = document.querySelector('.wrapper');
3+
const card = document.querySelector('.profile-card');
4+
const glow = document.querySelector('.highlight');
5+
6+
const MAX_TILT = 18; // degrees
7+
8+
function getTilt(event, element) {
9+
const rect = element.getBoundingClientRect();
10+
const x = event.clientX - rect.left;
11+
const y = event.clientY - rect.top;
12+
const midX = rect.width / 2;
13+
const midY = rect.height / 2;
14+
15+
const rotY = ((x - midX) / midX) * MAX_TILT;
16+
const rotX = -((y - midY) / midY) * MAX_TILT;
17+
18+
return { rotX, rotY };
19+
}
20+
21+
wrapper.addEventListener('mousemove', (e) => {
22+
const { rotX, rotY } = getTilt(e, card);
23+
card.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`;
24+
25+
// move glow center
26+
const rect = card.getBoundingClientRect();
27+
const gx = ((e.clientX - rect.left) / rect.width) * 100;
28+
const gy = ((e.clientY - rect.top) / rect.height) * 100;
29+
glow.style.left = `${gx}%`;
30+
glow.style.top = `${gy}%`;
31+
});
32+
33+
wrapper.addEventListener('mouseleave', () => {
34+
card.style.transform = 'rotateX(0deg) rotateY(0deg)';
35+
});
36+
});

‎web/stylesheet/Himanshu.css‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
:root {
2+
--bg: #0c0e17;
3+
--card-bg: rgba(255, 255, 255, 0.08);
4+
--card-border: rgba(255, 255, 255, 0.25);
5+
--text-main: #f8f8f8;
6+
--accent:#0c0e17;
7+
--font: 'Poppins', sans-serif;
8+
}
9+
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
min-height: 100vh;
18+
font-family: var(--font);
19+
display: grid;
20+
place-items: center;
21+
background: var(--bg);
22+
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
23+
background-size: 22px 22px;
24+
color: var(--text-main);
25+
}
26+
27+
.wrapper {
28+
perspective: 1200px;
29+
}
30+
31+
/* --- Card --- */
32+
.profile-card {
33+
width: 360px;
34+
height: 500px;
35+
padding: 2.2rem;
36+
background: var(--card-bg);
37+
background-color: #39539c;
38+
border: 1px solid var(--card-border);
39+
border-radius: 20px;
40+
backdrop-filter: blur(18px);
41+
-webkit-backdrop-filter: blur(18px);
42+
position: relative;
43+
transition: transform 0.4s ease;
44+
transform-style: preserve-3d;
45+
box-shadow: 0 18px 40px rgba(0,0,0,0.35);
46+
}
47+
48+
.inner {
49+
display: flex;
50+
flex-direction: column;
51+
align-items: center;
52+
gap: 1.3rem;
53+
transform: translateZ(40px);
54+
}
55+
56+
/* --- Highlight Glow --- */
57+
.highlight {
58+
position: absolute;
59+
width: 240px;
60+
height: 240px;
61+
background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
62+
top: 50%;
63+
left: 50%;
64+
transform: translate(-50%, -50%);
65+
filter: blur(70px);
66+
opacity: 0;
67+
border-radius: 50%;
68+
pointer-events: none;
69+
transition: opacity 0.4s ease;
70+
}
71+
72+
/* --- Avatar --- */
73+
.avatar {
74+
width: 120px;
75+
height: 120px;
76+
border-radius: 50%;
77+
overflow: hidden;
78+
border: 3px solid var(--card-border);
79+
box-shadow: 0 0 25px rgba(0,0,0,0.5);
80+
animation: scaleIn 0.7s ease forwards;
81+
}
82+
83+
.avatar img {
84+
width: 100%;
85+
height: 100%;
86+
object-fit: cover;
87+
}
88+
89+
/* --- Text --- */
90+
.name {
91+
font-size: 1.8rem;
92+
font-weight: 600;
93+
letter-spacing: 0.4px;
94+
}
95+
96+
.role {
97+
font-weight: 300;
98+
color: rgba(255,255,255,0.7);
99+
}
100+
101+
/* --- Tech List --- */
102+
.tech-list {
103+
display: flex;
104+
flex-wrap: wrap;
105+
gap: 0.5rem;
106+
justify-content: center;
107+
list-style: none;
108+
}
109+
110+
.tech-list li {
111+
padding: 0.4rem 0.9rem;
112+
font-size: 0.85rem;
113+
border-radius: 12px;
114+
background: rgba(255,255,255,0.08);
115+
}
116+
117+
/* --- Socials --- */
118+
.socials {
119+
display: flex;
120+
gap: 1.4rem;
121+
font-size: 1.5rem;
122+
}
123+
124+
.socials a {
125+
color: var(--text-main);
126+
transition: color 0.3s ease, transform 0.3s ease;
127+
}
128+
129+
.socials a:hover {
130+
color: var(--accent);
131+
transform: translateY(-4px) scale(1.15);
132+
}
133+
134+
/* --- Animations --- */
135+
@keyframes scaleIn {
136+
from { transform: scale(0.8); opacity: 0; }
137+
to { transform: scale(1); opacity: 1; }
138+
}
139+
140+
/* Hover Glow */
141+
.wrapper:hover .highlight {
142+
opacity: 0.22;
143+
}

0 commit comments

Comments
 (0)