diff --git a/index.html b/index.html index b454eda..b2246eb 100644 --- a/index.html +++ b/index.html @@ -1,32 +1,39 @@ - - - - - - Anatoly Kopyl - - - - - - - -
+ ym(88895893, "init", { + clickmap: true, + trackLinks: true, + accurateTrackBounce: true, + webvisor: true + }); + + + + - - - + + +
+ + + + + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 72280e4..53c9363 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,10 +8,10 @@ import ContactForm from './components/ContactForm' const App: Component = () => { return (
- - - - + + + +
); }; diff --git a/src/components/ContactForm.module.css b/src/components/ContactForm.module.css index 2376873..449102e 100644 --- a/src/components/ContactForm.module.css +++ b/src/components/ContactForm.module.css @@ -11,7 +11,7 @@ align-items: center; } -.form > * { +.form>* { width: 100%; max-width: 600px; box-sizing: border-box; @@ -28,4 +28,4 @@ width: 100%; box-sizing: border-box; } -} +} \ No newline at end of file diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx index 33abcdb..7c45862 100644 --- a/src/components/ContactForm.tsx +++ b/src/components/ContactForm.tsx @@ -9,7 +9,7 @@ import styles from './ContactForm.module.css'; export default () => { const [t] = useI18n(); const [state, setters] = useStore() as Store; - const [observer] = createViewportObserver({threshold: 0.9}); + const [observer] = createViewportObserver({ threshold: 0.9 }); const chapterName = 'mail'; return ( @@ -21,7 +21,7 @@ export default () => { } else if (state.visibleChapter() === chapterName) { setters.setScrolling(false) } - // Сраный костыль + // Сраный костыль } else if (state.visibleChapter() === chapterName) { setters.setVisibleChapter('projects'); } @@ -35,14 +35,14 @@ export default () => { method="post" autocomplete='off' > - - @@ -55,7 +55,7 @@ export default () => { diff --git a/src/components/Controls.module.css b/src/components/Controls.module.css index db4fe6b..8149a53 100644 --- a/src/components/Controls.module.css +++ b/src/components/Controls.module.css @@ -1,3 +1,7 @@ +:root { + --blob-distance: 70px; +} + .Controls { position: fixed; background: var(--clr-bg-secondary); @@ -12,12 +16,13 @@ .chapters { position: relative; - height: calc(70px * 3); + height: calc(var(--blob-distance) * 3); width: 100%; margin-bottom: var(--gap-md); } -.controlsWrapper, .gooWrapper { +.controlsWrapper, +.gooWrapper { position: absolute; top: 0; left: 0; @@ -29,7 +34,8 @@ filter: url('#goo'); } -.control, .blob { +.control, +.blob { position: absolute; left: 50%; transform: translateX(-50%); @@ -46,7 +52,7 @@ box-sizing: border-box; } -.control > img { +.control>img { width: 100%; } @@ -62,15 +68,16 @@ .selected { width: 64px; height: 64px; - transform: translateX(-50%); } -.control:nth-child(2), .blob:nth-child(2) { - top: 70px; +.control:nth-child(2), +.blob:nth-child(2) { + top: var(--blob-distance); } -.control:nth-child(3), .blob:nth-child(3) { - top: calc(70px * 2); +.control:nth-child(3), +.blob:nth-child(3) { + top: calc(var(--blob-distance) * 2); } @media screen and (max-width: 1080px) { @@ -85,29 +92,33 @@ } .chapters { - width: calc(70px * 3); + width: calc(var(--blob-distance) * 3); height: 64px; margin: auto; } - .control, .blob { + .control, + .blob { top: 0; left: 0; transform: translateX(0); } - .control, .control > img { + .control, + .control>img { width: auto; height: 100%; } - .control:nth-child(2), .blob:nth-child(2) { + .control:nth-child(2), + .blob:nth-child(2) { top: unset; - left: 70px; + left: var(--blob-distance); } - - .control:nth-child(3), .blob:nth-child(3) { + + .control:nth-child(3), + .blob:nth-child(3) { top: unset; - left: calc(70px * 2); + left: calc(var(--blob-distance) * 2); } } \ No newline at end of file diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx index b5a4cee..bc4037f 100644 --- a/src/components/Controls.tsx +++ b/src/components/Controls.tsx @@ -9,7 +9,7 @@ import gridIcon from '../assets/icons/grid.svg' import mailIcon from '../assets/icons/mail.svg' export default () => { - const [state, {setVisibleChapter, setScrolling}] = useStore() as Store; + const [state, { setVisibleChapter, setScrolling }] = useStore() as Store; const [selected, setSelected] = createSignal('home'); const [blobby, setBlobby] = createSignal(['home']); const chapters = [ @@ -42,7 +42,7 @@ export default () => {
{(chapter) => -
{
{(chapter) => -
{ setScrolling(true); selectChapter(chapter.name) }} class={styles.control} > -
@@ -71,13 +71,13 @@ export default () => {
- - - - - - - + + + + + + + ) diff --git a/src/components/Hero.module.css b/src/components/Hero.module.css index 2d1f6f5..63219aa 100644 --- a/src/components/Hero.module.css +++ b/src/components/Hero.module.css @@ -14,13 +14,13 @@ .gradientText { max-width: 100%; display: inline-block; - font-size: 86px; - background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - animation: gradient 5s ease infinite; - width: max-content; - background-size: 200% auto; + font-size: 86px; + background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: gradient 5s ease infinite; + width: max-content; + background-size: 200% auto; word-break: break-word; } @@ -41,9 +41,11 @@ 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } @@ -53,4 +55,4 @@ .gradientText { font-size: 72px; } -} +} \ No newline at end of file diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index 52f686b..d6c0699 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -9,13 +9,13 @@ import styles from './Hero.module.css'; export default () => { const [t] = useI18n(); - const [observer] = createViewportObserver({threshold: 0.8}); + const [observer] = createViewportObserver({ threshold: 0.8 }); const [state, setters] = useStore() as Store; const chapterName = 'home' return ( -
{ +
{ if (event.isIntersecting) { if (!state.scrolling()) { setters.setVisibleChapter(chapterName); @@ -36,7 +36,7 @@ export default () => { -
{ setTimeout(() => element.style.opacity = '0') diff --git a/src/components/LanguageSelector.module.css b/src/components/LanguageSelector.module.css index 2bbcf3a..8deaf4a 100644 --- a/src/components/LanguageSelector.module.css +++ b/src/components/LanguageSelector.module.css @@ -8,7 +8,7 @@ margin: auto; } -.LanguageSelector > img { +.LanguageSelector>img { margin-right: 6px; } @@ -19,4 +19,4 @@ top: 50%; transform: translateY(-50%); } -} +} \ No newline at end of file diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx index 47f6ec9..01fa1bf 100644 --- a/src/components/LanguageSelector.tsx +++ b/src/components/LanguageSelector.tsx @@ -35,7 +35,7 @@ export default () => { }} class={styles.LanguageSelector} > - + {t('lang')}
) diff --git a/src/components/Links.module.css b/src/components/Links.module.css index 3e5c36e..cf1b9a3 100644 --- a/src/components/Links.module.css +++ b/src/components/Links.module.css @@ -3,7 +3,7 @@ bottom: var(--gap-lg); } -.Links > a { +.Links>a { margin: 0 var(--gap-sm); } @@ -11,4 +11,4 @@ .Links { bottom: calc(64px + var(--gap-lg)); } -} +} \ No newline at end of file diff --git a/src/components/Links.tsx b/src/components/Links.tsx index b8441a1..b01f6b4 100644 --- a/src/components/Links.tsx +++ b/src/components/Links.tsx @@ -3,20 +3,20 @@ import styles from './Links.module.css'; export default () => { return (
- github - linkedin - telegram diff --git a/src/components/Projects/Project.module.css b/src/components/Projects/Project.module.css index 867b0dd..83b8694 100644 --- a/src/components/Projects/Project.module.css +++ b/src/components/Projects/Project.module.css @@ -36,5 +36,5 @@ @media screen and (max-width: 1464px) { .Project { width: calc(50% - var(--gap-lg)); - } + } } \ No newline at end of file diff --git a/src/components/Projects/Project.tsx b/src/components/Projects/Project.tsx index 558fb4b..4fd9280 100644 --- a/src/components/Projects/Project.tsx +++ b/src/components/Projects/Project.tsx @@ -3,7 +3,7 @@ import { useI18n } from "@solid-primitives/i18n"; import styles from './Project.module.css'; import type { Project } from './projectList'; -export default (props: {project: Project}) => { +export default (props: { project: Project }) => { const [t] = useI18n(); return ( diff --git a/src/components/Projects/Projects.module.css b/src/components/Projects/Projects.module.css index 9595cb7..a85d928 100644 --- a/src/components/Projects/Projects.module.css +++ b/src/components/Projects/Projects.module.css @@ -16,4 +16,4 @@ box-sizing: border-box; flex-direction: column; } -} +} \ No newline at end of file diff --git a/src/components/Projects/Projects.tsx b/src/components/Projects/Projects.tsx index f46a788..8db6a33 100644 --- a/src/components/Projects/Projects.tsx +++ b/src/components/Projects/Projects.tsx @@ -11,7 +11,7 @@ import type { Project as ProjectType } from './projectList'; export default () => { const [state, setters] = useStore() as Store; - const [observer] = createViewportObserver({threshold: 0.1}); + const [observer] = createViewportObserver({ threshold: 0.1 }); const chapterName = 'projects' return ( @@ -33,7 +33,7 @@ export default () => { project={project} /> } - +
) }; diff --git a/src/index.css b/src/index.css index c275b2f..659d3b0 100644 --- a/src/index.css +++ b/src/index.css @@ -15,8 +15,8 @@ --radius-md: 12px; --ff-default: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; --font-sm: normal normal 300 16px var(--ff-default); --font-md: normal normal 400 18px var(--ff-default); } @@ -34,7 +34,12 @@ body { background: var(--clr-bg); } -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin: 0; } @@ -49,7 +54,8 @@ code { monospace; } -input, textarea { +input, +textarea { background: var(--clr-bg-secondary); border: none; padding: var(--gap-sm); @@ -62,10 +68,12 @@ textarea { resize: none; } -textarea:focus, input:focus{ +textarea:focus, +input:focus { outline: none; } -input::placeholder, textarea::placeholder { +input::placeholder, +textarea::placeholder { color: var(--clr-text-secondary); -} +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index a8d0e9c..8bfa1d4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -11,10 +11,10 @@ import localization from './localization'; render( () => ( - - - + + + - ), + ), document.getElementById('root') as HTMLElement );