-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
58 lines (48 loc) · 2.84 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Paul Sturgess – Full stack software engineer and tech lead.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- I'm using Tailwind css which is overkill, but it was fun! :) -->
<!-- Read more here: https://github.com/paulsturgess/paulsturgess.github.io -->
<link href="css/styles.css" rel="stylesheet">
<title>paulsturgess.co.uk</title>
<script>
const toggleTheme = () => document.documentElement.classList.toggle('dark')
window.onload = () => {
document.body.classList.remove("no-js")
const prefersDarkTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
if (prefersDarkTheme) toggleTheme()
const toggle = document.getElementById('toggle');
toggle.addEventListener('change', toggleTheme)
}
</script>
</head>
<body class="no-js grid md:h-screen md:place-items-center bg-gray-200 dark:bg-gray-900">
<main class="overflow-hidden relative rounded-lg bg-white dark:bg-gray-800 p-6 md:p-8 md:m-40 md:mt-10 shadow-xl space-y-4">
<h1 class="text-2xl font-bold dark:text-white">
Hello there 👋🏻
</h1>
<p class="md:text-xl text-slate-700 dark:text-white">My name is Paul Sturgess and I'm an experienced full-stack software engineer specialising in web applications written in Ruby on Rails.</p>
<p class="md:text-xl text-slate-700 dark:text-white">I care passionately about maintainable code, test coverage, good documentation, diversity, continuous delivery, sharing knowledge and small pull requests.</p>
<p class="md:text-xl text-slate-700 dark:text-white">Tech I especially enjoy using: Ruby, TypeScript, Hotwire, Tailwind, React, Next.js and Rails.</p>
<footer class="flex items-end">
<p class="grow md:text-xl text-slate-700 dark:text-white">Connect with me on <a href="https://www.linkedin.com/in/paul-sturgess/" class="underline text-cyan-800 dark:text-cyan-300">LinkedIn</a>.</p>
<div id="toggle-form" class="flex-nowrap ml-4">
<label for="toggle" class="relative flex items-center cursor-pointer">
<div class="block bg-gray-600 w-10 h-6 rounded-full focus-within:border-cyan-600 focus-within:border-2">
<input type="checkbox" id="toggle" class="sr-only">
<div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition"></div>
</div>
<p id="using-dark-theme" class="sr-only">Toggle the checkbox to select the light theme</p>
<p id="using-light-theme" class="sr-only">Toggle the checkbox to select the dark theme</p>
<p class="ml-2 text-slate-700 dark:text-white text-sm md:text-base whitespace-nowrap" aria-hidden="true">
Toggle theme
</p>
</label>
</div>
</footer>
</main>
</body>
</html>