-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (109 loc) · 5.73 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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>hisashi-kato</title>
</head>
<body>
<div class="flex flex-col min-h-screen">
<header class="px-4 lg:px-6 h-14 flex items-center">
<nav class="ml-auto flex gap-4 sm:gap-6"><a class="text-sm font-medium hover:underline underline-offset-4"
href="#" rel="ugc">
Home
</a><a class="text-sm font-medium hover:underline underline-offset-4" href="#" rel="ugc">
About
</a><a class="text-sm font-medium hover:underline underline-offset-4" href="#" rel="ugc">
Experience
</a></nav>
</header>
<main class="flex-1">
<section class="w-full pt-12 md:pt-24 lg:pt-32">
<div class="px-4 md:px-6 space-y-10 xl:space-y-16">
<div class="grid max-w-[1300px] mx-auto gap-4 px-4 sm:px-6 md:px-10 md:grid-cols-2 md:gap-16">
<div>
<h1
class="lg:leading-tighter text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl xl:text-[3.4rem] 2xl:text-[3.75rem]">
Your Name
</h1>
<p class="text-lg font-medium">
Your Job Title
</p>
</div>
<div><img src="/placeholder.svg" alt="Your Photo" class="h-48 w-48 rounded-full object-cover"
width="300" height="300" style="aspect-ratio:300/300;object-fit:cover"></div>
</div>
</div>
</section>
<section class="w-full py-12 md:py-24 lg:py-32">
<div class="container space-y-12 px-4 md:px-6">
<h2 class="text-3xl font-bold tracking-tighter sm:text-4xl">
About Me
</h2>
<p class="text-lg text-gray-500">
Your about me text goes here.
</p>
</div>
</section>
<section class="w-full py-12 md:py-24 lg:py-32">
<div class="container space-y-12 px-4 md:px-6">
<h2 class="text-3xl font-bold tracking-tighter sm:text-4xl">
Experience
</h2>
<div class="space-y-6">
<div>
<h3 class="text-lg font-bold">
Job Title 1
</h3>
<p class="text-sm text-gray-500">
Job description 1 goes here.
</p>
</div>
<div>
<h3 class="text-lg font-bold">
Job Title 2
</h3>
<p class="text-sm text-gray-500">
Job description 2 goes here.
</p>
</div>
</div>
</div>
</section>
<section class="w-full py-12 md:py-24 lg:py-32">
<div class="container space-y-12 px-4 md:px-6">
<h2 class="text-3xl font-bold tracking-tighter sm:text-4xl">
Skills
</h2>
<div class="flex flex-wrap gap-4">
<div
class="inline-flex items-center rounded-full border px-2.5 py-0.5 w-fit text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">
Skill 1</div>
<div
class="inline-flex items-center rounded-full border px-2.5 py-0.5 w-fit text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">
Skill 2</div>
<div
class="inline-flex items-center rounded-full border px-2.5 py-0.5 w-fit text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">
Skill 3</div>
<div
class="inline-flex items-center rounded-full border px-2.5 py-0.5 w-fit text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">
Skill 4</div>
</div>
</div>
</section>
</main>
<footer class="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t">
<p class="text-xs text-gray-500 dark:text-gray-400">
Contact: your.email@example.com
</p>
<nav class="sm:ml-auto flex gap-4 sm:gap-6"><a class="text-xs hover:underline underline-offset-4" href="#"
rel="ugc">
Twitter
</a><a class="text-xs hover:underline underline-offset-4" href="#" rel="ugc">
LinkedIn
</a></nav>
</footer>
</div>
</body>
</html>