serious-shit/gallery.html at main · willbearfruits/serious-shit · 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gallery | Serious S.H.I.T.</title>
  <meta name="description" content="A visual archive of circuit-bent toys, custom pedals, and workshop creations.">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://willbearfruits.github.io/serious-shit/gallery.html">
  <meta property="og:title" content="Gallery | Serious S.H.I.T.">
  <meta property="og:description" content="A visual archive of circuit-bent toys, custom pedals, and workshop creations.">
  <meta property="og:image" content="https://willbearfruits.github.io/serious-shit/images/products/fuzilator.jpg">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://willbearfruits.github.io/serious-shit/gallery.html">
  <meta property="twitter:title" content="Gallery | Serious S.H.I.T.">
  <meta property="twitter:description" content="A visual archive of circuit-bent toys, custom pedals, and workshop creations.">
  <meta property="twitter:image" content="https://willbearfruits.github.io/serious-shit/images/products/fuzilator.jpg">

  <script>
    (function(){
      var lang = localStorage.getItem('sshit-lang') || 'he';
      document.documentElement.setAttribute('data-lang', lang);
      document.documentElement.setAttribute('dir', lang === 'he' ? 'rtl' : 'ltr');
    })();
  </script>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <div class="container header-bar">
      <a class="logo" href="index.html">SERIOUS S.H.I.T.</a>
      <span class="logo-sub">Haifa, IL</span>
      <button class="menu-toggle" aria-label="Menu">///</button>
      <nav class="nav" id="main-nav">
        <a href="workshops.html"><span class="lang-en">Workshops</span><span class="lang-he">קורסים</span></a>
        <a href="sales.html"><span class="lang-en">Gear</span><span class="lang-he">ציוד</span></a>
        <a href="gallery.html" class="active"><span class="lang-en">Gallery</span><span class="lang-he">גלריה</span></a>
        <a href="about.html"><span class="lang-en">About</span><span class="lang-he">אודות</span></a>
        <a href="contact.html"><span class="lang-en">Contact</span><span class="lang-he">צור קשר</span></a>
        <button class="theme-toggle" aria-label="Toggle theme"></button>
        <button class="lang-toggle" aria-label="Toggle language">EN/HE</button>
      </nav>
    </div>
  </header>

  <main class="container">

    <div class="page-header">
      <div class="lang-en">
        <p class="section-label">// LOGS: 2024-2026</p>
        <h1 class="page-title">Visual Archive</h1>
        <p class="page-desc">Documentation of builds, circuit bending experiments, and workshop outcomes.</p>
      </div>
      <div class="lang-he">
        <p class="section-label">// תיעוד: 2024-2026</p>
        <h1 class="page-title">ארכיון ויזואלי</h1>
        <p class="page-desc">תיעוד של בניות, ניסויי כיפוף מעגלים, ותוצרי קורסים.</p>
      </div>
    </div>

    <!-- Gallery Grid -->
    <div class="gallery-grid">
      <div class="gallery-item" onclick="openLightbox(0)">
        <img src="images/gallery/fuzilator-duo.png" alt="Fuzilator PukeMachine Duo" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">Fuzilator PukeMachine - Red & Black Editions</span>
          <span class="lang-he">פוזילטור פיוק-משין - מהדורות אדום ושחור</span>
        </div>
      </div>
      <div class="gallery-item" onclick="openLightbox(1)">
        <img src="images/gallery/esp32-synth-oled.png" alt="ESP32 Synth with OLED" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">ESP32 Synth Module with OLED Display</span>
          <span class="lang-he">מודול סינת' ESP32 עם מסך OLED</span>
        </div>
      </div>
      <div class="gallery-item" onclick="openLightbox(2)">
        <img src="images/gallery/fuzilator-glow-knobs.png" alt="Fuzilator Glow Knobs" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">Fuzilator with Glow-in-Dark Knobs</span>
          <span class="lang-he">פוזילטור עם כפתורים זוהרים בחושך</span>
        </div>
      </div>
      <div class="gallery-item" onclick="openLightbox(3)">
        <img src="images/gallery/shit-pedal-red.png" alt="S.H.I.T. Pedal Red" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">S.H.I.T. Pedal - "Don't Be Jealous"</span>
          <span class="lang-he">פדאל S.H.I.T. - "אל תהיו מקנאים"</span>
        </div>
      </div>
      <div class="gallery-item" onclick="openLightbox(4)">
        <img src="images/gallery/blasting-caps-pedal.png" alt="Blasting Caps Pedal" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">Blasting Caps - Vintage Aesthetic</span>
          <span class="lang-he">בלאסטינג קאפס - אסתטיקה וינטאג'</span>
        </div>
      </div>
      <div class="gallery-item" onclick="openLightbox(5)">
        <img src="images/gallery/pedal-live-stage.png" alt="Pedal on Stage" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">Live on Stage</span>
          <span class="lang-he">על הבמה</span>
        </div>
      </div>
      <div class="gallery-item" onclick="openLightbox(6)">
        <img src="images/gallery/fuzilator-pcb-design.png" alt="Fuzilator PCB Design" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">Fuzilator PCB Design</span>
          <span class="lang-he">עיצוב PCB פוזילטור</span>
        </div>
      </div>
      <div class="gallery-item" onclick="openLightbox(7)">
        <img src="images/gallery/pcb-batch-production.png" alt="PCB Batch Production" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">PCB Batch Production</span>
          <span class="lang-he">ייצור אצווה של מעגלים</span>
        </div>
      </div>
      <div class="gallery-item" onclick="openLightbox(8)">
        <img src="images/gallery/hand-pcb-cad.png" alt="HAND PCB CAD Design" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">"HAND" - PCB Art Design</span>
          <span class="lang-he">"HAND" - עיצוב אמנות PCB</span>
        </div>
      </div>
      <div class="gallery-item" onclick="openLightbox(9)">
        <img src="images/gallery/cnc-milled-pcb.png" alt="CNC Milled PCB" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">CNC Milled Copper PCB</span>
          <span class="lang-he">מעגל נחושת מכורסם ב-CNC</span>
        </div>
      </div>
      <div class="gallery-item" onclick="openLightbox(10)">
        <img src="images/gallery/cnc-machine-milling.png" alt="CNC Machine at Work" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">CNC Machine in Action</span>
          <span class="lang-he">מכונת CNC בפעולה</span>
        </div>
      </div>
      <div class="gallery-item" onclick="openLightbox(11)">
        <img src="images/gallery/micro-pcb-coin-scale.png" alt="Micro PCB Scale" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">Micro PCB - Coin for Scale</span>
          <span class="lang-he">PCB מיקרו - מטבע להשוואה</span>
        </div>
      </div>
      <div class="gallery-item" onclick="openLightbox(12)">
        <img src="images/gallery/breadboard-prototype.png" alt="Breadboard Prototype" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">Breadboard Prototyping</span>
          <span class="lang-he">אב-טיפוס על ברדבורד</span>
        </div>
      </div>
      <div class="gallery-item" onclick="openLightbox(13)">
        <img src="images/gallery/enclosure-assembly.png" alt="Enclosure Assembly" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">Workshop - Enclosure Assembly</span>
          <span class="lang-he">סדנה - הרכבת מארז</span>
        </div>
      </div>
      <div class="gallery-item" onclick="openLightbox(14)">
        <img src="images/gallery/pedal-build-workshop.png" alt="Pedal Building Workshop" loading="lazy">
        <div class="gallery-item-caption">
          <span class="lang-en">Workshop - Pedal Building</span>
          <span class="lang-he">סדנה - בניית פדאל</span>
        </div>
      </div>
    </div>

    <!-- Lightbox -->
    <div id="lightbox" class="lightbox" onclick="closeLightbox()">
      <button class="lightbox-close" onclick="closeLightbox()">&times;</button>
      <button class="lightbox-nav lightbox-prev" onclick="event.stopPropagation(); navigateLightbox(-1)">&lt;</button>
      <button class="lightbox-nav lightbox-next" onclick="event.stopPropagation(); navigateLightbox(1)">&gt;</button>
      <div class="lightbox-content" onclick="event.stopPropagation()">
        <img id="lightbox-img" src="" alt="">
        <div id="lightbox-caption" class="lightbox-caption"></div>
      </div>
    </div>

    <script>
      var galleryImages = [
        { src: 'images/gallery/fuzilator-duo.png', en: 'Fuzilator PukeMachine - Red & Black Editions', he: 'פוזילטור פיוק-משין - מהדורות אדום ושחור' },
        { src: 'images/gallery/esp32-synth-oled.png', en: 'ESP32 Synth Module with OLED Display', he: 'מודול סינת\' ESP32 עם מסך OLED' },
        { src: 'images/gallery/fuzilator-glow-knobs.png', en: 'Fuzilator with Glow-in-Dark Knobs', he: 'פוזילטור עם כפתורים זוהרים בחושך' },
        { src: 'images/gallery/shit-pedal-red.png', en: 'S.H.I.T. Pedal - "Don\'t Be Jealous"', he: 'פדאל S.H.I.T. - "אל תהיו מקנאים"' },
        { src: 'images/gallery/blasting-caps-pedal.png', en: 'Blasting Caps - Vintage Aesthetic', he: 'בלאסטינג קאפס - אסתטיקה וינטאג\'' },
        { src: 'images/gallery/pedal-live-stage.png', en: 'Live on Stage', he: 'על הבמה' },
        { src: 'images/gallery/fuzilator-pcb-design.png', en: 'Fuzilator PCB Design', he: 'עיצוב PCB פוזילטור' },
        { src: 'images/gallery/pcb-batch-production.png', en: 'PCB Batch Production', he: 'ייצור אצווה של מעגלים' },
        { src: 'images/gallery/hand-pcb-cad.png', en: '"HAND" - PCB Art Design', he: '"HAND" - עיצוב אמנות PCB' },
        { src: 'images/gallery/cnc-milled-pcb.png', en: 'CNC Milled Copper PCB', he: 'מעגל נחושת מכורסם ב-CNC' },
        { src: 'images/gallery/cnc-machine-milling.png', en: 'CNC Machine in Action', he: 'מכונת CNC בפעולה' },
        { src: 'images/gallery/micro-pcb-coin-scale.png', en: 'Micro PCB - Coin for Scale', he: 'PCB מיקרו - מטבע להשוואה' },
        { src: 'images/gallery/breadboard-prototype.png', en: 'Breadboard Prototyping', he: 'אב-טיפוס על ברדבורד' },
        { src: 'images/gallery/enclosure-assembly.png', en: 'Workshop - Enclosure Assembly', he: 'סדנה - הרכבת מארז' },
        { src: 'images/gallery/pedal-build-workshop.png', en: 'Workshop - Pedal Building', he: 'סדנה - בניית פדאל' }
      ];
      var currentIndex = 0;

      function getLang() {
        return document.documentElement.dataset.lang || 'he';
      }

      function openLightbox(index) {
        currentIndex = index;
        var img = galleryImages[index];
        var lang = getLang();
        document.getElementById('lightbox-img').src = img.src;
        document.getElementById('lightbox-caption').textContent = lang === 'he' ? img.he : img.en;
        document.getElementById('lightbox').classList.add('active');
        document.body.style.overflow = 'hidden';
      }

      function closeLightbox() {
        document.getElementById('lightbox').classList.remove('active');
        document.body.style.overflow = '';
      }

      function navigateLightbox(direction) {
        currentIndex = (currentIndex + direction + galleryImages.length) % galleryImages.length;
        var img = galleryImages[currentIndex];
        var lang = getLang();
        document.getElementById('lightbox-img').src = img.src;
        document.getElementById('lightbox-caption').textContent = lang === 'he' ? img.he : img.en;
      }

      document.addEventListener('keydown', function(e) {
        if (!document.getElementById('lightbox').classList.contains('active')) return;
        if (e.key === 'Escape') closeLightbox();
        if (e.key === 'ArrowLeft') navigateLightbox(-1);
        if (e.key === 'ArrowRight') navigateLightbox(1);
      });
    </script>

  </main>

  <footer>
    <div class="container footer-grid">
      <div>
        <p class="footer-brand">SERIOUS S.H.I.T.</p>
        <p class="footer-geo">Haifa, Israel</p>
        <p class="footer-motto">Nothing Is Holy.</p>
      </div>
      <nav class="footer-nav">
        <a href="workshops.html"><span class="lang-en">Workshops</span><span class="lang-he">קורסים</span></a>
        <a href="sales.html"><span class="lang-en">Gear</span><span class="lang-he">ציוד</span></a>
        <a href="gallery.html"><span class="lang-en">Gallery</span><span class="lang-he">גלריה</span></a>
        <a href="about.html"><span class="lang-en">About</span><span class="lang-he">אודות</span></a>
        <a href="contact.html"><span class="lang-en">Contact</span><span class="lang-he">צור קשר</span></a>
      </nav>
      <div class="footer-social">
        <a href="https://www.instagram.com/shitisizers/" target="_blank" rel="noopener noreferrer">Instagram</a>
        <a href="https://www.patreon.com/Seriousshit" target="_blank" rel="noopener noreferrer">Patreon</a>
        <a href="https://wa.me/972539263808" target="_blank" rel="noopener noreferrer">WhatsApp</a>
      </div>
      <p class="footer-copy lang-en">&copy; 2026 Serious S.H.I.T. // Nothing Is Holy.</p>
      <p class="footer-copy lang-he">&copy; 2026 סיריוס ש.י.ט. // שום דבר לא קדוש.</p>
    </div>
  </footer>

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