tailwind布局实现个人简历代码-html代码-BFW代码库

tailwind布局实现个人简历代码

代码语言：html

代码描述：tailwind布局实现个人简历代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en"><head>
  <meta charset="UTF-8">
  <title>Alex Carter – Portfolio</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
    .glass-border {
      border: 1px solid rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(20px);
      background: rgba(255, 255, 255, 0.02);
    }
    .glass-card {
      border: 1px solid rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(16px);
      background: rgba(255, 255, 255, 0.03);
    }
    .glass-input {
      border: 1px solid rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      background: rgba(255, 255, 255, 0.04);
    }
    .glass-input:focus {
      border-color: rgba(34, 197, 94, 0.4);
      background: rgba(255, 255, 255, 0.06);
    }
    .custom-toggle input:checked + .toggle-bg {
      background: rgba(34, 197, 94, 0.8);
    }
    .custom-toggle input:checked + .toggle-bg .toggle-dot {
      transform: translateX(14px);
      background: white;
    }
    .fade-in { animation: fadeIn 0.8s ease-out forwards; opacity: 0; }
    .slide-up { animation: slideUp 0.8s ease-out forwards; opacity: 0; transform: translateY(30px);}
    .slide-left { animation: slideLeft 0.8s ease-out forwards; opacity: 0; transform: translateX(30px);}
    .slide-right { animation: slideRight 0.8s ease-out forwards; opacity: 0; transform: translateX(-30px);}
    .blur-in { animation: blurIn 0.8s ease-out forwards; opacity: 0; filter: blur(10px);}
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    .delay-400 { animation-delay: 0.4s; }
    .delay-500 { animation-delay: 0.5s; }
    .delay-600 { animation-delay: 0.6s; }
    .delay-700 { animation-delay: 0.7s; }
    .delay-800 { animation-delay: 0.8s; }
    .delay-900 { animation-delay: 0.9s; }
    .delay-1000 { animation-delay: 1.0s; }
    .delay-1100 { animation-delay: 1.1s; }
    .delay-1200 { animation-delay: 1.2s; }
    @keyframes fadeIn { to { opacity: 1; } }
    @keyframes slideUp { to { opacity: 1; transform: translateY(0);} }
    @keyframes slideLeft { to { opacity: 1; transform: translateX(0);} }
    @keyframes slideRight { to { opacity: 1; transform: translateX(0);} }
    @keyframes blurIn { to { opacity: 1; filter: blur(0);} }
    .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out;}
    .animate-on-scroll.in-view { opacity: 1; transform: translateY(0);}
    .animated-bg {
      position: fixed;
      inset: 0;
      z-index: -10;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background: radial-gradient(ellipse 80% 100% at 50% 0%, #22c55e30 0%, #0ea5e910 100%), linear-gradient(135deg, #18181b 0%, #18181b 100%);
      animation: bgMove 18s linear infinite alternate;
    }
    .bg-blob {
      position: absolute;
      border-radius: 50%;.........完整代码请登录后点击上方下载按钮下载查看