anatolykopyl/kopyl.dev
1
0
Fork 0
Code Issues Pull Requests Actions Wiki Activity

Updated telegram and formatting

Browse Source
This commit is contained in:
Anatoly Kopyl
2023-01-01 21:58:51 +03:00
parent 35b6170959
commit 3963b68a73
18 changed files with 131 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
index.html
View File

@@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
@@ -8,25 +9,31 @@
<title>Anatoly Kopyl</title> <title>Anatoly Kopyl</title>
<!-- Yandex.Metrika counter --> <!-- Yandex.Metrika counter -->
<script type="text/javascript" > <script type="text/javascript">
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; (function (m, e, t, r, i, k, a) {
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
m[i].l = 1 * new Date(); k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(88895893, "init", { ym(88895893, "init", {
clickmap:true, clickmap: true,
trackLinks:true, trackLinks: true,
accurateTrackBounce:true, accurateTrackBounce: true,
webvisor:true webvisor: true
}); });
</script> </script>
<noscript><div><img src="https://mc.yandex.ru/watch/88895893" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <noscript>
<div><img src="https://mc.yandex.ru/watch/88895893" style="position:absolute; left:-9999px;" alt="" /></div>
</noscript>
<!-- /Yandex.Metrika counter --> <!-- /Yandex.Metrika counter -->
</head> </head>
<body>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<script src="/src/index.tsx" type="module"></script> <script src="/src/index.tsx" type="module"></script>
</body> </body>
</html> </html>

8
src/App.tsx
View File

@@ -8,10 +8,10 @@ import ContactForm from './components/ContactForm'
const App: Component = () => { const App: Component = () => {
return ( return (
<div class='App'> <div class='App'>
<Controls/> <Controls />
<Hero/> <Hero />
<Projects/> <Projects />
<ContactForm/> <ContactForm />
</div> </div>
); );
}; };

2
src/components/ContactForm.module.css
View File

@@ -11,7 +11,7 @@
align-items: center; align-items: center;
} }
.form > * { .form>* {
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
box-sizing: border-box; box-sizing: border-box;

2
src/components/ContactForm.tsx
View File

@@ -9,7 +9,7 @@ import styles from './ContactForm.module.css';
export default () => { export default () => {
const [t] = useI18n(); const [t] = useI18n();
const [state, setters] = useStore() as Store; const [state, setters] = useStore() as Store;
const [observer] = createViewportObserver({threshold: 0.9}); const [observer] = createViewportObserver({ threshold: 0.9 });
const chapterName = 'mail'; const chapterName = 'mail';
return ( return (

43
src/components/Controls.module.css
View File

@@ -1,3 +1,7 @@
:root {
--blob-distance: 70px;
}
.Controls { .Controls {
position: fixed; position: fixed;
background: var(--clr-bg-secondary); background: var(--clr-bg-secondary);
@@ -12,12 +16,13 @@
.chapters { .chapters {
position: relative; position: relative;
height: calc(70px * 3); height: calc(var(--blob-distance) * 3);
width: 100%; width: 100%;
margin-bottom: var(--gap-md); margin-bottom: var(--gap-md);
} }
.controlsWrapper, .gooWrapper { .controlsWrapper,
.gooWrapper {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -29,7 +34,8 @@
filter: url('#goo'); filter: url('#goo');
} }
.control, .blob { .control,
.blob {
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@@ -46,7 +52,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
.control > img { .control>img {
width: 100%; width: 100%;
} }
@@ -62,15 +68,16 @@
.selected { .selected {
width: 64px; width: 64px;
height: 64px; height: 64px;
transform: translateX(-50%);
} }
.control:nth-child(2), .blob:nth-child(2) { .control:nth-child(2),
top: 70px; .blob:nth-child(2) {
top: var(--blob-distance);
} }
.control:nth-child(3), .blob:nth-child(3) { .control:nth-child(3),
top: calc(70px * 2); .blob:nth-child(3) {
top: calc(var(--blob-distance) * 2);
} }
@media screen and (max-width: 1080px) { @media screen and (max-width: 1080px) {
@@ -85,29 +92,33 @@
} }
.chapters { .chapters {
width: calc(70px * 3); width: calc(var(--blob-distance) * 3);
height: 64px; height: 64px;
margin: auto; margin: auto;
} }
.control, .blob { .control,
.blob {
top: 0; top: 0;
left: 0; left: 0;
transform: translateX(0); transform: translateX(0);
} }
.control, .control > img { .control,
.control>img {
width: auto; width: auto;
height: 100%; height: 100%;
} }
.control:nth-child(2), .blob:nth-child(2) { .control:nth-child(2),
.blob:nth-child(2) {
top: unset; 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; top: unset;
left: calc(70px * 2); left: calc(var(--blob-distance) * 2);
} }
} }

4
src/components/Controls.tsx
View File

@@ -9,7 +9,7 @@ import gridIcon from '../assets/icons/grid.svg'
import mailIcon from '../assets/icons/mail.svg' import mailIcon from '../assets/icons/mail.svg'
export default () => { export default () => {
const [state, {setVisibleChapter, setScrolling}] = useStore() as Store; const [state, { setVisibleChapter, setScrolling }] = useStore() as Store;
const [selected, setSelected] = createSignal('home'); const [selected, setSelected] = createSignal('home');
const [blobby, setBlobby] = createSignal(['home']); const [blobby, setBlobby] = createSignal(['home']);
const chapters = [ const chapters = [
@@ -75,7 +75,7 @@ export default () => {
<filter id="goo"> <filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" /> <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/> <feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter> </filter>
</defs> </defs>
</svg> </svg>

2
src/components/Hero.module.css
View File

@@ -41,9 +41,11 @@
0% { 0% {
background-position: 0% 50%; background-position: 0% 50%;
} }
50% { 50% {
background-position: 100% 50%; background-position: 100% 50%;
} }
100% { 100% {
background-position: 0% 50%; background-position: 0% 50%;
} }

2
src/components/Hero.tsx
View File

@@ -9,7 +9,7 @@ import styles from './Hero.module.css';
export default () => { export default () => {
const [t] = useI18n(); const [t] = useI18n();
const [observer] = createViewportObserver({threshold: 0.8}); const [observer] = createViewportObserver({ threshold: 0.8 });
const [state, setters] = useStore() as Store; const [state, setters] = useStore() as Store;
const chapterName = 'home' const chapterName = 'home'

2
src/components/LanguageSelector.module.css
View File

@@ -8,7 +8,7 @@
margin: auto; margin: auto;
} }
.LanguageSelector > img { .LanguageSelector>img {
margin-right: 6px; margin-right: 6px;
} }

2
src/components/LanguageSelector.tsx
View File

@@ -35,7 +35,7 @@ export default () => {
}} }}
class={styles.LanguageSelector} class={styles.LanguageSelector}
> >
<img src={globeIcon}/> <img src={globeIcon} />
{t('lang')} {t('lang')}
</div> </div>
) )

2
src/components/Links.module.css
View File

@@ -3,7 +3,7 @@
bottom: var(--gap-lg); bottom: var(--gap-lg);
} }
.Links > a { .Links>a {
margin: 0 var(--gap-sm); margin: 0 var(--gap-sm);
} }

2
src/components/Links.tsx
View File

@@ -16,7 +16,7 @@ export default () => {
linkedin linkedin
</a> </a>
<a <a
href='https://t.me/avkopyl' href='https://t.me/anatolykopyl'
target='_blank' target='_blank'
> >
telegram telegram

2
src/components/Projects/Project.tsx
View File

@@ -3,7 +3,7 @@ import { useI18n } from "@solid-primitives/i18n";
import styles from './Project.module.css'; import styles from './Project.module.css';
import type { Project } from './projectList'; import type { Project } from './projectList';
export default (props: {project: Project}) => { export default (props: { project: Project }) => {
const [t] = useI18n(); const [t] = useI18n();
return ( return (

2
src/components/Projects/Projects.tsx
View File

@@ -11,7 +11,7 @@ import type { Project as ProjectType } from './projectList';
export default () => { export default () => {
const [state, setters] = useStore() as Store; const [state, setters] = useStore() as Store;
const [observer] = createViewportObserver({threshold: 0.1}); const [observer] = createViewportObserver({ threshold: 0.1 });
const chapterName = 'projects' const chapterName = 'projects'
return ( return (

16
src/index.css
View File

@@ -34,7 +34,12 @@ body {
background: var(--clr-bg); background: var(--clr-bg);
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0; margin: 0;
} }
@@ -49,7 +54,8 @@ code {
monospace; monospace;
} }
input, textarea { input,
textarea {
background: var(--clr-bg-secondary); background: var(--clr-bg-secondary);
border: none; border: none;
padding: var(--gap-sm); padding: var(--gap-sm);
@@ -62,10 +68,12 @@ textarea {
resize: none; resize: none;
} }
textarea:focus, input:focus{ textarea:focus,
input:focus {
outline: none; outline: none;
} }
input::placeholder, textarea::placeholder { input::placeholder,
textarea::placeholder {
color: var(--clr-text-secondary); color: var(--clr-text-secondary);
} }