haiany
/
huashu-design
Mirror von https://github.com/alchaincyf/huashu-design.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
							<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1440">
<title>Alex Chen — Indie Developer & AI Creator</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@300;400;600&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1440px;
    height: 900px;
    overflow: hidden;
    margin: 0;
    background: #F5F0EB;
    font-family: 'Inter', sans-serif;
    color: #3D3D3A;
    position: relative;
  }

  /* PAPER TEXTURE */
  body::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.008) 2px,
        rgba(0,0,0,0.008) 4px
      ),
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.005) 2px,
        rgba(0,0,0,0.005) 4px
      );
    pointer-events: none;
    z-index: 1;
  }

  /* NAV */
  nav {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 80px;
    z-index: 10;
  }
  nav .logo {
    font-family: 'Noto Serif SC', serif;
    font-weight: 400;
    font-size: 16px;
    color: #3D3D3A;
    letter-spacing: 0.02em;
  }
  nav ul {
    list-style: none;
    display: flex;
    gap: 36px;
    align-items: center;
  }
  nav ul li a {
    font-weight: 400;
    font-size: 13px;
    color: #8A8A84;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color 0.3s;
  }
  nav ul li a:hover { color: #3D3D3A; }
  nav ul li.active a { color: #3D3D3A; }

  /* Hairline below nav */
  nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 1px;
    background: #C8C2B6;
  }

  /* MAIN LAYOUT - ASYMMETRIC */
  .hero {
    position: absolute;
    top: 72px;
    left: 0;
    width: 1440px;
    height: 828px;
    display: grid;
    grid-template-columns: 120px 1fr 400px 120px;
    grid-template-rows: 1fr;
    align-items: center;
    z-index: 2;
  }

  /* LEFT MARGIN ELEMENT */
  .margin-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 80px;
    height: 100%;
  }
  .margin-left .vertical-text {
    writing-mode: vertical-rl;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: #B8B2A6;
    font-weight: 300;
  }

  /* CENTER CONTENT */
  .hero-center {
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero-center .section-label {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6B8F71;
    font-weight: 500;
    margin-bottom: 32px;
    opacity: 0.8;
  }

  .hero-center h1 {
    font-family: 'Noto Serif SC', serif;
    font-weight: 300;
    font-size: 56px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #2D3436;
  }
  .hero-center h1 .serif-accent {
    font-family: 'Noto Serif SC', serif;
    font-weight: 600;
    font-style: normal;
    color: #2D3436;
  }

  /* HAIRLINE DIVIDER */
  .hairline {
    width: 48px;
    height: 1px;
    background: #C8C2B6;
    margin: 36px 0;
  }

  .hero-center .tagline {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.8;
    color: #8A8A84;
    max-width: 420px;
  }

  /* STATS - HORIZONTAL */
  .stats {
    display: flex;
    gap: 48px;
    margin-top: 48px;
  }
  .stat {
    display: flex;
    flex-direction: column;
  }
  .stat .stat-value {
    font-family: 'Noto Serif SC', serif;
    font-weight: 600;
    font-size: 28px;
    color: #2D3436;
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .stat .stat-desc {
    font-size: 11px;
    color: #B8B2A6;
    margin-top: 8px;
    letter-spacing: 0.04em;
    font-weight: 400;
  }

  /* CTA */
  .hero-cta {
    margin-top: 48px;
    display: flex;
    gap: 20px;
    align-items: center;
  }
  .cta-link {
    font-weight: 500;
    font-size: 13px;
    color: #3D3D3A;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #C8C2B6;
    transition: all 0.3s;
  }
  .cta-link:hover { border-color: #6B8F71; color: #6B8F71; }
  .cta-link svg { width: 14px; height: 14px; }

  .cta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #C8C2B6;
  }

  .cta-subtle {
    font-weight: 300;
    font-size: 13px;
    color: #B8B2A6;
    text-decoration: none;
    transition: color 0.3s;
  }
  .cta-subtle:hover { color: #3D3D3A; }

  /* RIGHT PANEL */
  .hero-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    position: relative;
  }

  /* PORTRAIT */
  .portrait-container {
    position: relative;
  }
  .portrait {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #EAE5DD;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(200, 194, 182, 0.4);
  }
  .portrait::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 110px;
    background: #D5CEC4;
    border-radius: 48px 48px 0 0;
  }
  .portrait-ring {
    position: absolute;
    top: -16px; left: -16px;
    width: 212px;
    height: 212px;
    border-radius: 50%;
    border: 1px solid rgba(107, 143, 113, 0.2);
  }

  /* BIO CARD */
  .bio-card {
    margin-top: 36px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 12px;
    padding: 24px 28px;
    width: 260px;
    backdrop-filter: blur(8px);
  }
  .bio-card .bio-name {
    font-family: 'Noto Serif SC', serif;
    font-weight: 600;
    font-size: 15px;
    color: #3D3D3A;
  }
  .bio-card .bio-role {
    font-size: 12px;
    color: #B8B2A6;
    margin-top: 4px;
    font-weight: 300;
  }
  .bio-card .bio-hairline {
    width: 32px;
    height: 1px;
    background: #C8C2B6;
    margin: 16px 0;
  }
  .bio-card .bio-desc {
    font-size: 12px;
    line-height: 1.7;
    color: #8A8A84;
    font-weight: 300;
  }

  /* RIGHT MARGIN */
  .margin-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 80px;
    height: 100%;
  }
  .margin-right .year {
    writing-mode: vertical-rl;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: #C8C2B6;
    font-weight: 300;
  }

  /* DECORATIVE: FLOATING LEAF/ORGANIC SHAPE */
  .organic-shape {
    position: absolute;
    top: 140px;
    right: 280px;
    width: 60px;
    height: 80px;
    z-index: 3;
    opacity: 0.08;
  }
  .organic-shape svg {
    width: 100%;
    height: 100%;
  }

  /* BOTTOM AREA */
  .bottom-zen {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 24px;
    z-index: 5;
  }
  .bottom-zen .zen-line {
    width: 48px;
    height: 1px;
    background: #C8C2B6;
  }
  .bottom-zen .zen-text {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: #C8C2B6;
    font-weight: 300;
  }
