diff --git a/README.md b/README.md index 4739a75..b979e35 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,8 @@ # 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. ## License diff --git a/astro.config.mjs b/astro.config.mjs index 882e651..3ac6c0c 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,4 +1,6 @@ import { defineConfig } from 'astro/config'; // https://astro.build/config -export default defineConfig({}); +export default defineConfig({ + site: 'https://yarkov.tech', +}); diff --git a/public/assets/icons/social/email.svg b/public/assets/icons/social/email.svg deleted file mode 100644 index 289f965..0000000 --- a/public/assets/icons/social/email.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/assets/icons/social/github.svg b/public/assets/icons/social/github.svg deleted file mode 100644 index 78fae17..0000000 --- a/public/assets/icons/social/github.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/assets/icons/social/telegram.svg b/public/assets/icons/social/telegram.svg deleted file mode 100644 index d89fbe7..0000000 --- a/public/assets/icons/social/telegram.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/Footer/Footer.astro b/src/components/Footer/Footer.astro new file mode 100644 index 0000000..4f46d12 --- /dev/null +++ b/src/components/Footer/Footer.astro @@ -0,0 +1,24 @@ +--- +import './Footer.scss'; +import { AstroIcon, NetlifyIcon, RssIcon } from '@components/icons'; +--- + + diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss new file mode 100644 index 0000000..70d7936 --- /dev/null +++ b/src/components/Footer/Footer.scss @@ -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); + } +} diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts new file mode 100644 index 0000000..aab1df4 --- /dev/null +++ b/src/components/Footer/index.ts @@ -0,0 +1 @@ +export { default } from './Footer.astro'; diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro new file mode 100644 index 0000000..56b1e1a --- /dev/null +++ b/src/components/Header/Header.astro @@ -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'; +--- + +
+
+ + +
+
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss new file mode 100644 index 0000000..da4ce61 --- /dev/null +++ b/src/components/Header/Header.scss @@ -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; + } + } + } +} diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts new file mode 100644 index 0000000..3e3fbb4 --- /dev/null +++ b/src/components/Header/index.ts @@ -0,0 +1 @@ +export { default } from './Header.astro'; diff --git a/src/components/Sections/RecentArticles/RecentArticles.astro b/src/components/Sections/RecentArticles/RecentArticles.astro new file mode 100644 index 0000000..eb7e990 --- /dev/null +++ b/src/components/Sections/RecentArticles/RecentArticles.astro @@ -0,0 +1,32 @@ +--- +import './RecentArticles.scss'; +--- + +
+
+
+

недавние публикации

+ смотреть все +
+
+
+ + +
+
diff --git a/src/components/Sections/RecentArticles/RecentArticles.scss b/src/components/Sections/RecentArticles/RecentArticles.scss new file mode 100644 index 0000000..5972a04 --- /dev/null +++ b/src/components/Sections/RecentArticles/RecentArticles.scss @@ -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); + } + } + } +} diff --git a/src/components/Sections/RecentArticles/index.ts b/src/components/Sections/RecentArticles/index.ts new file mode 100644 index 0000000..d99a12b --- /dev/null +++ b/src/components/Sections/RecentArticles/index.ts @@ -0,0 +1 @@ +export { default as RecentArticlesSection } from './RecentArticles.astro'; diff --git a/src/components/Sections/Welcome/Welcome.astro b/src/components/Sections/Welcome/Welcome.astro new file mode 100644 index 0000000..2e3ee4c --- /dev/null +++ b/src/components/Sections/Welcome/Welcome.astro @@ -0,0 +1,44 @@ +--- +import './Welcome.scss'; +--- + +
+
+
+

Hello, I'am Sergey

+

Fullstack web-developer and freelancer

+
+

+ Я занимаюсь разработкой веб-сайтов и веб-приложений разной сложности, а + также публикую различные статьи и туториалы на разные IT темы. +

