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

57
index.html
View File

@@ -1,32 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<title>Anatoly Kopyl</title>
<!-- Yandex.Metrika counter -->
<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)};
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)})
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<title>Anatoly Kopyl</title>
<!-- Yandex.Metrika counter -->
<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) };
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");
ym(88895893, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/88895893" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
ym(88895893, "init", {
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true
});
</script>
<noscript>
<div><img src="https://mc.yandex.ru/watch/88895893" style="position:absolute; left:-9999px;" alt="" /></div>
</noscript>
<!-- /Yandex.Metrika counter -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/src/index.tsx" type="module"></script>
</body>
<script src="/src/index.tsx" type="module"></script>
</body>
</html>

8
src/App.tsx
View File

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

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

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

4
src/components/ContactForm.tsx
View File

@@ -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');
}

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

@@ -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);
}
}

16
src/components/Controls.tsx
View File

@@ -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 = [
@@ -71,13 +71,13 @@ export default () => {
</div>
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<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" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
<defs>
<filter id="goo">
<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" />
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>
</defs>
</svg>
</>
)

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

@@ -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%;
}

2
src/components/Hero.tsx
View File

@@ -9,7 +9,7 @@ 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'

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

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

2
src/components/LanguageSelector.tsx
View File

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

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

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

2
src/components/Links.tsx
View File

@@ -16,7 +16,7 @@ export default () => {
linkedin
</a>
<a
href='https://t.me/avkopyl'
href='https://t.me/anatolykopyl'
target='_blank'
>
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 type { Project } from './projectList';
export default (props: {project: Project}) => {
export default (props: { project: Project }) => {
const [t] = useI18n();
return (

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

@@ -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 (

20
src/index.css
View File

@@ -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);
}

6
src/index.tsx
View File

@@ -11,9 +11,9 @@ import localization from './localization';
render(
() => (
<StoreProvider>
<I18nContext.Provider value={localization}>
<App />
</I18nContext.Provider>
<I18nContext.Provider value={localization}>
<App />
</I18nContext.Provider>
</StoreProvider>
),
document.getElementById('root') as HTMLElement