sabithpocker.github.io/index.html at master · sabithpocker/sabithpocker.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
<!DOCTYPE html>
<html>

<head>
  <!-- Meta tags for search engine optimization -->
  <meta name="description"
    content="Explore interactive generative art, fractals, spirographs, Islamic patterns inspired by Alhambra, and custom web components to create visually stunning designs." />
  <meta name="keywords"
    content="fractals, generative art, spirograph, Islamic patterns, Alhambra, web components, geometric designs, pattern generation, SVG, JavaScript, creative coding, digital art" />
  <meta name="robots" content="index, follow" />
  <meta name="author" content="Sabith Pocker" />

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;300;400;600;700&display=swap"
    rel="stylesheet" />
  <link href="dist/css/style.css" rel="stylesheet" />
  <script type="module" src="dist/js/components/mm-spirograph.js"></script>
  <script type="module" src="dist/js/components/ui-elements/side-bar.js"></script>
  <script type="module" src="dist/js/components/ui-elements/background-audio.js"></script>
  <script type="module" src="dist/js/components/ui-elements/fullscreen-button.js"></script>
  <script type="module" src="dist/js/index.js"></script>
  <title>Markup Monks</title>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-B0BEV3T4NK"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-B0BEV3T4NK');
  </script>
</head>

<body>
  <div class="content" data-content>
    <side-bar></side-bar>
    <section class="highlight">
      <header class="highlight__header">
        <h1 class="highlight__main-header">Markup Monks</h1>
        <h5 class="highlight__sub-header">Code + Design</h5>
      </header>
      <div class="highlight__items">
        <mm-spirograph class="highlight__item spirograph--normal" fixed-circle-radius="690.2810128000001"
          moving-circle-radius="2.4890719999899353" moving-circle-locus-length="616.4489008" repeat-count="30"
          density="0.01" frozen="true" frozen="true" data-spirograph="middle"></mm-spirograph>
      </div>
    </section>
    <background-audio audio-src="paperback.mp3" attribution-text="Audio by bensound" /></background-audio>
    <fullscreen-button></fullscreen-button>
  </div>
</body>

</html>