feat: index page layout

This commit is contained in:
Sergey Yarkov 2022-07-08 19:45:40 +03:00
parent eb9f1ccd7f
commit 80840260e2
35 changed files with 645 additions and 83 deletions

View File

@ -1,5 +1,8 @@
# yarkov.tech # yarkov.tech
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Netlify Status](https://api.netlify.com/api/v1/badges/ccd0460a-9725-4e35-8263-1608c4186d9c/deploy-status)](https://app.netlify.com/sites/jade-froyo-876dfe/deploys)
Personal website created with Astro. Personal website created with Astro.
## License ## License

View File

@ -1,4 +1,6 @@
import { defineConfig } from 'astro/config'; import { defineConfig } from 'astro/config';
// https://astro.build/config // https://astro.build/config
export default defineConfig({}); export default defineConfig({
site: 'https://yarkov.tech',
});

View File

@ -1,3 +0,0 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2256 8.52039C10.2256 9.10839 10.3929 9.34289 10.8304 9.34289C11.8055 9.34289 12.4264 8.10039 12.4264 6.03399C12.4264 2.87559 10.1248 1.36359 7.25127 1.36359C4.29517 1.36359 1.60646 3.34599 1.60646 7.09239C1.60646 10.6708 3.95846 12.6196 7.57046 12.6196C8.79686 12.6196 9.62006 12.4852 10.8794 12.0652L11.1496 13.1901C9.90637 13.594 8.57777 13.7109 7.55367 13.7109C2.81607 13.7109 0.278564 11.1069 0.278564 7.09169C0.278564 3.04289 3.21927 0.287689 7.26807 0.287689C11.4849 0.287689 13.7186 2.80769 13.7186 5.89889C13.7186 8.51969 12.8961 10.5189 10.3089 10.5189C9.13216 10.5189 8.36007 10.0485 8.25926 9.00619C7.95686 10.1654 7.15047 10.5189 6.05777 10.5189C4.59617 10.5189 3.36976 9.39259 3.36976 7.12529C3.36976 4.84049 4.44566 3.42929 6.37767 3.42929C7.40247 3.42929 8.04086 3.83249 8.32506 4.47089L8.81297 3.58049H10.2242V8.52039H10.2256ZM8.15986 6.30279C8.15986 5.37949 7.47037 4.99239 6.89917 4.99239C6.27757 4.99239 5.58946 5.49569 5.58946 6.97479C5.58946 8.15079 6.11026 8.80599 6.89917 8.80599C7.45357 8.80599 8.15986 8.45319 8.15986 7.47879V6.30279Z" fill="#010409"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,3 +0,0 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.99453 1.04315C3.61348 1.04179 0.875 3.77889 0.875 7.15722C0.875 9.8287 2.58809 12.0996 4.97383 12.9336C5.29512 13.0142 5.2459 12.7859 5.2459 12.6301V11.5705C3.39062 11.7879 3.31543 10.5601 3.19102 10.3551C2.93945 9.92577 2.34473 9.81639 2.52246 9.61132C2.94492 9.39393 3.37559 9.666 3.87461 10.4029C4.23555 10.9375 4.93965 10.8473 5.29648 10.7584C5.37441 10.4371 5.54121 10.15 5.7709 9.92714C3.84863 9.58261 3.04746 8.40956 3.04746 7.01503C3.04746 6.33827 3.27031 5.7162 3.70781 5.21444C3.42891 4.38729 3.73379 3.67909 3.7748 3.57382C4.56914 3.50272 5.39492 4.14257 5.45918 4.19315C5.91035 4.07147 6.42578 4.00722 7.00273 4.00722C7.58242 4.00722 8.09922 4.07421 8.55449 4.19725C8.70898 4.07968 9.47461 3.53007 10.2129 3.59706C10.2525 3.70233 10.5506 4.39413 10.2881 5.21034C10.7311 5.71347 10.9566 6.341 10.9566 7.01913C10.9566 8.4164 10.15 9.59081 8.22227 9.92987C8.38738 10.0923 8.51849 10.2859 8.60792 10.4995C8.69736 10.7131 8.74333 10.9424 8.74316 11.174V12.7121C8.7541 12.8351 8.74316 12.9568 8.94824 12.9568C11.3695 12.1406 13.1127 9.85331 13.1127 7.15858C13.1127 3.77889 10.3729 1.04315 6.99453 1.04315Z" fill="#010409"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,3 +0,0 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0806 2.13178C12.0806 2.13178 13.2138 1.6899 13.1194 2.76303C13.0879 3.20491 12.8046 4.75147 12.5843 6.4243L11.8288 11.3796C11.8288 11.3796 11.7659 12.1056 11.1992 12.2318C10.6326 12.3581 9.78273 11.7899 9.62532 11.6637C9.49941 11.569 7.26448 10.1487 6.47751 9.45431C6.25715 9.26493 6.00533 8.88617 6.50898 8.44429L9.8142 5.28805C10.1919 4.90929 10.5697 4.02554 8.99576 5.09867L4.58882 8.09712C4.58882 8.09712 4.08517 8.41274 3.14084 8.12868L1.09475 7.49743C1.09475 7.49743 0.33927 7.02399 1.62988 6.55053C4.7777 5.06709 8.64952 3.55208 12.0806 2.13178Z" fill="#010409"/>
</svg>

Before

Width:  |  Height:  |  Size: 687 B

View File

@ -0,0 +1,24 @@
---
import './Footer.scss';
import { AstroIcon, NetlifyIcon, RssIcon } from '@components/icons';
---
<footer class='footer'>
<div class='container'>
<ul class='footer__links'>
<li>
<a href='https://astro.build/' target='_blank'>Astro</a>
<AstroIcon />
</li>
<li>
<a href='https://www.netlify.com/' target='_blank'>Netlify</a>
<NetlifyIcon />
</li>
<li>
<a href='/rss.xml' target='_blank'>RSS</a>
<RssIcon />
</li>
</ul>
<p class='footer__copy'>© Sergey Yarkov, 2022</p>
</div>
</footer>

View File

@ -0,0 +1,33 @@
.footer {
& .container {
margin-top: 5rem;
padding: 25px 0 10px 0;
font-weight: 500;
border-top: 1px solid var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
row-gap: 15px;
}
&__links {
display: flex;
align-items: center;
column-gap: 25px;
list-style: none;
margin: 0;
padding: 0;
& li {
display: flex;
align-items: center;
column-gap: 7px;
& a {
color: var(--font-color);
font-size: var(--font-size-sm);
}
}
}
&__copy {
text-align: center;
font-size: var(--font-size-xs);
}
}

View File

@ -0,0 +1 @@
export { default } from './Footer.astro';

View File

@ -0,0 +1,34 @@
---
import './Header.scss';
import { SITE_METADATA } from '@root/config';
import { EmailIcon, GithubIcon, TelegramIcon } from '@components/icons';
import ThemeSwitcher from '@components/ThemeSwticher';
---
<header class='header'>
<div class='container'>
<div class='header__logo'>
<a href='/'>{SITE_METADATA.name}</a>
</div>
<nav class='header__nav'>
<ul class='header__nav-links'>
<li><a href='/articles'>статьи</a></li>
<li><a href='/projects'>проекты</a></li>
<li><a href='/about'>обо мне</a></li>
<li><a href='/contacts'>контакты</a></li>
</ul>
<div class='header__nav-contacts'>
<a href={'mailto:' + SITE_METADATA.contacts.email}>
<EmailIcon />
</a>
<a href={SITE_METADATA.contacts.githubUrl}>
<GithubIcon />
</a>
<a href={SITE_METADATA.contacts.telegramUrl}>
<TelegramIcon />
</a>
</div>
<ThemeSwitcher />
</nav>
</div>
</header>

View File

@ -0,0 +1,51 @@
.header {
position: sticky;
top: 0;
border-bottom: 1px solid var(--border-color);
background-color: var(--background-header-color);
padding-top: 15px;
padding-bottom: 15px;
& .container {
display: flex;
align-items: center;
justify-content: space-between;
}
&__logo a {
text-decoration: none;
font-weight: 600;
font-size: var(--font-size-lg);
color: var(--font-color);
}
&__nav {
display: flex;
align-items: center;
& ul {
display: flex;
list-style: none;
column-gap: 20px;
margin: 0;
padding: 0;
margin-right: 35px;
& li a {
display: inline-block;
font-weight: 500;
color: var(--font-color);
&:hover {
color: var(--color-blue-500);
}
}
}
&-contacts {
display: flex;
align-items: center;
column-gap: 10px;
margin-right: 40px;
& a {
text-decoration: none;
font-size: 0;
}
}
}
}

View File

@ -0,0 +1 @@
export { default } from './Header.astro';

View File

@ -0,0 +1,32 @@
---
import './RecentArticles.scss';
---
<section class='publications'>
<div class='container'>
<div class='publications-heading'>
<h2>недавние публикации</h2>
<a href='/articles'>смотреть все</a>
</div>
</div>
<div class='publications-list container'>
<article>
<a href='#'>
<h3>
Как взаимодействовать с микроконтроллером испульзуюя WebSerialAPI
</h3>
<p>
<time datetime='2022-01-01 22:00'>ЯНВ 21, 2022</time>
</p>
</a>
</article>
<article>
<a href='#'>
<h3>Развертывание вашего Node.js приложение с помощью Docker</h3>
<p>
<time datetime='2022-01-01 22:00'>ЯНВ 15, 2022</time>
</p>
</a>
</article>
</div>
</section>

View File

@ -0,0 +1,47 @@
.publications {
&-heading {
display: flex;
align-items: center;
column-gap: 15px;
row-gap: 5px;
flex-wrap: wrap;
justify-content: space-between;
border-bottom: 1px solid var(--border-color);
padding-bottom: 10px;
& h2 {
margin: 0;
}
}
&-list {
margin-top: 10px;
max-width: calc(var(--content-width) + (var(--content-padding) * 2));
& article {
border-radius: var(--border-radius-md);
& a {
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 10px;
color: var(--font-color);
padding: 8px 15px;
text-decoration: none;
& h3 {
font-size: var(--font-size-md);
font-weight: normal;
margin: 0;
}
& p {
font-size: var(--font-size-xs);
font-family: monospace;
color: var(--font-color-gray);
text-transform: uppercase;
margin: 0;
text-align: right;
}
}
&:hover {
background-color: var(--background-color-hover);
}
}
}
}

View File

@ -0,0 +1 @@
export { default as RecentArticlesSection } from './RecentArticles.astro';

View File

@ -0,0 +1,44 @@
---
import './Welcome.scss';
---
<section class='welcome container'>
<header class='welcome-heading'>
<hgroup class='welcome-heading__title'>
<h1>Hello, I'am Sergey</h1>
<h2>Fullstack <b>web-developer</b> and <b>freelancer</b></h2>
</hgroup>
<p class='welcome-heading__description'>
Я занимаюсь разработкой веб-сайтов и веб-приложений разной сложности, а
также публикую различные статьи и туториалы на разные IT темы.
</p>
</header>
<nav class='welcome-links'>
<div class='welcome-links__link'>
<svg
width='18'
height='19'
viewBox='0 0 18 19'
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M9 1.70001C8.04 1.70001 7.2 2.54001 7.2 3.50001C7.2 4.46001 8.04 5.30001 9 5.30001C9.96 5.30001 10.8 4.46001 10.8 3.50001C10.8 2.54001 9.96 1.70001 9 1.70001ZM4.8 6.50001V7.70001C4.8 7.70001 7.2 7.70001 7.2 10.1V12.5C7.2 14.9 4.8 14.9 4.8 14.9V16.1H13.2V14.9C13.2 14.9 10.8 14.9 10.8 12.5V7.70001C10.8 7.10001 10.2 6.50001 9.6 6.50001H4.8Z'
></path>
</svg>
<a href='/about'> обо мне</a>
</div>
<div class='welcome-links__link'>
<svg
width='18'
height='18'
viewBox='0 0 18 18'
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M16.125 6.366V12.6562C16.125 13.7437 15.2437 14.625 14.1562 14.625H3.84375C3.32161 14.625 2.82085 14.4176 2.45163 14.0484C2.08242 13.6792 1.875 13.1784 1.875 12.6562V6.366L8.77425 10.161C8.91488 10.2383 9.0855 10.2383 9.22575 10.161L16.125 6.36563V6.366ZM14.1562 3.375C14.6702 3.37505 15.1637 3.57606 15.5314 3.93509C15.8992 4.29412 16.1119 4.78272 16.1243 5.2965L9 9.21525L1.87575 5.29613L1.8765 5.26237C1.8975 4.75472 2.11395 4.27484 2.48059 3.92309C2.84723 3.57134 3.33566 3.37495 3.84375 3.375H14.1562Z'
></path>
</svg>
<a href='/contacts'> написать мне</a>
</div>
</nav>
</section>

View File

@ -0,0 +1,45 @@
.welcome {
margin-top: 80px;
margin-bottom: 150px;
&-heading {
&__title {
& h1 {
font-size: var(--font-size-5xl);
font-weight: bold;
margin-bottom: 0.5rem;
}
& h2 {
font-size: var(--font-size-xl);
margin-bottom: 1.25rem;
font-weight: normal;
}
}
&__description {
font-size: var(--font-size-lg);
max-width: 570px;
line-height: 1.5;
}
}
&-links {
display: flex;
align-items: center;
column-gap: 20px;
&__link {
display: flex;
align-items: center;
column-gap: 5px;
& a {
color: var(--font-color-gray);
}
& svg {
fill: var(--font-color-gray);
}
}
}
}
// @media screen and (max-width: 700px) {
// .welcome {
// }
// }

View File

@ -0,0 +1 @@
export { default as WelcomeSection } from './Welcome.astro';

View File

@ -0,0 +1,2 @@
export * from './Welcome';
export * from './RecentArticles';

View File

@ -0,0 +1,8 @@
---
import './ThemeSwitcher.scss';
import { MoonIcon } from '@components/icons';
---
<button class='theme-switcher'>
<MoonIcon />
</button>

View File

@ -0,0 +1,9 @@
.theme-switcher {
background: none;
border: none;
display: flex;
align-items: center;
cursor: pointer;
padding: 0;
margin: 0;
}

View File

@ -0,0 +1 @@
export { default } from './ThemeSwitcher.astro';

View File

@ -0,0 +1,16 @@
---
---
<svg
width='20'
height='20'
viewBox='0 0 20 20'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<path
fill-rule='evenodd'
clip-rule='evenodd'
d='M3.6875 11.7794C3.47072 12.3001 3.34962 12.8557 3.33 13.4194C3.35992 13.7671 3.47848 14.1012 3.67438 14.39C4.04298 14.8168 4.48626 15.1728 4.9825 15.4407L8.1875 17.5744C8.58188 17.8883 9.02533 18.1349 9.5 18.3044C9.8082 18.3778 10.1293 18.3778 10.4375 18.3044C10.9153 18.137 11.3624 17.892 11.7606 17.5794L15 15.4444C15.5013 15.1758 15.9496 14.8183 16.3231 14.3894C16.5204 14.0991 16.6389 13.7624 16.6669 13.4125C16.6456 12.8442 16.5213 12.2845 16.3 11.7606L13.4669 2.8444C13.4036 2.55564 13.2893 2.28049 13.1294 2.0319C13.0129 1.89033 12.8623 1.78066 12.6919 1.71315C12.4071 1.63593 12.1108 1.61011 11.8169 1.6369H8.12813C7.83414 1.61018 7.53773 1.63664 7.25313 1.71503C7.08226 1.7824 6.9316 1.8926 6.81563 2.03503C6.65636 2.28362 6.5431 2.55884 6.48125 2.84753L3.6875 11.78V11.7794ZM11.9625 3.5294C12.0943 3.7389 12.1876 3.97024 12.2381 4.21253L14.6706 12.2025C13.757 11.7286 12.7763 11.3971 11.7625 11.2194L10.1819 5.8694C10.1722 5.8378 10.155 5.80899 10.1319 5.78538C10.1087 5.76177 10.0803 5.74405 10.0489 5.73371C10.0175 5.72337 9.98405 5.7207 9.9514 5.72593C9.91876 5.73116 9.88785 5.74414 9.86125 5.76378C9.82556 5.78989 9.79943 5.827 9.78688 5.8694L8.22438 11.2175C7.20581 11.3948 6.22055 11.7277 5.30313 12.2044L7.74563 4.2144C7.79563 3.97166 7.88923 3.74 8.02188 3.53065C8.11862 3.41192 8.24372 3.31949 8.38563 3.2619C8.6247 3.19728 8.87344 3.17611 9.12 3.1994H10.8656C11.1124 3.17609 11.3613 3.19726 11.6006 3.2619C11.743 3.31966 11.8683 3.41255 11.965 3.5319L11.9625 3.5294ZM10.0794 13.1625C10.8316 13.2061 11.5775 13.0036 12.2044 12.5856C12.2756 12.81 12.3009 13.0464 12.2787 13.2807C12.2564 13.515 12.1872 13.7425 12.075 13.9494C11.8444 14.3413 11.5097 14.6617 11.1081 14.875C10.6869 15.1425 10.3244 15.375 10.3244 15.9919C10.3239 16.1898 10.3685 16.3852 10.455 16.5631C10.1709 16.4452 9.92818 16.2457 9.75743 15.9898C9.58668 15.734 9.49557 15.4332 9.49563 15.1257V15.0875C9.49563 14.6606 9.49563 14.135 8.89438 14.135C8.81056 14.135 8.72754 14.1513 8.65 14.1832C8.49396 14.2478 8.3699 14.3716 8.305 14.5275C8.27278 14.605 8.256 14.688 8.25563 14.7719C7.84352 14.3218 7.62215 13.7294 7.63813 13.1194C7.63521 12.8554 7.67208 12.5924 7.7475 12.3394C7.9975 12.8125 8.9475 13.1644 10.0794 13.1644V13.1625Z'
fill='#FF5D01'></path>
</svg>

View File

@ -0,0 +1,21 @@
---
---
<svg
width='18'
height='19'
viewBox='0 0 18 19'
xmlns='http://www.w3.org/2000/svg'
>
<g clip-path='url(#clip0_545_246)'>
<path
d='M13.1472 11.4548C13.1472 12.2108 13.3623 12.5123 13.9248 12.5123C15.1785 12.5123 15.9768 10.9148 15.9768 8.258C15.9768 4.1972 13.0176 2.2532 9.32309 2.2532C5.52239 2.2532 2.06549 4.802 2.06549 9.6188C2.06549 14.2196 5.08949 16.7252 9.73349 16.7252C11.3103 16.7252 12.3687 16.5524 13.9878 16.0124L14.3352 17.4587C12.7368 17.978 11.0286 18.1283 9.71189 18.1283C3.62069 18.1283 0.358185 14.7803 0.358185 9.6179C0.358185 4.4123 4.13909 0.8699 9.34469 0.8699C14.7663 0.8699 17.6382 4.1099 17.6382 8.0843C17.6382 11.4539 16.5807 14.0243 13.2543 14.0243C11.7414 14.0243 10.7487 13.4195 10.6191 12.0794C10.2303 13.5698 9.19349 14.0243 7.78859 14.0243C5.90939 14.0243 4.33259 12.5762 4.33259 9.6611C4.33259 6.7235 5.71589 4.9091 8.19989 4.9091C9.51749 4.9091 10.3383 5.4275 10.7037 6.2483L11.331 5.1035H13.1454V11.4548H13.1472V11.4548ZM10.4913 8.6036C10.4913 7.4165 9.60479 6.9188 8.87039 6.9188C8.07119 6.9188 7.18649 7.5659 7.18649 9.4676C7.18649 10.9796 7.85609 11.822 8.87039 11.822C9.58319 11.822 10.4913 11.3684 10.4913 10.1156V8.6036Z'
></path>
</g>
<defs>
<clipPath id='clip0_545_246'>
<rect width='18' height='18' fill='white' transform='translate(0 0.5)'
></rect>
</clipPath>
</defs>
</svg>

View File

@ -0,0 +1,13 @@
---
---
<svg
width='18'
height='19'
viewBox='0 0 18 19'
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M8.99297 1.84121C4.6459 1.83945 1.125 5.35859 1.125 9.70215C1.125 13.1369 3.32754 16.0566 6.39492 17.1289C6.80801 17.2326 6.74473 16.9391 6.74473 16.7387V15.3764C4.35938 15.6559 4.2627 14.0773 4.10273 13.8137C3.7793 13.2617 3.01465 13.1211 3.24316 12.8574C3.78633 12.5779 4.34004 12.9277 4.98164 13.8752C5.4457 14.5625 6.35098 14.4465 6.80977 14.3322C6.90996 13.9191 7.12441 13.55 7.41973 13.2635C4.94824 12.8205 3.91816 11.3123 3.91816 9.51933C3.91816 8.64922 4.20469 7.84941 4.76719 7.2043C4.40859 6.14082 4.80059 5.23027 4.85332 5.09492C5.87461 5.00351 6.93633 5.82617 7.01895 5.89121C7.59902 5.73476 8.26172 5.65215 9.00352 5.65215C9.74883 5.65215 10.4133 5.73828 10.9986 5.89648C11.1973 5.74531 12.1816 5.03867 13.1309 5.1248C13.1818 5.26016 13.565 6.14961 13.2275 7.19902C13.7971 7.8459 14.0871 8.65273 14.0871 9.52461C14.0871 11.3211 13.05 12.8311 10.5715 13.267C10.7838 13.4758 10.9523 13.7247 11.0673 13.9994C11.1823 14.274 11.2414 14.5689 11.2412 14.8666V16.8441C11.2553 17.0023 11.2412 17.1588 11.5049 17.1588C14.618 16.1094 16.8592 13.1686 16.8592 9.70391C16.8592 5.35859 13.3365 1.84121 8.99297 1.84121V1.84121Z'
></path>
</svg>

View File

@ -0,0 +1,14 @@
---
---
<svg
class='sun-icon'
width='21'
height='21'
viewBox='0 0 21 21'
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M10.5 10.3311C9.39908 9.22975 8.6493 7.82674 8.34545 6.29938C8.0416 4.77203 8.19731 3.18889 8.7929 1.75C7.09476 2.08429 5.53493 2.91752 4.3129 4.14313C0.896025 7.56 0.896025 13.1005 4.3129 16.5174C7.73065 19.9351 13.2703 19.9343 16.688 16.5174C17.9133 15.2955 18.7465 13.736 19.0811 12.0383C17.6422 12.6337 16.0591 12.7894 14.5318 12.4855C13.0045 12.1817 11.6015 11.432 10.5 10.3311V10.3311Z'
></path>
</svg>

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,14 @@
---
---
<svg
width='20'
height='20'
viewBox='0 0 20 20'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M2.39999 2.40002V4.76702C9.48599 4.76702 15.23 10.513 15.23 17.599H17.599C17.599 9.20503 10.794 2.40002 2.39999 2.40002ZM2.39999 7.13702V9.50602C3.46287 9.50602 4.51533 9.71539 5.49728 10.1222C6.47924 10.5289 7.37144 11.1252 8.12296 11.8768C8.87448 12.6284 9.47059 13.5207 9.87724 14.5027C10.2839 15.4847 10.4931 16.5372 10.493 17.6H12.861C12.861 11.822 8.17699 7.13702 2.39999 7.13702ZM4.66899 13.059C4.07507 13.0715 3.50968 13.3162 3.09405 13.7406C2.67842 14.1651 2.44565 14.7355 2.44565 15.3295C2.44565 15.9236 2.67842 16.494 3.09405 16.9184C3.50968 17.3429 4.07507 17.5876 4.66899 17.6C5.92299 17.6 6.93799 16.584 6.93799 15.33C6.93799 14.076 5.92299 13.059 4.66899 13.059Z'
fill='#F0883E'></path>
</svg>

View File

@ -0,0 +1,13 @@
---
---
<svg
width='18'
height='19'
viewBox='0 0 18 19'
xmlns='http://www.w3.org/2000/svg'
>
<path
d='M15.5322 3.24087C15.5322 3.24087 16.9892 2.67275 16.8678 4.05248C16.8273 4.62061 16.4631 6.60905 16.1798 8.75983L15.2085 15.131C15.2085 15.131 15.1275 16.0643 14.399 16.2266C13.6705 16.3889 12.5778 15.6585 12.3754 15.4962C12.2135 15.3745 9.34005 13.5483 8.32822 12.6556C8.04491 12.4121 7.72114 11.9251 8.36869 11.357L12.6183 7.29894C13.1039 6.81196 13.5896 5.67571 11.566 7.05545L5.89991 10.9106C5.89991 10.9106 5.25236 11.3164 4.03823 10.9512L1.40753 10.1396C1.40753 10.1396 0.436204 9.53086 2.09556 8.92213C6.14276 7.01484 11.1208 5.06698 15.5322 3.24087Z'
></path>
</svg>

View File

@ -0,0 +1,17 @@
import EmailIcon from './EmailIcon.astro';
import GithubIcon from './GithubIcon.astro';
import TelegramIcon from './TelegramIcon.astro';
import MoonIcon from './MoonIcon.astro';
import AstroIcon from './AstroIcon.astro';
import NetlifyIcon from './NetlifyIcon.astro';
import RssIcon from './RssIcon.astro';
export {
EmailIcon,
GithubIcon,
TelegramIcon,
MoonIcon,
AstroIcon,
NetlifyIcon,
RssIcon,
};

9
src/config.ts Normal file
View File

@ -0,0 +1,9 @@
export const SITE_METADATA = {
name: 'yarkov.tech',
author: 'Sergey Yarkov',
contacts: {
email: 'serzh.yarkov@gmail.com',
githubUrl: 'https://github.com/sergeyyarkov',
telegramUrl: 'https://t.me/sergeyyarkov',
},
};

26
src/layouts/Page.astro Normal file
View File

@ -0,0 +1,26 @@
---
import '@styles/global.scss';
import Header from '@components/Header';
import Footer from '@components/Footer';
export interface Props {
title?: string | undefined;
}
const { title = 'Sergey Yarkov' } = Astro.props as Props;
---
<html lang='en'>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>{title}</title>
</head>
<body>
<Header />
<main class='site-content'>
<slot></slot>
</main>
<Footer />
</body>
</html>

13
src/pages/articles.astro Normal file
View File

@ -0,0 +1,13 @@
---
import '@styles/global.scss';
---
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>Sergey Yarkov</title>
</head>
<body> ...</body>
</html>

View File

@ -1,64 +1,12 @@
--- ---
import '../styles/global.scss'; import Page from '@layouts/Page.astro';
import siteMetadata from '../../siteMetadata.json'; import {
WelcomeSection,
RecentArticlesSection,
} from '@root/components/Sections';
--- ---
<html lang='en'> <Page title='Sergey Yarkov'>
<head> <WelcomeSection />
<meta charset='utf-8' /> <RecentArticlesSection />
<meta name='viewport' content='width=device-width' /> </Page>
<title>Astro</title>
<style lang='scss'>
main {
text-align: center;
margin-top: 300px;
& p:nth-child(1) {
margin-bottom: 10px;
font-size: 16px;
font-weight: 500;
}
& p:nth-child(2) {
margin: 0;
margin-bottom: 10px;
font-size: 18px;
& span {
font-size: 14px;
}
}
div {
display: flex;
justify-content: center;
column-gap: 10px;
& a {
text-decoration: none;
}
}
}
</style>
</head>
<body>
<main>
<p>yarkov.tech</p>
<p>
web-site is under construction now<br /><span>thank you</span>
</p>
<div>
<a href={'mailto:' + siteMetadata.contacts.email} target='_blank'>
<img src='/assets/icons/social/email.svg' alt='Email' />
</a>
<a
href={'https://github.com/' + siteMetadata.contacts.github}
target='_blank'
>
<img src='/assets/icons/social/github.svg' alt='Github' />
</a>
<a
href={'https://t.me/' + siteMetadata.contacts.telegram}
target='_blank'
>
<img src='/assets/icons/social/telegram.svg' alt='Telegram' />
</a>
</div>
</main>
</body>
</html>

View File

@ -1,10 +1,27 @@
@import url('./fonts.scss'); @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
:root { :root {
/* Fonts */
--font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Arial, --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji; sans-serif, Apple Color Emoji, Segoe UI Emoji;
--font-body: 'Rubik', var(--font-fallback); --font-family-base: 'Rubik', var(--font-fallback);
--font-color: var(--color-black);
--font-color-gray: var(--color-gray-500);
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-md: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
--font-size-6xl: 3.75rem;
--font-size-7xl: 4.5rem;
--font-size-8xl: 6rem;
--font-size-9xl: 8rem;
/* Colors */
--color-white: #ffffff; --color-white: #ffffff;
--color-black: #010409; --color-black: #010409;
@ -51,10 +68,90 @@
--color-yellow-700: #693e00; --color-yellow-700: #693e00;
--color-yellow-800: #4b2900; --color-yellow-800: #4b2900;
--color-yellow-900: #341a00; --color-yellow-900: #341a00;
--background-color-hover: var(--color-gray-50);
/* Border */
--border-color: var(--color-gray-100);
--border-radius-md: 3px;
/* Sizes */
--content-width: 760px;
--content-padding: 15px;
/* Elements */
--background-body-color: var(--color-white);
--background-header-color: var(--color-white);
}
::selection {
background: var(--color-yellow-100);
color: var(--color-black);
}
html,
body {
display: flex;
flex-direction: column;
height: 100%;
}
html {
font-size: 16px;
font-weight: normal;
font-kerning: normal;
font-family: var(--font-family-base);
} }
body { body {
color: var(--color-black); margin: 0;
background-color: var(--color-white); padding: 0;
font-family: var(--font-body); color: var(--font-color);
background-color: var(--background-body-color);
}
.site-content {
flex: 1 0 auto;
width: 100%;
margin-top: 5rem;
}
.container {
max-width: var(--content-width);
margin: 0 auto;
padding: 0 var(--content-padding);
}
a {
color: var(--color-blue-500);
font-weight: 500;
text-decoration: none;
&:hover {
text-decoration: underline;
color: var(--color-blue-500);
}
}
p {
margin-top: 0;
margin-bottom: 1.5rem;
}
h1,
h2,
h3,
h4,
h5 {
margin-top: 0;
margin-bottom: 1.5rem;
}
svg {
fill: var(--color-black);
}
@media screen and (max-width: 700px) {
.site-content {
margin-top: 1.5rem;
}
} }

View File

@ -1,15 +1,19 @@
{ {
"compilerOptions": { "compilerOptions": {
// Enable top-level await, and other modern ESM features.
"target": "ESNext", "target": "ESNext",
"module": "ESNext", "module": "ESNext",
// Enable node-style module resolution, for things like npm package imports.
"moduleResolution": "node", "moduleResolution": "node",
// Enable JSON imports.
"resolveJsonModule": true, "resolveJsonModule": true,
// Enable stricter transpilation for better output.
"isolatedModules": true, "isolatedModules": true,
// Add type definitions for our Vite runtime. "types": ["vite/client"],
"types": ["vite/client"] "baseUrl": ".",
} "paths": {
"@root/*": ["./src/*"],
"@styles/*": ["./src/styles/*"],
"@components/*": ["./src/components/*"],
"@layouts/*": ["./src/layouts/*"]
},
"outDir": "./dist"
},
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts"]
} }