initial commit

src/components/App/App.scss

@@ -0,0 +1,46 @@
+@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');
+
+* {
+  margin: 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%;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  color: white;
+}
+
+.App {
+  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
+}
+
+a {
+  color: white;
+  text-decoration: none;
+
+  &:hover {
+    color: #ddd;
+  }
+}

src/components/App/App.tsx

@@ -0,0 +1,21 @@
+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";
+
+const App: FC = () => (
+    <div className="App">
+        <Navbar/>
+
+        <div className="Content">
+            <Routes>
+                <Route path="/" element={<Main/>}/>
+                <Route path="/projects" element={<Projects/>}/>
+            </Routes>
+        </div>
+    </div>
+);
+
+export default App;

src/components/Navbar/Navbar.tsx

@@ -0,0 +1,11 @@
+import {Link} from "react-router-dom";
+import './Navbas.scss';
+
+const Navbar = () => (
+    <div className="Navbar">
+        <Link to='/'>Main</Link>
+        <Link to='/projects'>Projects</Link>
+    </div>
+);
+
+export default Navbar;

src/components/Navbar/Navbas.scss

@@ -0,0 +1,6 @@
+.Navbar {
+  //height: var(--navbar-height)
+  height: 32px;
+  width: 100%;
+  background-color: #222;
+}

src/components/Sidebar/Sidebar.sass

@@ -0,0 +1,47 @@
+.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
+      

src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,59 @@
+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;

src/index.tsx

@@ -0,0 +1,11 @@
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from "react-router-dom";
+import App from './components/App/App';
+
+
+const container = document.getElementById('root') as HTMLElement;
+createRoot(container).render(
+    <BrowserRouter>
+        <App/>
+    </BrowserRouter>
+);

src/pages/Main/Main.sass

@@ -0,0 +1,22 @@
+.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
+

src/pages/Main/Main.tsx

@@ -0,0 +1,20 @@
+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"/>
+            </div>
+        )
+    }
+}
+
+export default Main;

src/pages/Projects/Projects.sass

@@ -0,0 +1,12 @@
+.Projects
+  padding: 16px
+  width: 100%
+  height: 100%
+  box-sizing: border-box
+  
+  &__List
+    display: flex
+    margin-top: 8px
+
+    &_Column
+      width: 33%

src/pages/Projects/Projects.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import ProjectCard from "../../ui/ProjectCard/ProjectCard";
+import './Projects.sass';
+
+class Projects extends React.Component {
+  render() {
+    return (<>
+      <div className="Projects">
+        <h2>Завершенные и в разработке</h2>
+
+        <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>
+
+            <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>
+
+          <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>
+
+          <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>
+
+        <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>
+    </>);
+  }
+}
+
+export default Projects;

src/types.d.ts

@@ -0,0 +1,9 @@
+type ProjectStatus = 'development' | 'release' | 'frozen' | 'dropped';
+type ProjectStack = 'css' | 'html' | 'js' | 'ts' | 'sass' | 'java' | 'kotlin' | 'python' | 'go' | 'react' | 'gulp';
+type ProjectLink = 'github' | 'git' | 'vk' | 'web';
+
+type ProjectLinkType = {
+  name: string
+  url: string
+  type: ProjectLink
+}

src/ui/ProjectBadge/ProjectLinkBadge.sass

@@ -0,0 +1,3 @@
+.ProjectLinkBadge
+  &:not(:last-child)
+    margin-right: 8px

src/ui/ProjectBadge/ProjectLinkBadge.tsx

@@ -0,0 +1,34 @@
+import './ProjectLinkBadge.sass';
+
+type Props = {
+  linkImage: ProjectLink
+  linkText?: string
+};
+
+const color = 'd8858d';
+
+const linkImages = {
+  github: `https://img.shields.io/badge/-{0}-222?style=for-the-badge&logo=github&logoColor=ffffff&color=${color}&labelColor=222`,
+  git: `https://img.shields.io/badge/-{0}-222?style=for-the-badge&logo=gitea&logoColor=609926&color=${color}&labelColor=222`,
+
+  vk: `https://img.shields.io/badge/-{0}-222?style=for-the-badge&logo=VK&logoColor=0077ff&color=${color}&labelColor=222`,
+
+  web: `https://img.shields.io/badge/-{0}-222?style=for-the-badge&logo=addthis&logoColor=e34f26&color=${color}&labelColor=222`,
+};
+const defaultLinksText = {
+  github: 'GitHub',
+  git: 'Git',
+  vk: 'VK',
+  web: 'Web'
+}
+
+const ProjectLinkBadge = ({ linkImage, linkText }: Props) => {
+  let formattedString = linkImages[linkImage];
+  formattedString = formattedString.replaceAll('{0}', linkText ?? defaultLinksText[linkImage]);
+
+  return (
+    <img src={formattedString} alt={linkText} className='ProjectLinkBadge'/>
+  );
+};
+
+export default ProjectLinkBadge;

src/ui/ProjectBadge/ProjectStackBadge.sass

@@ -0,0 +1,3 @@
+.ProjectStackBadge
+  &:not(:last-child)
+    margin-right: 8px

src/ui/ProjectBadge/ProjectStackBadge.tsx

