site v2

2023-04-25 21:47:52 +03:00 · 2023-04-25 21:47:52 +03:00 · 8628895632
parent 381be36b6c
commit 8628895632
25 changed files with 13205 additions and 9118 deletions
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@ -0,0 +1 @@
+nodeLinker: node-modules
--- a/package.json
+++ b/package.json
@ -6,6 +6,7 @@
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-router-dom": "6.10.0",
+    "react-type-animation": "^3.0.1",
    "typescript": "5.0.4"
  },
  "devDependencies": {
--- a/src/Constants.scss
+++ b/src/Constants.scss
@ -0,0 +1,32 @@
+$containerWidth: 980px;
+$accentColor: #d8858d;
+
+$greenColor: #00FF7F;
+$greenLighter: lighten($greenColor, 10%);
+$greenDarker: darken($greenColor, 10%);
+
+$redColor: #FA8072;
+$redLighter: lighten($redColor, 10%);
+$redDarker: darken($redColor, 10%);
+
+$purpleColor: #DDA0DD;
+$purpleLighter: lighten($purpleColor, 10%);
+$purpleDarker: darken($purpleColor, 10%);
+
+:root {
+  --navbar-height: 32px;
+  --container-witdh: #{$containerWidth};
+  --accent-color: #{$accentColor};
+
+  --green-color: #{$greenColor};
+  --green-darker-color: #{$greenDarker};
+  --green-lighter-color: #{$greenLighter};
+
+  --red-color: #{$redColor};
+  --red-darker-color: #{$redDarker};
+  --red-lighter-color: #{$redLighter};
+
+  --purple-color: #{$purpleColor};
+  --purple-darker-color: #{$purpleDarker};
+  --purple-lighter-color: #{$purpleLighter};
+}
--- a/src/components/App/App.scss
+++ b/src/components/App/App.scss
@ -1,20 +1,15 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://files.nix13.pw/d/storage/ui-components/gradients.css');
+@import url('https://files.nix13.pw/d/storage/ui-components/buttons.css');
+@import "../../Constants";

 * {
  margin: 0;
+  padding: 0;
  box-sizing: border-box;
 }

-html {
-  //--sidebar-width: 200px;
-  --navbar-height: 32px;
-  --container-witdh: 980px;
-  --accent-color: #d8858d;
-}
-
 html, body, #root, .App {
-  min-height: 100%;
-  height: 100%;
  width: 100%;
 }

@ -23,17 +18,26 @@ body {
  color: white;
 }

