stilic.fr/index.html at main · stilic/stilic.fr · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Stilic's Online Litter</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"
    />
    <style>
      body {
        font-family: "DM Sans", sans-serif;
        background-color: #305b4b;
        color: white;
        max-width: 700px;
        margin: auto;
        padding: 15px 25px 0 25px;
      }
      a {
        color: rgb(0, 230, 80);
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      img {
        width: 50%;
        max-width: 225px;
        height: auto;
      }
      ol,
      ul {
        padding: 0;
        margin: 0;
        display: inline-block;
        text-align: left;
      }
      header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 2em;
      }
      .logo,
      .logo-sub {
        color: black;
      }
      .logo {
        position: relative;
        padding: 0 10px 0 10px;
        font-size: 2em;
        background-color: #ff6a00;
        box-shadow: 4px 4px 0px 0px #ffd800, 8px 8px 0px 0px #ff0000;
      }
      .logo-sub {
        position: relative;
        right: 80px;
        top: 30px;
        font-size: 1.75em;
      }
      @media only screen and (max-width: 600px) {
        header {
          flex-direction: column;
          align-items: center;
          gap: 20px;
          margin-bottom: 0;
        }
        .logo {
          left: 35px;
        }
        .logo-sub {
          right: 45px;
        }
      }
      main,
      footer {
        text-align: center;
      }
      .avatar {
        border-radius: 25%;
      }
    </style>
  </head>
  <body>
    <header>
      <div>
        <span class="logo">Stilic</span>
        <span class="logo-sub">(online litter)</span>
      </div>
      <p id="navbar">
        <a href="/">Home</a> /
        <a href="https://github.com/Stilic/stilic.fr">Source code</a>
      </p>
    </header>
    <main>
      <img class="avatar" src="avatar.png" alt="My avatar" />
      <h1>Hey friend.</h1>
      <p>
        Welcome to my personal webpage!
      </p>
      <h2>About me</h2>
      <p>
        I'm a 19 years old amateur coder that loves experimenting width random
        things when bored. I am french and I have autism (<b>A</b>utism
        <b>S</b>pectrum <b>D</b>isorder). I am a huge fan of cats and Sonic The Hedgehog too.
      </p>
      <h3>My interests</h3>
      <ul>
        <li>Programming</li>
        <li>Reading (especially technical content)</li>
        <li>Drawing (kinda)</li>
        <li>Probably more as I continue to discover myself...</li>
      </ul>
      <h2>Contact</h2>
      <ul>
        <li><a href="https://codeberg.org/stilic">Codeberg</a></li>
        <li><a href="https://github.com/Stilic">GitHub</a></li>
        <li><a href="https://social.oss.zone/stilic">Fediverse</a></li>
        <li><a href="https://x.com/stilic_dev">Twitter / X</a></li>
        <li><a href="ircs://irc.libera.chat/stilic">IRC</a></li>
        <li><a href="https://matrix.to/#/@stilic:oss.zone">Matrix</a></li>
        <li><a href="xmpp:stilic@oss.zone?omemo-sid-1241474289=dd79937208b671b93a4a99e9976ada2a71f618fd38fee2432dab19d02af64c6b">XMPP</a></li>
      </ul>
    </main>
    <footer>
      <p>© 2026 Ruin What You Want</p>
    </footer>
  </body>
</html>