-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (144 loc) · 7.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Main Page | Yozhikvtumane</title>
<link rel="stylesheet" href="styles/style.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-69860269-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-69860269-2');
</script>
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li><a href="#welcome">Intro</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contacts - 📞 📧</a></li>
</ul>
</nav>
</header>
<main id="welcome">
<h1 class="welcome-header">Hello! My name is Anton!</h1>
<p class="welcome-text">
I am a web-developer currently working on projects involving JavaScript, HTML, CSS. This page
contains some of my work. I enjoy coding and the process of creating something beautiful and useful with written
words. As someone who takes responsibility for my own personal development, I'm constantly evaluating and advancing
my skills.
</main>
<section id="projects">
<h2>Things I made that live on the Internet</h2>
<div class="flex-wrapper">
<div class="projects-column">
<div class="project-box box">
<img src="./img/drum-machine.svg" alt="aliens have stolen this img :(">
<h3>
<a href="/drum-machine-react-build/index.html" target="_blank" class="dotted">React Drum Machine</a>
</h3>
<h4>Stack: JavaScript (ES6, React, JSX), HTML, CSS; <a href="https://github.com/yozhikvtumane/drum-machine-react" target="_blank">Source code</a></h4>
<p class="project-description" data-expand="drumMachineReact">Drum machine right in your browser! Made with React.js. Uses props, state and other cool React stuff. Key compo <span class="more-button">more ▼</span></p>
</div>
<div class="project-box box">
<img src="./img/md-app.svg" alt="aliens have stolen this img :(">
<h3>
<a href="/markdown-previewer/index.html" target="_blank" class="dotted">Markdown Previewer</a>
</h3>
<h4>Stack: JavaScript (ES6, Marked.js), HTML, CSS; <a href="https://github.com/yozhikvtumane/markdown-previewer" target="_blank">Source code</a></h4>
<p class="project-description" data-expand="markdown">This is a project in which you type or paste your markdown
styled text and it will be automatically converted to <span class="more-button">more ▼</span></p>
</div>
<div class="project-box box">
<img src="./img/tech-doc.svg" alt="aliens have stolen this img :(">
<h3>
<a href="/fcc-techdoc/index.html" target="_blank" class="dotted">Technical documentation</a>
</h3>
<h4>Stack: JavaScript (ES6), HTML, CSS; <a href="https://github.com/yozhikvtumane/fcc-techdoc" target="_blank">Source code</a></h4>
<p class="project-description">Two column template for documentation page.</p>
</div>
</div>
<div class="projects-column">
<div class="project-box box">
<img src="./img/shopping-list.svg" alt="aliens have stolen this img :(">
<h3>
<a href="https://shopping-list.aplusdev.eu" target="_blank" class="dotted">Yet Another Shopping List</a>
</h3>
<h4>Stack: JavaScript (ES6, React, JSX, Atlaskit, Styled components, Express), HTML, CSS; <a href="https://github.com/yozhikvtumane/shopping-list" target="_blank">Source code</a></h4>
<p class="project-description">Fullstack React Shopping list application. What does it mean? It means that data you enter is saved on the server, so you can access it later.
</p>
</div>
<div class="project-box box">
<img src="./img/twitch-app.svg" alt="aliens have stolen this img :(">
<h3>
<a href="/twitch-app/index.html" target="_blank" class="dotted">Twitch API application</a>
</h3>
<h4>Stack: JavaScript (ES6), HTML, CSS; <a href="https://github.com/yozhikvtumane/twitch-app" target="_blank">Source code</a></h4>
<p class="project-description" data-expand="twitchApp">Using fetch this app receives data from Twitch REST API .
Unfortunately mentioned API doesn't provide online channel statuses directly, so
<span class="more-button">more ▼</span>
</p>
</div>
<div class="project-box box">
<img src="./img/weather-app.svg" alt="aliens have stolen this img :(">
<h3>
<a href="/weather-app/index.html" target="_blank" class="dotted">Weather by location</a>
</h3>
<h4>Stack: JavaScript (ES6), HTML, CSS; <a href="https://github.com/yozhikvtumane/weather-app" target="_blank">Source code</a></h4>
<p class="project-description" >Allow this app to use your location and it will show your
local weather, fetching data from OpenWeatherMap REST API. This app doesn't store your location data, so don't worry about the privacy.</p>
</div>
</div>
<div class="projects-column">
<div class="project-box box">
<img src="./img/blog.svg" alt="aliens have stolen this img :(">
<h3>
<a href="https://blog.aplusdev.eu" target="_blank" class="dotted">React Blog</a>
</h3>
<h4>Stack: JavaScript (ES6, React, React-router), HTML, CSS; <a href="https://github.com/yozhikvtumane/blog-aplusdev" target="_blank">Source code</a></h4>
<p class="project-description">Blog on React, which I made for my school project. Each article stored as an endpoint for react-router.</p>
</div>
<div class="project-box box">
<img src="./img/quotes-app.svg" alt="aliens have stolen this img :(">
<h3>
<a href="/random-quote-react/index.html" target="_blank" class="dotted">Random Quote Generator</a>
</h3>
<h4>Stack: JavaScript (ES6, React, JSX), HTML, CSS; <a href="https://github.com/yozhikvtumane/random-quote-react" target="_blank">Source code</a></h4>
<p class="project-description">React app, which uses props, state and also fetches data from online source.</p>
</div>
<div class="project-box box">
<img src="./img/tile-bg.jpg" alt="aliens have stolen this img :(">
<h3>
<a href="/sketcher/" target="_blank" class="dotted">Sket4er - Draw on Canvas</a>
</h3>
<h4>Stack: JS (ES6), HTML, CSS; <a href="https://github.com/yozhikvtumane/sketcher" target="_blank">Source code</a></h4>
<p class="project-description">Draw on HTML canvas with your mouse.</p>
</div>
<div class="project-box box">
<img src="./img/app-promo.svg" alt="aliens have stolen this img :(">
<h3>
<a href="/fit-app/index.html" target="_blank" class="dotted">App Promo Page</a>
</h3>
<h4>Stack: JavaScript (ES6), HTML, CSS; <a href="https://github.com/yozhikvtumane/fit-app" target="_blank">Source code</a></h4>
<p class="project-description">Responsive promo page for the calorie tracking application.</p>
</div>
</div>
</div>
</section>
<section id="contact">
<h2>Contact me</h2>
<h3>By e-mail: <a href="mailto:[email protected]" class="dotted">[email protected]</a></h3>
<h3 style="display: flex;">By phone : <img src="img/pn.svg" alt="aliens have stolen this image :(" style="margin-left: 0.5em;"></h3>
</section>
<footer>
<div class="wrapper">
<a href="https://github.com/yozhikvtumane" target="_blank">Yozhikvtumane</a><span class="copy">2018</span>
</div>
</footer>
<script src="js/index.js"></script>
</body>
</html>