forked from kuldeep123kd/tailwind-profile
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlordkerwin.html
134 lines (105 loc) · 7.17 KB
/
lordkerwin.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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tailwind Profile Card Template : Tailwind Toolbox</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Font Awesome if you need it
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
-->
<link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css">
<!--Replace with your tailwind.css once created-->
</head>
<body class="font-sans antialiased text-gray-900 leading-normal tracking-wider bg-cover"
style="background-image:url('https://source.unsplash.com/p3OzJuT_Dks');">
<div class="max-w-4xl flex items-center h-auto lg:h-screen flex-wrap mx-auto my-32 lg:my-0">
<!--Main Col-->
<div id="profile"
class="w-full lg:w-3/5 rounded-lg lg:rounded-l-lg lg:rounded-r-none shadow-2xl bg-white opacity-75 mx-6 lg:mx-0">
<div class="p-4 md:p-12 text-center lg:text-left">
<!-- Image for mobile view-->
<div class="block lg:hidden rounded-full shadow-xl mx-auto -mt-16 h-48 w-48 bg-cover bg-center"
style="background-image: url('https://pbs.twimg.com/media/D-F9q96WwAsrie0.jpg')"></div>
<h1 class="text-3xl font-bold pt-8 lg:pt-0">Sean Kerwin</h1>
<div class="mx-auto lg:mx-0 w-4/5 pt-3 border-b-2 border-indigo-500 opacity-25"></div>
<p class="pt-4 text-base font-bold flex items-center justify-center lg:justify-start">
<svg class="h-4 fill-current text-indigo-700 pr-4" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path d="M9 12H1v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6h-8v2H9v-2zm0-1H0V5c0-1.1.9-2 2-2h4V2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1h4a2 2 0 0 1 2 2v6h-9V9H9v2zm3-8V2H8v1h4z"/>
</svg>
Front-End Web Developer
</p>
<p class="pt-2 text-gray-600 text-xs lg:text-sm flex items-center justify-center lg:justify-start">
<svg class="h-4 fill-current text-indigo-700 pr-4" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm7.75-8a8.01 8.01 0 0 0 0-4h-3.82a28.81 28.81 0 0 1 0 4h3.82zm-.82 2h-3.22a14.44 14.44 0 0 1-.95 3.51A8.03 8.03 0 0 0 16.93 14zm-8.85-2h3.84a24.61 24.61 0 0 0 0-4H8.08a24.61 24.61 0 0 0 0 4zm.25 2c.41 2.4 1.13 4 1.67 4s1.26-1.6 1.67-4H8.33zm-6.08-2h3.82a28.81 28.81 0 0 1 0-4H2.25a8.01 8.01 0 0 0 0 4zm.82 2a8.03 8.03 0 0 0 4.17 3.51c-.42-.96-.74-2.16-.95-3.51H3.07zm13.86-8a8.03 8.03 0 0 0-4.17-3.51c.42.96.74 2.16.95 3.51h3.22zm-8.6 0h3.34c-.41-2.4-1.13-4-1.67-4S8.74 3.6 8.33 6zM3.07 6h3.22c.2-1.35.53-2.55.95-3.51A8.03 8.03 0 0 0 3.07 6z"/>
</svg>
Wiltshire, United Kingdom
</p>
<p class="pt-8 text-sm">Front-End Web Developer, specializing in Angular, I'm currently learning Swift 5</p>
<div class="pt-12 pb-8">
<a class="bg-indigo-700 hover:bg-indigo-900 text-white font-bold py-2 px-4 rounded-full pointer" href="http://seankerwin.co.uk" target="_blank">
Hit me up!
</a>
</div>
<div class="mt-6 pb-16 lg:pb-0 w-4/5 lg:w-full mx-auto flex flex-row items-center justify-start">
<a class="link mr-4" href="https://twitter.com/lordkerwin" data-tippy-content="@lordkerwin">
<svg class="h-6 fill-current text-gray-600 hover:text-indigo-700" role="img" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"><title>Twitter</title>
<path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/>
</svg>
</a>
<a class="link" href="https://github.com/lordkerwin" data-tippy-content="@lordkerwin">
<svg class="h-6 fill-current text-gray-600 hover:text-indigo-700" role="img" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"><title>GitHub</title>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
</a>
</div>
<!-- Use https://simpleicons.org/ to find the svg for your preferred product -->
</div>
</div>
<!--Img Col-->
<div class="w-full lg:w-2/5">
<!-- Big profile image for side bar (desktop) -->
<img src="https://pbs.twimg.com/media/D-F9q96WwAsrie0.jpg"
class="rounded-none lg:rounded-lg shadow-2xl hidden lg:block">
</div>
<!-- Pin to top right corner -->
<div class="absolute top-0 right-0 h-12 w-18 p-4">
<button class="js-change-theme focus:outline-none">🌙</button>
</div>
</div>
<script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<script>
//Init tooltips
tippy('.link', {
placement: 'bottom'
})
//Toggle mode
const toggle = document.querySelector('.js-change-theme');
const body = document.querySelector('body');
const profile = document.getElementById('profile');
toggle.addEventListener('click', () => {
if (body.classList.contains('text-gray-900')) {
toggle.innerHTML = "☀️";
body.classList.remove('text-gray-900');
body.classList.add('text-gray-100');
profile.classList.remove('bg-white');
profile.classList.add('bg-gray-900');
} else {
toggle.innerHTML = "🌙";
body.classList.remove('text-gray-100');
body.classList.add('text-gray-900');
profile.classList.remove('bg-gray-900');
profile.classList.add('bg-white');
}
});
</script>
</body>
</html>