mathetos.github.io/index.html at main · mathetos/mathetos.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta name="description" content="Personal bio site for Matt Cromwell - WordPress professional and entrepreneur" />
  <title id="page-title">Loading...</title>
  <style>
    /* Critical layout CSS */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .bio-container {
      max-width: 680px;
      margin: 3rem auto;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      min-height: calc(100vh - 6rem);
    }

    .profile-header {
      text-align: center;
      padding: 1rem;
    }

    header #gravatar-image {
      width: 128px;
      height: 128px;
      border-radius: 50%;
      margin-bottom: 1rem;
    }

    .social-icons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
      margin-top: 1rem;
    }

    .links-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
    }

    .link-button {
      flex: 1 1 calc(33.333% - 1rem);
      min-width: 200px;
      max-width: 100%;
      box-sizing: border-box;
      text-align: center;
    }

    @media (max-width: 768px) {
      .bio-container {
        max-width: calc(100vw - 3rem);
        margin: 1.5rem;
        padding: 1rem;
        min-height: calc(100vh - 3rem);
      }

      .profile-image {
        width: 96px;
        height: 96px;
      }

      .links-grid {
        flex-direction: column;
      }

      .link-button {
        flex: 1 1 100%;
        min-width: 0;
      }
    }
  </style>
  <link rel="preload" href="styles/core.css" as="style">
  <link id="core-stylesheet" rel="stylesheet" href="styles/core.css" />
  <!-- Theme stylesheet will be injected by main.js -->
  <script src="crypto-js.min.js" defer></script>
  <script src="main.js" defer></script>

</head>
<body>
  <main class="bio-container" role="main">
    <header class="profile-header" role="banner">
      <img id="gravatar-image" alt="Profile picture of Matt Cromwell" class="hovercard" width="128" height="128" />
      <h1 id="profile-name" aria-label="Name"></h1>
      <p id="profile-tagline" class="tagline" aria-label="Tagline"></p>
      <nav class="social-icons" aria-label="Social media links">
        <!-- Social icons will be dynamically inserted here -->
      </nav>
    </header>

    <section class="bio" aria-label="Biography">
      <h2>Bio</h2>
      <div id="bio-text"><!-- Bio will be dynamically inserted here --></div>
    </section>

    <section id="link-section" class="link-section" aria-label="Quick links">
      <h2>Links</h2>
      <div class="links-grid"><!-- Links will be dynamically inserted here --></div>
    </section>

    <section class="blog-section" aria-label="Latest blog post">
      <h2>Latest from my Blog</h2>
      <div class="blog-post">
        <div class="post-content">
          <!-- Latest blog post will be dynamically inserted here -->
          <p>Loading latest post...</p>
        </div>
      </div>
    </section>

    <footer class="footer" role="contentinfo">
      <div class="footer-buttons">
        <a id="contact-button" href="#" class="support-button" aria-label="Contact Me"></a>
        <a id="support-button" href="#" class="support-button" aria-label="Support button"></a>
      </div>
      <div class="credits">
        <p><a href="https://github.com/mathetos/mathetos.github.io">Get your own link in bio page</a></p>
      </p>
      </div>
    </footer>
  </main>
  <script>
  (function() {
    function init() {
      if (typeof Gravatar === 'undefined') {
        return;
      }
      if (typeof Gravatar.init !== 'function') {
        return;
      }
      Gravatar.init('body');
    }
    if (document.readyState !== 'loading') {
      init();
    } else {
      document.addEventListener('DOMContentLoaded', init);
    }
  })();
  </script>
</body>
</html>