claude-directory/templates/premium/nextjstemplates/tailwind-nextjs-starter-blog/projects.html at main · pulkitxm/claude-directory · 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Projects - Next.js Starter Blog</title>
  <link rel="stylesheet" href="styles.css" />
  <script>(function(){var s=localStorage.getItem('theme');var p=window.matchMedia('(prefers-color-scheme: dark)').matches;if(s==='dark'||(s===null&&p))document.documentElement.classList.add('dark');})();</script>
</head>
<body>

  <header class="site-header">
    <div class="site-wrapper">
      <div class="inner">
        <a href="index.html" class="logo-link">
          <svg class="logo-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C8 2 4 5 4 9c0 5.25 8 13 8 13s8-7.75 8-13c0-4-4-7-8-7z"/><circle cx="12" cy="9" r="2.5" fill="currentColor" stroke="none"/></svg>
          TailwindBlog
        </a>
        <nav class="desktop-nav">
          <a href="index.html">Home</a>
          <a href="blog.html">Blog</a>
          <a href="tags.html">Tags</a>
          <a href="projects.html" class="active">Projects</a>
          <a href="about.html">About</a>
        </nav>
        <div class="header-actions">
          <a href="blog.html" class="icon-btn" title="Search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg></a>
          <button class="icon-btn" data-theme-toggle title="Toggle dark mode">
            <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
            <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
          </button>
          <button class="icon-btn hamburger-btn" data-hamburger><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg></button>
        </div>
      </div>
    </div>
  </header>

  <div class="mobile-nav-overlay" data-mobile-nav>
    <button class="icon-btn mobile-nav-close" data-mobile-close><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 18L18 6M6 6l12 12"/></svg></button>
    <nav class="mobile-nav-links">
      <a href="index.html">Home</a><a href="blog.html">Blog</a><a href="tags.html">Tags</a><a href="projects.html">Projects</a><a href="about.html">About</a>
    </nav>
  </div>

  <main>
    <div class="site-wrapper">
      <div class="page-content">
        <h1 class="page-title">Projects</h1>
        <p style="color: var(--color-text-secondary); margin-bottom: 2rem;">Showcase your projects with a hero image (with the <code style="background: var(--color-bg-surface); padding: 0.1em 0.4em; border-radius: 0.25rem; font-size: 0.875em;">projectsData.js</code> file).</p>

        <div class="projects-grid">

          <div class="project-card">
            <div class="project-card-img-placeholder" style="background: linear-gradient(135deg, #4285f4, #ea4335, #fbbc05, #34a853); font-size: 3.5rem;">
              🔍
            </div>
            <div class="project-card-body">
              <h2 class="project-card-title">A Search Engine</h2>
              <p class="project-card-desc">What if you could look up any information in the world? Webpages, images, videos and more. Google has many features to help you find exactly what you're looking for.</p>
              <a href="https://www.google.com" class="project-card-link" rel="noopener" target="_blank">
                Learn more
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/></svg>
              </a>
            </div>
          </div>


          <div class="project-card">
            <div class="project-card-img-placeholder" style="background: linear-gradient(135deg, #1e293b, #334155, #475569);">
              ⏱️
            </div>
            <div class="project-card-body">
              <h2 class="project-card-title">The Time Machine</h2>
              <p class="project-card-desc">Imagine being able to travel through time to any point in history or future. With our patented time-machine, you can change the dial to any date, and activate the machine.</p>
              <a href="blog/the-time-machine.html" class="project-card-link">
                Learn more
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <footer class="site-footer">
    <div class="footer-socials">
      <a href="mailto:address@yoursite.com" title="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></a>
      <a href="https://github.com" title="GitHub" rel="noopener" target="_blank"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg></a>
      <a href="https://twitter.com/Twitter" title="Twitter" rel="noopener" target="_blank"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
    </div>
    <p class="footer-copy">&copy; <span id="footer-year"></span> &middot; Tails Azimuth &middot; <a href="https://github.com/timlrx/tailwind-nextjs-starter-blog" rel="noopener" target="_blank">Tailwind Nextjs Blog Theme</a></p>
  </footer>

  <button class="scroll-top-btn" title="Scroll to top"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 15l-6-6-6 6"/></svg></button>
  <script src="main.js"></script>
  <script>document.getElementById('footer-year').textContent = new Date().getFullYear();</script>
</body>
</html>