initial commit
This commit is contained in:
commit
381be36b6c
|
|
@ -0,0 +1,221 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
.cache
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
!.vscode/*.code-snippets
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
|
||||
# Built Visual Studio Code Extensions
|
||||
*.vsix
|
||||
|
||||
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
|
||||
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
|
||||
|
||||
# User-specific stuff
|
||||
.idea/**/workspace.xml
|
||||
.idea/**/tasks.xml
|
||||
.idea/**/usage.statistics.xml
|
||||
.idea/**/dictionaries
|
||||
.idea/**/shelf
|
||||
|
||||
# AWS User-specific
|
||||
.idea/**/aws.xml
|
||||
|
||||
# Generated files
|
||||
.idea/**/contentModel.xml
|
||||
|
||||
# Sensitive or high-churn files
|
||||
.idea/**/dataSources/
|
||||
.idea/**/dataSources.ids
|
||||
.idea/**/dataSources.local.xml
|
||||
.idea/**/sqlDataSources.xml
|
||||
.idea/**/dynamic.xml
|
||||
.idea/**/uiDesigner.xml
|
||||
.idea/**/dbnavigator.xml
|
||||
|
||||
# Gradle
|
||||
.idea/**/gradle.xml
|
||||
.idea/**/libraries
|
||||
|
||||
# Gradle and Maven with auto-import
|
||||
# When using Gradle or Maven with auto-import, you should exclude module files,
|
||||
# since they will be recreated, and may cause churn. Uncomment if using
|
||||
# auto-import.
|
||||
.idea/artifacts
|
||||
.idea/compiler.xml
|
||||
.idea/jarRepositories.xml
|
||||
.idea/modules.xml
|
||||
.idea/*.iml
|
||||
.idea/modules
|
||||
*.iml
|
||||
*.ipr
|
||||
|
||||
# CMake
|
||||
cmake-build-*/
|
||||
|
||||
# Mongo Explorer plugin
|
||||
.idea/**/mongoSettings.xml
|
||||
|
||||
# File-based project format
|
||||
*.iws
|
||||
|
||||
# IntelliJ
|
||||
out/
|
||||
|
||||
# mpeltonen/sbt-idea plugin
|
||||
.idea_modules/
|
||||
|
||||
# JIRA plugin
|
||||
atlassian-ide-plugin.xml
|
||||
|
||||
# Cursive Clojure plugin
|
||||
.idea/replstate.xml
|
||||
|
||||
# SonarLint plugin
|
||||
.idea/sonarlint/
|
||||
|
||||
# Crashlytics plugin (for Android Studio and IntelliJ)
|
||||
com_crashlytics_export_strings.xml
|
||||
crashlytics.properties
|
||||
crashlytics-build.properties
|
||||
fabric.properties
|
||||
|
||||
# Editor-based Rest Client
|
||||
.idea/httpRequests
|
||||
|
||||
# Android studio 3.1+ serialized cache file
|
||||
.idea/caches/build_file_checksums.ser
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="DiscordProjectSettings">
|
||||
<option name="show" value="PROJECT_FILES" />
|
||||
<option name="description" value="" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
||||
</profile>
|
||||
</component>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectTasksOptions" suppressed-tasks="Sass;SCSS" />
|
||||
</project>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"name": "nix13.pw",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-router-dom": "6.10.0",
|
||||
"typescript": "5.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "18.0.34",
|
||||
"@types/react-dom": "18.0.11",
|
||||
"@types/react-router-dom": "5.3.3",
|
||||
"react-scripts": "5.0.1",
|
||||
"sass": "1.61.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version"
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-title" content="Nix13">
|
||||
<link rel="apple-touch-icon" href="./favicon.png">
|
||||
|
||||
<meta name="application-name" content="Nix13">
|
||||
<meta name="theme-color" content="#ff00ff">
|
||||
|
||||
<link sizes="512x512" href="./favicon.png">
|
||||
<link rel="manifest" href="./manifest.webmanifest">
|
||||
|
||||
<!-- FontAwesome -->
|
||||
<link rel="stylesheet" href="https://storage.nix13.pw/fa/css/fontawesome.min.css">
|
||||
<link rel="stylesheet" href="https://storage.nix13.pw/fa/css/light.min.css">
|
||||
<link rel="stylesheet" href="https://storage.nix13.pw/fa/css/brands.min.css">
|
||||
<title>Nix13</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
Site can't work without JavaScript!<br>
|
||||
Сайт не может работать без JavaScript!
|
||||
</noscript>
|
||||
|
||||
<main id="root"></main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"short_name": "Nix13",
|
||||
"name": "Nix13",
|
||||
"icons": [{
|
||||
"src": "favicon.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}],
|
||||
"display": "fullscreen",
|
||||
"start_url": "/"
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
.Navbar {
|
||||
//height: var(--navbar-height)
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
background-color: #222;
|
||||
}
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
.Projects
|
||||
padding: 16px
|
||||
width: 100%
|
||||
height: 100%
|
||||
box-sizing: border-box
|
||||
|
||||
&__List
|
||||
display: flex
|
||||
margin-top: 8px
|
||||
|
||||
&_Column
|
||||
width: 33%
|
||||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.ProjectLinkBadge
|
||||
&:not(:last-child)
|
||||
margin-right: 8px
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.ProjectStackBadge
|
||||
&:not(:last-child)
|
||||
margin-right: 8px
|
||||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
const capitalize = (s: string) => {
|
||||
return s.charAt(0).toUpperCase() + s.slice(1)
|
||||
};
|
||||
|
||||
export { capitalize };
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"module": "esnext",
|
||||
"allowJs": false,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"skipLibCheck": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
Reference in New Issue