-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (158 loc) · 12.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
<!DOCTYPE html>
<html lang="en" id="html">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link href="/dist/output.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.svg" type="image/x-icon">
<script src="js/darkmode.js" defer></script>
<title>Portfolio</title>
</head>
<!-- XXX Make dark theme to this website from btn https://tailwindcss.com/docs/dark-mode -->
<!-- TODO Make transitions on all btns and dropdowns -->
<!-- TODO Make new logo (not necessary) -->
<!-- TODO Make DE and RU websites -->
<!-- XXX Make links workable -->
<!-- TODO add my minigames in portfolio -->
<!-- XXX make workable form -->
<!-- TODO add my photo -->
<!-- TODO rework about me desc (not necessary) -->
<!-- XXX make the site icon -->
<body class="bg-orange-100 dark:bg-neutral-900">
<header class="header bg-orange-50 mb-20 dark:bg-slate-800">
<div class="container mx-auto">
<div class="section py-6 flex mx-6 md:mx-12">
<a href="#" class="logo-link"><img src="img/Logo-light.svg" alt="logo" class="dark:hidden"><img src="img/Logo-dark.svg" alt="logo" class="hidden dark:inline-block"> </a>
<ul class="menu hidden md:inline-flex flex-row ml-16 my-auto space-x-6 lg:ml-32 lg:space-x-9 text-slate-700 dark:text-slate-200">
<li class="menu-elem"><a href="#about" class="menu-link">About me</a></li>
<li class="menu-elem"><a href="#portfolio" class="menu-link">Portfolio</a></li>
<li class="menu-elem"><a href="#get-in-touch" class="menu-link">Get in touch</a></li>
<li class="menu-elem"><a href="https://github.com/Serpant1ne/portfolio-website" class="menu-link flex flex-row"><img src="img/github-black.svg" alt="" class="mr-1 dark:hidden"><img src="img/github-silver.svg" alt="" class="mr-1 hidden dark:inline-block">Source</a></li>
</ul>
<div class="buttons ml-auto my-auto flex items-center">
<div class="dropdown-menu md:hidden">
<button class="hamburger rounded-lg bg-blue-800 mr-4 w-10 h-10 dark:bg-orange-100" id="menu-button"><img src="img/hamburger-light.svg" alt="menu" class="m-auto dark:hidden"><img src="img/hamburger-dark.svg" alt="menu" class="m-auto hidden dark:inline-block"></button>
<ul class="dropdown-menu-content absolute hidden opacity-0 rounded-md mt-1 p-6 bg-blue-800 font-bold text-orange-100 space-y-4 dark:bg-orange-100 dark:text-blue-800">
<li class="menu-elem"><a href="#about" class="menu-link ">About me</a></li>
<li class="menu-elem"><a href="#portfolio" class="menu-link ">Portfolio</a></li>
<li class="menu-elem"><a href="#get-in-touch" class="menu-link ">Get in touch</a></li>
<li class="menu-elem"><a href="https://github.com/Serpant1ne/portfolio-website" class="menu-link flex flex-row"><img src="img/github-orange.svg" alt="" class="mr-1 dark:hidden"><img src="img/github-blue.svg" alt="" class="mr-1 hidden dark:inline-block">Source</a></li>
</ul>
</div>
<div class="dropdown-lang">
<button class="lang rounded-lg bg-blue-800 mr-4 text-orange-100 font-bold text-lg w-10 h-10 dropdown-toggle dark:bg-orange-100 dark:text-blue-800" id="lang-change-btn">EN</button>
<div class="dropdown-lang-content absolute hidden opacity-0 pt-1">
<ul class=" rounded-md py-4 px-6 lg:mt-0 font-bold bg-blue-800 space-y-4 transition-all text-orange-100 dark:bg-orange-100 dark:text-blue-800">
<li class="menu-elem "><a href="#" id="lang-change-1">DE</a></li>
<li class="menu-elem "><a href="#" id="lang-change-2">RU</a></li>
</ul>
</div>
</div>
<button class="dark-mode rounded-lg bg-blue-800 w-10 h-10 dark:bg-orange-100" id="darkBtn"><img src="img/Moon.svg" alt="menu" class="m-auto" id="image"></button>
</div>
</div>
</div>
</header>
<div class="hero mb-16">
<div class="container mx-auto">
<div class="section flex flex-col mx-6 md:mx-12 sm:flex-row sm:justify-around">
<div class="hero-left flex-col mb-8 inline-block mx-auto sm:mx-0 sm:my-auto">
<h2 class="hero-hello text-2xl font-bold text-slate-700 md:text-2xl lg:text-4xl xl:text-4xl xl:mb-2 dark:text-slate-200">Good day, I’m Kostya!</h2>
<h1 class="hero-text text-3xl font-bold text-sky-400 md:text-4xl lg:text-5xl xl:text-6xl">I make websites!</h1>
</div>
<img src="img/hero-img.png" alt="" class="hero-right max-w-xs h-auto mx-auto sm:mx-0 xl:max-w-none">
</div>
</div>
</div>
<div class="about mb-16" id="about">
<div class="container mx-auto">
<div class="section mx-6 md:mx-12">
<h1 class="about-header text-2xl font-bold text-slate-700 mb-8 sm:text-4xl sm:mb-12 dark:text-slate-200">About me</h1>
<div class="row flex flex-col mx-auto sm:flex-row sm:justify-around">
<img src="img/about-photo.png" alt="photo" class="about-img w-32 h-32 rounded-full mx-auto mb-8 sm:mx-0 sm:my-0">
<div class="texts flex flex-col max-w-xs mx-auto sm:mx-0 md:max-w-md lg:max-w-xl xl:max-w-3xl text-slate-700 dark:text-slate-200">
<p class="text-sm sm:text-lg xl:text-2xl">My name is Konstantin Gartsman. I’m 17 y.o and I’m Front-end developer, who loves to bring happiness to this world! I help to bring new cool Ideas in the Internet and make it memorable and informative! Also I’m ready to work with you!
<a href="#get-in-touch" class="about-link text-sky-400">Contact me</a> if you want! ;)
</p>
<br>
<p class="text-sm sm:text-lg xl:text-2xl">Nowadays I’m self-styding in Front-end sphere and getting ready to pass an exam in Leipzig University.
</p>
<br>
<p class="text-sm sm:text-lg xl:text-2xl">I know 4 languages: English, German, Russian and Belorussian. I’m good at Physics and mathematics.
</p>
<br>
<p class="text-sm sm:text-lg xl:text-2xl">I’m passionate about cars, some extreme sports, basketball, EDM and D&B. Also I love make <a href="https://www.instagram.com/serpant1ne/" class="about-link text-sky-400">photos</a> and meet new people! :)</p>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio mb-16" id="portfolio">
<div class="container mx-auto">
<div class="section mx-6 md:mx-12">
<h1 class="about-header text-2xl font-bold text-slate-700 mb-8 sm:text-4xl sm:mb-12 dark:text-slate-200">My portfolio</h1>
<div class="portfolio-cards grid max-w-xs mx-auto grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12 md:max-w-none xl:grid-cols-3">
<div class="card bg-slate-50 rounded-3xl max-w-xs md:mx-auto 2xl:max-w-sm text-slate-700 dark:text-slate-200">
<img src="img/card-logo-1.png" alt="" class="mx-auto my-12">
<div class="card-description bg-sky-100 pt-2 pb-6 px-4 rounded-b-3xl dark:bg-slate-800">
<h4 class="font-bold text-lg mb-1 sm:text-2xl sm:mb-2">Attention depth</h4>
<a href="www.freediver.by" class="card-link text-sky-400 text-sm mb-3 inline-block sm:text-lg sm:mb-4">freediver.by</a>
<p class="card-text text-xs sm:text-base">Belorussian freediving club with 500+ students. The club was created by the strongest instructors in Belarus.
The club organizes training, master classes, deep courses on the lakes of Belarus and trips to the seas.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="get-in-touch mb-16" id="get-in-touch">
<div class="container mx-auto">
<div class="section mx-6 md:mx-12">
<h1 class="about-header text-2xl font-bold text-slate-700 mb-8 sm:text-4xl sm:mb-12 dark:text-slate-200">Get in touch</h1>
<div class="flex flex-col lg:flex-row lg:justify-around">
<form action="https://formspree.io/f/meqdyrzg" method="post" class="mb-8 sm:mb-12 sm:mx-16 md:mx-28 lg:mx-0 lg:max-w-md">
<p class="git-text text-slate-700 text-sm mb-8 sm:text-lg dark:text-slate-200">Want to say hi? Feeling that we can build something together? Or maybe you want my resume? That form is for you!</p>
<div class="input-box relative flex flex-col mb-6 sm:mb-4">
<input type="text" name="Name" required class="bg-slate-50 w-auto px-3 py-4 text-sm peer focus-visible:outline-sky-400 sm:text-lg" placeholder=" ">
<label class="pointer-events-none text-slate-500 absolute top-0 left-0 text-xs px-1 py-0 peer-placeholder-shown:px-3 peer-placeholder-shown:py-4 transition-all peer-placeholder-shown:text-sm sm:peer-placeholder-shown:text-lg" for="Name">Name<span class="text-red-500">*</span></label>
</div>
<div class="input-box relative flex flex-col mb-6 sm:mb-4">
<input type="email" name="Email" required class="bg-slate-50 w-auto px-3 py-4 text-sm peer focus-visible:outline-sky-400 sm:text-lg" placeholder=" ">
<label class="pointer-events-none text-slate-500 absolute top-0 left-0 text-xs px-1 py-0 peer-placeholder-shown:px-3 peer-placeholder-shown:py-4 transition-all peer-placeholder-shown:text-sm sm:peer-placeholder-shown:text-lg" for="Email">Email<span class="text-red-500">*</span></label>
</div>
<div class="input-box relative flex flex-col mb-6 sm:mb-4">
<textarea type="text" name="Message" required class="bg-slate-50 w-auto px-3 py-4 text-sm peer focus-visible:outline-sky-400 resize-none sm:text-lg" placeholder=" " rows="8"></textarea>
<label class="pointer-events-none text-slate-500 absolute top-0 left-0 text-xs px-1 py-0 peer-placeholder-shown:px-3 peer-placeholder-shown:py-4 transition-all peer-placeholder-shown:text-sm sm:peer-placeholder-shown:text-lg" for="Message">Message<span class="text-red-500">*</span></label>
</div>
<button type="submit" class="bg-sky-400 text-orange-50 text-base font-bold py-5 px-11 rounded-xl mx-auto block">Send Email</button>
</form>
<div class="git-links-block mx-auto lg:mx-0 lg:my-auto">
<p class="mb-6 text-center sm:text-lg sm:mb-8 dark:text-slate-200">Or you can find me via social links</p>
<div class="git-links px-auto items-center flex flex-col">
<a target=”_blank” href="https://www.instagram.com/serpant1ne/" class="git-link text-sky-400 font-bold flex sm:text-lg flex-row mb-2"><img src="img/instagram.svg" alt="" class="mr-1">Serpant1ne</a>
<a target=”_blank” href="https://t.me/serpant1ne" class="git-link text-sky-400 font-bold flex sm:text-lg flex-row mb-2"><img src="img/telegram.svg" alt="" class="mr-1">Serpant1ne</a>
<a target=”_blank” href="https://github.com/Serpant1ne/" class="git-link text-sky-400 font-bold flex sm:text-lg flex-row"><img src="img/github.svg" alt="" class="mr-1">Serpant1ne</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bicycle mb-16">
<div class="container mx-auto">
<div class="section mx-6 md:mx-12">
<img src="img/bicycle.png" alt="" class="mx-auto">
</div>
</div>
</div>
<footer class="footer bg-orange-50 dark:bg-slate-800">
<div class="container mx-auto">
<div class="section mx-6 md:mx-12 py-5">
<p class="text-slate-700 text-sm text-center sm:text-lg dark:text-slate-200">© 2022 / Made by Gartsman Konstantin</p>
</div>
</div>
</footer>
</body>
</html>