Profile/ez havoc

contributors.json

@@ -6,7 +6,11 @@
     "bio": "Building beautiful things for the web!",
     "github_profile_url": "https://github.com/dsawithaditi",
     "project_netlify_link": "https://aditi-profile-card.netlify.app/",
-    "tags": ["minimalist", "animation", "light-theme"]
+    "tags": [
+      "minimalist",
+      "animation",
+      "light-theme"
+    ]
   },
   {
     "name": "Md Aarzoo Islam",
@@ -15,7 +19,11 @@
     "bio": "Building beautiful things for the web!",
     "github_profile_url": "https://github.com/withaarzoo",
     "project_netlify_link": "https://aarzoo-profile-card.netlify.app/",
-    "tags": ["minimalist", "animation", "dark-theme"]
+    "tags": [
+      "minimalist",
+      "animation",
+      "dark-theme"
+    ]
   },
   {
     "name": "Nusrat Jahan",
@@ -24,7 +32,10 @@
     "bio": "Frontend developer focused on clean code, pixel-perfect UIs, and seamless user experiences.",
     "github_profile_url": "https://github.com/nusrat80",
     "project_netlify_link": "https://nusrat-profile-card.netlify.app/",
-    "tags": ["minimalist", "light-theme"]
+    "tags": [
+      "minimalist",
+      "light-theme"
+    ]
   },
   {
     "name": "Rakesh Sharma",
@@ -33,16 +44,23 @@
     "bio": "As a Software Engineer at Paytm, I'm on a mission to simplify financial services for everyone. I architect and build the technology that brings seamless payments, banking, and commerce to the fingertips of millions, driving true financial inclusion in India.",
     "github_profile_url": "https://github.com/rakesh-dev-07",
     "project_netlify_link": "https://rakesh-profile-card.netlify.app/",
-    "tags": ["minimalist", "light-theme"]
+    "tags": [
+      "minimalist",
+      "light-theme"
+    ]
   },
   {
     "name": "Ritwik Tat",
     "occupation": "Full Stack Developer",
     "place": "Maharashtra",
     "bio": "Passionate about crafting seamless web experiences and turning ideas into reality through code.",
-    "github_profile_url":"https://github.com/ritwik1709",
+    "github_profile_url": "https://github.com/ritwik1709",
     "project_netlify_link": "https://ritwik-profile-card.netlify.app/",
-    "tags":["minimalist","animation","dark-theme"]
+    "tags": [
+      "minimalist",
+      "animation",
+      "dark-theme"
+    ]
   },
   {
     "name": "rumi",
@@ -51,7 +69,10 @@
     "bio": "passionate about crafting clean code, scalable systems, and intuitive user experiences.",
     "github_profile_url": "https://github.com/rumi20",
     "project_netlify_link": "https://rumi-profile-card.netlify.app/",
-    "tags": ["animated", "light-theme"]
+    "tags": [
+      "animated",
+      "light-theme"
+    ]
   },
   {
     "name": "Soumik Nandan",
@@ -60,6 +81,21 @@
     "bio": "SEO Specialist with 3 years of experience driving organic growth and improving search visibility. Focused on the technical backbone of SEO, data analysis, and content strategy to enhance website performance and user experience.",
     "github_profile_url": "https://github.com/seobysoumik",
     "project_netlify_link": "https://soumik-profile-card.netlify.app/",
-    "tags": ["animated", "light-theme"]
+    "tags": [
+      "animated",
+      "light-theme"
+    ]
+  },
+  {
+    "name": "Kanishk Singh",
+    "occupation": "CyberSecurity Engineer",
+    "place": "Bengaluru, India",
+    "bio": "Cyber Security red teamer specializing in penetration Testing, Forensics, Cryptography and Web Exploitation.",
+    "github_profile_url": "https://github.com/EzHavoc",
+    "project_netlify_link": "https://ezhavoc.netlify.app/",
+    "tags": [
+      "animated",
+      "dark-theme"
+    ]
   }
 ]

profiles/ezhavoc/css/style.css

