Add about box, update pages links

This commit is contained in:
Ariejan de Vroom 2015-04-07 11:07:32 +02:00
parent dd3be3be6f
commit e6439c75b9
4 changed files with 100 additions and 22 deletions

View File

@ -5,28 +5,18 @@ title = "About Ariejan"
<img class="avatar" id="about-photo" src="https://0.gravatar.com/avatar/a9bfdd0cc75c857b669c37548b8bfdf9?s=192" />
I'm Ariejan de Vroom and I'm a software engineer. My focus is on back-end systems
using Ruby, Ruby on Rails and Go. In my free time I like to play the piano and
experiment with electronics.
Hey! I'm a software engineer building rock solid back-end systems
using Ruby, Ruby on Rails and Golang. In my free time I like to
play the piano and experiment with electronics.
I live in [Son en Breugel, the Netherlands][1] with my wife and son and I'm currently
working at [Kabisa][3].
This site is static HTML, generated by [Hugo][11]. The theme and content are copyrighted, so there's no public code.
I am available for development, consulting and training. Please get in touch.
<ul id="social">
<li><a href="http://twitter.com/ariejan"><i class="fa fa-twitter"></i></a></li>
<li><a href="mailto:ariejan@ariejan.net"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://ariejan.net/index.xml"><i class="fa fa-rss"></i></a></li>
<li><a href="https://github.com/ariejan"><i class="fa fa-github"></i></a></li>
<li><a href="http://www.linkedin.com/in/ariejan"><i class="fa fa-linkedin"></i></a></li>
</ul>
Check me out on [Twitter][4], [Github][6] or [LinkedIn][5] to get to know me a bit better.
Want to ask me a question? [Get in touch right now][10]
This site is static HTML, generated by [Hugo][11]. The theme and content are copyrighted, so there's
no public code.
[1]: https://www.google.nl/maps/place/Son+en+Breugel/@51.5928283,4.2716786,6z/data=!4m2!3m1!1s0x47c6de5ca934b9d9:0x6259d7f97b28e465?hl=nl
[3]: http://kabisa.nl/
[4]: http://twitter.com/ariejan
[5]: http://www.linkedin.com/in/ariejan
[6]: https://github.com/ariejan
[8]: mailto:ariejan@ariejan.net
[9]: /gpg
[10]: /contact
[11]: http://gohugo.io/

View File

@ -17,6 +17,34 @@
{{ .Content }}
</div>
{{ if eq .Section "posts" }}
<div class="about">
<a name="about"></a>
<img class="avatar" src="https://0.gravatar.com/avatar/a9bfdd0cc75c857b669c37548b8bfdf9?s=100" />
<h4>About</h4>
<p>
Hey! I'm a software engineer building rock solid back-end systems
using Ruby, Ruby on Rails and Golang. In my free time I like to
play the piano and experiment with electronics.
</p>
<p>
I'd love to hear your questions and comments on this article: just
<a href="http://twitter.com/ariejan">mention me on twitter</a> or <a href="mailto:ariejan@ariejan.net">dispatch an email</a>.
Cheers!
</p>
<ul id="social">
<li><a href="http://twitter.com/ariejan"><i class="fa fa-twitter"></i></a></li>
<li><a href="mailto:ariejan@ariejan.net"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://ariejan.net/index.xml"><i class="fa fa-rss"></i></a></li>
<li><a href="https://github.com/ariejan"><i class="fa fa-github"></i></a></li>
<li><a href="http://www.linkedin.com/in/ariejan"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
{{ end }}
{{ if eq .Section "posts" }}
<div class="comments">

View File

@ -22,6 +22,8 @@
<!-- RSS -->
<link href='http://feeds.feedburner.com/ariejan' rel='alternate' title='RSS' type='application/rss+xml'>
<!-- Style -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='/css/outerspace.css' rel='stylesheet' type='text/css'>
</head>
<body>
@ -34,7 +36,7 @@
<li><a href="/talks">talks</a></li>
<li><a href="/gpg">gpg</a></li>
<li><a href="/about">about</a></li>
<li><a href="/contact">contact</a></li>
<li><a href="mailto:ariejan@ariejan.net">contact</a></li>
</ul>
</nav>
</header>

View File

@ -172,6 +172,52 @@ img.avatar {
margin-left: 1em;
}
.about {
background-color: #f9f9f9;
padding: 2em;
margin-bottom: 2em;
}
.about img.avatar {
width: 6.4em;
float: left;
margin: 3em 2em 2em 0;
border: 5px solid #fff;
border-radius: 50%;
}
.about p,
.about ul,
.about h4 {
margin-left: 9em;
}
.about h4 {
text-align: center;
padding-bottom: 1em;
}
ul#social {
list-style: none;
text-align: center;
margin-bottom: 0;
}
ul#social li {
font-size: 1.4em;
list-style: none;
padding: 0 0.2em;
display: inline-block;
}
ul#social li a {
color: #696969;
}
.body ul#social {
text-align: left;
}
@media (min-width: 720px) {
body {
font-size: 16px;
@ -192,3 +238,15 @@ img.avatar {
}
}
@media (max-width: 720px) {
.about img.avatar {
display: none;
}
.about p,
.about ul,
.about h4 {
margin-left: 0;
}
}