+
+ +
diff --git a/src/components/Sections/Welcome/Welcome.scss b/src/components/Sections/Welcome/Welcome.scss new file mode 100644 index 0000000..cdfd327 --- /dev/null +++ b/src/components/Sections/Welcome/Welcome.scss @@ -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 { + +// } +// } diff --git a/src/components/Sections/Welcome/index.ts b/src/components/Sections/Welcome/index.ts new file mode 100644 index 0000000..b9d7b30 --- /dev/null +++ b/src/components/Sections/Welcome/index.ts @@ -0,0 +1 @@ +export { default as WelcomeSection } from './Welcome.astro'; diff --git a/src/components/Sections/index.ts b/src/components/Sections/index.ts new file mode 100644 index 0000000..8348313 --- /dev/null +++ b/src/components/Sections/index.ts @@ -0,0 +1,2 @@ +export * from './Welcome'; +export * from './RecentArticles'; diff --git a/src/components/ThemeSwticher/ThemeSwitcher.astro b/src/components/ThemeSwticher/ThemeSwitcher.astro new file mode 100644 index 0000000..7ef389c --- /dev/null +++ b/src/components/ThemeSwticher/ThemeSwitcher.astro @@ -0,0 +1,8 @@ +--- +import './ThemeSwitcher.scss'; +import { MoonIcon } from '@components/icons'; +--- + + diff --git a/src/components/ThemeSwticher/ThemeSwitcher.scss b/src/components/ThemeSwticher/ThemeSwitcher.scss new file mode 100644 index 0000000..f74bb2b --- /dev/null +++ b/src/components/ThemeSwticher/ThemeSwitcher.scss @@ -0,0 +1,9 @@ +.theme-switcher { + background: none; + border: none; + display: flex; + align-items: center; + cursor: pointer; + padding: 0; + margin: 0; +} diff --git a/src/components/ThemeSwticher/index.ts b/src/components/ThemeSwticher/index.ts new file mode 100644 index 0000000..50e6b3d --- /dev/null +++ b/src/components/ThemeSwticher/index.ts @@ -0,0 +1 @@ +export { default } from './ThemeSwitcher.astro'; diff --git a/src/components/icons/AstroIcon.astro b/src/components/icons/AstroIcon.astro new file mode 100644 index 0000000..3774491 --- /dev/null +++ b/src/components/icons/AstroIcon.astro @@ -0,0 +1,16 @@ +--- +--- + + + + diff --git a/src/components/icons/EmailIcon.astro b/src/components/icons/EmailIcon.astro new file mode 100644 index 0000000..76a8302 --- /dev/null +++ b/src/components/icons/EmailIcon.astro @@ -0,0 +1,21 @@ +--- +--- + + + + + + + + + + + diff --git a/src/components/icons/GithubIcon.astro b/src/components/icons/GithubIcon.astro new file mode 100644 index 0000000..222144d --- /dev/null +++ b/src/components/icons/GithubIcon.astro @@ -0,0 +1,13 @@ +--- +--- + + + + diff --git a/src/components/icons/MoonIcon.astro b/src/components/icons/MoonIcon.astro new file mode 100644 index 0000000..d08427a --- /dev/null +++ b/src/components/icons/MoonIcon.astro @@ -0,0 +1,14 @@ +--- +--- + + + + diff --git a/src/components/icons/NetlifyIcon.astro b/src/components/icons/NetlifyIcon.astro new file mode 100644 index 0000000..d597bb2 --- /dev/null +++ b/src/components/icons/NetlifyIcon.astro @@ -0,0 +1,27 @@ +--- +--- + + + + + + + + + + diff --git a/src/components/icons/RssIcon.astro b/src/components/icons/RssIcon.astro new file mode 100644 index 0000000..47f8332 --- /dev/null +++ b/src/components/icons/RssIcon.astro @@ -0,0 +1,14 @@ +--- +--- + + + + diff --git a/src/components/icons/TelegramIcon.astro b/src/components/icons/TelegramIcon.astro new file mode 100644 index 0000000..b4affa2 --- /dev/null +++ b/src/components/icons/TelegramIcon.astro @@ -0,0 +1,13 @@ +--- +--- + + + + diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts new file mode 100644 index 0000000..bf3a4ff --- /dev/null +++ b/src/components/icons/index.ts @@ -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, +}; diff --git a/src/config.ts b/src/config.ts new file mode 100644 index 0000000..b385b35 --- /dev/null +++ b/src/config.ts @@ -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', + }, +}; diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro new file mode 100644 index 0000000..2590927 --- /dev/null +++ b/src/layouts/Page.astro @@ -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; +--- + + + + + + {title} + + +
+
+ +
+