Add Pranav-MSK

contributors/Pranav-MSK.html

@@ -0,0 +1,137 @@
+<article>
+  <h3>Pranav-MSK</h3>
+  <p>
+    Data-focused developer skilled in Python and SQL, with experience building analytical projects and web-based solutions. Interested in transforming data into insights and developing practical, scalable applications.
+  </p>
+
+  <h4>Programming languages I use</h4>
+  <section class="container">
+    <div class="badge python">Python</div>
+    <div class="badge sql">SQL</div>
+    <div class="badge js">JavaScript</div>
+  </section>
+
+  <h4>Tools I use</h4>
+  <section class="container">
+    <img class="icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg" />
+    <img class="icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mysql/mysql-original.svg" />
+    <img class="icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/git/git-original.svg" />
+    <img class="icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original.svg" />
+    <img class="icon" src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/html5/html5-original.svg" />
+  </section>
+</article>
+
+<style>
+  body {
+    font-family: 'Segoe UI', sans-serif;
+    background: radial-gradient(circle at top, #0f172a, #020617);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+  article {
+    background: rgba(17, 24, 39, 0.85);
+    backdrop-filter: blur(12px);
+    padding: 2rem;
+    border-radius: 1.5rem;
+    width: 340px;
+    color: #e5e7eb;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
+    border: 1px solid rgba(255,255,255,0.08);
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+  }
+
+  article:hover {
+    transform: translateY(-10px) scale(1.02);
+    box-shadow: 0 30px 80px rgba(0,0,0,0.9);
+  }
+
+  article::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 1.5rem;
+    padding: 1px;
+    background: linear-gradient(120deg, #38bdf8, #6366f1, #9333ea);
+    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+  }
+
+  h3 {
+    font-size: 1.7rem;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(90deg, #38bdf8, #818cf8);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  p {
+    font-size: 0.9rem;
+    color: #9ca3af;
+    margin-bottom: 1.3rem;
+    line-height: 1.4;
+  }
+
+  h4 {
+    margin-top: 1.2rem;
+    font-size: 0.85rem;
+    letter-spacing: 1px;
+    color: #c7d2fe;
+    text-transform: uppercase;
+  }
+
+  .container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6rem;
+    margin-top: 0.5rem;
+  }
+
+  .badge {
+    padding: 0.45rem 0.8rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    cursor: default;
+  }
+
+  .badge:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 12px rgba(255,255,255,0.2);
+  }
+
+  .python {
+    background: linear-gradient(135deg, #3776ab, #4cc9f0);
+    color: white;
+  }
+
+  .sql {
+    background: linear-gradient(135deg, #9333ea, #c084fc);
+    color: white;
+  }
+
+  .js {
+    background: linear-gradient(135deg, #facc15, #fde68a);
+    color: black;
+  }
+
+  .icon {
+    width: 2.3rem;
+    padding: 0.35rem;
+    border-radius: 0.6rem;
+    background: rgba(255,255,255,0.05);
+    transition: all 0.3s ease;
+  }
+
+  .icon:hover {
+    transform: translateY(-6px) scale(1.1);
+    background: rgba(255,255,255,0.1);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.6);
+  }
+</style>