-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfun.html
193 lines (167 loc) · 10.1 KB
/
fun.html
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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Many web projects are complicated, with multiple dependencies. FUN.HTML is simple for anyone to try, whether you're a beginner or an expert." />
<meta property="og:type" content="website" />
<meta property="og:title" content="Justin Jackson's FUN.HTML" />
<meta property="og:description" content="Many web projects are complicated, with multiple dependencies. FUN.HTML is simple for anyone to try, whether you're a beginner or an expert." />
<meta property="og:url" content="https://justinjackson.ca/fun.html" />
<meta property="og:site_name" content="Justin Jackson" />
<meta property="og:locale" content="en_US" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@mijustin" />
<meta name="twitter:title" content="Justin Jackson's FUN.HTML" />
<meta name="twitter:description" content="Many web projects are complicated, with multiple dependencies. FUN.HTML is simple for anyone to try, whether you're a beginner or an expert." />
<meta property="og:image" content="https://justinjackson.ca/justin-jackson-2023-lights-purple-pink.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="1200" />
<meta name="twitter:image" content="https://justinjackson.ca/justin-jackson-2023-lights-purple-pink.jpg" />
<meta name="twitter:image:alt" content="Justin Jackson in 2023, pink shirt, lights, purple background" />
<meta property="og:image:alt" content="Justin Jackson in 2023, pink shirt, lights, purple background" />
<title>Justin Jackson's FUN.HTML</title>
<script>
window.addEventListener('keydown', function(e) {
var character = document.getElementById('character');
var table = document.querySelector('.table');
switch(e.key) {
case 'ArrowRight':
character.style.left = (character.offsetLeft + 10) + 'px';
break;
case 'ArrowLeft':
character.style.left = (character.offsetLeft - 10) + 'px';
break;
case ' ':
table.classList.add('flip');
setTimeout(function() {
table.classList.remove('flip');
table.style.transform = "rotate(0deg)";
}, 400);
break;
}
});
</script>
<style>
body {
font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 1em; line-height: 1.5em; margin: 2em auto; max-width: 35em; padding-bottom:5em;
}
img {
width:100%;
}
pre {
background: black; color: #ffffff; overflow:auto; width:auto; border-radius: 5px; padding:5px;
}
.fun {
background-color: pink;
border-radius:5px;
padding:1px;
font-weight: bold;
}
.note {
background-color: lemonchiffon;
padding: 5px;
}
.parent {
font-size: 2em ;
position: relative;
margin-top: 20px;
}
#character {
position: absolute;
display: inline-block;
}
.table {
position: absolute;
display: inline-block;
width: 100px;
left: 160px;
top: 0px;
}
.table.flip {
animation-name: flip-table;
animation-duration: 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes flip-table {
0% {left:65px; top:0px; transform: rotate(0deg)}
15% {left:85px; top:10px; transform: rotate(90deg)}
30% {left:105px; top:20px; transform: rotate(180deg)}
45% {left:125px; top:30px; transform: rotate(270deg)}
60% {left:145px; top:40px; transform: rotate(360deg)}
75% {left:165px; top:50px; transform: rotate(450deg)}
100% {left:185px; top:60px; transform: rotate(540deg)}
}
</style>
</head>
<body>
<p class="note"><strong>Note:</strong> I thought I'd use my <span class="fun">FUN.HTML</span> to create a little CV for myself on the web. I'm surprised how often I see young job applicants who don't have a personal website. If that's you, feel free to copy my page here, and follow <a href="https://mijustin.github.io/fun/fun.html">these instructions</a> to put it on the web for free.</p>
<h1 style="font-size: 2.5em;line-height: 1.25;">Hi, I'm Justin Jackson</h1>
<img src="justin-jackson-2023-lights-purple-pink.jpg" alt="Justin Jackson in 2023, pink shirt, lights, purple background" />
<p>I've been building projects online since the 1990s, when I discovered the <a href="https://justinjackson.ca/bbs">BBS scene</a>. I've been working with SaaS companies since 2008, largely in web development and product marketing.</p>
<p>Today, I'm the co-founder of <a href="https://transistor.fm/?via=justin">Transistor</a>, a podcast hosting platform. My partner, Jon, and I have three employees. We think we've built something pretty special, and our customers think so too:</p>
<blockquote>
<span style="color:pink">★★★★★</span><br>
"Transistor is hands-down the best podcast hosting! You can host multiple podcasts easily, and get great help/support getting your podcast syndicated on all the major platforms (apple, spotify, etc). Creating unlimited podcasts is great, you only really pay extra if your podcast is a hit (which seems really fair!) Highly recommended!"
<br>
– Chris Fidao
</blockquote>
<h2>Web projects I've built</h2>
<p>Here are a few examples of my work on the web.</p>
<h3>Transistor web site</h3>
<p>
<strong>URL:</strong> <a href="https://transistor.fm/?via=justin">transistor.fm</a><br>
<strong>Skills used:</strong> HTML, CSS, JavaScript, DevOps, SEO, marketing<br>
<strong>Tech stack:</strong> Laravel, PHP, Statamic CMS, Tailwind CSS, Alpine.js
</p>
<img src="transistor-website-podcast-hosting-by-justin-jackson.jpg" alt="Transistor website design and build by Justin Jackson" />
<p>We had our original website built on top of WordPress. I to build a new version of the site using <a href="https://statamic.com/">Statamic</a> as the CMS.</p>
<p>I built the whole thing in public, and often livestreamed my coding sessions. I published progress updates and tutorials on my <a href="https://youtube.com/justinjackson">YouTube channel</a>:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ri67SK3Qowk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>This project illustrated some of my strengths:</p>
<ol>
<li><strong>Building in public</strong>: by livestreaming and sharing video updates, I was able to get people interested in the overall project. Lots of folks showed up to watch my progress, which brought more awareness to the Transistor brand.</li>
<li><strong>Getting help from the greater community</strong>: the other benefit of working in the open was many web developers showed up to help me as I worked through different roadblocks. At the time, our startup didn't have a lot of money to hire outside help, so this was a creative way to pair program with people who could help.</li>
</ol>
<h3>Write and Destroy</h3>
<p>
<strong>URL:</strong> <a href="https://writeanddestroy.com/">writeanddestroy.com</a><br>
<strong>Skills used:</strong> HTML, CSS, JavaScript, DevOps<br>
<strong>Open source project:</strong> <a href="https://github.com/mijustin/stresswriter">GitHub</a>
</p>
<img src="write-and-destroy.gif" alt="A demo of Write and Destroy" />
<p>Many therapists recommend that their patients write out their thoughts, feelings, and experiences on paper. Then, they recommend burning or shredding the paper. </p>
<p>I wanted to re-create this experience, but digitally.</p>
<p>This is a simple web app that allows you to write out your feelings, thoughts, and anxieties and then "shred" them.</p>
<h3>This is a web page</h3>
<p>
<strong>URL:</strong> <a href="https://justinjackson.ca/words.html">justinjackson.ca/words.html</a><br>
<strong>Skills used:</strong> HTML, publicity<br>
<strong>Open source project:</strong> <a href="https://github.com/mijustin/stresswriter">GitHub</a>
</p>
<img src="this-is-a-web-page.jpg" alt="Words: This is a web page by Justin transistor-website-podcast-hosting-by-justin-jackson" />
<p>This is by far the most popular thing I’ve made. I was reminiscing about the simplicity of the early web, and wrote it in a fit of inspiration.</p>
<p>It's now been viewed hundreds of thousands of times, and has been translated into 29 different languages by readers.</p>
<p>It was featured on <a href="http://www.cbc.ca/radio/spark/322-web-brutalism-millennial-interests-and-more-1.3602286/video-why-brutalism-is-the-hottest-trend-in-web-design-1.3602292">CBC Radio</a>, <a href="https://www.creativebloq.com/netmag/web-industry-warned-don-t-forget-power-words-6135573">Net Magazine</a>, <a href="https://www.smashingmagazine.com/2013/10/strategies-design-marketing-campaigns/">Smashing Magazine</a>, <a href="https://twitter.com/alistapart/status/347778749107945473">A List Apart</a>, The UX Podcast, Rands, T3N Magazine, and books like <a href="https://www.amazon.ca/Making-Websites-Win-Customer-Centric-Methodology-ebook/dp/B076XSCTB2">Making Websites Win</a>.</p>
<p>It was one of the top links on <a href="https://news.ycombinator.com/item?id=5913381">Hacker News</a>.</p>
<h2>Find me on the web</h2>
<p>🐘 <a href="https://mastodon.social/@mijustin">Mastodon</a><br>
🔵 <a href="https://bsky.app/profile/justinjackson.ca">Bluesky</a><br>
🐦 <a href="https://twitter.com/mijustin">Twitter</a><br>
💻 <a href="https://github.com/mijustin">GitHub</a>
</p>
<p>
I blog at <a href="https://justinjackson.ca">justinjackson.ca</a>
</p>
<p>
Cheers,<br>
Justin Jackson
</p>
<p>
PS: if you're feeling sassy, flip the table by hitting spacebar.
</p>
<div class="parent">
<div id="character">(╯°□°）╯</div><div class="table">┬─┬</div>
</div>
</body>
</html>