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

代码语言：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%;
      filter: blur(60px);
      opacity: 0.42;
      pointer-events: none;
      mix-blend-mode: lighten;
      transition: opacity 0.3s;
    }
    .blob1 { width: 540px; height: 540px; background: #22c55e; top: -120px; left: -100px; animation: blob1move 23s ease-in-out infinite alternate;}
    .blob2 { width: 420px; height: 420px; background: #0ea5e9; top: 60%; left: -160px; animation: blob2move 19s ease-in-out infinite alternate;}
    .blob3 { width: 420px; height: 420px; background: #eab308; bottom: -80px; right: -90px; animation: blob3move 25s ease-in-out infinite alternate;}
    .blob4 { width: 260px; height: 260px; background: #a21caf; top: 15%; right: 22%; animation: blob4move 20s ease-in-out infinite alternate;}
    @keyframes blob1move { 0%{top:-120px;left:-100px;} 100%{top:50px;left:20vw;} }
    @keyframes blob2move { 0%{top:60%;left:-160px;} 100%{top:70%;left:10vw;} }
    @keyframes blob3move { 0%{bottom:-80px;right:-90px;} 100%{bottom:10vh;right:5vw;} }
    @keyframes blob4move { 0%{top:15%;right:22%;} 100%{top:22%;right:12%;} }
    @keyframes bgMove { 0%{background-position:0% 0%,0% 0%;} 100%{background-position:100% 100%,100% 100%;} }
  </style>
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/josh.js"></script>
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            'sans': ['Inter', 'system-ui', 'sans-serif'],
          }
        }
      }
    }
  </script>
  
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&amp;display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;family=IBM+Plex+Serif:wght@300;400;500;600;700&.........完整代码请登录后点击上方下载按钮下载查看