wizardloop.github.io/src/pages/about.astro at main · WizardLoop/wizardloop.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
---
import Base from '../layouts/Base.astro';
import Icon from '../components/Icon.astro';
import MotionArt from '../components/MotionArt.astro';
import { site } from '../config/site';
import profile from '../../public/media/profile/profile.json';
---

<Base
  title="About me"
  description="I'm WizardLoop, an independent designer, illustrator, animator and developer. I explore the space between playful visuals and useful software."
  profile
>
  <section class="page-intro wrap">
    <p class="eyebrow">THE HUMAN BEHIND THE MAGIC</p>
    <h1>
      A curious mind.
      <br />
      <span class="outlined-word">An open notebook.</span>
    </h1>
  </section>
  <section class="about-page-grid wrap">
    <div class="about-profile comic-panel">
      <MotionArt
        name="silver-grimoire"
        alt="A silver infinity emblem with engraved details and glinting highlights"
        eager
      />
      <div class="profile-detail">
        <div class="profile-media">
          <img
            data-profile-image
            src={profile.avatar || '/media/profile/avatar.jpg'}
            width="96"
            height="96"
            alt="My public profile artwork"
          />
        </div>
        <div>
          <strong>WizardLoop</strong>
          <span>Design, motion & code</span>
        </div>
      </div>
    </div>
    <div class="prose">
      <h2>Hi, I'm WizardLoop.</h2>
      <p class="lead">
        I work where design, animation and software meet. I like giving ideas a
        personality, then finding a way to make them work.
      </p>
      <p>
        I'm an independent designer, illustrator, animator and developer. My
        practice moves between expressive characters, visual identities, looping
        animation, Telegram bots and open-source tools.
      </p>
      <p>
        Sometimes that means a tiny animated sticker. Sometimes it's a tool that
        makes someone else's day a little easier. Both start with the same
        question: what could this become?
      </p>
      <blockquote>{profile.bio}</blockquote>
      <div class="inline-actions">
        <a class="button" href={site.links.telegram}>
          <Icon name="telegram" />
          Say hello
        </a>
        <a class="text-link" href={site.links.github}>
          <Icon name="github" />
          Look inside my GitHub
        </a>
      </div>
    </div>
  </section>
  <section class="section wrap">
    <div class="section-heading">
      <h2>
        Different tools.
        <br />
        Same <span class="marker-word">curiosity.</span>
      </h2>
    </div>
    <div class="practice-grid">
      <article>
        <Icon name="sparkle" size={34} />
        <h3>Design & illustration</h3>
        <p>Characters, visual details and a little world-building.</p>
      </article>
      <article>
        <Icon name="play" size={34} />
        <h3>Motion & animation</h3>
        <p>Expressive movement, playful timing and unexpected loops.</p>
      </article>
      <article>
        <Icon name="code" size={34} />
        <h3>Software & open source</h3>
        <p>Telegram bots, practical tools and code I can share.</p>
      </article>
    </div>
  </section>
</Base>