-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (103 loc) · 8.01 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-Control" content="public">
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta name="description" content="Portfolio">
<meta name="keywords" content="portfolio,web,developer">
<meta name="robots" content="index, follow">
<link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500&subset=cyrillic&display=swap">
<link rel="stylesheet" type="text/css" href="css/main.min.css">
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicons/favicon-16x16.png">
<link rel="manifest" href="/img/favicons/site.webmanifest">
<link rel="mask-icon" href="/img/favicons/safari-pinned-tab.svg" color="#74de91">
<link rel="shortcut icon" href="/img/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="msapplication-TileImage" content="/img/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<script>
/* preloader */
!function(){var e=document.createElement("div");e.className="preloader",e.innerHTML='<div class="spinner"></div>',document.body.appendChild(e),window.addEventListener("load",function(){e.className+=" fade",setTimeout(function(){e.style.display="none"},100)})}();
</script>
<header class="header" id="header">
<div class="container-fluid">
<div class="row bg-light align-items-start justify-content-around">
<div class="header__desc col-12 col-sm-8 col-md-5 col-xl-3 mt-3">
<h1 class="header__title">Serhii Ralchenko</h1>
<p class="header__subtitle text-secondary">Web Developer</p>
</div>
<nav class="navigation navbar navbar-expand-md navbar-light col-sm-2 col-md-4 col-lg-3 col-xl-2 mt-3 order-first order-sm-last">
<button class="navbar-toggler ml-sm-auto" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#technologies">Technologies</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Works</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<main>
<section class="about" id="about">
<div class="container">
<div class="row justify-content-center">
<div class="about__text p-3 text-dark col-12 col-md-10 col-lg-8 mt-md-5">
<p class="about__paragraph mt-md-2">Hello, my name is Serhii. I am a Front End Developer living in Kyiv, Ukraine</p>
<p class="about__paragraph mt-md-2">I'm passionate about building visually great websites. I use HTML, CSS and JavaScript according to the latest code standards. Moreover, using modern JavaScript libraries and frameworks like React and Vue, I create amazing and fast single-page applications (SPA). I produce good and maintainable code, all my websites are responsive and cross-browser compatible. I would enjoy an opportunity to participate in exciting and creative projects.</p>
</div>
</div>
</div>
</section>
<section class="technologies" id="technologies">
<div class="container">
<div class="row justify-content-center mt-2 mt-md-5">
<h2 class="technologies__title text-center">Technology Summary</h2>
</div>
<div class="row justify-content-center mt-2 mt-md-3">
<div class="technologies__carousel col-10"><img class="technologies__img" src="img/html5.png" alt="HTML5" title="HTML5"><img class="technologies__img" src="img/css3.png" alt="CSS3" title="CSS3"><img class="technologies__img" src="img/es6.png" alt="ES6" title="ES6"><img class="technologies__img" src="img/sass.png" alt="SASS" title="SASS"><img class="technologies__img" src="img/git.png" alt="Git" title="Git"><img class="technologies__img" src="img/github.png" alt="GitHub" title="GitHub"><img class="technologies__img" src="img/npm.png" alt="NPM" title="NPM"><img class="technologies__img" src="img/gulp.png" alt="Gulp" title="Gulp"><img class="technologies__img" src="img/jquery.png" alt="JQuery" title="JQuery"><img class="technologies__img" src="img/bootstrap.png" alt="Bootstrap" title="Bootstrap"><img class="technologies__img" src="img/bem.png" alt="BEM" title="BEM"><img class="technologies__img" src="img/react.png" alt="React" title="React"><img class="technologies__img" src="img/vue.png" alt="Vue" title="Vue"></div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="container">
<div class="row justify-content-center pt-2 mt-4 mt-md-5">
<h2 class="technologies__title text-center">My Works</h2>
</div>
<div class="row justify-content-center mt-2 mt-md-3">
<div class="portfolio__cards card-deck p-3">
<div class="portfolio__card card mb-4 box-shadow"><a class="portfolio__work-link" href="fitness/"><img class="portfolio__img card-img-top" src="img/portfolio-fitness.png" alt="Fitness"></a>
<div class="card-body mt-4"><a class="portfolio__source-link btn btn-block btn-outline-dark" href="https://github.com/serphiy/fitness">View Source</a></div>
</div>
<div class="portfolio__card card mb-4 box-shadow"><a class="portfolio__work-link" href="tajem/"><img class="portfolio__img card-img-top" src="img/portfolio-tajem.png" alt="Tajem"></a>
<div class="card-body mt-4"><a class="portfolio__source-link btn btn-block btn-outline-dark" href="https://github.com/serphiy/tajem">View Source</a></div>
</div>
<div class="portfolio__card card mb-4 box-shadow"><a class="portfolio__work-link" href="fdn/"><img class="portfolio__img card-img-top" src="img/portfolio-fdn.png" alt="FDN"></a>
<div class="card-body mt-4"><a class="portfolio__source-link btn btn-block btn-outline-dark" href="https://github.com/serphiy/fdn">View Source</a></div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer" id="footer">
<div class="container-fluid">
<div class="row bg-light justify-content-center mt-3 p-5">
<div class="footer__desc text-secondary">© 2019 - Serhii Ralchenko</div>
</div>
</div>
</footer>
<script src="js/main.min.js"></script>
</body>
</html>