diff --git a/readme files/resources.md b/readme files/resources.md index f343781..10fc566 100644 --- a/readme files/resources.md +++ b/readme files/resources.md @@ -130,4 +130,6 @@ I [Prachi Vaishnav](https://github.com/vaishnavprachi98) would like to recommend I [Areen](https://github.com/Areen161) would like to recommend [Sololearn](https://www.sololearn.com/) -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) \ No newline at end of file +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) + +I [Himanshu Sharma](https://github.com/Himma08) recommend [w33schools](https://www.w3schools.com/) \ No newline at end of file diff --git a/readme files/suggestions.md b/readme files/suggestions.md index 88011c3..ad5a825 100644 --- a/readme files/suggestions.md +++ b/readme files/suggestions.md @@ -54,4 +54,6 @@ I [Harpreet Madaan] (https://github.com/harpreet199) I would like to suggest for 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. I [Muteeb](https://github.com/Muteeb489) would like to suggest you to pick up a project -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. \ No newline at end of file +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. + +I [Himanshu Sharma](https://github.com/Himma08) suggests you to never stop learning. \ No newline at end of file diff --git a/web/Images/Himanshu.JPG b/web/Images/Himanshu.JPG new file mode 100644 index 0000000..1d370e4 Binary files /dev/null and b/web/Images/Himanshu.JPG differ diff --git a/web/pages/Himanshu.html b/web/pages/Himanshu.html new file mode 100644 index 0000000..b18b163 --- /dev/null +++ b/web/pages/Himanshu.html @@ -0,0 +1,49 @@ + + + + + + Profile Card + + + + + + + + + + + + +
+
+
+
+
+ Profile photo +
+

Himanshu Sharma

+

Frontend Engineer

+ +
    +
  • Next.js
    • +
  • Tailwind
    • +
  • Node.js
    • +
  • MongoDB
    • +
  • TypeScript
    • +
+ +
+ + + + +
+
+
+
+ + + + diff --git a/web/scripts/Himanshu.js b/web/scripts/Himanshu.js new file mode 100644 index 0000000..c22db1e --- /dev/null +++ b/web/scripts/Himanshu.js @@ -0,0 +1,36 @@ +document.addEventListener('DOMContentLoaded', () => { + const wrapper = document.querySelector('.wrapper'); + const card = document.querySelector('.profile-card'); + const glow = document.querySelector('.highlight'); + + const MAX_TILT = 18; // degrees + + function getTilt(event, element) { + const rect = element.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + const midX = rect.width / 2; + const midY = rect.height / 2; + + const rotY = ((x - midX) / midX) * MAX_TILT; + const rotX = -((y - midY) / midY) * MAX_TILT; + + return { rotX, rotY }; + } + + wrapper.addEventListener('mousemove', (e) => { + const { rotX, rotY } = getTilt(e, card); + card.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`; + + // move glow center + const rect = card.getBoundingClientRect(); + const gx = ((e.clientX - rect.left) / rect.width) * 100; + const gy = ((e.clientY - rect.top) / rect.height) * 100; + glow.style.left = `${gx}%`; + glow.style.top = `${gy}%`; + }); + + wrapper.addEventListener('mouseleave', () => { + card.style.transform = 'rotateX(0deg) rotateY(0deg)'; + }); +}); diff --git a/web/stylesheet/Himanshu.css b/web/stylesheet/Himanshu.css new file mode 100644 index 0000000..fab7772 --- /dev/null +++ b/web/stylesheet/Himanshu.css @@ -0,0 +1,143 @@ +:root { + --bg: #0c0e17; + --card-bg: rgba(255, 255, 255, 0.08); + --card-border: rgba(255, 255, 255, 0.25); + --text-main: #f8f8f8; + --accent:#0c0e17; + --font: 'Poppins', sans-serif; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + min-height: 100vh; + font-family: var(--font); + display: grid; + place-items: center; + background: var(--bg); + background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0); + background-size: 22px 22px; + color: var(--text-main); +} + +.wrapper { + perspective: 1200px; +} + +/* --- Card --- */ +.profile-card { + width: 360px; + height: 500px; + padding: 2.2rem; + background: var(--card-bg); + background-color: #39539c; + border: 1px solid var(--card-border); + border-radius: 20px; + backdrop-filter: blur(18px); + -webkit-backdrop-filter: blur(18px); + position: relative; + transition: transform 0.4s ease; + transform-style: preserve-3d; + box-shadow: 0 18px 40px rgba(0,0,0,0.35); +} + +.inner { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.3rem; + transform: translateZ(40px); +} + +/* --- Highlight Glow --- */ +.highlight { + position: absolute; + width: 240px; + height: 240px; + background: radial-gradient(circle, var(--accent) 0%, transparent 65%); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + filter: blur(70px); + opacity: 0; + border-radius: 50%; + pointer-events: none; + transition: opacity 0.4s ease; +} + +/* --- Avatar --- */ +.avatar { + width: 120px; + height: 120px; + border-radius: 50%; + overflow: hidden; + border: 3px solid var(--card-border); + box-shadow: 0 0 25px rgba(0,0,0,0.5); + animation: scaleIn 0.7s ease forwards; +} + +.avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* --- Text --- */ +.name { + font-size: 1.8rem; + font-weight: 600; + letter-spacing: 0.4px; +} + +.role { + font-weight: 300; + color: rgba(255,255,255,0.7); +} + +/* --- Tech List --- */ +.tech-list { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + justify-content: center; + list-style: none; +} + +.tech-list li { + padding: 0.4rem 0.9rem; + font-size: 0.85rem; + border-radius: 12px; + background: rgba(255,255,255,0.08); +} + +/* --- Socials --- */ +.socials { + display: flex; + gap: 1.4rem; + font-size: 1.5rem; +} + +.socials a { + color: var(--text-main); + transition: color 0.3s ease, transform 0.3s ease; +} + +.socials a:hover { + color: var(--accent); + transform: translateY(-4px) scale(1.15); +} + +/* --- Animations --- */ +@keyframes scaleIn { + from { transform: scale(0.8); opacity: 0; } + to { transform: scale(1); opacity: 1; } +} + +/* Hover Glow */ +.wrapper:hover .highlight { + opacity: 0.22; +}