kbatyr · kbatyr · Dec 27, 2021 · Dec 27, 2021 · Dec 27, 2021 · Dec 27, 2021
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# rsschool-cv
+https://kbatyr.github.io/rsschool-cv/
diff --git a/assets/icons/favicon.png b/assets/icons/favicon.png
diff --git a/assets/icons/rs_school_js.svg b/assets/icons/rs_school_js.svg
diff --git a/assets/images/ava.jpg b/assets/images/ava.jpg
diff --git a/cv.md b/cv.md
@@ -0,0 +1,58 @@
+# [rsschool-cv](https://github.com/kbatyr/rsschool-cv)
+# Koshenov Batyrkhan
+### Contact information:
+**Phone:** +7708 855 8216  
+**E-mail:** [email protected]  
+**Discord:** @kbatyr
+***
+### About myself:
+Hi everyone! My name is Batyrkhan, I'm 25 years old and from Kazakhstan, Nur-Sultan. Now I'm studying at **alem** programming school based on the international education system called [01 Edu System](https://01-edu.org/).  
+***
+### Skills and Proficiency:
+* Go
+* HTML5, CSS3
+* Git, Github
+* Docker
+***
+### Code example:
+*This example implements the **split** function of Go language standard library.*  
+```
+func Split(s, sep string) []string {
+	if sep == "" {
+		for _, ch := range s {
+			res = append(res, string(ch))
+		}
+	} else {
+		for i := 0; i <= len(s)-len(sep); i++ {
+
+			if s[i:len(sep)+i] == sep {
+				s = s[:i] + " " + s[len(sep)+i:]
+			}
+		}
+
+		var res []string
+		var word string
+		for _, let := range s {
+			if let != ' ' {
+				word += string(let)
+			} 	else {
+				res = append(res, word)
+				word = ""
+			}
+		}
+		if word != "" {
+			res = append(res, word)
+		}
+	}
+	return res
+}
+```
+***
+### Education:
+* [Eurasian National University](https://enu.kz/ru/), Information Technologies, 2013-2017  
+* [Alem](https://alem.school/) programming school, Kazakhstan, Nur-Sultan 2021  
+***
+### Language skills:
+* Kazakh: native speaker
+* Russian: native speaker
+* English: B1  
diff --git a/index.html b/index.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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">
+	<title>CV</title>
+	<link rel="stylesheet" href="./style.css">
+	<link rel="shortcut icon" href="./assets/icons/favicon.png">
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400&display=swap" rel="stylesheet">
+</head>
+
+
+<body>
+	<header class="header">
+		<div class="container">
+			<nav class="nav">
+				<ul class="nav-list">
+					<li class="nav-item"><a href="#about" class="nav-link">About me</a></li>
+					<li class="nav-item"><a href="#contacts" class="nav-link">Contacts</a></li>
+					<li class="nav-item"><a href="#skills" class="nav-link">Skills</a></li>
+					<li class="nav-item"><a href="#code" class="nav-link">Code example</a></li>
+					<li class="nav-item"><a href="#edu" class="nav-link">Education</a></li>
+					<li class="nav-item"><a href="#lang" class="nav-link">Language skills</a></li>
+				</ul>
+			</nav>
+		</div>
+	</header>
+
+	<main class="main">
+		<div class="container main-container">
+			<section class="section section-profile" id="profile">
+				<img class="section-profile-logo" src="./assets/images/ava.jpg" alt="my avatar">
+				<div class="section-profile-title">
+					<h1 class="section-title section-title-h1">Koshenov Batyrkhan</h1>
+					<h3 class="section-title section-title-h3">Junior Fulstack Developer</h3>
+				</div>
+			</section>
+
+			<section class="section section-contacts" id="contacts">
+				<h2 class="section-title">Contacts</h2>
+				<ul class="section-list">
+					<li class="section-item">
+						<span class="section-title">Location:</span> Nur-Sultan, Kazakhstan
+					</li>
+					<li class="section-item"> <span class="section-title">E-mail:</span>
+						<a href="mailto:[email protected]">[email protected]</a>
+					</li>
+					<li class="section-item">
+						<span class="section-title">Discord:</span>
+						<a href="https://discordapp.com/users/1434/">kbatyr#1434</a>
+					</li>
+					<li class="section-item">
+						<span class="section-title">Telegram:</span>
+						<a href="https://t.me/kbatyr">@kbatyr</a>
+					</li>
+				</ul>
+			</section>
+
+			<section class="section" id="about">
+				<h2 class="section-title">About me</h2>
+				<p>Hi everyone! My name is Batyrkhan, I'm 25 years old and from Kazakhstan, Nur-Sultan. Now I'm studying at
+					<a href="https://alem.school/">alem</a> programming school based on the international education system
+					called
+					<a href="https://01-edu.org/">01 Edu System</a>.
+				</p>
+			</section>
+
+			<section class="section section-skills" id="skills">
+				<h2 class="section-title">Skills</h2>
+				<ul class="section-list">
+					<li class="section-item"><span class="section-title">Backend:</span> Go</li>
+					<li class="section-item"><span class="section-title">Web:</span> HTML5, CSS3</li>
+					<li class="section-item"><span class="section-title">Version control:</span> Git, Github</li>
+					<li class="section-item"><span class="section-title">Other:</span> Docker</li>
+				</ul>
+			</section>
+
+			<section class="section" id="code">
+				<h2 class="section-title">Code Example</h2>
+				<p>This example implements the <strong>Square</strong> function on JavaScript.</p>
+				<pre>
+const square = (num) => {
+	return num * num;
+};
+					</pre>
+			</section>
+
+			<section class="section section-lang" id="lang">
+				<h2 class="section-title">Language skiils</h2>
+				<ul class="section-list">
+					<li class="section-item">Kazakh: Native</li>
+					<li class="section-item">Russian: Native</li>
+					<li class="section-item">English: B2</li>
+				</ul>
+			</section>
+
+			<section class="section section-edu" id="edu">
+				<h2 class="section-title">Education</h2>
+				<ul class="section-list">
+					<li class="section-item">Eurasian National University, Information Technologies, 2013-2017</li>
+					<li class="section-item">Alem programming school, Kazakhstan, Nur-Sultan 2021</li>
+				</ul>
+			</section>
+		</div>
+	</main>
+
+	<footer class="footer">
+		<div class="container footer-container">
+			<div>
+				© 2022
+				<a class="nav-link" href="https://github.com/kbatyr">kbatyr</a>
+			</div>
+			<a class="rss" href="https://rs.school/js/"></a>
+		</div>
+	</footer>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,185 @@
+* {
+	box-sizing: border-box;
+}
+
+html {
+	scroll-behavior: smooth;
+}
+
+body {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+
+	min-height: 100vh;
+	margin: 0;
+	padding: 0;
+
+	font-family: 'Quicksand', sans-serif;
+	font-size: 18px;
+	line-height: 1.3;
+}
+
+.header {
+	background-color: #c9643b;
+	color: #fff;
+}
+
+.nav-list {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+
+	list-style: none;
+}
+
+.nav-link {
+	padding: 0 20px;
+	line-height: 50px;
+
+	text-decoration: none;
+	color: #fff;
+	transition: 0.3s;
+}
+
+.container {
+	max-width: 1240px;
+	margin: 0 auto;
+}
+
+.main-container {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.main-container a {
+	text-decoration: none;
+	color:#bdb76b;
+	font-weight: bold;
+}
+
+.section {
+	width: 45%;
+	padding: 10px;
+	padding-bottom: 35px;
+	margin: 20px;
+
+	border-bottom: 1px solid #c9643b;
+}
+
+.section-profile {
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	width: 100%;
+
+	border-bottom: 15px solid #d7d1c9;
+}
+
+.section-profile-title {
+	text-align: center;
+}
+
+.section-profile-logo {
+	border-radius: 50%;
+	width: 220px;
+	height: 220px;	
+}
+
+.section-lang , .section-edu {
+	border: 0;
+	line-height: 2;
+}
+
+.section-contacts , .section-skills {
+	line-height: 2;
+}
+
+.section-title {
+	text-transform: uppercase;
+	color: #c9643b;
+	font-weight: bold;
+}
+
+.section-title-h1 {
+	position: relative;
+	padding: 0;
+	margin-bottom: 20px;
+
+	color: black;
+	font-size: 30px;
+	letter-spacing: 5px;
+}
+
+.section-title-h1::after {
+	content: "";
+	position: absolute;
+	bottom: -20px;
+	left: 50%;
+	margin-left: -70px;
+	width: 140px;
+	height: 2px;
+	background-color: #c9643b;
+}
+
+.section-title-h3 {
+	margin-top: 50px;
+	color: #c9643b;
+	letter-spacing: 2px;
+}
+
+.section-item {
+	position: relative;
+	padding-left: 30px;
+
+	list-style-type: none;
+}
+
+.section-item::before {
+	content: "";
+	position: absolute;
+	top: 12px;
+	left: 0px;
+	width: 10px;
+	height: 10px;
+	border: 1px solid #c9643b;
+	border-radius: 50%;
+}
+
+.footer {
+	padding: 20px;
+	background-color: #c9643b;
+	color: #fff;
+}
+
+.footer-container {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin: 0 auto;
+}
+
+.rss {
+	width: 120px;
+	height: 45px;
+	background-image: url(./assets/icons/rs_school_js.svg);
+}
+
+@media (max-width: 820px) {
+	.header {
+		display: none;	
+	}
+
+	.section {
+		width: 100%;
+	}
+
+	.section-lang {
+		border-bottom: 1px solid #c9643b;
+	}
+
+	.section-profile-logo {
+		width: 120px;
+		height: 120px ;
+	}
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		# rsschool-cv
		https://kbatyr.github.io/rsschool-cv/