-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
200 lines (189 loc) · 11.8 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="bNxytYqS7aSeCyVwnQ5jbQCMR3kcvkk5zzNfR9BM">
<title>gal.jakic.dev</title>
<!-- Styles -->
<link rel="stylesheet" href="/css/app.css?id=afaa61c47e9a9eb306c8">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<!-- Scripts -->
<script src="/js/app.js?id=b17537d67f6c6e3b98ff" defer></script>
<script>
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
function data(){
return {
navbarOpen: false,
dark: (window.matchMedia('(prefers-color-scheme: dark)').matches),
dob: Math.floor((Date.now()-Date.parse('07 Jan 1989')) / 86400000),
toggleDarkMode() {
this.dark = !this.dark
},
}
}
</script>
</head>
<body class="bg-white dark dark:bg-gray-800" x-data="data()" :class="{'dark': dark }"">
<nav class="h-32 fixed top-0 w-screen flex items-center justify-between flex-wrap bg-white dark:bg-gray-800 py-6 px-10 z-10 border-b border-burnt-orange">
<a href="https://gal.jakic.dev" class="flex items-center flex-shrink-0 text-burnt-orange mr-6">
<img class="h-16 w-16 mr-4" src="/img/gjd-logo-circle.png" alt="gal.jakic.dev logo">
</a>
<div class="block lg:hidden">
<button
class="flex items-center px-3 py-2 text-burnt-orange"
@click="navbarOpen = !navbarOpen">
<i class="las la-3x la-stream"></i>
</button>
</div>
<div class="w-full block flex-grow font-bold lg:flex lg:items-center lg:w-auto text-left lg:text-right mt-10 lg:mt-0 bg-white dark:bg-gray-800 h-screen lg:h-auto" :class="{ 'hidden': !navbarOpen}">
<div class="text-md lg:flex-grow">
<a href="https://gal.jakic.dev"
class="block mt-4 lg:inline-flex items-center lg:mt-0 text-gray-700 dark:text-gray-300 hover:text-burnt-orange dark:hover:text-burnt-orange mr-4 text-lg text-burnt-orange dark:text-burnt-orange"">
<i class="las la-2x la-campground mr-2"></i>
Home
</a>
<!--<a href="#"
class="block mt-4 lg:inline-flex items-center lg:mt-0 text-gray-700 hover:text-burnt-orange mr-4 text-lg">
<i class="las la-2x la-book mr-2"></i>
Book
</a>
<a href="#responsive-header"
class="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-burnt-orange mr-4">
<i class="las la-2x la-headset"></i>
Work
</a>
<a href="#responsive-header"
class="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-burnt-orange mr-4">
<i class="las la-2x la-frog"></i>
Mini Apps
</a>
<a href="#responsive-header"
class="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-burnt-orange mr-4">
<i class="las la-2x la-code-branch"></i>
Side Projects
</a>
<a href="#responsive-header"
class="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-burnt-orange mr-4">
<i class="las la-2x la-terminal"></i>
Open Source
</a> -->
<a href="https://gal.jakic.dev/blog"
class="block mt-4 lg:inline-flex items-center lg:mt-0 text-gray-700 dark:text-gray-300 hover:text-burnt-orange dark:hover:text-burnt-orange mr-4 text-lg ">
<i class="las la-2x la-feather mr-2"></i>
Blog
</a>
<!--
<a href="/talks"
class="block mt-4 lg:inline-flex items-center lg:mt-0 text-gray-700 hover:text-burnt-orange mr-4 text-lg">
<i class="las la-2x la-microphone-alt mr-2"></i>
Talks
</a>
<a href="/documentary"
class="block mt-4 lg:inline-flex items-center lg:mt-0 text-gray-700 hover:text-burnt-orange mr-4 text-lg">
<i class="las la-2x la-mountain mr-2"></i>
Documentary
</a>
-->
<a href="/about" class="block mt-4 lg:inline-flex items-center lg:mt-0 text-gray-700 dark:text-gray-300 hover:text-burnt-orange dark:hover:text-burnt-orange mr-4 text-lg ">
<i class="las la-2x la-address-card mr-2"></i>
About
</a>
<a class="block mt-4 lg:ml-4 lg:inline-flex items-center lg:mt-0 text-gray-700 dark:text-burnt-orange hover:text-burnt-orange dark:hover:text-burnt-orange text-lg" @click="toggleDarkMode()">
<i class="las la-2x la-adjust mr-2 transition delay-150 transform rotate-180" :class="{'rotate-0': dark }"></i>
</a>
</div>
</div>
</nav>
<main class="mt-20 pb-24 px-10 font-medium leading-5 text-gray-900 bg-transparent dark:bg-gray-800 dark:text-gray-100">
<section class="min-h-50vh flex flex-col justify-center mt-24" style="max-width: 1200px;">
<div>
<div class="inline-block py-px px-2 font-sans text-base font-extrabold text-white dark:text-black uppercase bg-black dark:bg-white rounded box-border no-wrap">
Gal Jakič
</div>
<h1 class="mx-0 mb-2 font-sans text-6xl font-black text-black dark:text-white" style="line-height: 110%;">
a web developer turned <br />
<span class="text-burnt-orange"> project manager of growing startups.</span>
</h1>
</div>
</section>
<div class="flex-1 leading-5 box-border">
<div class="leading-8 text-black dark:text-white box-border">
<div role="list" class="text-black dark:text-white box-border mt-20">
<a href="/blog/2-mvb-minimum-viable-blog" class="py-10 group">
<div class="grid grid-cols-5 gap-8 my-20" style="max-width: 1200px;">
<div class="col-span-5 lg:col-span-2">
<img class="filter grayscale" src="https://images.unsplash.com/photo-1455849318743-b2233052fcff" alt="" srcset="">
</div>
<div class="col-span-5 lg:col-span-3">
<div class="grid grid-cols-3 place-items-stretch h-full md:pl-8 max-w-full no-underline bg-transparent cursor-pointer hover:text-black" style="transition: opacity 200ms ease 0s;">
<div class="text-gray-700 dark:text-gray-300 box-border col-span-2">
<div class="col-span-1 inline-block py-px px-2 mr-3 font-sans text-base font-extrabold text-white uppercase bg-black rounded box-border">
Latest!
</div>
<div class="col-span-1 inline-block font-sans font-extrabold uppercase box-border">
May 17, 2021
</div>
</div>
<h2 class="col-span-3 mt-5 mb-2 font-sans text-3xl font-extrabold leading-9 group-hover:text-burnt-orange">
MVB: Minimum Viable Blog
</h2>
<p class="col-span-3 my-2 text-2xl text-gray-700 dark:text-gray-300 font-serif" style="line-height: 160%;">
It took me two years to go from buying the jakic.dev domain and turning it into a blog. The reason was obvious, simple and didn't have anything to do with tech or work.
</p>
<p class="col-span-3 my-2 text-gray-700 hover:text-burnt-orange dark:text-gray-300 item-end" style="line-height: 160%;">
Read more...
</p>
</div>
</div>
</div>
</a>
<a href="/blog/1-why-this-blog" class="py-10 group">
<div class="grid grid-cols-5 gap-8 my-20" style="max-width: 1200px;">
<div class="col-span-5 lg:col-span-2">
<img class="filter grayscale" src="https://images.unsplash.com/photo-1620608964186-18a8cfc2ad44?" alt="" srcset="">
</div>
<div class="col-span-5 lg:col-span-3">
<div class="grid grid-cols-3 place-items-stretch h-full md:pl-8 max-w-full no-underline bg-transparent cursor-pointer hover:text-black" style="transition: opacity 200ms ease 0s;">
<div class="text-gray-700 dark:text-gray-300 box-border col-span-2">
<div class="col-span-1 inline-block font-sans font-extrabold uppercase box-border">
May 14, 2021
</div>
</div>
<h2 class="col-span-3 mt-5 mb-2 font-sans text-3xl font-extrabold leading-9 group-hover:text-burnt-orange">
Why This Blog?
</h2>
<p class="col-span-3 my-2 text-2xl text-gray-700 dark:text-gray-300 font-serif" style="line-height: 160%;">
A Hello-World-like blog post with an equally lame title, about why this blog exists and what I would like to do with it going forward.
</p>
<p class="col-span-3 my-2 text-gray-700 hover:text-burnt-orange dark:text-gray-300 item-end" style="line-height: 160%;">
Read more...
</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</main>
<footer class="text-gray-700 dark:text-gray-300 bg-transparent dark:bg-gray-800 font-normal">
<div class="px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
<p class="mx-2 opacity-75 text-xs leading-3 no-underline uppercase text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:py-2 sm:mt-0 mt-4">© 2020 - Gal Jakič. All Rights Reserved.
</p>
<span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
<a href="https://twitter.com/TeamJakic" target="_blank" class="mx-2 opacity-75 text-xs leading-3 no-underline uppercase hover:text-burnt-orange hover:opacity-100">Twitter</a>
<a href="https://linkedin.com/in/galjakic" target="_blank" class="mx-2 opacity-75 text-xs leading-3 no-underline uppercase hover:text-burnt-orange hover:opacity-100">LinkedIn</a>
<a href="https://github.com/morpheus7CS" target="_blank" class="mx-2 opacity-75 text-xs leading-3 no-underline uppercase hover:text-burnt-orange hover:opacity-100">Github</a>
<a href="/uses" class="mx-2 opacity-75 text-xs leading-3 no-underline uppercase hover:text-burnt-orange hover:opacity-100">Uses</a>
<a href="/this-page" class="mx-2 opacity-75 text-xs leading-3 no-underline uppercase hover:text-burnt-orange hover:opacity-100">$this->page</a>
<!--<a href="/supports" class="mx-2 opacity-75 text-xs leading-3 no-underline uppercase hover:text-burnt-orange hover:opacity-100">Supports</a>-->
</span>
</div>
</footer>
</body>
</html>