@@ -0,0 +1,195 @@
+/* --- Basic Setup & Variables --- */
+:root {
+    --card-bg: rgba(255, 255, 255, 0.15);
+    --card-border-color: rgba(255, 255, 255, 0.3);
+    --text-color: #f0f0f0;
+    --glow-color: rgb(180, 140, 255);
+    --primary-font: 'Inter', sans-serif;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: var(--primary-font);
+    display: grid;
+    place-items: center;
+    min-height: 100vh;
+    background-color: #101015;
+    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 0);
+    background-size: 20px 20px;
+    color: var(--text-color);
+}
+
+/* --- Card Container & Perspective --- */
+.card-container {
+    perspective: 1000px;
+}
+
+/* --- Main Card Styling --- */
+.card {
+    width: 340px;
+    padding: 2rem;
+    position: relative;
+    border-radius: 24px;
+    background: var(--card-bg);
+    border: 1px solid var(--card-border-color);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
+
+    /* For 3D transform */
+    transform-style: preserve-3d;
+    transition: transform 0.4s ease-out;
+}
+
+/* --- Content Styling --- */
+.card-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    text-align: center;
+    /* Move content forward in 3D space */
+    transform: translateZ(50px);
+}
+
+/* --- Profile Image --- */
+.profile-image {
+    width: 140px;
+    height: 140px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 3px solid var(--card-border-color);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+    animation: fadeInScaleUp 0.6s ease-in-out;
+}
+
+.profile-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* --- Profile Info --- */
+.profile-info {
+    animation: fadeIn 0.6s ease-in-out 0.2s backwards;
+}
+
+.profile-info h1 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+}
+
+.profile-info p {
+    font-size: 1rem;
+    font-weight: 300;
+    color: rgba(255, 255, 255, 0.7);
+    margin-top: 0.25rem;
+}
+
+/* --- Skills --- */
+.skills {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.5rem;
+    animation: fadeIn 0.6s ease-in-out 0.4s backwards;
+}
+
+.skills span {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 0.5rem 1rem;
+    border-radius: 12px;
+    font-size: 0.85rem;
+    font-weight: 500;
+}
+
+/* --- Social Links --- */
+.social-links {
+    display: flex;
+    gap: 1.25rem;
+    animation: fadeIn 0.6s ease-in-out 0.6s backwards;
+}
+
+.social-links a {
+    color: var(--text-color);
+    font-size: 1.5rem;
+    transition: color 0.3s ease, transform 0.3s ease;
+}
+
+.social-links a:hover {
+    color: var(--glow-color);
+    transform: scale(1.2) translateY(-3px);
+}
+
+/* --- Glow Effect --- */
+.card-glow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: 24px;
+    pointer-events: none;
+    /* Allows clicks to go through */
+}
+
+.card-glow::before {
+    content: '';
+    position: absolute;
+    width: 250px;
+    height: 250px;
+    background: radial-gradient(circle, var(--glow-color), transparent 60%);
+    opacity: 0;
+    filter: blur(60px);
+    transform: translate(-50%, -50%);
+    transition: opacity 0.4s ease-out;
+    animation: floatGlow 5s ease-in-out infinite;
+}
+
+.card-container:hover .card-glow::before {
+    opacity: 0.2;
+}
+
+/* --- Keyframe Animations --- */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeInScaleUp {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes floatGlow {
+
+    0%,
+    100% {
+        transform: translate(-50%, -50%) scale(1);
+    }
+
+    50% {
+        transform: translate(-45%, -55%) scale(1.1);
+    }
+}

profiles/ezhavoc/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Developer Profile Card</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+
+    <div class="card-container">
+        <div class="card">
+            <div class="card-glow"></div>
+            <div class="card-content">
+                <div class="profile-image">
+                    <img src="assets/images/EzHavoc.jpg" alt="Profile Picture">
+                </div>
+                <div class="profile-info">
+                    <h1>Kanishk Singh</h1>
+                    <p>CyberSecurity Engineer</p>
+                </div>
+                <div class="skills">
+                    <span>React</span>
+                    <span>CSS</span>
+                    <span>JavaScript</span>
+                    <span>Ghidra</span>
+                    <span>Metasploit</span>
+                </div>
+                <div class="social-links">
+                    <a href="#" aria-label="GitHub Profile"><i class="fab fa-github"></i></a>
+                    <a href="#" aria-label="LinkedIn Profile"><i class="fab fa-linkedin-in"></i></a>
+                    <a href="#" aria-label="Twitter Profile"><i class="fab fa-twitter"></i></a>
+                    <a href="#" aria-label="Portfolio Website"><i class="fas fa-globe"></i></a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="js/main.js"></script>
+</body>
+
+</html>