Initial commit

src/App.tsx

@@ -0,0 +1,17 @@
+import type { Component } from 'solid-js';
+
+import Controls from './components/Controls';
+import Hero from './components/Hero'
+import Projects from './components/Projects/Projects'
+
+const App: Component = () => {
+  return (
+    <>
+      <Controls/>
+      <Hero/>
+      <Projects/>
+    </>
+  );
+};
+
+export default App;

src/assets/icons/grid-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-grid-3x3-gap-fill" viewBox="0 0 16 16">
+  <path d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2z"/>
+</svg>

src/assets/icons/grid.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-grid-3x3-gap" viewBox="0 0 16 16">
+  <path d="M4 2v2H2V2h2zm1 12v-2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm5 10v-2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V7a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V2a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zM9 2v2H7V2h2zm5 0v2h-2V2h2zM4 7v2H2V7h2zm5 0v2H7V7h2zm5 0h-2v2h2V7zM4 12v2H2v-2h2zm5 0v2H7v-2h2zm5 0v2h-2v-2h2zM12 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zm-1 6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7zm1 4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2z"/>
+</svg>

src/assets/icons/home.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-house" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
+  <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
+</svg>

src/components/Controls.module.css

@@ -0,0 +1,72 @@
+.Controls {
+  position: fixed;
+  background: var(--clr-bg-secondary);
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 18px;
+  border-radius: 12px;
+  width: 64px;
+  height: 200px;
+}
+
+.controlsWrapper, .gooWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 18px;
+  box-sizing: border-box;
+}
+
+.gooWrapper {
+  filter: url('#goo');
+}
+
+.control, .blob {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+
+.control {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(100% - 36px);
+  height: auto;
+  padding: 18px;
+  box-sizing: border-box;
+}
+
+.control > img {
+  width: 100%;
+}
+
+.blob {
+  background: var(--clr-bg);
+  border-radius: 16px;
+  aspect-ratio: 1/1;
+  transition: all .5s;
+  width: 0;
+  height: 0;
+}
+
+.selected {
+  width: 64px;
+  height: 64px;
+}
+
+.control:nth-child(1), .blob:nth-child(1) {
+  top: 60px;
+}
+
+.control:nth-child(2), .blob:nth-child(2) {
+  top: 120px;
+}
+
+.control:nth-child(3), .blob:nth-child(3) {
+  top: 180px;
+}

src/components/Controls.tsx

@@ -0,0 +1,62 @@
+import { For, createSignal } from 'solid-js';
+
+import styles from './Controls.module.css';
+import homeIcon from '../assets/icons/home.svg'
+import gridIcon from '../assets/icons/grid.svg'
+
+export default () => {
+  const [selected, setSelected] = createSignal(0);
+  const [blobby, setBlobby] = createSignal([0]);
+  const controls = [
+    { icon: homeIcon },
+    { icon: gridIcon },
+    { icon: homeIcon },
+  ]
+
+  return (
+    <>
+      <div class={styles.Controls}>
+        <div class={styles.gooWrapper}>
+          <For each={controls}>{(control, i) =>
+            <div 
+              class={styles.blob}
+              classList={{
+                [styles.selected]: blobby().includes(i())
+              }}
+            ></div>
+          }</For>
+        </div>
+        <div class={styles.controlsWrapper}>
+          <For each={controls}>{(control, i) =>
+            <div 
+              onClick={() => {
+                if (i() !== selected()) {
+                  setSelected(i())
+                  setBlobby(b => [i(), ...b])
+                  setTimeout(() => {
+                    setBlobby(b => [i()])
+                  }, 500)
+                }
+              }}
+              class={styles.control}
+            >
+              <img 
+                src={control.icon}
+              />
+            </div>
+          }</For>
+        </div>
+      </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>
+      </svg>
+    </>
+  )
+}

src/components/Hero.module.css

@@ -0,0 +1,30 @@
+.Hero {
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--clr-bg);
+}
+
+.gradientText {
+  font-size: 72px;
+  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;
+  margin: auto;
+  background-size: 200% auto;
+}
+
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}

src/components/Hero.tsx

@@ -0,0 +1,20 @@
+import { useI18n } from "@solid-primitives/i18n";
+
+import styles from './Hero.module.css';
+
+export default () => {
+  const [t] = useI18n();
+
+  return (
+    <header class={styles.Hero}>
+      <div>
+        <h1 class={styles.gradientText}>
+          {t('my_name')}
+        </h1>
+        <div>
+          {t('tagline')}
+        </div>
+      </div>
+    </header>
+  )
+};

src/components/Projects/Project.tsx

@@ -0,0 +1,9 @@
+import styles from './Project.module.css';
+
+export default () => {
+  return (
+    <div class={styles.Project}>
+
+    </div>
+  )
+}

src/components/Projects/Projects.tsx

@@ -0,0 +1,9 @@
+import styles from './Projects.module.css';
+
+export default () => {
+  return (
+    <div class={styles.Projects}>
+      
+    </div>
+  )
+};

src/index.css

@@ -0,0 +1,22 @@
+:root {
+  --clr-bg: rgb(7, 6, 9);
+  --clr-bg-secondary: hsl(260, 20%, 16%);
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: white;
+  font-size: 18px;
+  text-align: center;
+  background: var(--clr-bg);
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.tsx

@@ -0,0 +1,17 @@
+/* @refresh reload */
+import { render } from 'solid-js/web';
+
+import { I18nContext } from "@solid-primitives/i18n";
+
+import './index.css';
+import App from './App';
+import localization from './localization';
+
+render(
+  () => (
+    <I18nContext.Provider value={localization}>
+      <App />
+    </I18nContext.Provider>
+  ), 
+  document.getElementById('root') as HTMLElement
+);

src/localization/en.json

@@ -0,0 +1,4 @@
+{
+  "my_name": "rerererere",
+  "tagline": "Professional fullstack developer with standards"
+}

src/localization/index.ts

@@ -0,0 +1,11 @@
+import { createI18nContext } from "@solid-primitives/i18n";
+
+import ru from './ru.json';
+import en from './en.json';
+
+const dict = {
+  ru, en
+}
+
+
+export default createI18nContext(dict, "en");

src/localization/ru.json

@@ -0,0 +1,4 @@
+{
+  "my_name": "Анатолий Копыл",
+  "tagline": "Профессиональный fullstack разработчик со стандартами"
+}