Updated about me and fixed logo styles

This commit is contained in:
Dmitriy Shishkov 2021-04-10 13:37:01 +05:00
parent 9fa0ff195f
commit a50a85046f
No known key found for this signature in database
GPG Key ID: 7CAE12ED13853CAC
8 changed files with 129 additions and 46 deletions

View File

@ -12,16 +12,79 @@
<body>
<header>
<a href="/" id="logo"><img src="/logo.png" alt="logo" /></a>
<a href="/" id="logo"></a>
<!-- <a id="modern" href="/modern"
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
</header>
<main>
<h1>About me</h1>
<p>
Hello, I'm Shishkov Dmitriy. I'm 16 years old computer programmer. I'm also do photography as a hobby. As
for summer 2020, I'm studying in "Ugra physico-mathematical boarding school" in Khanty-Mansiysk.
Hello, I'm Shishkov Dmitriy. I'm 17 years old computer programmer. I'm also do photography as a hobby. As
for spring 2021, I'm studying in "Ugra physico-mathematical boarding school" in Khanty-Mansiysk.
</p>
<p>
My specialization is frontend web development. All web services and application I deploy on my own. For it
I've used <a href="https://www.docker.com">Docker</a> and <a
href="https://docs.docker.com/compose">docker-compose</a> for deployment on my VPS.
Currently my server is powered with <a href="https://dokku.com">Dokku</a>. For
smaller projects I also used some PaaS like <a href="https://heroku.com">Heroku</a> and <a
href="https://vercel.com">Vercel Now</a>.
</p>
<p>
I also do in for C development. In <a href="/projects">projects</a> section you can see some of my
developments in this langualge. Even this site is powered by page generator written in C.
</p>
<p>More formally, this is my stack:</p>
<ul>
<li>JS <ul>
<li><a href="https://nodejs.org">NodeJS</a></li>
<li><a href="https://www.typescriptlang.org">TypeScript</a></li>
<li><a href="https://reactjs.org">React</a>:
<ul>
<li><a href="https://reactrouter.com">React Router</a></li>
<li><a href="https://github.com/molefrog/wouter">Wouter</a></li>
<li><a href="https://www.framer.com/motion">Framer Motion</a></li>
<li><a href="https://styled-components.com">Styled Components</a></li>
</ul>
</li>
<li><a href="https://nextjs.org">Next.js</a></li>
<li><a href="https://graphql.org">Graphql</a>:
<ul>
<li><a href="https://www.apollographql.com">Apollo</a></li>
</ul>
</li>
<li><a href="https://www.prisma.io">Prisma</a></li>
<li><a href="https://www.npmjs.com/package/jsonwebtoken">jsonwebtoken</a></li>
<li><a href="https://sendgrid.com">SendGrid</a></li>
<li><a href="https://github.com/jakearchibald/idb">IndexedDB</a></li>
<li><a href="https://immerjs.github.io/immer">Immer</a></li>
<li><a href="https://expressjs.com">ExpressJS</a></li>
<li>Dev environment: <ul>
<li><a href="https://eslint.org">ESLint</a></li>
<li><a href="https://prettier.io">Prettier</a></li>
<li><a href="https://jestjs.io">Jest</a></li>
<li><a href="https://mochajs.org">Mocha</a></li>
<li><a href="https://webpack.js.org">Webpack</a></li>
<li><a href="https://www.snowpack.dev">Snowpack</a></li>
<li><a href="https://storybook.js.org">Storybook</a></li>
<li><a href="https://babeljs.io">Babel</a></li>
</ul>
</li>
</ul>
</li>
<li>Deployment: <ul>
<li><a href="https://www.docker.com">Docker</a></li>
<li><a href="https://docs.docker.com/compose">docker-compose</a></li>
<li><a href="https://dokku.com">Dokku</a></li>
<li><a href="https://heroku.com">Heroku</a></li>
<li><a href="https://vercel.com">Vercel Now</a></li>
<li><a href="https://www.oracle.com/cloud">Oracle Cloud Infrastructure</a></li>
</ul>
</li>
<li>C</li>
<li><a href="https://www.python.org">Python</a></li>
<li><a href="http://www.lua.org">Lua</a></li>
</ul>
<p>See <a href="/contacts">contacts</a> to get in touch with me.</p>
</main>
</body>

View File

@ -12,7 +12,7 @@
<body>
<header>
<a href="/" id="logo"><img src="/logo.png" alt="logo" /></a>
<a href="/" id="logo"></a>
<!-- <a id="modern" href="/modern"
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
</header>

View File

@ -12,7 +12,7 @@
<body>
<header>
<a href="/" id="logo"><img src="/logo.png" alt="logo" /></a>
<a href="/" id="logo"></a>
<!-- <a id="modern" href="/modern"
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
</header>

View File

@ -12,7 +12,7 @@
<body>
<header>
<a href="/" id="logo"><img src="/logo.png" alt="logo" /></a>
<a href="/" id="logo"></a>
<!-- <a id="modern" href="/modern"
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
</header>

View File

@ -12,7 +12,7 @@
<body>
<header>
<a href="/" id="logo"><img src="/logo.png" alt="logo" /></a>
<a href="/" id="logo"></a>
<!-- <a id="modern" href="/modern"
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
</header>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 602 B

View File

@ -12,7 +12,7 @@
<body>
<header>
<a href="/" id="logo"><img src="/logo.png" alt="logo" /></a>
<a href="/" id="logo"></a>
<!-- <a id="modern" href="/modern"
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
</header>

View File

@ -1,37 +1,47 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
::selection {
background-color: #000000;
color: #ffffff;
background-color: #000000;
color: #ffffff;
}
html, body {
height: 100%;
html,
body {
height: 100%;
}
body {
background-color: #ffffff;
border-top: solid 5px #000000;
padding: 45px;
background-color: #ffffff;
border-top: solid 5px #000000;
padding: 45px;
}
a {
font-family: monospace;
color: #000000;
font-family: monospace;
color: #000000;
}
header {
height: 65px;
margin-bottom: 30px;
height: 65px;
margin-bottom: 30px;
}
header img {
height: 100%;
height: 100%;
}
#logo {
display: block;
height: 65px;
width: 65px;
background-color: #000000;
}
/* header #modern {
@ -49,45 +59,55 @@ header #modern:hover
} */
main {
max-width: 800px;
max-width: 800px;
}
main>* {
margin-bottom: 30px;
main > * {
margin-bottom: 30px;
}
main img {
max-width: 100%;
max-width: 100%;
}
main>ul {
padding-left: 30px;
main > ul {
padding-left: 30px;
}
main p, main blockquote, main li {
font-size: 20px;
line-height: 30px;
main p,
main blockquote,
main li {
font-size: 20px;
line-height: 30px;
}
main a:hover {
text-decoration: none;
text-decoration: none;
}
main blockquote {
margin-left: 20px;
padding-left: 10px;
border-left: #000000 solid 5px;
margin-left: 20px;
padding-left: 10px;
border-left: #000000 solid 5px;
}
main>#header {
font-size: 45px;
main details, main summary {
outline: none;
}
main > #header {
font-size: 45px;
}
@media (max-width: 800px) {
body {
padding: 30px;
}
header #modern {
margin-left: 25px;
}
}
body {
padding: 30px;
}
header #modern {
margin-left: 25px;
}
}
ul ul > li {
margin-left: 20px;
}