nuare/about.html at main · arjunab99/nuare · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>About – Nuaré</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[#F5F3EF] text-[#1A1A1A] font-sans">
  <!-- Navbar -->
  <header class="fixed top-0 w-full bg-[#F5F3EF] px-6 md:px-12 py-6 flex justify-between items-center shadow-sm z-50">
    <a href="index.html" class="font-bold text-xl">Nuaré</a>
    <nav class="space-x-4 text-[#999]">
      <a href="index.html" class="hover:text-black">Home</a>
      <a href="about.html" class="hover:text-black">About</a>
      <a href="works.html" class="hover:text-black">Works</a>
      <a href="contact.html" class="hover:text-black">Contact</a>
    </nav>
  </header>

  <!-- About Section -->
  <section class="pt-32 px-6 md:px-12 py-20 max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
    <div class="w-full max-w-md mx-auto">
      <div class="aspect-[4/3] overflow-hidden rounded-2xl shadow-md">
        <img src="./assets/images/profile.jpg" alt="Nuaré Portrait"
             class="w-full h-full object-cover object-center" />
      </div>
    </div>

    <div>
      <h1 class="text-4xl md:text-5xl font-bold mb-6">About Me</h1>
      <p class="text-lg leading-relaxed text-[#1A1A1A]">
        Hi, I’m <strong>Nuaré</strong>. I'm a frontend developer who brings clean designs to life with precise, responsive, and engaging code. Whether it's portfolio sites, landing pages, or complete web experiences, I focus on clarity, usability, and animations that feel just right.
        <br><br>
        I use technologies like HTML, Tailwind CSS, JavaScript (GSAP), and tools like Framer & Figma to build experiences that perform and stand out.
      </p>
    </div>
  </section>

  <!-- Footer -->
  <footer class="text-center text-sm py-12 text-[#999]">
    &copy; 2025 Nuaré. All rights reserved.
  </footer>
</body>
</html>