Modern Profil Kartı

<div class="profile-card">
  <div class="img-bx">
    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=200&q=80" alt="Profil">
  </div>
  <div class="content">
    <div class="details">
      <h2>Yazılım Uzmanı<br><span>Full Stack Developer</span></h2>
      <ul class="social_icons">
        <li><i class="fab fa-facebook-f"></i></li>
        <li><i class="fab fa-twitter"></i></li>
        <li><i class="fab fa-linkedin-in"></i></li>
        <li><i class="fab fa-instagram"></i></li>
      </ul>
    </div>
  </div>
</div>

.profile-card {
  position: relative; width: 300px; height: 350px; background: #2a2a35; border-radius: 20px; box-shadow: 0 35px 80px rgba(0,0,0,0.15); transition: 0.5s; overflow: hidden;
}
.profile-card:hover { height: 420px; }
.img-bx { position: absolute; left: 50%; top: -50px; transform: translateX(-50%); width: 150px; height: 150px; background: #fff; border-radius: 20px; box-shadow: 0 15px 50px rgba(0,0,0,0.35); overflow: hidden; transition: 0.5s; }
.profile-card:hover .img-bx { width: 200px; height: 200px; top: 20px; border-radius: 50%; }
.img-bx img { width: 100%; height: 100%; object-fit: cover; }
.profile-card .content { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; }
.profile-card .content .details { padding: 40px; text-align: center; width: 100%; transition: 0.5s; transform: translateY(150px); }
.profile-card:hover .content .details { transform: translateY(0px); }
.profile-card .content .details h2 { font-size: 1.25em; font-weight: 600; color: #fff; line-height: 1.2em; }
.profile-card .content .details h2 span { font-size: 0.75em; font-weight: 500; opacity: 0.5; }
.social_icons { display: flex; justify-content: center; padding: 0; margin-top: 15px; list-style: none; gap: 10px; }
.social_icons li { width: 35px; height: 35px; background: #4d5bf9; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.3s; color: #fff; }
.social_icons li:hover { background: #00cec9; transform: translateY(-5px); }