-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
141 lines (113 loc) · 8.99 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>rominronin - About</title>
<link rel="canonical" href="http://localhost/about">
<meta name="twitter:title" content="rominronin - About">
<meta property="og:title" content="rominronin - About">
<link rel="sitemap" href="http://localhost/sitemap.xml" type="application/xml" title="Sitemap">
<link rel="alternate" href="http://localhost/feed.xml" type="application/rss+xml" title="HydePHP RSS Feed">
<meta name="generator" content="HydePHP v1.4.2">
<meta property="og:site_name" content="HydePHP">
<style>[x-cloak] {display: none!important}</style>
<link rel="stylesheet" href="media/app.css?v=beb7e32a8de13ade2699b3b1e87d89d7">
<meta id="meta-color-scheme" name="color-scheme" content="light">
<script>if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark'); document.getElementById('meta-color-scheme').setAttribute('content', 'dark');} else { document.documentElement.classList.remove('dark') } </script>
</head>
<body id="app" class="flex flex-col min-h-screen overflow-x-hidden dark:bg-gray-900 dark:text-white" x-data="{ navigationOpen: false }" x-on:keydown.escape="navigationOpen = false;">
<a href="#content" id="skip-to-content" class="sr-only focus:not-sr-only bg-black border-4 border-yellow-400 focus:absolute focus:mt-2 focus:mx-auto focus:p-2 focus:w-64 h-auto left-0 overflow-auto right-0 rounded-md text-center text-lg text-white top-auto z-50 ">Skip to content</a> <nav aria-label="Main navigation" id="main-navigation" class="flex flex-wrap items-center justify-between p-4 shadow-lg sm:shadow-xl md:shadow-none dark:bg-gray-800">
<div class="flex flex-grow items-center flex-shrink-0 text-gray-700 dark:text-gray-200">
<a href="./" class="font-bold px-4" aria-label="Home page">
rominronin
</a>
<div class="ml-auto">
<button @click="toggleTheme" class="theme-toggle-button flex items-center px-2 py-1 hover:text-gray-700 dark:text-gray-200" title="Toggle theme">
<span class="sr-only">Toggle dark theme</span>
<svg width="1.25rem" height="1.25rem" class="w-5 h-5 hidden dark:block" fill="#FFFFFF" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
<svg width="1.25rem" height="1.25rem" class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
</button>
</div>
</div>
<div class="block md:hidden">
<button id="navigation-toggle-button" class="flex items-center px-3 py-1 hover:text-gray-700 dark:text-gray-200"
aria-label="Toggle navigation menu" @click="navigationOpen = ! navigationOpen">
<svg x-show="! navigationOpen" title="Open Navigation Menu" class="dark:fill-gray-200"
style="display: block;"
id="open-main-navigation-menu-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24"
width="24"><title>Open Menu</title>
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>
<svg x-show="navigationOpen" title="Close Navigation Menu" class="dark:fill-gray-200" style="display: none;"
id="close-main-navigation-menu-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24"
width="24"><title>Close Menu</title>
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
</svg>
</button>
</div>
<div id="main-navigation-links" class="w-full x-uncloak-md md:flex flex-grow md:flex-grow-0 md:items-center md:w-auto px-6 -mx-4 border-t mt-3 pt-3 md:border-none md:mt-0 md:py-0 border-gray-200 dark:border-gray-700"
:class="navigationOpen ? '' : 'hidden'" x-cloak>
<ul aria-label="Navigation links" class="md:flex-grow md:flex justify-end">
<li class="md:mx-2">
<a href="./" class="block my-2 md:my-0 md:inline-block py-1 text-gray-700 hover:text-gray-900 dark:text-gray-100">Home</a> </li>
<li class="md:mx-2">
<a href="about" aria-current="page" class="block my-2 md:my-0 md:inline-block py-1 text-gray-700 hover:text-gray-900 dark:text-gray-100 border-l-4 border-indigo-500 md:border-none font-medium -ml-6 pl-5 md:ml-0 md:pl-0 bg-gray-100 dark:bg-gray-800 md:bg-transparent dark:md:bg-transparent">About</a> </li>
<li class="md:mx-2">
<div class="dropdown-container relative" x-data="{ open: false }">
<button class="dropdown-button block my-2 md:my-0 md:inline-block py-1 text-gray-700 hover:text-gray-900 dark:text-gray-100"
x-on:click="open = ! open" @click.outside="open = false" @keydown.escape.window="open = false">
Other
<svg class="inline transition-all dark:fill-white" x-bind:style="open ? { transform: 'rotate(180deg)' } : ''" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>
</button>
<div class="dropdown absolute shadow-lg bg-white dark:bg-gray-700 z-50 right-0" :class="open ? '' : 'hidden'" x-cloak="">
<ul class="dropdown-items px-3 py-2">
<li class="whitespace-nowrap">
<a href="docs/" class="block my-2 md:my-0 md:inline-block py-1 text-gray-700 hover:text-gray-900 dark:text-gray-100">Docs</a> </li>
</ul>
</div>
</div> </li>
</ul>
</div>
</nav>
<section>
<main id="content" class="mx-auto max-w-7xl py-16 px-8">
<article class="mx-auto prose dark:prose-invert">
<h1>About</h1>
<p>I am Baris Tosun. Web developer, Drupal enthusiast, guitarist, music producer, keyboard builder, physics graduate, karate black belt and father of two.</p>
<p>This is my website. It is a simple webpage/blog where I want to provide information about some of the projects I spend my free time on.</p>
<p>This website is build using a tool called HydePHP. Find out more about HydePHP <a href="https://hydephp.com/">here</a></p>
</article>
</main>
</section>
<footer aria-label="Page footer" class="flex py-4 px-6 w-full text-center mt-auto bg-slate-100 dark:bg-gray-800">
<div class="prose dark:prose-invert text-center mx-auto">
<p>Built with <a href="https://github.com/hydephp/hyde">HydePHP</a> 🎩 | See also <a href="https://baristosun.com">baristosun.com</a></p>
</div>
<a href="#app" aria-label="Go to top of page" class="float-right">
<button title="Scroll to top">
<svg width="1.5rem" height="1.5rem" role="presentation" class="fill-current text-gray-500 h-6 w-6"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
</svg>
</button>
</a>
</footer>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.10.3/dist/cdn.min.js" integrity="sha256-gOkV4d9/FmMNEkjOzVlyM2eNAWSUXisT+1RbMTTIgXI=" crossorigin="anonymous"></script>
<script>
function toggleTheme() {
if (localStorage.getItem('color-theme') === 'dark' || !('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.remove("dark");
localStorage.setItem('color-theme', 'light');
document.getElementById('meta-color-scheme').setAttribute('content', 'light');
} else {
document.documentElement.classList.add("dark");
localStorage.setItem('color-theme', 'dark');
document.getElementById('meta-color-scheme').setAttribute('content', 'dark');
}
}
</script>
</body>
</html>