</style>
</head>
<body>

  <!-- NAV -->
  <nav>
    <div class="logo">Alex Chen</div>
    <ul>
      <li class="active"><a href="#work">Work</a></li>
      <li><a href="#content">Content</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

  <!-- DECORATIVE: Subtle spec annotation -->
  <svg style="position:absolute;top:100px;right:340px;z-index:3;opacity:0.15;" width="60" height="60" viewBox="0 0 60 60" fill="none">
    <circle cx="30" cy="30" r="28" stroke="#6B8F71" stroke-width="0.5"/>
    <circle cx="30" cy="30" r="18" stroke="#6B8F71" stroke-width="0.5" stroke-dasharray="2,4"/>
    <line x1="30" y1="0" x2="30" y2="60" stroke="#6B8F71" stroke-width="0.3"/>
    <line x1="0" y1="30" x2="60" y2="30" stroke="#6B8F71" stroke-width="0.3"/>
  </svg>

  <!-- HERO -->
  <div class="hero">
    <!-- LEFT MARGIN -->
    <div class="margin-left">
      <div class="vertical-text">PORTFOLIO</div>
    </div>

    <!-- CENTER -->
    <div class="hero-center">
      <div class="section-label">Indie Developer & AI Creator</div>
      <h1>Building tools<br>at the intersection<br>of <span class="serif-accent">AI</span> and <span class="serif-accent">creativity</span></h1>
      <div class="hairline"></div>
      <p class="tagline">I design, build, and write about the things that emerge when technology meets human imagination.</p>

      <div class="stats">
        <div class="stat">
          <div class="stat-value">300K+</div>
          <div class="stat-desc">followers</div>
        </div>
        <div class="stat">
          <div class="stat-value">No. 1</div>
          <div class="stat-desc">App Store</div>
        </div>
        <div class="stat">
          <div class="stat-value">100+</div>
          <div class="stat-desc">articles published</div>
        </div>
      </div>

      <div class="hero-cta">
        <a href="#work" class="cta-link">
          Explore Work
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
        </a>
        <div class="cta-dot"></div>
        <a href="#content" class="cta-subtle">Read Writing</a>
      </div>
    </div>

    <!-- RIGHT -->
    <div class="hero-right">
      <div class="portrait-container">
        <div class="portrait"></div>
        <div class="portrait-ring"></div>
      </div>
      <div class="bio-card">
        <div class="bio-name">Alex Chen</div>
        <div class="bio-role">Developer / Writer / Creator</div>
        <div class="bio-hairline"></div>
        <div class="bio-desc">Shipping AI-powered products as an independent maker. Writing about the craft of building.</div>
      </div>
    </div>

    <!-- RIGHT MARGIN -->
    <div class="margin-right">
      <div class="year">2026</div>
    </div>
  </div>

  <!-- BOTTOM ZEN -->
  <div class="bottom-zen">
    <div class="zen-line"></div>
    <div class="zen-text">Design as inquiry</div>
    <div class="zen-line"></div>
  </div>

</body>
</html>