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">
|
||||
<block name="content">
|
||||
<h1 class="title has-text-weight-normal is-family-monospace">
|
||||
$ <span id="typed-welcome"></span>
|
||||
</h1>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-weight-normal is-family-monospace">
|
||||
$ <span id="typed-welcome"></span>
|
||||
</h1>
|
||||
|
||||
<hr />
|
||||
<hr />
|
||||
|
||||
<div class="columns">
|
||||
<div class="column content">
|
||||
<markdown>
|
||||
### About Me
|
||||
<div class="columns">
|
||||
<div class="column content">
|
||||
<markdown>
|
||||
### About Me
|
||||
|
||||
Looks like you found my website. I suppose introductions are
|
||||
in order.
|
||||
Looks like you found my website. I suppose introductions are
|
||||
in order.
|
||||
|
||||
My name's Tristan, I'm an avid Dutch-South African software
|
||||
consultant working in the UK. You probably either met me at an
|
||||
open source conference, a hackathon, a badminton session or at
|
||||
a roleplaying table.
|
||||
My name's Tristan, I'm an avid Dutch-South African software
|
||||
consultant working in the UK. You probably either met me at an
|
||||
open source conference, a hackathon, a badminton session or at
|
||||
a roleplaying table.
|
||||
|
||||
If not, well, this is also a great place to "meet" me. Have a
|
||||
nosey!
|
||||
If not, well, this is also a great place to "meet" me. Have a
|
||||
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:
|
||||
</markdown>
|
||||
<!-- Parcel isn't smart enough to pick up cross-page links if they're in markdown blocks -->
|
||||
<!-- <ul> -->
|
||||
<!-- <li> -->
|
||||
<!-- A <a href="~/src/music_sample.html">little web app</a> showing off -->
|
||||
<!-- what WebGL can do in combination with the JavaScript Audio -->
|
||||
<!-- interface. -->
|
||||
<!-- </li> -->
|
||||
<!-- </ul> -->
|
||||
You may find the following interesting though:
|
||||
|
||||
- A [little web app](~/src/music_sample.html) showing
|
||||
off what WebGL can do in combination with the JavaScript
|
||||
Audio interface.
|
||||
</markdown>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
</block>
|
||||
|
||||
<!-- <block name="footer"> -->
|
||||
<!-- <script type="module" src="./index.ts" defer></script> -->
|
||||
<!-- </block> -->
|
||||
</extends>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="no-js" lang="en">
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
@ -14,16 +14,12 @@
|
|||
<title>tlater.net</title>
|
||||
</head>
|
||||
|
||||
<body class="is-dark">
|
||||
<body>
|
||||
<block name="navigation">
|
||||
<include src="lib/html/navigation.html"></include>
|
||||
</block>
|
||||
<!-- <include src="lib/html/message-flash.html"></include> -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<block name="content"></block>
|
||||
</div>
|
||||
</section>
|
||||
<block name="content"></block>
|
||||
|
||||
<block name="footer"></block>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
@import "./_custom-bulma";
|
||||
@import "./_typed";
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#typed-welcome {
|
||||
|
|
|
|||
|
|
@ -1,67 +1,48 @@
|
|||
<extends src="./lib/html/base.html">
|
||||
<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="column">
|
||||
<form id="sendmail" role="form" action="mail.html" method="post">
|
||||
<div class="field">
|
||||
<label class="label" for="mail">Email address</label>
|
||||
<input
|
||||
id="mail"
|
||||
class="input"
|
||||
type="email"
|
||||
placeholder="Your address"
|
||||
name="mail"
|
||||
required
|
||||
/>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<form id="sendmail" role="form" action="mail.html" method="post">
|
||||
<div class="field">
|
||||
<label class="label" for="mail">Email address</label>
|
||||
<input id="mail" class="input" type="email" placeholder="Your address" name="mail" required />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="subject">Subject</label>
|
||||
<input id="subject" class="input" type="text" placeholder="E.g. There's a typo on your home page!" name="subject" autocomplete="off" 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 class="field">
|
||||
<label class="label" for="subject">Subject</label>
|
||||
<input
|
||||
id="subject"
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="E.g. There's a typo on your home page!"
|
||||
name="subject"
|
||||
autocomplete="off"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="column content">
|
||||
<markdown>
|
||||
Any messages you enter here are directly forwarded to me. I aim to
|
||||
respond within a day.
|
||||
|
||||
<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>
|
||||
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 class="field">
|
||||
<div class="control">
|
||||
<button class="button is-link">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
</block>
|
||||
</extends>
|
||||
|
|
|
|||
Reference in a new issue