@@ -0,0 +1,29 @@
+import './ProjectStackBadge.sass';
+
+type Props = {
+  stack: ProjectStack
+};
+
+const color = 'd8858d';
+
+const stackImage = {
+  css: `https://img.shields.io/badge/-CSS3-222?style=for-the-badge&logo=CSS3&logoColor=1572b6&color=${color}&labelColor=222`,
+  html: `https://img.shields.io/badge/-HTML5-222?style=for-the-badge&logo=HTML5&logoColor=e34f26&color=${color}&labelColor=222`,
+  js: `https://img.shields.io/badge/-JavaScript-222?style=for-the-badge&logo=CSS3&logoColor=f7df1e&color=${color}&labelColor=222`,
+  ts: `https://img.shields.io/badge/-TypeScript-222?style=for-the-badge&logo=CSS3&logoColor=3178C6&color=${color}&labelColor=222`,
+  sass: `https://img.shields.io/badge/-SASS-222?style=for-the-badge&logo=sass&logoColor=CC6699&color=${color}&labelColor=222`,
+
+  java: `https://img.shields.io/badge/-Java-222?style=for-the-badge&logo=Java&logoColor=fff007396&color=${color}&labelColor=222`,
+  kotlin: `https://img.shields.io/badge/-Kotlin-222?style=for-the-badge&logo=kotlin&logoColor=7f52ff&color=${color}&labelColor=222`,
+  python: `https://img.shields.io/badge/-Python-222?style=for-the-badge&logo=python&logoColor=3776ab&color=${color}&labelColor=222`,
+  go: `https://img.shields.io/badge/-GoLang-222?style=for-the-badge&logo=go&logoColor=00ADD8&color=${color}&labelColor=222`,
+
+  react: `https://img.shields.io/badge/-React-222?style=for-the-badge&logo=react&logoColor=61DAFB&color=${color}&labelColor=222`,
+  gulp: `https://img.shields.io/badge/-Gulp-222?style=for-the-badge&logo=gulp&logoColor=CF4647&color=${color}&labelColor=222`
+};
+
+const ProjectStackBadge = ({ stack }: Props) => (
+  <img src={stackImage[stack]} alt={stack} className='ProjectStackBadge'/>
+);
+
+export default ProjectStackBadge;

src/ui/ProjectBadge/ProjectStatusBadge.sass

@@ -0,0 +1,17 @@
+.ProjectStatus
+  font-size: 16px
+  font-weight: 300
+  height: fit-content
+  padding: 2px 6px
+
+  &__Development
+    background-color: #ff9c1b
+
+  &__Release
+    background-color: #ab1bff
+
+  &__Frozen
+    background-color: #19b3a6
+
+  &__Dropped
+    background-color: #ff1b1b

src/ui/ProjectBadge/ProjectStatusBadge.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { capitalize } from "../../utils";
+import './ProjectStatusBadge.sass';
+
+type Props = {
+    status: ProjectStatus
+}
+const localized = {
+    development: 'В разработке',
+    release: 'Готово',
+    frozen: 'Заморожено',
+    dropped: 'Брошено'
+}
+
+const ProjectStatusBadge = ({ status }: Props) => {
+  return (
+    <div className={`ProjectStatus ProjectStatus__${capitalize(status)}`}>
+        {localized[status]}
+    </div>
+  );
+}
+
+export default ProjectStatusBadge;

src/ui/ProjectCard/ProjectCard.sass

@@ -0,0 +1,23 @@
+.ProjectCard
+  background-color: #333
+  padding: 8px
+  margin: 0 8px 8px 0
+  box-sizing: border-box
+  border: 2px solid var(--accent-color)
+
+  &__Title
+    display: flex
+    justify-content: space-between
+    margin-bottom: 4px
+
+  &__Content, &__Links, &__Stack
+    border-top: 1px solid #d8858d
+    padding-top: 4px
+    
+  &__Content, &__Stack
+    margin-bottom: 4px
+
+  &__Links
+    font-weight: 500
+    &_Link:not(:first-child)
+      margin-left: 4px

src/ui/ProjectCard/ProjectCard.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import ProjectLinkBadge from "../ProjectBadge/ProjectLinkBadge";
+import ProjectStackBadge from "../ProjectBadge/ProjectStackBadge";
+import ProjectStatusBadge from "../ProjectBadge/ProjectStatusBadge";
+import './ProjectCard.sass';
+
+type Props = {
+    title: string
+    status?: 'development' | 'release' | 'frozen' | 'dropped'
+    links?: ProjectLinkType[]
+    stack?: ProjectStack[]
+    children?: React.ReactNode
+}
+
+class ProjectCard extends React.Component<Props> {
+  render() {
+    const { title, status, links, stack, children } = this.props;
+
+    return (
+      <div className="ProjectCard">
+        <h2 className="ProjectCard__Title">
+          {title}
+
+          {status && <ProjectStatusBadge status={status}/>}
+        </h2>
+
+        {children && <div className="ProjectCard__Content">
+          {children}
+        </div>}
+
+        {stack && stack.length > 0 && (
+            <div className="ProjectCard__Stack">
+              {stack.map(s => (
+                <ProjectStackBadge stack={s} key={s}/>
+              ))}
+            </div>
+        )}
+
+        {links && links.length > 0 && <div className="ProjectCard__Links">
+          {links.map(link => (
+            <a className="ProjectCard__Links_Link" href={link.url} target='_blank' rel='noreferrer' key={link.name} title={link.name}>
+              <ProjectLinkBadge linkImage={link.type} linkText={link.name}/>
+            </a>
+          ))}
+        </div>}
+      </div>
+    );
+  }
+}
+
+export default ProjectCard;

src/utils.ts

@@ -0,0 +1,5 @@
+const capitalize = (s: string) => {
+    return s.charAt(0).toUpperCase() + s.slice(1)
+};
+
+export { capitalize };