diff --git a/index.html b/index.html index 48c59fc..28c455d 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - Solid App + Anatoly Kopyl diff --git a/package-lock.json b/package-lock.json index f2f5001..8ada3c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@solid-primitives/i18n": "^1.1.0", + "@solid-primitives/intersection-observer": "^1.3.0", "solid-js": "^1.3.13" }, "devDependencies": { @@ -527,6 +528,25 @@ "solid-js": "^1.3.1" } }, + "node_modules/@solid-primitives/intersection-observer": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@solid-primitives/intersection-observer/-/intersection-observer-1.3.0.tgz", + "integrity": "sha512-A0I/fmx7qBx4z7m7a1gEwdjlpDeRIu/OHMnZ6DKvuwV07r58bSAJ5LHdrkR4dPRa4U9HO359JRUKVUfe4l4ZUA==", + "dependencies": { + "@solid-primitives/utils": "^1.0.0" + }, + "peerDependencies": { + "solid-js": "^1.3.1" + } + }, + "node_modules/@solid-primitives/utils": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-1.5.2.tgz", + "integrity": "sha512-dZUHjzasuqS2lDO+PQCY1+jFmtWHlaP3tUvkX1Jr06LI/Ipa2P/ZNVSvuIoqQ0Bg+Ny27LvtrXxflZNeGtptvA==", + "peerDependencies": { + "solid-js": "^1.3.1" + } + }, "node_modules/ansi-styles": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", @@ -1806,6 +1826,20 @@ "integrity": "sha512-aqJttEb8rmsQTU5VqfBfaeHFMIqKu1eXHVEahtW4DGKYBz/CDis5V25psQEyspuVTmPs7RpX99Whe9jV7ib4pg==", "requires": {} }, + "@solid-primitives/intersection-observer": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@solid-primitives/intersection-observer/-/intersection-observer-1.3.0.tgz", + "integrity": "sha512-A0I/fmx7qBx4z7m7a1gEwdjlpDeRIu/OHMnZ6DKvuwV07r58bSAJ5LHdrkR4dPRa4U9HO359JRUKVUfe4l4ZUA==", + "requires": { + "@solid-primitives/utils": "^1.0.0" + } + }, + "@solid-primitives/utils": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-1.5.2.tgz", + "integrity": "sha512-dZUHjzasuqS2lDO+PQCY1+jFmtWHlaP3tUvkX1Jr06LI/Ipa2P/ZNVSvuIoqQ0Bg+Ny27LvtrXxflZNeGtptvA==", + "requires": {} + }, "ansi-styles": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", diff --git a/package.json b/package.json index 5c7336d..76ee4bc 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ }, "dependencies": { "@solid-primitives/i18n": "^1.1.0", + "@solid-primitives/intersection-observer": "^1.3.0", "solid-js": "^1.3.13" } } diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico deleted file mode 100644 index b836b2b..0000000 Binary files a/src/assets/favicon.ico and /dev/null differ diff --git a/src/assets/icons/grid-fill.svg b/src/assets/icons/grid-fill.svg deleted file mode 100644 index 001927c..0000000 --- a/src/assets/icons/grid-fill.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx index 5f95bbd..ab2040e 100644 --- a/src/components/Controls.tsx +++ b/src/components/Controls.tsx @@ -1,16 +1,18 @@ import { For, createSignal } from 'solid-js'; +import { useStore } from '../store/index'; import styles from './Controls.module.css'; import homeIcon from '../assets/icons/home.svg' import gridIcon from '../assets/icons/grid.svg' export default () => { + const [store] = useStore(); const [selected, setSelected] = createSignal(0); const [blobby, setBlobby] = createSignal([0]); const controls = [ - { icon: homeIcon }, - { icon: gridIcon }, - { icon: homeIcon }, + { name: 'home', icon: homeIcon }, + { name: 'projects', icon: gridIcon }, + { name: 'whatever', icon: homeIcon }, ] return ( diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index 4f10ccf..825bb6a 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -1,12 +1,24 @@ import { useI18n } from "@solid-primitives/i18n"; +import { createViewportObserver } from '@solid-primitives/intersection-observer'; +import { useStore } from '../store/index'; import styles from './Hero.module.css'; export default () => { const [t] = useI18n(); + const [add] = createViewportObserver(); + const [, { setVisibleChapter }] = useStore(); return ( -
+
{ + add(el, (event) => { + console.log(event.isIntersecting); + setVisibleChapter('home'); + }); + }} + class={styles.Hero} + >

{t('my_name')} diff --git a/src/components/Projects/Projects.module.css b/src/components/Projects/Projects.module.css index e69de29..9b2fded 100644 --- a/src/components/Projects/Projects.module.css +++ b/src/components/Projects/Projects.module.css @@ -0,0 +1,7 @@ +.Projects { + padding: 32px; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} diff --git a/src/components/Projects/Projects.tsx b/src/components/Projects/Projects.tsx index 2e307f8..2b62aac 100644 --- a/src/components/Projects/Projects.tsx +++ b/src/components/Projects/Projects.tsx @@ -1,8 +1,22 @@ +import { createViewportObserver } from '@solid-primitives/intersection-observer'; + +import { useStore } from '../../store/index'; import styles from './Projects.module.css'; export default () => { + const [, { setVisibleChapter }] = useStore(); + const [add] = createViewportObserver(); + return ( -
+
{ + add(el, (event) => { + console.log(event.isIntersecting); + setVisibleChapter('projects'); + }); + }} + class={styles.Projects} + >
) diff --git a/src/index.tsx b/src/index.tsx index 3c1a2ea..a8d0e9c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,15 +3,18 @@ import { render } from 'solid-js/web'; import { I18nContext } from "@solid-primitives/i18n"; +import { StoreProvider } from "./store/index"; import './index.css'; import App from './App'; import localization from './localization'; render( () => ( + + ), document.getElementById('root') as HTMLElement ); diff --git a/src/localization/en.json b/src/localization/en.json index cbfcfd9..ec26b8b 100644 --- a/src/localization/en.json +++ b/src/localization/en.json @@ -1,4 +1,4 @@ { - "my_name": "rerererere", + "my_name": "Anatoly Kopyl", "tagline": "Professional fullstack developer with standards" } diff --git a/src/store/index.tsx b/src/store/index.tsx new file mode 100644 index 0000000..c51b253 --- /dev/null +++ b/src/store/index.tsx @@ -0,0 +1,31 @@ +import { createSignal, createContext, useContext } from "solid-js"; +import type { Accessor, Setter } from 'solid-js'; + +type Store = [ + { visibleChapter: Accessor }, + { setVisibleChapter: Setter } +] + +const StoreContext = createContext(); + +export function StoreProvider(props) { + const [visibleChapter, setVisibleChapter] = createSignal('home'); + const store: Store = [ + { + visibleChapter + }, + { + setVisibleChapter + } + ]; + + return ( + + {props.children} + + ); +} + +export function useStore() { + return useContext(StoreContext); +}