-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
121 lines (106 loc) · 8.18 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google" content="notranslate">
<title>Romaji2Kana - About</title>
<meta name="description" content="Learn all about the Romaji2Kana Converter: Why was it built? Who created it? And what purposes does it serve?">
<meta name="keywords" content="Romaji, Kana, Hiragana, Katakana, Japanese, Converter, About">
<meta name="author" content="Leander Christmann">
<meta property="og:title" content="About Romaji2Kana"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="https://romaji2kana.com/romaji2kana.png"/>
<meta property="og:image:type" content="image/png"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="675"/>
<meta property="og:image:alt" content="Romaji2Kana Logo"/>
<meta property="og:url" content="https://romaji2kana.com/about"/>
<meta property="og:description" content="Learn all about the Romaji2Kana Converter: Why was it built? Who created it? And what purposes does it serve?">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Romaji2Kana">
<link rel="shortcut icon" href="logo.svg" type="image/x-icon">
<link rel="stylesheet" href="css/output.css">
</head>
<body class="min-h-screen bg-white">
<!-- Blurry color cloud in the background -->
<div class="fixed inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
<div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
</div>
</div>
<!-- Header -->
<header class="absolute inset-x-0 top-0 z-50">
<nav class="p-6 lg:px-8">
<a href=".">
<img class="h-8 w-8" src="logo.svg" alt="Romaji2Kana Logo">
</a>
</nav>
</header>
<main class="isolate">
<div class="relative pt-14">
<!-- Text content -->
<div class="pt-12 sm:pt-16">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">About all this</h1>
<p class="mt-6 text-lg leading-8 text-gray-600">Oh, you're quite curious. What would you like to know? Should I tell you a thing about this project? Or about myself? Let's see, what we can do for you here.</p>
</div>
<div class="mt-12 sm:mt-16 md:flex md:items-start md:justify-center md:gap-x-6">
<div class="flex-1 border border-gray-300 rounded-md px-3 py-2.5 my-4 md:my-0 shadow-lg">
<h2 class="text-xl font-bold tracking-tight text-gray-900">Me</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">I'm Leander, a
<script>
const birthdate = new Date('2002-09-30');
const age = new Date().getFullYear() - birthdate.getFullYear() - (new Date().getMonth() < birthdate.getMonth() || (new Date().getMonth() === birthdate.getMonth() && new Date().getDate() < birthdate.getDate()) ? 1 : 0);
document.write(age);
</script>-year-old avid learner of Japanese, still trying to master the basics of this beautiful language, one step at a time.<br>Since I often happen to use Romaji to Kana converters (and being the 7th semester software engineer, that I am) I just had to create such a tool myself - mainly because existing ones have user interfaces, that are not that fun to use. So here we are, hope you like it and nice to meet you! はじめまして。
</p>
</div>
<div class="flex-1 border border-gray-300 rounded-md px-3 py-2.5 my-4 md:my-0 shadow-lg">
<h2 class="text-xl font-bold tracking-tight text-gray-900">Japanese</h2>
<p class=" mt-2 text-lg leading-8 text-gray-600">Japanese is just amazing right? (Of course, it is, otherwise you wouldn't be here on this site). I started learning Japanese on my own from a couple of text books in high school, but soon paused up until towards the end of university, when I got the chance to take two Japanese courses as elective subjects. This entire project is dedicated to the amazing teacher of both classes, who made us show up on Friday morning and absolutely love it.</p>
</div>
<div class="flex-1 border border-gray-300 rounded-md px-3 py-2.5 my-4 md:my-0 shadow-lg">
<h2 class="text-xl font-bold tracking-tight text-gray-900">Mission Statement</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">The purpose of this website is to provide a beautiful, easy-to-use and blazingly fast Romaji to Kana converter. It shall be available to everybody as a free tool and 100% secure through being an <a href="https://github.com/lchristmann/romaji2kana-website" class="underline" target="_blank">open source</a> software. And I promise: there will never be any cookies or ads annoying you. Just good user experience! Romaji2Kana aims to make your life just a bit easier, by doing what it does best: converting Romaji into Kana and the other way round.</p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<div class="mx-auto mt-12 sm:mt-16 max-w-7xl px-6 sm:px-8 sticky top-[100vh]">
<footer class="border-t border-gray-900/10 py-12">
<div class="sm:grid sm:grid-cols-3">
<div class="flex justify-center sm:justify-start"><!-- this wrapping div acts as the grid-column allowing the child <a> to be only as wide as it needs to -->
<a href="." class="sm:ml-8 md:ml-12 lg:ml-16">
<img class="h-7 w-7 mx-auto sm:mx-0" src="logo.svg" alt="Romaji2Kana Logo">
</a>
</div>
<div class="flex justify-evenly items-center col-span-2 text-center max-w-[90%] mx-auto mt-8 sm:mx-0 sm:mt-0 sm:max-w-none">
<div class="flex-1">
<a href="about.html" class="sm:text-sm leading-6 text-gray-600 hover:text-gray-900">About</a>
</div>
<div class="flex-1">
<a href="legal.html" class="sm:text-sm leading-6 text-gray-600 hover:text-gray-900">Legal</a>
</div>
<div class="flex-1">
<a href="contact.html" class="sm:text-sm leading-6 text-gray-600 hover:text-gray-900">Contact</a>
</div>
<div class="flex-1">
<a href="api.html" class="sm:text-sm leading-6 text-gray-600 hover:text-gray-900">API</a>
</div>
</div>
</div>
</footer>
</div>
<!-- Blurry color cloud in the background -->
<div class="fixed inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-48rem)]" aria-hidden="true">
<div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)">
</div>
</div>
</body>
</html>