catcatcatcat.github.io/index.html at main · catcatcatcat/catcatcatcat.github.io · 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixels and Pages | catcatcatcat</title>
    <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500&family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="main-nav">
        <button class="menu-toggle" aria-label="Toggle Menu">☰</button>
        <a href="index.html" class="site-title">Pixels and Pages</a>
        <button class="search-toggle" aria-label="Toggle Search">🔍</button>
    </nav>

    <div class="search-container">
        <div class="search-content">
            <input type="text" id="search-input" placeholder="Search posts...">
            <button class="search-button">Search</button>
        </div>
    </div>

    <div class="menu-overlay"></div>
    <div class="menu-panel">
        <nav class="menu-content">
            <ul class="menu-list">
                <li><a href="index.html" class="menu-item">Home</a></li>
                <li class="menu-category">
                    <span class="category-title">Categories</span>
                    <ul class="submenu">
                        <li><a href="tags/daily.html">Daily</a></li>
                        <li><a href="tags/travel.html">Travel</a></li>
                        <li><a href="tags/review.html">Review</a></li>
                        <li><a href="tags/food.html">Food</a></li>
                        <li><a href="tags/make.html">Make</a></li>
                        <li><a href="tags/anime.html">Anime</a></li>
                        <li><a href="tags/other.html">Other</a></li>
                    </ul>
                </li>
                <li><a href="/about.html" class="menu-item">About</a></li>
                <li><a href="/archive.html" class="menu-item">Archive</a></li>
            </ul>
        </nav>
    </div>
<!-- Tag filter section -->
<div class="filter-section">
    <div class="tag-list"></div>
</div>
    <div class="hero-section">
        <h2 class="hero-title">Writing about cat, life, and everything in between.</h2>
    </div>

    <section class="recipe-categories">
        <div class="tag-container">
            <a href="tags/daily.html" class="tag">DAILY</a>
            <a href="tags/travel.html" class="tag">TRAVEL</a>
            <a href="tags/review.html" class="tag">REVIEW</a>
            <a href="tags/food.html" class="tag">FOOD</a>
            <a href="tags/make.html" class="tag">MAKE</a>
            <a href="tags/anime.html" class="tag">ANIME</a>
            <a href="tags/other.html" class="tag">OTHER</a>
        </div>
    </section>

    <div class="recipes-grid">
        <article class="recipe-card">
            <a href="articles/neo-miku.html" class="card-link"></a>
            <div class="recipe-image" style="background-image: url('images/miku.jpg');"></div>
            <div class="recipe-content">
                <div class="recipe-tags">
                    <span>CYBERPUNK</span>
                    <span>DIGITAL ART</span>
                </div>
                <h2>Neo-Miku: The Future of Virtual Icons</h2>
                <p>A deep dive into the cyberpunk reimagining of Hatsune Miku, exploring how digital art pushes the boundaries between virtual and reality. From classic idol to cyberpunk legend.</p>
                <span class="read-more">READ MORE →</span>
            </div>
        </article>

        <article class="recipe-card">
            <a href="articles/neon-kitchen.html" class="card-link"></a>
            <div class="recipe-image" style="background-image: url('images/pasta.jpg');"></div>
            <div class="recipe-content">
                <div class="recipe-tags">
                    <span>LIFESTYLE</span>
                    <span>PHOTOGRAPHY</span>
                </div>
                <h2>Neon Kitchen: Digital Age Comfort</h2>
                <p>Where traditional comfort meets cyberpunk aesthetics. Exploring how classic dishes like spaghetti become art in the neon-lit kitchens of tomorrow. A visual journey through modern food photography.</p>
                <span class="read-more">READ MORE →</span>
            </div>
        </article>

        <article class="recipe-card">
            <a href="articles/retro-gaming.html" class="card-link"></a>
            <div class="recipe-image" style="background-image: url('images/pixel.png');"></div>
            <div class="recipe-content">
                <div class="recipe-tags">
                    <span>TECH</span>
                    <span>GAMING</span>
                </div>
                <h2>Retro Gaming in the Digital Age</h2>
                <p>Exploring the resurgence of pixel art and retro gaming aesthetics in modern game development. How indie developers are blending old-school charm with cutting-edge technology.</p>
                <span class="read-more">READ MORE →</span>
            </div>
        </article>

        <article class="recipe-card">
            <a href="articles/cyberpunk-anime.html" class="card-link"></a>
            <div class="recipe-image" style="background-image: url('images/cyberpunk.png');"></div>
            <div class="recipe-content">
                <div class="recipe-tags">
                    <span>ANIME</span>
                    <span>REVIEWS</span>
                </div>
                <h2>The Evolution of Cyberpunk Anime</h2>
                <p>From Akira to Ghost in the Shell, and beyond. A comprehensive look at how cyberpunk themes have shaped and continue to influence modern anime storytelling.</p>
                <span class="read-more">READ MORE →</span>
            </div>
        </article>
    </div>

    <footer>
        <p> 2024 Pixels and Pages | Crafted in Neo-Tokyo</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>