+:root{
+  scroll-behavior: smooth;
+}
+
 .App {
+  background: #222;
+  margin: var(--navbar-height) 0 0;
+}
+
+.Container {
  display: flex;
  flex-direction: column;
-  align-items: center;
-  background: url(https://sun9-north.userapi.com/sun9-85/s/v1/ig2/zjIxUc-QQvBkikqfGSAKKX9SnKkOpWS1DBjjFpCAeLB8k4kh08CTCBN1DdRD8uX9f0TQa1856yEiE-YhloQjYoSp.jpg?size=2560x1457&quality=95&type=album) center/cover no-repeat
-}
-.Content {
-  min-height: 100%;
-  width: var(--container-witdh);
-  box-sizing: border-box;
-  background-color: #000000a0
+  margin: 0 auto;
+
+  @media screen and (min-width: calc(#{$containerWidth} + 1px)) {
+    width: var(--container-witdh);
+  }
+  @media screen and (max-width: #{$containerWidth}) {
+    width: 100%;
+  }
 }

 a {
@ -43,4 +47,20 @@ a {
  &:hover {
    color: #ddd;
  }
+}
+
+.Button--Outline {
+  --color: #fff;
+  --hover-color: #ddd;
+
+  text-decoration: none;
+  color: var(--color);
+  border: 1px solid var(--color);
+  padding: 4px 6px;
+  border-radius: 4px;
+  text-shadow: 0 0 20px;
+  &:hover {
+    color: var(--hover-color);
+    border-color: var(--hover-color);
+  }
 }
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@ -1,19 +1,18 @@
 import {FC} from "react";
-import { Route, Routes } from "react-router";
 import Main from "../../pages/Main/Main";
 import Projects from "../../pages/Projects/Projects";
 import './App.scss';
 import Navbar from "../Navbar/Navbar";
+import GenshinDownloads from "../../pages/GenshinDownloads/GenshinDownloads";

 const App: FC = () => (
    <div className="App">
        <Navbar/>

-        <div className="Content">
-            <Routes>
-                <Route path="/" element={<Main/>}/>
-                <Route path="/projects" element={<Projects/>}/>
-            </Routes>
+        <div className="Container">
+            <Main/>
+            <Projects/>
+            <GenshinDownloads/>
        </div>
    </div>
 );
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@ -1,10 +1,12 @@
-import {Link} from "react-router-dom";
 import './Navbas.scss';

 const Navbar = () => (
    <div className="Navbar">
-        <Link to='/'>Main</Link>
-        <Link to='/projects'>Projects</Link>
+        <div className="Navbar__Container">
+            <a href="#Main" className='Navbar__Container_Link'>Основное</a>
+            <a href="#Projects" className='Navbar__Container_Link'>Проекты</a>
+            <a href="#GenshinDownloads" className='Navbar__Container_Link'>Genshin</a>
+        </div>
    </div>
 );

--- a/src/components/Navbar/Navbas.scss
+++ b/src/components/Navbar/Navbas.scss
@ -1,6 +1,32 @@
+@import "../../Constants";
+
 .Navbar {
-  //height: var(--navbar-height)
-  height: 32px;
+  position: fixed;
+  top: 0;
+  height: var(--navbar-height);
  width: 100%;
  background-color: #222;
+
+  &__Container {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+
+    @media screen and (min-width: calc(#{$containerWidth} + 1px)) {
+      width: var(--container-witdh);
+    }
+    @media screen and (max-width: #{$containerWidth}) {
+      width: 100%;
+    }
+
+    &_Link {
+      font-size: 20px;
+
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+  }
 }
--- a/src/components/Sidebar/Sidebar.sass
+++ b/src/components/Sidebar/Sidebar.sass
@ -1,47 +0,0 @@
-.Sidebar
-  width: var(--sidebar-width)
-  box-sizing: border-box
-  height: 100%
-  background-color: #222
-
-  &__MainInfo
-    padding: 8px
-    display: flex
-    flex-direction: column
-    align-items: center
-
-    &_Avatar
-      width: 96px
-      border-radius: 50%
-      margin-bottom: 8px
-    
-    &_Name
-      font-weight: 900
-      font-size: 24px
-
-  &__SocialLinks
-    margin-top: 64px
-
-  &__Links
-    margin-top: 16px
-
-  &__Links, &__SocialLinks
-    display: flex
-    flex-direction: column
-    align-items: center
-
-    &_Link
-      font-size: 16px
-      background-color: #d8858d
-      padding: 2px 8px
-      margin: 2px 0
-      width: 100%
-      box-sizing: border-box
-
-      &:hover
-        background-color: #e2817a
-        color: white
-
-      & > .fa-light, & > .fa-brands
-        margin-right: 4px
-      
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@ -1,59 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import './Sidebar.sass';
-
-class Sidebar extends React.Component {
-    render() {
-        return (
-            <div className="Sidebar">
-                <div className="Sidebar__MainInfo">
-                    <img className="Sidebar__MainInfo_Avatar" src="https://avatars.githubusercontent.com/u/13962582?v=4" alt="" />
-                    <div className="Sidebar__MainInfo_Name">
-                        Nix13
-                    </div>
-                </div>
-
-                <div className="Sidebar__Links">
-                    <Link className="Sidebar__Links_Link" to='/'>
-                        <i className="fa-light fa-house"/>
-                        Главная
-                    </Link>
-                    <Link className="Sidebar__Links_Link" to='/projects'>
-                        <i className="fa-light fa-bars"/>
-                        Проекты
-                    </Link>
-                </div>
-
-                <div className="Sidebar__SocialLinks">
-                    <a className="Sidebar__SocialLinks_Link" href='https://t.me/DarkShinigani' target='_blank' rel='noopener noreferrer'>
-                        <i className="fa-brands fa-telegram"/>
-                        Телеграм
-                    </a>
-                    <a className="Sidebar__SocialLinks_Link" href='https://vk.com/scur0nek0' target='_blank' rel='noopener noreferrer'>
-                        <i className="fa-brands fa-vk"/>
-                        ВК
-                    </a>
-
-                    <a className="Sidebar__SocialLinks_Link" href='https://github.com/Nix1304' target='_blank' rel='noopener noreferrer'>
-                        <i className="fa-brands fa-github"/>
-                        GitHub
-                    </a>
-                    <a className="Sidebar__SocialLinks_Link" href='https://git.nix13.pw/' target='_blank' rel='noopener noreferrer'>
-                        <i className="fa-brands fa-git"/>
-                        Git
-                    </a>
-                    <a className="Sidebar__SocialLinks_Link" href='https://mvn.nix13.pw/' target='_blank' rel='noopener noreferrer'>
-                        <i className="fa-brands fa-readme"></i>
-                        Maven
-                    </a>
-                    <a className="Sidebar__SocialLinks_Link" href='https://files.nix13.pw/' target='_blank' rel='noopener noreferrer'>
-                        <i className="fa-light fa-files"/>
-                        Files
-                    </a>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default Sidebar;
--- a/src/pages/GenshinBetas/GenshinBetas.tsx
+++ b/src/pages/GenshinBetas/GenshinBetas.tsx
--- a/src/pages/GenshinDownloads/GenshinDownloads.scss
+++ b/src/pages/GenshinDownloads/GenshinDownloads.scss
@ -0,0 +1,67 @@
+@import "../../Constants";
+
+.GenshinDownloads {
+  padding-top: var(--navbar-height);
+
+  &__Item {
+    &_Title {
+      text-align: center;
+      margin-bottom: 6px;
+    }
+
+    &_Links {
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+
+      &_Link {
+        font-size: 20px;
+        margin: 0 8px 8px;
+        --color: var(--green-color);
+        --hover-color: var(--green-darker-color);
+
+        &--Outdated {
+          --color: var(--red-color);
+          --hover-color: var(--red-darker-color);
+        }
+
+        &--Beta {
+          --color: var(--purple-color);
+          --hover-color: var(--purple-darker-color);
+        }
+      }
+    }
+  }
+
+  &__Actual, &__Outdated, &__Beta {
+    text-align: center;
+    border-bottom: 1px solid #fff;
+    margin-bottom: 4px;
+    padding-bottom: 4px;
+  }
+
+  &__Actual {
+    color: var(--green-lighter-color);
+    border-color: var(--green-color);
+  }
+
+  &__Beta {
+    color: var(--purple-lighter-color);
+    border-color: var(--purple-color);
+    cursor: pointer;
+
+    &--NotCollapsed {
+      border: none;
+    }
+  }
+
+  &__Outdated {
+    color: var(--red-lighter-color);
+    border-color: var(--red-color);
+    cursor: pointer;
+
+    &--NotCollapsed {
+      border: none;
+    }
+  }
+}
--- a/src/pages/GenshinDownloads/GenshinDownloads.tsx
+++ b/src/pages/GenshinDownloads/GenshinDownloads.tsx
@ -0,0 +1,82 @@
+import {useEffect, useState} from "react";
+import './GenshinDownloads.scss';
+import Loading from "../../ui/Loading/Loading";
+import * as url from "url";
+
+const GenshinDownloads = () => {
+    const [genshinDL, setGenshinDL] = useState<GenshinDLType[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [outdatedCollapse, setOutdatedCollapse] = useState(true);
+    const [betaCollapse, setBetaCollapse] = useState(true);
+
+    useEffect(() => {
+        // const url = 'https://baka.nix13.pw/genshin';
+        const url = 'http://localhost:8099/genshin'
+        fetch(url)
+            .then(r => r.json())
+            .then(r => setGenshinDL(r.genshin))
+            .then(_ => setLoading(false));
+    }, []);
+
+    if(loading || !genshinDL) return <Loading/>;
+    return (
+        <div className={'GenshinDownloads'} id='GenshinDownloads'>
+            <h1 className={'GenshinDownloads__Actual'}>Актуальная версия</h1>
+            {genshinDL.filter(dl => !dl.outdated && !dl.beta).map(dl => (
+                <div className={'GenshinDownloads__Item'} key={dl.name}>
+                    <h2 className={'GenshinDownloads__Item_Title'}>{dl.name}</h2>
+
+                    <div className="GenshinDownloads__Item_Links">
+                        {dl.links.map(link => (
+                            <a
+                                href={link.url}
+                                key={link.name}
+                                className={'Button--Outline GenshinDownloads__Item_Links_Link'}
+                            >
+                                {link.name}
+                            </a>
+                        ))}
+                    </div>
+                </div>
+            ))}
+
+            <h1 className={`GenshinDownloads__Outdated ${outdatedCollapse && 'GenshinDownloads__Outdated--NotCollapsed'}`} onClick={() => setOutdatedCollapse(!outdatedCollapse)}>Устаревшие версии</h1>
+            {!outdatedCollapse && genshinDL.filter(dl => dl.outdated && !dl.beta).map(dl => (
+                <div className={'GenshinDownloads__Item'} key={dl.name}>
+                    <h2 className={'GenshinDownloads__Item_Title'}>{dl.name}</h2>
+                    <div className="GenshinDownloads__Item_Links">
+                        {dl.links.map(link => (
+                            <a
+                                href={link.url}
+                                key={link.name}
+                                className={'Button--Outline GenshinDownloads__Item_Links_Link GenshinDownloads__Item_Links_Link--Outdated'}
+                            >
+                                {link.name}
+                            </a>
+                        ))}
+                    </div>
+                </div>
+            ))}
+
+            <h1 className={`GenshinDownloads__Beta ${betaCollapse && 'GenshinDownloads__Beta--NotCollapsed'}`} onClick={() => setBetaCollapse(!betaCollapse)}>Бета версии</h1>
+            {!betaCollapse && genshinDL.filter(dl => dl.beta).map(dl => (
+                <div className={'GenshinDownloads__Item'} key={dl.name}>
+                    <h2 className={'GenshinDownloads__Item_Title'}>{dl.name}</h2>
+                    <div className="GenshinDownloads__Item_Links">
+                        {dl.links.map(link => (
+                            <a
+                                href={link.url}
+                                key={link.name}
+                                className={'Button--Outline GenshinDownloads__Item_Links_Link GenshinDownloads__Item_Links_Link--Beta'}
+                            >
+                                {link.name}
+                            </a>
+                        ))}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export default GenshinDownloads;
--- a/src/pages/Main/Main.sass
+++ b/src/pages/Main/Main.sass
@ -1,22 +0,0 @@
-.Main
-  padding: 16px
-  width: 100%
-  height: 100%
-  box-sizing: border-box
-  display: flex
-
-  .DiscordStatus
-    border: 3px solid var(--accent-color)
-    border-radius: 10px
-
-  .GitHub-Row
-    display: flex
-    flex-direction: row
-    justify-content: space-between
-
-    &__Element
-      border: 3px solid var(--accent-color)
-      border-radius: 10px
-      box-sizing: border-box
-      height: fit-content
-
--- a/src/pages/Main/Main.scss
+++ b/src/pages/Main/Main.scss
@ -0,0 +1,48 @@
+@import "../../Constants";
+
+.Main {
+  width: 100%;
+  height: calc(100vh - var(--navbar-height));
+  box-sizing: border-box;
+
+  &__Center {
+    height: calc(100% - var(--navbar-height));
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    &_Name {
+      color: var(--accent-color);
+      font-size: 4rem;
+      font-weight: 700;
+    }
+    &_SubName {
+      font-size: 2rem;
+      font-weight: 200;
+    }
+  }
+
+  &__Links {
+    height: 32px;
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &_Link {
+      display: flex;
+      align-items: center;
+
+      & > :first-child {
+        margin-right: 4px;
+      }
+
+      &:not(:last-child) {
+        margin-right: 4px;
+        padding-right: 4px;
+        border-right: 1px solid white;
+      }
+    }
+  }
+}
--- a/src/pages/Main/Main.tsx
+++ b/src/pages/Main/Main.tsx
@ -1,20 +1,59 @@
+import './Main.scss';
+import { TypeAnimation } from 'react-type-animation';
 import React from "react";
-import './Main.sass';

-class Main extends React.Component {
-    render() {
-        return (
-            <div className="Main">
-                <img className="DiscordStatus" src="https://lanyard.cnrad.dev/api/259377757669031937?theme=dark&bg=222222&idleMessage=Probably%20died..." alt="" />
-
-                <img src="https://github-readme-streak-stats.herokuapp.com?user=Nix1304&theme=dark&background=222222&ring=d8858d&fire=d8858d&stroke=d8858d&currStreakLabel=d8858d&hide_border=true" alt="" className="GitHub-Row__Element"/>
-
-                <img src="https://github-readme-stats.vercel.app/api?username=Nix1304&show_icons=true&hide=&count_private=true&title_color=64748b&text_color=64748b&icon_color=d8858d&bg_color=222222&hide_border=true&show_icons=true" alt="" className="GitHub-Row__Element"/>
-
-                <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=Nix1304&langs_count=5&title_color=64748b&text_color=64748b&icon_color=d8858d&bg_color=222222&hide_border=true" alt="" className="GitHub-Row__Element"/>
+const Main = () => {
+    return (
+        <div className="Main" id='Main'>
+            <div className="Main__Center">
+                <div className="Main__Center_Name">Nix13</div>
+                <TypeAnimation
+                    sequence={[
+                        'Golang fullstack',
+                        1000,
+                        'Python fullstack',
+                        1000
+                    ]}
+                    repeat={Infinity}
+                    className={'Main__Center_SubName'}
+                />
            </div>
-        )
-    }
+
+            <div className="Main__Links">
+                <a className="Main__Links_Link" href='https://t.me/DarkShinigani' target='_blank' rel='noopener noreferrer'>
+                    <i className="fa-brands fa-telegram"/>
+                    <span>Телеграм</span>
+                </a>
+                <a className="Main__Links_Link" href='https://vk.com/scur0nek0' target='_blank' rel='noopener noreferrer'>
+                    <i className="fa-brands fa-vk"/>
+                    ВК
+                </a>
+
+                <a className="Main__Links_Link" href='https://github.com/Nix1304' target='_blank' rel='noopener noreferrer'>
+                    <i className="fa-brands fa-github"/>
+                    GitHub
+                </a>
+                <a className="Main__Links_Link" href='https://git.nix13.pw/' target='_blank' rel='noopener noreferrer'>
+                    <i className="fa-brands fa-git"/>
+                    Git
+                </a>
+                <a className="Main__Links_Link" href='https://mvn.nix13.pw/' target='_blank' rel='noopener noreferrer'>
+                    <i className="fa-brands fa-readme"></i>
+                    Maven
+                </a>
+                <a className="Main__Links_Link" href='https://files.nix13.pw/' target='_blank' rel='noopener noreferrer'>
+                    <i className="fa-light fa-files"/>
+                    Files
+                </a>
+            </div>
+
+            {/*<div className="Buttons">*/}
+            {/*    <button className="Button_Outline--Glow">Aboba</button>*/}
+            {/*    <button className="Button_Outline--Glow">Aboba</button>*/}
+            {/*    <button className="Button_Outline--Glow">Aboba</button>*/}
+            {/*</div>*/}
+        </div>
+    );
 }

 export default Main;
--- a/src/pages/Projects/Projects.sass
+++ b/src/pages/Projects/Projects.sass
@ -1,12 +0,0 @@
-.Projects
-  padding: 16px
-  width: 100%
-  height: 100%
-  box-sizing: border-box
-  
-  &__List
-    display: flex
-    margin-top: 8px
-
-    &_Column
-      width: 33%
--- a/src/pages/Projects/Projects.scss
+++ b/src/pages/Projects/Projects.scss
@ -0,0 +1,8 @@
+.Projects {
+  padding-top: var(--navbar-height);
+  width: 100%;
+
+  &__List {
+    margin-top: 8px;
+  }
+}
--- a/src/pages/Projects/Projects.tsx
+++ b/src/pages/Projects/Projects.tsx
@ -1,67 +1,50 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import ProjectCard from "../../ui/ProjectCard/ProjectCard";
-import './Projects.sass';
+import './Projects.scss';

-class Projects extends React.Component {
-  render() {
-    return (<>
-      <div className="Projects">
-        <h2>Завершенные и в разработке</h2>
+type ProjectsState = {
+    done: ProjectType[]
+    dropped: ProjectType[]
+}

-        <div className="Projects__List">
-          <div className="Projects__List_Column">
-            <ProjectCard 
-              title="@kurumi: game bot" status="release"
-              links={[{name: 'VK Group', url: 'https://vk.com/kb_gb', type: 'vk'}]}
-            >
-                Игровой бот для вашей беседы
-            </ProjectCard>
+const Projects = () => {
+    const [projects, setProjects] = useState<ProjectsState>({done: [], dropped: []});
+    const [loading, setLoading] = useState(true);

-            <ProjectCard 
-              title="@yae miko: admin bot" status="development"
-              links={[{name: 'VK Group', url: 'https://vk.com/ym_ab', type: 'vk'}, 
-                      {name: 'VK App', url: 'https://vk.com/app8227711', type: 'vk'}]}
-              stack={['python']}
-            >
-                Админ-бот для вашей беседы
-            </ProjectCard>
-          </div>
+    useEffect(() => {
+        fetch('https://baka.nix13.pw/projects')
+            .then(r => r.json())
+            .then(r => setProjects(r.projects))
+            .then(_ => setLoading(false));
+    }, []);

-          <div className="Projects__List_Column">
-            <ProjectCard 
-              title="Genshin Private Server" status="release"
-              links={[{name: 'Web', url: 'https://gi.nix13.pw', type: 'web'}]}
-              stack={['java']}
-            >
-            </ProjectCard>
-          </div>
+    if(loading) return <div>Грузится, бля...</div>
+    return (
+        <div className="Projects" id='Projects'>
+            <h2>Завершенные и в разработке</h2>
+            <div className="Projects__List">
+                {projects.done.map(project => (
+                    <ProjectCard
+                        key={project.name}
+                        title={project.name} status={project.status}
+                        links={project.links}
+                    >{project.desc}</ProjectCard>
+                ))}
+            </div>

-          <div className="Projects__List_Column">
-            <ProjectCard 
-              title="Ignis Samurai" status="release"
-              links={[{name: 'GitHub', url: 'https://github.com/Nix1304/Ignis-Samurai', type: 'github'}]}
-              stack={['python']}
-            >
-            </ProjectCard>
-          </div>
-        </div>  
-        <h2>Замороженные и брошенные</h2>
+            <h2>Замороженные и брошенные</h2>
+            <div className="Projects__List">
+                {projects.dropped.map(project => (
+                    <ProjectCard
+                        key={project.name}
+                        title={project.name} status={project.status}
+                        links={project.links}
+                    >{project.desc}</ProjectCard>
+                ))}

-        <div className="Projects__List">
-          <div className="Projects__List_Column">
-            <ProjectCard
-              title="Unmei" status="frozen"
-              links={[{name: 'GitHub', url: 'https://github.com/unmei-site', type: 'github'}]}
-              stack={['react', 'sass', 'go']}
-            >
-            </ProjectCard>
-          </div>
-          <div className="Projects__List_Column"></div>
-          <div className="Projects__List_Column"></div>
+            </div>
        </div>
-      </div>
-    </>);
-  }
+    );
 }

 export default Projects;
--- a/src/types.d.ts
+++ b/src/types.d.ts
@ -1,4 +1,5 @@
-type ProjectStatus = 'development' | 'release' | 'frozen' | 'dropped';
+// Projects types
+type ProjectStatus = 'development' | 'release' | 'freeze' | 'dropped';
 type ProjectStack = 'css' | 'html' | 'js' | 'ts' | 'sass' | 'java' | 'kotlin' | 'python' | 'go' | 'react' | 'gulp';
 type ProjectLink = 'github' | 'git' | 'vk' | 'web';

@ -6,4 +7,25 @@ type ProjectLinkType = {
  name: string
  url: string
  type: ProjectLink
+}
+type ProjectType = {
+  name: string
+  desc: string
+  stack: ProjectStack[]
+  status: ProjectStatus
+  links: ProjectLinkType[]
+}
+
+// Genshin types
+type GenshinLinkType = {
+  name: string
+  url: string
+}
+
+type GenshinDLType = {
+  name: string
+  outdated: boolean
+  beta: boolean
+  secured: boolean
+  links: GenshinLinkType[]
 }
--- a/src/ui/Loading/Loading.tsx
+++ b/src/ui/Loading/Loading.tsx
@ -0,0 +1,5 @@
+const Loading = () => (
+    <div>Грузится бля!</div>
+);
+
+export default Loading;
--- a/src/ui/ProjectBadge/ProjectStatusBadge.sass
+++ b/src/ui/ProjectBadge/ProjectStatusBadge.sass
@ -10,7 +10,7 @@
  &__Release
    background-color: #ab1bff

-  &__Frozen
+  &__Freeze
    background-color: #19b3a6

  &__Dropped
--- a/src/ui/ProjectBadge/ProjectStatusBadge.tsx
+++ b/src/ui/ProjectBadge/ProjectStatusBadge.tsx
@ -1,4 +1,3 @@
-import React from "react";
 import { capitalize } from "../../utils";
 import './ProjectStatusBadge.sass';

@ -8,7 +7,7 @@ type Props = {
 const localized = {
    development: 'В разработке',
    release: 'Готово',
-    frozen: 'Заморожено',
+    freeze: 'Заморожено',
    dropped: 'Брошено'
 }

--- a/src/ui/ProjectCard/ProjectCard.tsx
+++ b/src/ui/ProjectCard/ProjectCard.tsx
@ -6,7 +6,7 @@ import './ProjectCard.sass';

 type Props = {
    title: string
-    status?: 'development' | 'release' | 'frozen' | 'dropped'
+    status?: 'development' | 'release' | 'freeze' | 'dropped'
    links?: ProjectLinkType[]
    stack?: ProjectStack[]
    children?: React.ReactNode
--- a/yarn.lock
+++ b/yarn.lock