diff --git a/src/App.tsx b/src/App.tsx index 53c9363..fb5034e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,6 @@ -import type { Component } from 'solid-js'; +import type { Component } from 'solid-js' -import Controls from './components/Controls'; +import Controls from './components/Controls' import Hero from './components/Hero' import Projects from './components/Projects/Projects' import ContactForm from './components/ContactForm' @@ -13,7 +13,7 @@ const App: Component = () => { - ); -}; + ) +} -export default App; +export default App diff --git a/src/assets/laptop_front.png b/src/assets/laptop_front.png new file mode 100644 index 0000000..87cce82 Binary files /dev/null and b/src/assets/laptop_front.png differ diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx index e49016d..c7b2b03 100644 --- a/src/components/Controls.tsx +++ b/src/components/Controls.tsx @@ -1,17 +1,17 @@ -import { For, createSignal, createEffect } from 'solid-js'; +import { For, createSignal, createEffect } from 'solid-js' -import { useStore } from '../store/index'; -import type { Store } from '../store/index'; -import styles from './Controls.module.css'; -import LanguageSelector from './LanguageSelector'; +import { useStore } from '../store/index' +import type { Store } from '../store/index' +import styles from './Controls.module.css' +import LanguageSelector from './LanguageSelector' import homeIcon from '../assets/icons/home.svg' import gridIcon from '../assets/icons/grid.svg' import mailIcon from '../assets/icons/mail.svg' export default () => { - const [state, { setVisibleChapter, setScrolling }] = useStore() as Store; - const [selected, setSelected] = createSignal('home'); - const [blobby, setBlobby] = createSignal(['home']); + const [state, { setVisibleChapter, setScrolling }] = useStore() as Store + const [selected, setSelected] = createSignal('home') + const [blobby, setBlobby] = createSignal(['home']) const chapters = [ { name: 'home', icon: homeIcon }, { name: 'projects', icon: gridIcon }, @@ -20,23 +20,23 @@ export default () => { const selectChapter = (chapterName: string) => { if (chapterName !== selected()) { - setSelected(chapterName); - setVisibleChapter(chapterName); - setBlobby(b => [chapterName, ...b]); + setSelected(chapterName) + setVisibleChapter(chapterName) + setBlobby(b => [chapterName, ...b]) setTimeout(() => { - setBlobby(b => [chapterName]); + setBlobby(b => [chapterName]) }, 500); } } - const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); - const gooey = !isSafari; + const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) + const gooey = !isSafari createEffect((prev) => { if (prev !== state.visibleChapter()) { - selectChapter(state.visibleChapter()); + selectChapter(state.visibleChapter()) } - return state.visibleChapter(); + return state.visibleChapter() }); return ( diff --git a/src/components/Projects/Project.tsx b/src/components/Projects/Project.tsx index d027fef..961d455 100644 --- a/src/components/Projects/Project.tsx +++ b/src/components/Projects/Project.tsx @@ -23,11 +23,17 @@ export default (props: { project: Project, odd: boolean }) => { [styles.Project_halfWidth]: props.project.halfWidth }} > - + { + typeof props.project.preview === 'string' + ? + + : + + }
@@ -47,7 +53,7 @@ export default (props: { project: Project, odd: boolean }) => {
{(icon: Icon) => - { + return ( +
+ +
+ ) +} diff --git a/src/components/Projects/projectList.ts b/src/components/Projects/projectList.ts index 7476b90..6992300 100644 --- a/src/components/Projects/projectList.ts +++ b/src/components/Projects/projectList.ts @@ -1,3 +1,4 @@ +import type { JSXElement } from 'solid-js'; import flexpatrolPreview from '../../assets/projects/flexpatrolPreview.png'; import gamesPreview from '../../assets/projects/gamesPreview.png'; import warframePreview from '../../assets/projects/warframePreview.png'; @@ -6,6 +7,7 @@ import studybuddyPreview from '../../assets/projects/studybuddyPreview.png'; import mockupPreview from '../../assets/projects/mockupPreview.png'; import vkmutePreview from '../../assets/projects/vkmutePreview.png'; import musanthropePreview from '../../assets/projects/musanthropePreview.png'; +import RecursivePreview from './RecursivePreview'; import { Icon, npm, extension, pwa, github @@ -13,7 +15,7 @@ import { export class Project { name: string; - preview: string; + preview: string | (() => JSXElement); link: string; repo?: string; npm?: string; @@ -50,6 +52,12 @@ export default [ descriptionSlug: 'worktime_desc', icons: [ pwa, github ] }), + new Project({ + name: 'This website', + preview: RecursivePreview, + link: 'https://kopyl.dev', + descriptionSlug: 'this_desc' + }), new Project({ name: 'VK Mute', preview: vkmutePreview, diff --git a/src/localization/en.json b/src/localization/en.json index b0ec0e7..018684f 100644 --- a/src/localization/en.json +++ b/src/localization/en.json @@ -2,6 +2,7 @@ "lang": "en", "my_name": "Anatoly Kopyl", "tagline": "Fullstack developer", + "this_desc": "This website", "flexpatrol_desc": "A landing page for a gaming squad with info on their servers and their status.", "games_desc": "A page with a list of my games avaliable to play.", "warframe_desc": "A service that monitors prices of items on warframe.market and calculates profitable gaps between them.", diff --git a/src/localization/ru.json b/src/localization/ru.json index 389ea49..47292fa 100644 --- a/src/localization/ru.json +++ b/src/localization/ru.json @@ -2,6 +2,7 @@ "lang": "ru", "my_name": "Анатолий Копыл", "tagline": "Fullstack разработчик", + "this_desc": "Этот вебсайт", "flexpatrol_desc": "Лендинг для сквада геймеров, с информацией об их серверах и их статусе.", "games_desc": "Страница со ссылками на мои игры.", "warframe_desc": "Сервис, который считает разницу в цене между позициями на warframe.market.", diff --git a/src/store/index.tsx b/src/store/index.tsx index 080169d..d79a5ae 100644 --- a/src/store/index.tsx +++ b/src/store/index.tsx @@ -9,7 +9,7 @@ export type Store = [ { setVisibleChapter: Setter, setScrolling: Setter, - } + }, ] const StoreContext = createContext(); @@ -25,7 +25,7 @@ export function StoreProvider(props: any) { }, { setVisibleChapter, - setScrolling + setScrolling, } ]; diff --git a/vite.config.ts b/vite.config.ts index d52d794..8a6f577 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,5 +6,5 @@ export default defineConfig({ build: { target: 'esnext', polyfillDynamicImport: false, - }, + } });