sebastian-92.github.io/template.html at main · sebastian-92/sebastian-92.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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html>
  <head>
    <title>Cbass92 - Home</title>
    <style>
      .container {
        display: flex;
        flex-direction: row;
        max-width: 70%;
        margin: auto;
      }

      .about-me {
        flex: 1;
        margin: 20px;
      }

      /* Masonry grid styles */
      .grid {
        margin: 40px auto;
        max-width: 1200px;
        /* Center grid */
      }

      .grid-item {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 20px;
        padding: 18px 16px;
        box-sizing: border-box;
        transition: box-shadow 0.2s;
      }

      .grid-item:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      }

      /* Responsive grid width */
      @media (max-width: 900px) {
        .grid {
          max-width: 98vw;
        }
      }

      /* Remove default table styling for navbar */
      .navbar {
        margin: 0 auto 20px auto;
        width: fit-content;
        background: #f7f7f7;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      }

      .navbar td {
        padding: 8px 18px;
      }

      .navbar a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
      }
    </style>
    <link rel="stylesheet" href="main-styles2.css" />
    <link rel="stylesheet" href="tracks.css" />
    <script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
    <script>
      window.addEventListener("load", (event) => {
        new cursoreffects.fairyDustCursor();
      });
    </script>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <!-- 100% privacy-first analytics -->
    <script
      data-collect-dnt="true"
      async
      src="https://scripts.simpleanalyticscdn.com/latest.js"
    ></script>
  </head>
  <body>
    <script src="oneko.js"></script>
    <header>
      <img width="15%" height="auto" src="welcome.gif" />
      <link href="mailto:indieauth@cbass92.org" rel="me authn" />
    </header>
    <marquee scrollamount="20"><img src="construction.gif" /></marquee>
    <table class="navbar">
      <tr>
        <td><a href="index.html">Home</a></td>
        <td><a href="projects.html">My Links</a></td>
      </tr>
    </table>
    <div
      class="grid"
      data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200, "gutter": 20 }'
    >
          <div class="grid-item grid-item--width2">
        <h2>About me</h2>
        <p>
          Hey there, I'm Cbass92, welcome to my corner of the web! I am a high
          schooler and am really into science, math, and technology. I know a
          fair bit of Javascript and quite a bit of Pythonm and am making my way
          through CS50p, in preparation for CS50.<br />
          I also like to read a lot, some of my favorite books are Eragon, The
          Book Thief, and The Talisman. I use this website for a bunch of random
          projects.
        </p>
      </div>
            <div class="grid-item">
        <h2>About me</h2>
        <p>
          Hey there, I'm Cbass92, welcome to my corner of the web! I am a high
          schooler and am really into science, math, and technology. I know a
          fair bit of Javascript and quite a bit of Pythonm and am making my way
          through CS50p, in preparation for CS50.<br />
          I also like to read a lot, some of my favorite books are Eragon, The
          Book Thief, and The Talisman. I use this website for a bunch of random
          projects.
        </p>
      </div>
      <div class="grid-item">
        <h2>About me</h2>
        <p>
          Hey there, I'm Cbass92, welcome to my corner of the web! I am a high
          schooler and am really into science, math, and technology. I know a
          fair bit of Javascript and quite a bit of Pythonm and am making my way
          through CS50p, in preparation for CS50.<br />
          I also like to read a lot, some of my favorite books are Eragon, The
          Book Thief, and The Talisman. I use this website for a bunch of random
          projects.
        </p>
      </div>
      <div class="grid-item">
        <h2>About me</h2>
        <p>
          Hey there, I'm Cbass92, welcome to my corner of the web! I am a high
          schooler and am really into science, math, and technology. I know a
          fair bit of Javascript and quite a bit of Pythonm and am making my way
          through CS50p, in preparation for CS50.<br />
          I also like to read a lot, some of my favorite books are Eragon, The
          Book Thief, and The Talisman. I use this website for a bunch of random
          projects.
        </p>
      </div>
    </div>
    <img
      src="flames.gif"
      style="
        width: 50%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
      "
    />
    <script
      async
      defer
      src="https://buttons.github.io/buttons.js"
      type="text/javascript"
    ></script>
    <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
    <script>
      kofiWidgetOverlay.draw("cbass92", {
        type: "floating-chat",
        "floating-chat.donateButton.text": "Support Me",
        "floating-chat.donateButton.background-color": "#fcbf47",
        "floating-chat.donateButton.text-color": "#323842",
      });
    </script>
  </body>
</html>