wal.dev/index.html at main · walsquared/wal.dev · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="josh-comeau-reset.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>Wal — Frontend (and sometimes Fullstack) Developer</title>
  </head>
  <body>
    <section class="heroSection">
      <h1 class="nameTitle">Wal Wal</h1>
      <p>
        <span>Frontend</span>
        <small>(and sometimes Fullstack)</small>
        <span>Developer</span>
        <small>currently at</small>
        <span>Fellow.app</span>
        <small>and based in</small>
        <span>Montreal</span>
      </p>
    </section>
    <div class="projects">
      <section class="projectSection">
        <div class="projectSectionDemo">
          <div class="fellowVideos">
            <div
              id="fellow-1-container"
              class="videoContainer"
              role="img"
              aria-label="The word 'Doka' spelt out with a cool red-to-blue gradient animated effect."
            >
              <video
                src="project-screenshots/fellow-1.webm"
                autoplay
                loop
                muted
                playsinline
                poster="project-screenshots/fellow-1.webp"
              ></video>
              <img
                alt="The word 'Doka' spelt out with a cool red-to-blue gradient effect"
                src="project-screenshots/fellow-1.webp"
              />
            </div>
            <div
              id="fellow-2-container"
              class="videoContainer"
              role="img"
              aria-label="The word 'Doka' spelt out with a cool red-to-blue gradient animated effect."
            >
              <video
                src="project-screenshots/fellow-2.webm"
                autoplay
                loop
                muted
                playsinline
                poster="project-screenshots/fellow-2.webp"
              ></video>
              <img
                alt="The word 'Doka' spelt out with a cool red-to-blue gradient effect"
                src="project-screenshots/fellow-2.webp"
              />
            </div>
          </div>
        </div>
        <div class="projectSectionDetails">
          <header>
            <h2>Fellow.app</h2>
            <p>React (Typescript) · Django · Figma</p>
          </header>
          <p>
            Working closely with designers to realize static mockups with
            pleasant micro-interactions and delightful animations.
            <br />
            Advocating for accessibility and UX best practices while ensuring
            components are reusable and UI works for all screen sizes.<br />
            Also responsible for building and owning features from bottom to the
            top of the stack.
          </p>
        </div>
      </section>
      <section class="projectSection">
        <div class="projectSectionDemo">
          <div
            id="doka-worms-container"
            class="videoContainer"
            role="img"
            aria-label="The word 'Doka' spelt out with a cool red-to-blue gradient animated effect."
          >
            <video
              src="project-screenshots/doka-worms.webm"
              autoplay
              loop
              muted
              playsinline
              poster="project-screenshots/doka-worms.webp"
            ></video>
            <img
              alt="The word 'Doka' spelt out with a cool red-to-blue gradient effect"
              src="project-screenshots/doka-worms.webp"
            />
          </div>
        </div>
        <div class="projectSectionDetails">
          <header>
            <h2>"Doka" worms</h2>
            <p>HTML Canvas · Typescript</p>
          </header>
          <p>
            Found a cool animation online and thought I could recreate it, but
            better.
          </p>
          <a
            href="https://walsquared.github.io/doka-worms/"
            target="_blank"
            rel="noopener noreferrer"
          >
            Explore ->
          </a>
        </div>
      </section>
      <section class="projectSection">
        <div class="projectSectionDemo">
          <object
            role="img"
            aria-label="A project page from TheCodex, with the title on the left and a graph on the right."
            data="project-screenshots/thecodex.svg"
          ></object>
        </div>
        <div class="projectSectionDetails">
          <header>
            <h2>TheCodex</h2>
            <p>Gatsby.js · Strapi CMS</p>
          </header>
          <p>
            Helped redesign, then developed the website for an online learning
            platform.
          </p>
          <a
            href="https://thecodex.me"
            target="_blank"
            rel="noopener noreferrer"
          >
            Visit ->
          </a>
        </div>
      </section>
    </div>
  </body>
</html>