Tech-Tac.github.io/index.html at master · Tech-Tac/Tech-Tac.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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta name="title" content="Tech-Tac" />
    <meta name="author" content="Tech-Tac" />
    <meta name="description" content="My projects and how to contact me." />
    <meta name="theme-color" content="#007fff" />
    <meta name="color-scheme" content="light dark" />

    <link rel="canonical" href="https://tech-tac.github.io/" />
    <meta property="og:url" content="https://tech-tac.github.io/" />
    <meta property="og:site_name" content="Tech-Tac" />
    <meta property="og:image" content="https://tech-tac.github.io/avatar.png" />
    <meta name="twitter:card" content="summary">

    <title>Tech-Tac</title>

    <link rel="stylesheet" href="style.css" />
    <link rel="icon" href="favicon.ico">
    <link rel="shortcut icon" href="avatar.png" type="image/png" />
  </head>
  <body>
    <header id="header">
      <input type="checkbox" id="theme-toggle" title="Toggle theme" />
      <img src="avatar.png" alt="Avatar" height="128pt" width="128pt" loading="lazy" />
      <h1 style="margin-block: 0">I'm&nbsp;<span class="tech-tac">Tech-Tac</span>.</h1>
      <p>An avid JavaScript enjoyer.</p>
      <div class="button-group" id="contact">
        <a href="mailto:im.tech.tac@gmail.com"><button class="email">📧&nbsp; E-mail</button></a>
        <a href="https://github.com/Tech-Tac"><button class="github">🐙&nbsp; GitHub</button></a>
        <a href="https://discord.gg/Mn6Wktwqcs" title="Tech-Tac's Lab (Discord Server)"><button class="discord">💬&nbsp; Discord</button></a>
        <a href="https://youtube.com/@Tech-Tac"><button class="youtube">▶️&nbsp; YouTube</button></a>
      </div>
      <hr />
    </header>
    <div id="messages" class="wrapper">
      <section id="kao-banner">
        <h3>Keep Android Open!</h3>
        <p>
          Starting September 2026, Google will require mandatory developer registration to publish apps even outside the Play Store,
          giving Google unfair control over what runs on your device while impacting developer privacy and user freedom.
          <br>
          Together, we can push this change to keep Android an open ecosystem.
        </p>

        <div class="button-group">
          <a href="https://keepandroidopen.org/"><button class="primary">Learn More</button></a>
        </div>
      </section>
    </div>

    <main>
      <h2 id="projects">My Projects</h2>
      <div class="wrapper">
        <section>
          <img src="banners/logic_gates.png" alt="A 1-bit full-adder built with the Logic Gates simulator." />
          <h3>Logic Gates</h3>
          <p>A simple logic gate circuit simulator.</p>
          <div class="button-group">
            <a href="https://tech-tac.github.io/logic-gates"><button class="primary">⚡&nbsp; Try</button></a>
            <a href="https://www.github.com/Tech-Tac/logic-gates" target="_blank"><button>Source</button></a>
          </div>
        </section>
        <section>
          <img src="banners/cargame.png" alt="Pixelated car drifting with retro artifacts." />
          <h3>CarGame</h3>
          <p>A little retro car to drive around aimlessly.</p>
          <div class="button-group">
            <a href="https://tech-tac.github.io/CarGame"><button class="primary">⚡&nbsp; Try</button></a>
            <a href="https://www.github.com/Tech-Tac/CarGame" target="_blank"><button>Source</button></a>
          </div>
        </section>
        <section>
          <img src="banners/cubes.png" alt="Three isometric cubes of different colors." />
          <h3>Cubes</h3>
          <p>2.5D voxel rendering via CSS.</p>
          <div class="button-group">
            <a href="https://tech-tac.github.io/cubes"><button class="primary">⚡&nbsp; Try</button></a>
            <a href="https://www.github.com/Tech-Tac/cubes" target="_blank"><button>Source</button></a>
          </div>
        </section>
        <section>
          <img src="banners/loading.png" alt="A circular loading bar surrounded by progress bits." />
          <h3>Loading...</h3>
          <p>A Progressbar95 clone.</p>
          <div class="button-group">
            <a href="https://tech-tac.github.io/loading"><button class="primary">⚡&nbsp; Try</button></a>
            <a href="https://www.github.com/Tech-Tac/loading" target="_blank"><button>Source</button></a>
          </div>
        </section>
        <section>
          <img src="banners/button.png" alt="A tempting-looking button..." />
          <h3>Button</h3>
          <p>Click as many buttons as possible!</p>
          <div class="button-group">
            <a href="https://tech-tac.github.io/button"><button class="primary">⚡&nbsp; Try</button></a>
            <a href="https://www.github.com/Tech-Tac/button" target="_blank"><button>Source</button></a>
          </div>
        </section>
        <section>
          <img src="banners/coming_soon.png" alt="👀" />
          <h3>More Coming Soon!</h3>
          <p>Stay tuned for more.</p>
        </section>
      </div>
    </main>
    <footer>🟢 Existing since 2024</footer>
  </body>
</html>