Rework website with bulma instead of bootstrap #6
132
src/index.html
132
src/index.html
|
|
@ -1,81 +1,77 @@
|
||||||
<extends src="./lib/html/base.html">
|
<extends src="./lib/html/base.html">
|
||||||
<block name="content">
|
<block name="content">
|
||||||
<h1 class="title has-text-weight-normal is-family-monospace">
|
<section class="section">
|
||||||
$ <span id="typed-welcome"></span>
|
<div class="container">
|
||||||
</h1>
|
<h1 class="title has-text-weight-normal is-family-monospace">
|
||||||
|
$ <span id="typed-welcome"></span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column content">
|
<div class="column content">
|
||||||
<markdown>
|
<markdown>
|
||||||
### About Me
|
### About Me
|
||||||
|
|
||||||
Looks like you found my website. I suppose introductions are
|
Looks like you found my website. I suppose introductions are
|
||||||
in order.
|
in order.
|
||||||
|
|
||||||
My name's Tristan, I'm an avid Dutch-South African software
|
My name's Tristan, I'm an avid Dutch-South African software
|
||||||
consultant working in the UK. You probably either met me at an
|
consultant working in the UK. You probably either met me at an
|
||||||
open source conference, a hackathon, a badminton session or at
|
open source conference, a hackathon, a badminton session or at
|
||||||
a roleplaying table.
|
a roleplaying table.
|
||||||
|
|
||||||
If not, well, this is also a great place to "meet" me. Have a
|
If not, well, this is also a great place to "meet" me. Have a
|
||||||
nosey!
|
nosey!
|
||||||
|
|
||||||
### This Website
|
### This Website
|
||||||
|
|
||||||
There is not a whole lot here at the moment.
|
There is not a whole lot here at the moment.
|
||||||
|
|
||||||
You may find the following interesting though:
|
You may find the following interesting though:
|
||||||
</markdown>
|
|
||||||
<!-- Parcel isn't smart enough to pick up cross-page links if they're in markdown blocks -->
|
- A [little web app](~/src/music_sample.html) showing
|
||||||
<!-- <ul> -->
|
off what WebGL can do in combination with the JavaScript
|
||||||
<!-- <li> -->
|
Audio interface.
|
||||||
<!-- A <a href="~/src/music_sample.html">little web app</a> showing off -->
|
</markdown>
|
||||||
<!-- what WebGL can do in combination with the JavaScript Audio -->
|
</div>
|
||||||
<!-- interface. -->
|
|
||||||
<!-- </li> -->
|
<div class="column content">
|
||||||
<!-- </ul> -->
|
<markdown>
|
||||||
|
### My Work
|
||||||
|
|
||||||
|
I'm a software consultant working for
|
||||||
|
[Codethink](https://www.codethink.co.uk) in Manchester,
|
||||||
|
UK. Our specializaiton is open source software, so this has
|
||||||
|
allowed me to directly contribute to a number of open source
|
||||||
|
projects, notably
|
||||||
|
[BuildStream](https://www.gitlab.com/buildstream/buildstream),
|
||||||
|
an integration tool for large software stacks.
|
||||||
|
|
||||||
|
I've given a couple of talks on it, as well:
|
||||||
|
|
||||||
|
- Build meetup 2017
|
||||||
|
- Build meetup 2018
|
||||||
|
- Build meetup 2019
|
||||||
|
|
||||||
|
Outside of work for Codethink, I'm generally interested in
|
||||||
|
things such as NixOS and other tools that assist maintaining
|
||||||
|
Linux systems - mostly born out of my pursuit of the perfect
|
||||||
|
Linux desktop (feel free to have a browse through my
|
||||||
|
[dotfiles](https://github.com/tlater/dotfiles)).
|
||||||
|
|
||||||
|
I also just enjoy Programming, my core languages currently are
|
||||||
|
Rust, Python, Lisp and JavaScript (including a number of
|
||||||
|
frameworks and tools for these), although I have hopes to
|
||||||
|
eventually reduce these to just Rust ;)
|
||||||
|
|
||||||
|
If you're interested in seeing these things for yourself,
|
||||||
|
visit my [Gitlab](https://gitlab.com/tlater) and
|
||||||
|
[GitHub](https://github.com/tlater) pages.
|
||||||
|
</markdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
<div class="column content">
|
|
||||||
<markdown>
|
|
||||||
### My Work
|
|
||||||
|
|
||||||
I'm a software consultant working for
|
|
||||||
[Codethink](https://www.codethink.co.uk) in Manchester,
|
|
||||||
UK. Our specializaiton is open source software, so this has
|
|
||||||
allowed me to directly contribute to a number of open source
|
|
||||||
projects, notably
|
|
||||||
[BuildStream](https://www.gitlab.com/buildstream/buildstream),
|
|
||||||
an integration tool for large software stacks.
|
|
||||||
|
|
||||||
I've given a couple of talks on it, as well:
|
|
||||||
|
|
||||||
- Build meetup 2017
|
|
||||||
- Build meetup 2018
|
|
||||||
- Build meetup 2019
|
|
||||||
|
|
||||||
Outside of work for Codethink, I'm generally interested in
|
|
||||||
things such as NixOS and other tools that assist maintaining
|
|
||||||
Linux systems - mostly born out of my pursuit of the perfect
|
|
||||||
Linux desktop (feel free to have a browse through my
|
|
||||||
[dotfiles](https://github.com/tlater/dotfiles)).
|
|
||||||
|
|
||||||
I also just enjoy Programming, my core languages currently are
|
|
||||||
Rust, Python, Lisp and JavaScript (including a number of
|
|
||||||
frameworks and tools for these), although I have hopes to
|
|
||||||
eventually reduce these to just Rust ;)
|
|
||||||
|
|
||||||
If you're interested in seeing these things for yourself,
|
|
||||||
visit my [Gitlab](https://gitlab.com/tlater) and
|
|
||||||
[GitHub](https://github.com/tlater) pages.
|
|
||||||
</markdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</block>
|
</block>
|
||||||
|
|
||||||
<!-- <block name="footer"> -->
|
|
||||||
<!-- <script type="module" src="./index.ts" defer></script> -->
|
|
||||||
<!-- </block> -->
|
|
||||||
</extends>
|
</extends>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html class="no-js" lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
|
@ -14,16 +14,12 @@
|
||||||
<title>tlater.net</title>
|
<title>tlater.net</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="is-dark">
|
<body>
|
||||||
<block name="navigation">
|
<block name="navigation">
|
||||||
<include src="lib/html/navigation.html"></include>
|
<include src="lib/html/navigation.html"></include>
|
||||||
</block>
|
</block>
|
||||||
<!-- <include src="lib/html/message-flash.html"></include> -->
|
<!-- <include src="lib/html/message-flash.html"></include> -->
|
||||||
<section class="section">
|
<block name="content"></block>
|
||||||
<div class="container">
|
|
||||||
<block name="content"></block>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<block name="footer"></block>
|
<block name="footer"></block>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
@import "./_custom-bulma";
|
@import "./_custom-bulma";
|
||||||
@import "./_typed";
|
@import "./_typed";
|
||||||
|
|
||||||
html, body {
|
body {
|
||||||
height: 100%;
|
display: flex;
|
||||||
width: 100%;
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#typed-welcome {
|
#typed-welcome {
|
||||||
|
|
|
||||||
|
|
@ -1,67 +1,48 @@
|
||||||
<extends src="./lib/html/base.html">
|
<extends src="./lib/html/base.html">
|
||||||
<block name="content">
|
<block name="content">
|
||||||
<h1 class="title has-text-weight-normal">Contact Me</h1>
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title has-text-weight-normal">Contact Me</h1>
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<form id="sendmail" role="form" action="mail.html" method="post">
|
<form id="sendmail" role="form" action="mail.html" method="post">
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label class="label" for="mail">Email address</label>
|
<label class="label" for="mail">Email address</label>
|
||||||
<input
|
<input id="mail" class="input" type="email" placeholder="Your address" name="mail" required />
|
||||||
id="mail"
|
</div>
|
||||||
class="input"
|
|
||||||
type="email"
|
<div class="field">
|
||||||
placeholder="Your address"
|
<label class="label" for="subject">Subject</label>
|
||||||
name="mail"
|
<input id="subject" class="input" type="text" placeholder="E.g. There's a typo on your home page!" name="subject" autocomplete="off" required />
|
||||||
required
|
</div>
|
||||||
/>
|
|
||||||
|
<div class="field">
|
||||||
|
<label class="label" for="message">Message</label>
|
||||||
|
<textarea id="message" class="textarea" type="text" rows="6" name="message" autocomplete="off" required></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<div class="control">
|
||||||
|
<button class="button is-link">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="column content">
|
||||||
<label class="label" for="subject">Subject</label>
|
<markdown>
|
||||||
<input
|
Any messages you enter here are directly forwarded to me. I aim to
|
||||||
id="subject"
|
respond within a day.
|
||||||
class="input"
|
|
||||||
type="text"
|
|
||||||
placeholder="E.g. There's a typo on your home page!"
|
|
||||||
name="subject"
|
|
||||||
autocomplete="off"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="field">
|
Don't be upset about the form, I want to avoid the spam
|
||||||
<label class="label" for="message">Message</label>
|
publishing your email address brings with it... And minimize
|
||||||
<textarea
|
the amount of mail that doesn't reach me, this form is an
|
||||||
id="message"
|
exception in all my spam filters, you see ;)
|
||||||
class="textarea"
|
</markdown>
|
||||||
type="text"
|
|
||||||
rows="6"
|
|
||||||
name="message"
|
|
||||||
autocomplete="off"
|
|
||||||
required
|
|
||||||
></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="field">
|
|
||||||
<div class="control">
|
|
||||||
<button class="button is-link">Send</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
<div class="column content">
|
|
||||||
<markdown>
|
|
||||||
Any messages you enter here are directly forwarded to me. I aim to
|
|
||||||
respond within a day.
|
|
||||||
|
|
||||||
Don't be upset about the form, I want to avoid the spam
|
|
||||||
publishing your email address brings with it... And minimize
|
|
||||||
the amount of mail that doesn't reach me, this form is an
|
|
||||||
exception in all my spam filters, you see ;)
|
|
||||||
</markdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</block>
|
</block>
|
||||||
</extends>
|
</extends>
|
||||||
|
|
|
||||||
Reference in a new issue