Updated about me and fixed logo styles
This commit is contained in:
parent
9fa0ff195f
commit
a50a85046f
@ -12,16 +12,79 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a href="/" id="logo"><img src="/logo.png" alt="logo" /></a>
|
<a href="/" id="logo"></a>
|
||||||
<!-- <a id="modern" href="/modern"
|
<!-- <a id="modern" href="/modern"
|
||||||
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
|
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<h1>About me</h1>
|
<h1>About me</h1>
|
||||||
<p>
|
<p>
|
||||||
Hello, I'm Shishkov Dmitriy. I'm 16 years old computer programmer. I'm also do photography as a hobby. As
|
Hello, I'm Shishkov Dmitriy. I'm 17 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.
|
for spring 2021, I'm studying in "Ugra physico-mathematical boarding school" in Khanty-Mansiysk.
|
||||||
</p>
|
</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>
|
<p>See <a href="/contacts">contacts</a> to get in touch with me.</p>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a href="/" id="logo"><img src="/logo.png" alt="logo" /></a>
|
<a href="/" id="logo"></a>
|
||||||
<!-- <a id="modern" href="/modern"
|
<!-- <a id="modern" href="/modern"
|
||||||
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
|
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a href="/" id="logo"><img src="/logo.png" alt="logo" /></a>
|
<a href="/" id="logo"></a>
|
||||||
<!-- <a id="modern" href="/modern"
|
<!-- <a id="modern" href="/modern"
|
||||||
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
|
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a href="/" id="logo"><img src="/logo.png" alt="logo" /></a>
|
<a href="/" id="logo"></a>
|
||||||
<!-- <a id="modern" href="/modern"
|
<!-- <a id="modern" href="/modern"
|
||||||
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
|
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a href="/" id="logo"><img src="/logo.png" alt="logo" /></a>
|
<a href="/" id="logo"></a>
|
||||||
<!-- <a id="modern" href="/modern"
|
<!-- <a id="modern" href="/modern"
|
||||||
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
|
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
BIN
static/logo.png
BIN
static/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 602 B |
@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a href="/" id="logo"><img src="/logo.png" alt="logo" /></a>
|
<a href="/" id="logo"></a>
|
||||||
<!-- <a id="modern" href="/modern"
|
<!-- <a id="modern" href="/modern"
|
||||||
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
|
title="If you have modern browser, you can visit more fancy version of my site">Modernize</a> -->
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -1,37 +1,47 @@
|
|||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
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";
|
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 {
|
::selection {
|
||||||
background-color: #000000;
|
background-color: #000000;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html,
|
||||||
height: 100%;
|
body {
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-top: solid 5px #000000;
|
border-top: solid 5px #000000;
|
||||||
padding: 45px;
|
padding: 45px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
height: 65px;
|
height: 65px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header img {
|
header img {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo {
|
||||||
|
display: block;
|
||||||
|
height: 65px;
|
||||||
|
width: 65px;
|
||||||
|
background-color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* header #modern {
|
/* header #modern {
|
||||||
@ -49,45 +59,55 @@ header #modern:hover
|
|||||||
} */
|
} */
|
||||||
|
|
||||||
main {
|
main {
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main>* {
|
main > * {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main img {
|
main img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
main>ul {
|
main > ul {
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main p, main blockquote, main li {
|
main p,
|
||||||
font-size: 20px;
|
main blockquote,
|
||||||
line-height: 30px;
|
main li {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main a:hover {
|
main a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
main blockquote {
|
main blockquote {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
border-left: #000000 solid 5px;
|
border-left: #000000 solid 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
main>#header {
|
main details, main summary {
|
||||||
font-size: 45px;
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
main > #header {
|
||||||
|
font-size: 45px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
@media (max-width: 800px) {
|
||||||
body {
|
body {
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
}
|
}
|
||||||
header #modern {
|
header #modern {
|
||||||
margin-left: 25px;
|
margin-left: 25px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul ul > li {
|
||||||
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user