diff --git a/.prettierrc.json b/.prettierrc.json index 580d103..3fbbbbb 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,5 +1,5 @@ { - "printWidth": 150, + "printWidth": 100, "semi": true, "singleQuote": true, "tabWidth": 2, diff --git a/README.md b/README.md index 71378f6..07f5f9b 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Personal website created with Astro. ### Todo - [x] HTML layout -- [ ] Adaptive & Responsive layout +- [x] Adaptive & Responsive layout - [ ] Dark/Light Theme - [ ] Multilang web-site - [ ] Form handling via Netlify Forms diff --git a/package.json b/package.json index 7cff3d7..d0d9f3a 100644 --- a/package.json +++ b/package.json @@ -1,31 +1,31 @@ { - "name": "yarkov.tech", - "version": "0.0.1", - "private": true, - "description": "Personal website created with Astro.", - "author": { - "name": "Sergey Yarkov", - "email": "serzh.yarkov@gmail.com", - "url": "https://yarkov.tech" - }, - "license": "MIT", - "scripts": { - "dev": "astro dev", - "start": "astro dev", - "build": "astro build", - "preview": "astro preview" - }, - "devDependencies": { - "@astrojs/solid-js": "^0.2.1", - "@typescript-eslint/eslint-plugin": "^5.30.6", - "@typescript-eslint/parser": "^5.30.6", - "astro": "^1.0.0-beta.63", - "astro-icon": "^0.7.1", - "eslint": "^8.19.0", - "eslint-plugin-solid": "^0.7.1", - "prettier": "^2.7.1", - "prettier-plugin-astro": "^0.1.1", - "sass": "^1.53.0", - "solid-js": "^1.4.7" - } + "name": "yarkov.tech", + "version": "0.0.1", + "private": true, + "description": "Personal website created with Astro.", + "author": { + "name": "Sergey Yarkov", + "email": "serzh.yarkov@gmail.com", + "url": "https://yarkov.tech" + }, + "license": "MIT", + "scripts": { + "dev": "astro dev --host", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview --host" + }, + "devDependencies": { + "@astrojs/solid-js": "^0.2.1", + "@typescript-eslint/eslint-plugin": "^5.30.6", + "@typescript-eslint/parser": "^5.30.6", + "astro": "^1.0.0-beta.63", + "astro-icon": "^0.7.1", + "eslint": "^8.19.0", + "eslint-plugin-solid": "^0.7.1", + "prettier": "^2.7.1", + "prettier-plugin-astro": "^0.1.1", + "sass": "^1.53.0", + "solid-js": "^1.4.7" + } } diff --git a/src/components/ArticleContent/ArticleContent.astro b/src/components/ArticleContent/ArticleContent.astro new file mode 100644 index 0000000..45849c7 --- /dev/null +++ b/src/components/ArticleContent/ArticleContent.astro @@ -0,0 +1,5 @@ +--- +import './ArticleContent.scss'; +--- + +
diff --git a/src/components/ArticleContent/ArticleContent.scss b/src/components/ArticleContent/ArticleContent.scss new file mode 100644 index 0000000..9489645 --- /dev/null +++ b/src/components/ArticleContent/ArticleContent.scss @@ -0,0 +1,84 @@ +.article-content { + & p, + & em, + & q { + line-height: var(--line-height-base); + font-size: var(--font-size-lg); + } + + & ul { + padding-left: 1.5rem; + line-height: var(--line-height-base); + margin-bottom: 1.5rem; + margin-top: 0; + & li { + font-size: var(--font-size-lg); + line-height: var(--line-height-base); + margin-bottom: 0.5rem; + padding-left: 0.25rem; + } + } + + & q { + font-style: italic; + quotes: '«' '»'; + } + + & h1, + & h2, + & h3, + & h4 { + margin-top: 3rem; + margin-bottom: 1rem; + padding-bottom: 0.35rem; + } + + & h1:not(:first-child), + & h2:not(:first-child), + & h3:not(:first-child), + & h4:not(:first-child) { + margin-top: 3rem; + } + + & h2 { + font-size: var(--font-size-2xl); + border-bottom: 1px solid var(--border-color); + } + + & h3 { + font-size: var(--font-size-xl); + } + + & h4 { + font-size: var(--font-size-lg); + } + + & a { + color: var(--color-blue-500); + text-underline-offset: 2.5px; + text-decoration-color: var(--color-blue-500); + font-weight: 500; + &:hover { + color: var(--color-blue-500); + text-decoration-thickness: 2px; + } + } + + & figure { + margin: 0 0 1em; + } + + & figcaption { + font-style: italic; + font-size: 1em; + text-align: center; + margin: 0.7rem 0; + } + + & img { + display: block; + border-radius: var(--border-radius-md); + max-width: 100%; + margin: 0 auto; + } +} diff --git a/src/components/ArticleContent/index.ts b/src/components/ArticleContent/index.ts new file mode 100644 index 0000000..04e3c3b --- /dev/null +++ b/src/components/ArticleContent/index.ts @@ -0,0 +1 @@ +export { default } from './ArticleContent.astro'; diff --git a/src/components/ArticleItem/ArticleItem.scss b/src/components/ArticleItem/ArticleItem.scss index 45914d4..61a2b57 100644 --- a/src/components/ArticleItem/ArticleItem.scss +++ b/src/components/ArticleItem/ArticleItem.scss @@ -6,7 +6,6 @@ justify-content: space-between; align-items: center; column-gap: 10px; - row-gap: 5px; color: var(--font-color); padding: 8px 15px; & h3 { @@ -22,6 +21,7 @@ margin: 0; text-align: right; white-space: nowrap; + margin-bottom: 10px; } &:hover { text-decoration: none; @@ -34,6 +34,7 @@ @media screen and (max-width: 560px) { .article-item { + margin-bottom: 10px; & a { flex-direction: column-reverse; align-items: flex-start; diff --git a/src/components/ArticleItem/ArticleItem.tsx b/src/components/ArticleItem/ArticleItem.tsx index 0f29193..b23fe7c 100644 --- a/src/components/ArticleItem/ArticleItem.tsx +++ b/src/components/ArticleItem/ArticleItem.tsx @@ -1,11 +1,11 @@ -import type { IArticle } from '@root/interfaces'; +import type { ArticleType } from '@root/types'; import './ArticleItem.scss'; import { Component } from 'solid-js'; import { DateFormatter } from '@utils/date'; export type ArticleItemProps = { - data: IArticle; + data: ArticleType; }; export const ArticleItem: Component = (props) => { diff --git a/src/components/ArticlesList/ArticlesList.tsx b/src/components/ArticlesList/ArticlesList.tsx index ec11219..94a486b 100644 --- a/src/components/ArticlesList/ArticlesList.tsx +++ b/src/components/ArticlesList/ArticlesList.tsx @@ -1,97 +1,85 @@ -import "./ArticlesList.scss"; -import { Component, createSignal, Show, For } from "solid-js"; -import { PageHeading } from "@components/PageHeading"; -import type { IArticle } from "@root/interfaces"; -import * as utils from "@root/utils/articles"; -import { ArticleItem } from "../ArticleItem"; +import './ArticlesList.scss'; +import { Component, createSignal, Show, For } from 'solid-js'; +import type { ArticleType } from '@root/types'; + +import PageHeading from '@components/PageHeading'; +import * as utils from '@root/utils/articles'; +import { ArticleItem } from '../ArticleItem'; export type ArticlesListProps = { - data: IArticle[]; - tags: string[]; + data: ArticleType[]; + tags: string[]; }; export const ArticlesList: Component = (props) => { - const [articles, setArticles] = createSignal(utils.filterArticlesByYear(props.data)); - const [selectedTags, setSelectedTags] = createSignal([]); - const [filteredArticles, setFilteredArticles] = createSignal([]); + const [articles, setArticles] = createSignal(utils.filterArticlesByYear(props.data)); + const [selectedTags, setSelectedTags] = createSignal([]); + const [filteredArticles, setFilteredArticles] = createSignal([]); - return ( -
- + -
- - - - - {props.data.length} -
-
- -
-
- - {Object.keys(articles()) - .map(Number) - .sort((a, b) => b - a) - .map((year) => ( -
-

{year}

- {utils.sortArtcilesByDate(articles()[year]).map((article) => ( - - ))} -
- ))} - - - {utils.sortArtcilesByDate(filteredArticles()).map((article) => ( - - ))} - -
-
- ); + /> +
+ + + + + {props.data.length} +
+
+ +
+
+ + {Object.keys(articles()) + .map(Number) + .sort((a, b) => b - a) + .map((year) => ( +
+

{year}

+ {utils.sortArtcilesByDate(articles()[year]).map((article) => ( + + ))} +
+ ))} + + + {utils.sortArtcilesByDate(filteredArticles()).map((article) => ( + + ))} + +
+ + ); }; diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index 4f1ba5b..bc28aed 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -19,4 +19,4 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props; {title} -{description && } + diff --git a/src/components/BaseLayout/BaseLayout.scss b/src/components/BaseLayout/BaseLayout.scss index 29682b5..d236099 100644 --- a/src/components/BaseLayout/BaseLayout.scss +++ b/src/components/BaseLayout/BaseLayout.scss @@ -3,3 +3,9 @@ width: 100%; margin-top: 5rem; } + +@media screen and (max-width: 768px) { + .site-content { + margin-top: 3rem; + } +} diff --git a/src/components/ContactForm/ContactForm.scss b/src/components/ContactForm/ContactForm.scss new file mode 100644 index 0000000..48a4b3b --- /dev/null +++ b/src/components/ContactForm/ContactForm.scss @@ -0,0 +1,23 @@ +.contact-form { + display: flex; + flex-direction: column; + row-gap: 7px; + margin-bottom: 3.125rem; + + & div:first-of-type { + display: flex; + column-gap: 10px; + } + + & div:last-of-type { + text-align: center; + margin-top: 15px; + } +} + +@media screen and (max-width: 560px) { + .contact-form div:first-of-type { + flex-direction: column; + row-gap: 7px; + } +} diff --git a/src/components/ContactForm/ContactForm.tsx b/src/components/ContactForm/ContactForm.tsx new file mode 100644 index 0000000..2e0f0e5 --- /dev/null +++ b/src/components/ContactForm/ContactForm.tsx @@ -0,0 +1,27 @@ +import type { Component } from 'solid-js'; +import './ContactForm.scss'; + +type InputFieldsType = { + name: string; + email: string; + subject: string; + message: string; +}; + +const ContactForm: Component = () => { + return ( +
+
+ + +
+ + -
- -
-
- -
- Email - - - Github - - - Telegram - - -
+ + - diff --git a/src/pages/index.astro b/src/pages/index.astro index 4db24c5..a48106a 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,12 +1,12 @@ --- -import type { IArticle } from '@root/interfaces'; +import type { ArticleType } from '@root/types'; -import PageLayout from '@layouts/default.astro'; import { Icon } from 'astro-icon'; import * as utils from '@utils/index'; -import RecentArticles from '@root/components/RecentArticles'; +import PageLayout from '@layouts/default.astro'; +import RecentArticles from '@components/RecentArticles'; -const data = await Astro.glob('../../content/articles/**/*.md'); +const data = await Astro.glob('../../content/articles/**/*.md'); const articles = utils.transformArticles(data); --- @@ -18,7 +18,8 @@ const articles = utils.transformArticles(data);

Fullstack web-developer & freelancer

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