/
index.html
110 lines (102 loc) · 5.59 KB
/
index.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
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Web developer and writer, based in Scotland">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>Shell Bryson</title>
<link rel="stylesheet" href="styles/shellbryson.css">
</head>
<body>
<header class="sb-header">
<h1 class="sb-header__title">Shell Bryson</h1>
<h2 class="sb-header__subtitle">Web Developer and Writer</h2>
<div class="sb-header__copy">
<p>
Edinburgh-resident living in sunny Leith, fascinated by web technology, mobile devices, user interface design and user experience. When not actually building technology, Shell is writing about technology--a writer of Science Fiction novels and an occasional futurist dreamer.
</p>
</div>
</header>
<main class="sb-main">
<section class="sb-persona sb-persona--developer">
<header class="sb-persona__heading">
<h2 class="sb-persona__title">Web Developer</h2>
</header>
<div class="sb-persona__content">
<p>
Experienced web developer with decade+ working on a variety of agency, corporate and freelance projects, specialising in front end, mobile, ux and accessibility.
</p>
<ul class="sb-links">
<li class="sb-links__entry">
<a href="https://sheru.uk" target="_blank" class="sb-link">
<i class="fa fa-pencil-square"></i><span class="sb-link__description"><span class="sb-link__sr">Open Shell's </span>Blog<span class="sb-link__sr"> in a new window.</span></span>
</a>
</li>
<li class="sb-links__entry">
<a href="http://codepen.io/shellbryson/" target="_blank" class="sb-link">
<i class="fa fa-codepen"></i><span class="sb-link__description"><span class="sb-link__sr">View Shell's </span>CodePen<span class="sb-link__sr"> examples in a new window.</span></span>
</a>
</li>
<li class="sb-links__entry">
<a href="https://github.com/shellbryson" target="_blank" class="sb-link">
<i class="fa fa-github"></i> <span class="sb-link__description"><span class="sb-link__sr">Opens Shell's </span>Git<span class="sb-link__sr"> repository of code in a new window.</span</span>
</a>
</li>
<li class="sb-links__entry">
<a href="https://www.linkedin.com/in/shellbryson" target="_blank" class="sb-link">
<i class="fa fa-linkedin-square"></i> <span class="sb-link__description"><span class="sb-link__sr">Opens Shell's </span>LinkedIn<span class="sb-link__sr"> profile in a new window.</span></span>
</a>
</li>
<li class="sb-links__entry">
<a href="https://twitter.com/sherucode" target="_blank" class="sb-link">
<i class="fa fa-twitter-square"></i> <span class="sb-link__description"><span class="sb-link__sr">Visit Shell on Twitter at </span>@sherucode<span class="sb-link__sr"> in a new window.</span></span>
</a>
</li>
</div>
</div>
</section>
<section class="sb-persona sb-persona--writer">
<header class="sb-persona__heading">
<h2 class="sb-persona__title">Writer</h2>
</header>
<div class="sb-persona__content">
<p>
Writer of sci-fi novels. Shell can be found lurking at book festivals and sci-fi events around Edinburgh.
</p>
<p>
Novel pending...
</p>
<div class="sb-persona__content">
<ul class="sb-links">
<li class="sb-links__entry">
<a href="https://twitter.com/shellbryson" target="_blank" class="sb-link">
<i class="fa fa-twitter-square"></i> <span class="sb-link__description"><span class="sb-link__sr">Visit Shell's writing Twitter account </span>@shellbryson<span class="sb-link__sr"> in a new window.</span></span>
</a>
</li>
</div>
</div>
</div>
</section>
</main>
<footer class="sb-footer">
<p class="sb-footer__crafted"><i class="fa fa-wrench"></i>This site was hand-crafted from raw html, scss and glued together with grunt. You can find the <a href="https://github.com/shellbryson/shellbryson-callingcard" target="_blank" class="sb-footer__link">source here</a>.</p>
© 2017 <a href="https://sheru.uk" target="_blank" class="sb-footer__link">sheru.uk / shell bryson </a>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-11367991-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>