+
+ {props.data.title}
+ {isNonDefaultLanguage && {props.data.lang.toLocaleUpperCase()}} ++ +
+ +
+
+ {title}
+
+
+ {author}
+
+ {
+ coverImage && (
+
+
+ {coverImage && 
}
+ {/* Render remote or local image */}
+ {/* utils.isURL(coverImage) ? (
+
+
+ )
+ }
+
+ {isEmpty() ? (
+ {
+ return (
+
+
+ );
+};
+
+export default ArticlesList;
diff --git a/src/components/ArticlesList/index.ts b/src/components/ArticlesList/index.ts
new file mode 100644
index 0000000..17b28e3
--- /dev/null
+++ b/src/components/ArticlesList/index.ts
@@ -0,0 +1 @@
+export { default } from "./ArticlesList";
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
new file mode 100644
index 0000000..f679274
--- /dev/null
+++ b/src/components/BaseHead.astro
@@ -0,0 +1,38 @@
+---
+import { SITE_METADATA } from "@root/config";
+import { useTranslation } from "@i18n/utils";
+
+export interface Props {
+ title?: string | undefined;
+ description?: string | undefined;
+}
+
+const t = useTranslation(Astro);
+const { title = SITE_METADATA.title, description } = Astro.props as Props;
+---
+
+
+
+
+
+
+
+
+
+
+ ) : (
+ {props.i18n["articles.empty"]}
+
+
+ );
+ }}
+ />
+ )}
+ {year}
+❌ {props.text}
;
+};
+
+export default Submitted;
diff --git a/src/components/ContactForm/Submitted.tsx b/src/components/ContactForm/Submitted.tsx
new file mode 100644
index 0000000..980f305
--- /dev/null
+++ b/src/components/ContactForm/Submitted.tsx
@@ -0,0 +1,7 @@
+import type { Component } from "solid-js";
+
+const Submitted: Component<{ text: string }> = (props) => {
+ return ✔️ {props.text}
;
+};
+
+export default Submitted;
diff --git a/src/components/ContactForm/index.ts b/src/components/ContactForm/index.ts
new file mode 100644
index 0000000..e3641e9
--- /dev/null
+++ b/src/components/ContactForm/index.ts
@@ -0,0 +1 @@
+export { default } from "./ContactForm";
diff --git a/src/components/ContactForm/validations.ts b/src/components/ContactForm/validations.ts
new file mode 100644
index 0000000..9e9e195
--- /dev/null
+++ b/src/components/ContactForm/validations.ts
@@ -0,0 +1,7 @@
+import { isEmail } from "@utils/string";
+
+export default {
+ validateEmail: (error: string) => {
+ return (field: HTMLInputElement) => (isEmail(field.value) ? false : error);
+ },
+};
diff --git a/src/components/ContactsList/ContactsList.astro b/src/components/ContactsList/ContactsList.astro
new file mode 100644
index 0000000..3ab3f95
--- /dev/null
+++ b/src/components/ContactsList/ContactsList.astro
@@ -0,0 +1,24 @@
+---
+import { SITE_METADATA } from '@root/config';
+import { Icon } from 'astro-icon';
+import './ContactsList.scss';
+
+const {
+ contacts: { email, githubUrl, telegramUrl },
+} = SITE_METADATA;
+---
+
+
diff --git a/src/components/ContactsList/ContactsList.scss b/src/components/ContactsList/ContactsList.scss
new file mode 100644
index 0000000..feec5f3
--- /dev/null
+++ b/src/components/ContactsList/ContactsList.scss
@@ -0,0 +1,15 @@
+.contacts-list {
+ display: flex;
+ flex-wrap: wrap;
+ column-gap: 40px;
+ row-gap: 30px;
+
+ & a {
+ display: flex;
+ column-gap: 5px;
+ }
+
+ & svg {
+ filter: none;
+ }
+}
diff --git a/src/components/ContactsList/index.ts b/src/components/ContactsList/index.ts
new file mode 100644
index 0000000..33a235c
--- /dev/null
+++ b/src/components/ContactsList/index.ts
@@ -0,0 +1 @@
+export { default } from "./ContactsList.astro";
diff --git a/src/components/Counter/Counter.scss b/src/components/Counter/Counter.scss
new file mode 100644
index 0000000..f8ea029
--- /dev/null
+++ b/src/components/Counter/Counter.scss
@@ -0,0 +1,14 @@
+.counter {
+ margin: 2rem 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ row-gap: 15px;
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius-md);
+ padding: 15px 5px;
+ & div {
+ display: flex;
+ column-gap: 3px;
+ }
+}
diff --git a/src/components/Counter/Counter.tsx b/src/components/Counter/Counter.tsx
new file mode 100644
index 0000000..f22d280
--- /dev/null
+++ b/src/components/Counter/Counter.tsx
@@ -0,0 +1,45 @@
+import type { Component } from "solid-js";
+
+import { createSignal, createEffect } from "solid-js";
+import Button from "../Button";
+import "./Counter.scss";
+
+const Counter: Component<{ tick?: number }> = (props) => {
+ const [isRunned, setIsRunned] = createSignal
+ {count()}
+
+ );
+};
+
+export default Counter;
diff --git a/src/components/Counter/index.ts b/src/components/Counter/index.ts
new file mode 100644
index 0000000..e09713b
--- /dev/null
+++ b/src/components/Counter/index.ts
@@ -0,0 +1 @@
+export { default } from "./Counter";
diff --git a/src/components/Footer/Footer.astro b/src/components/Footer/Footer.astro
new file mode 100644
index 0000000..cfc3451
--- /dev/null
+++ b/src/components/Footer/Footer.astro
@@ -0,0 +1,24 @@
+---
+import './Footer.scss';
+import { Icon } from 'astro-icon'
+---
+
+
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
new file mode 100644
index 0000000..82847af
--- /dev/null
+++ b/src/components/Footer/Footer.scss
@@ -0,0 +1,34 @@
+.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;
+ user-select: none;
+ }
+ &__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..e869e33
--- /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..96fc1f8
--- /dev/null
+++ b/src/components/Header/Header.astro
@@ -0,0 +1,55 @@
+---
+import { Icon } from "astro-icon";
+import { IS_SITE_UNDER_CONSTRUCTION, SITE_METADATA } from "@root/config";
+import ThemeSwitcher from "@components/ThemeSwticher";
+import UIString from "@components/UIString";
+import TranslatedLink from "@components/TranslatedLink";
+import LanguageSelect from "@components/LanguageSelect";
+import NavToggle from "./NavToggle";
+import "./Header.scss";
+
+const { name, nav, contacts } = SITE_METADATA;
+const { pathname } = Astro.url;
+---
+
+
+
+
+
+
+
+
+
+
+
+ {name}
+
+
+
+
+
+
+
+
+
diff --git a/src/components/LanguageSelect/index.ts b/src/components/LanguageSelect/index.ts
new file mode 100644
index 0000000..9d165f9
--- /dev/null
+++ b/src/components/LanguageSelect/index.ts
@@ -0,0 +1 @@
+export { default } from "./LanguageSelect.astro";
diff --git a/src/components/PageHeading/PageHeading.astro b/src/components/PageHeading/PageHeading.astro
new file mode 100644
index 0000000..fde49c7
--- /dev/null
+++ b/src/components/PageHeading/PageHeading.astro
@@ -0,0 +1,17 @@
+---
+import "./PageHeading.scss";
+
+export interface Props {
+ heading: string;
+ description?: string | undefined;
+}
+
+const { heading, description } = Astro.props as Props;
+---
+
+
+
diff --git a/src/components/PageHeading/PageHeading.scss b/src/components/PageHeading/PageHeading.scss
new file mode 100644
index 0000000..87defba
--- /dev/null
+++ b/src/components/PageHeading/PageHeading.scss
@@ -0,0 +1,14 @@
+.page-heading {
+ & h1 {
+ font-size: var(--font-size-4xl);
+ text-align: center;
+ margin-bottom: 15px;
+ }
+ & p {
+ font-size: var(--font-size-lg);
+ text-align: center;
+ max-width: 650px;
+ margin: 0 auto;
+ margin-bottom: 2.5rem;
+ }
+}
diff --git a/src/components/PageHeading/index.ts b/src/components/PageHeading/index.ts
new file mode 100644
index 0000000..7f076c6
--- /dev/null
+++ b/src/components/PageHeading/index.ts
@@ -0,0 +1 @@
+export { default } from "./PageHeading.astro";
diff --git a/src/components/ProjectItem/ProjectItem.astro b/src/components/ProjectItem/ProjectItem.astro
new file mode 100644
index 0000000..e8735df
--- /dev/null
+++ b/src/components/ProjectItem/ProjectItem.astro
@@ -0,0 +1,53 @@
+---
+import { DEFAULT_LANGUAGE } from "@root/config";
+import { getLanguageFromURL } from "@root/utils";
+import { Icon } from "astro-icon";
+import UIString from "../UIString";
+import "./ProjectItem.scss";
+
+export interface Props {
+ data: ProjectType;
+}
+
+const { data } = Astro.props as Props;
+const lang = getLanguageFromURL(Astro.url.pathname);
+const { icon, name, year, description, articleUrl, sourceUrl, demoUrl } = data;
+---
+
++ {heading} +
+ {description &&{description}
} +
+
diff --git a/src/components/ProjectItem/ProjectItem.scss b/src/components/ProjectItem/ProjectItem.scss
new file mode 100644
index 0000000..4669e2b
--- /dev/null
+++ b/src/components/ProjectItem/ProjectItem.scss
@@ -0,0 +1,35 @@
+.project-item {
+ display: flex;
+ flex-direction: column;
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius-lg);
+ padding: 15px;
+
+ &__heading {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 10px;
+
+ & h2 {
+ display: flex;
+ align-items: center;
+ font-size: 1.2rem;
+ font-weight: 600;
+ column-gap: 10px;
+ margin: 0;
+ padding: 0;
+ }
+
+ & span {
+ font-size: var(--font-size-sm);
+ color: var(--font-color-gray);
+ }
+ }
+
+ &__links {
+ display: flex;
+ margin-top: auto;
+ column-gap: 5px;
+ }
+}
diff --git a/src/components/ProjectItem/index.ts b/src/components/ProjectItem/index.ts
new file mode 100644
index 0000000..4c1c19a
--- /dev/null
+++ b/src/components/ProjectItem/index.ts
@@ -0,0 +1 @@
+export { default } from "./ProjectItem.astro";
diff --git a/src/components/ProjectsList/ProjectsList.astro b/src/components/ProjectsList/ProjectsList.astro
new file mode 100644
index 0000000..7b7abe2
--- /dev/null
+++ b/src/components/ProjectsList/ProjectsList.astro
@@ -0,0 +1,7 @@
+---
+import './ProjectsList.scss';
+---
+
+
+
+
+ {year}
+
+
+
+ {year}
+
+
+
+{description[lang] || description[DEFAULT_LANGUAGE]}
+
+
diff --git a/src/components/ProjectsList/ProjectsList.scss b/src/components/ProjectsList/ProjectsList.scss
new file mode 100644
index 0000000..ab4094d
--- /dev/null
+++ b/src/components/ProjectsList/ProjectsList.scss
@@ -0,0 +1,5 @@
+.projects-list {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 10px;
+}
diff --git a/src/components/ProjectsList/index.ts b/src/components/ProjectsList/index.ts
new file mode 100644
index 0000000..f212a27
--- /dev/null
+++ b/src/components/ProjectsList/index.ts
@@ -0,0 +1 @@
+export { default } from "./ProjectsList.astro";
diff --git a/src/components/RecentArticles/EmptyList.astro b/src/components/RecentArticles/EmptyList.astro
new file mode 100644
index 0000000..dc4459e
--- /dev/null
+++ b/src/components/RecentArticles/EmptyList.astro
@@ -0,0 +1,18 @@
+---
+import UIString from "@components/UIString";
+---
+
+
+
+
+
diff --git a/src/components/RecentArticles/RecentArticles.astro b/src/components/RecentArticles/RecentArticles.astro
new file mode 100644
index 0000000..15ef927
--- /dev/null
+++ b/src/components/RecentArticles/RecentArticles.astro
@@ -0,0 +1,56 @@
+---
+import { ArticleItem } from "@components/ArticleItem";
+import UIString from "@components/UIString";
+import { getLanguageFromURL } from "@utils/url";
+import { sortArtcilesByDate } from "@utils/articles";
+import EmptyList from "./EmptyList.astro";
+import TranslatedLink from "@components/TranslatedLink";
+
+export interface Props {
+ articles: ArticleType[];
+ length?: number | undefined;
+}
+
+const { articles, length = 5 } = Astro.props as Props;
+
+const lang = getLanguageFromURL(Astro.url.pathname);
+const recent = sortArtcilesByDate(articles);
+const isEmpty = recent.length === 0;
+---
+
+
+
+
+
+
+
+
+ {!isEmpty ? recent.slice(0, length).map((article) =>
+
+
+
+ {props.count}
+
+ );
+};
+
+export default SearchInput;
diff --git a/src/components/SearchInput/index.ts b/src/components/SearchInput/index.ts
new file mode 100644
index 0000000..1a2fa40
--- /dev/null
+++ b/src/components/SearchInput/index.ts
@@ -0,0 +1 @@
+export { default } from "./SearchInput";
diff --git a/src/components/SkillsBlock/SkillsBlock.astro b/src/components/SkillsBlock/SkillsBlock.astro
new file mode 100644
index 0000000..1bddeb0
--- /dev/null
+++ b/src/components/SkillsBlock/SkillsBlock.astro
@@ -0,0 +1,33 @@
+---
+import { DEFAULT_LANGUAGE } from "@root/config";
+import { getLanguageFromURL } from "@root/utils";
+import { Icon } from "astro-icon";
+import "./SkillsBlock.scss";
+
+export interface Props {
+ data: SkillsType;
+}
+
+const lang = getLanguageFromURL(Astro.url.pathname);
+const {
+ data: { title, list },
+} = Astro.props as Props;
+---
+
+
+
diff --git a/src/components/SkillsBlock/SkillsBlock.scss b/src/components/SkillsBlock/SkillsBlock.scss
new file mode 100644
index 0000000..12d2211
--- /dev/null
+++ b/src/components/SkillsBlock/SkillsBlock.scss
@@ -0,0 +1,36 @@
+.skills-block {
+ & h3 {
+ font-size: var(--font-size-md);
+ color: var(--font-color-grayer);
+ font-weight: 500;
+ }
+
+ & ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ & li {
+ font-weight: 400;
+ margin-bottom: 10px;
+ font-size: var(--font-size-sm);
+ display: flex;
+ align-items: center;
+ column-gap: 5px;
+ }
+ }
+}
+
+@media screen and (max-width: 500px) {
+ .skills-block {
+ & h3 {
+ text-align: center;
+ }
+
+ & ul {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ }
+}
diff --git a/src/components/SkillsBlock/index.ts b/src/components/SkillsBlock/index.ts
new file mode 100644
index 0000000..03c4c87
--- /dev/null
+++ b/src/components/SkillsBlock/index.ts
@@ -0,0 +1 @@
+export { default } from "./SkillsBlock.astro";
diff --git a/src/components/SkillsList/SkillsList.astro b/src/components/SkillsList/SkillsList.astro
new file mode 100644
index 0000000..3bd6913
--- /dev/null
+++ b/src/components/SkillsList/SkillsList.astro
@@ -0,0 +1,5 @@
+---
+import './SkillsList.scss';
+---
+
+
+
+ {title[lang] || title[DEFAULT_LANGUAGE]}
+
+
+-
+ {
+ list.map((entry) => (
+
-
+ {entry.icon &&
} + {entry.name} +
+ ))
+ }
+
+
+
+
+
+
diff --git a/src/components/Splash/Splash.astro b/src/components/Splash/Splash.astro
new file mode 100644
index 0000000..b840f8c
--- /dev/null
+++ b/src/components/Splash/Splash.astro
@@ -0,0 +1,10 @@
+-
+
- + {tag} + + )} + /> +
+
+
+
+
+
+
+ {showPageHeading &&
+ yarkov.tech
-
- web-site is under construction now
thank you
-
- 
- 
- Fullstack web-developer & freelancer
+ +
+
+404
+{t("404.description")}
+