feat: add projects

scffs · Dec 15, 2023 · 436dda6 · 436dda6
1 parent a2db0d1
commit 436dda6
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 15 deletions.
diff --git a/src/assets/admin.jpg b/src/assets/admin.jpg
diff --git a/src/assets/db.png b/src/assets/db.png
diff --git a/src/assets/diary.png b/src/assets/diary.png
diff --git a/src/assets/gatto.jpg b/src/assets/gatto.jpg
diff --git a/src/assets/wpf.png b/src/assets/wpf.png
diff --git a/src/components/ProfileInfo/UserStory.tsx b/src/components/ProfileInfo/UserStory.tsx
@@ -42,9 +42,11 @@ const UserStory = () => (
           <Accordion.Summary iconPosition='before'>
             {item.title}
           </Accordion.Summary>
-          <Div>
-            <Paragraph style={{ lineHeight: 1.7 }}>{item.content}</Paragraph>
-          </Div>
+          <Accordion.Content>
+            <Div>
+              <Paragraph style={{ lineHeight: 1.7 }}>{item.content}</Paragraph>
+            </Div>
+          </Accordion.Content>
         </Accordion>
       ))}
     </Div>

diff --git a/src/views/Projects.tsx b/src/views/Projects.tsx
@@ -1,18 +1,23 @@
-import { Icon28ServicesOutline } from '@vkontakte/icons'
+import {Icon28ServicesOutline} from '@vkontakte/icons'
 import {
   useActiveVkuiLocation,
   useRouteNavigator
 } from '@vkontakte/vk-mini-apps-router'
-import { Group, Link, Panel, Placeholder, View } from '@vkontakte/vkui'
-import { FC } from 'react'
+import {CardGrid, ContentCard, Footer, Group, Link, Panel, Placeholder, View} from '@vkontakte/vkui'
+import {FC} from 'react'
 
 import PanelHeaderWithBack from '../components/PanelHeaderWithBack'
-import { GITHUB_URL } from '../constants'
+import gatto from '../assets/gatto.jpg'
+import diary from '../assets/diary.png'
+import admin from '../assets/admin.jpg'
+import wpf from '../assets/wpf.png'
+import db from '../assets/db.png'
+import {GITHUB_URL} from "../constants";
 
-const Projects: FC<{ id: string }> = ({ id }) => {
-  const { panel: activePanel, panelsHistory } = useActiveVkuiLocation()
+const Projects: FC<{ id: string }> = ({id}) => {
+  const {panel: activePanel, panelsHistory} = useActiveVkuiLocation()
   const routeNavigator = useRouteNavigator()
-
+  
   return (
     <View
       id={id}
@@ -21,15 +26,57 @@ const Projects: FC<{ id: string }> = ({ id }) => {
       onSwipeBack={() => routeNavigator.back()}
     >
       <Panel nav={id}>
-        <PanelHeaderWithBack title='Проекты' />
+        <PanelHeaderWithBack title='Проекты'/>
         <Group>
-          <Placeholder icon={<Icon28ServicesOutline width={56} height={56} />}>
-            Страница ещё не готова, но проекты есть на{' '}
+          <CardGrid size="l">
+            <ContentCard
+              onClick={() => window.open('https://vk.com/gatto_game', '_blank')}
+              src={gatto}
+              alt="preview"
+              subtitle="React, TypeScript etc..."
+              header="Gatto"
+              caption="Gatto - это большая, яркая и увлекательная игра. По типу напоминает 'тамагочи' - есть прокачка персонажей, различные локации и элементы скрещивания."
+            />
+            <ContentCard
+              onClick={() => window.open('https://vk.com/diary_spo', '_blank')}
+              src={diary}
+              alt="preview"
+              subtitle="Preact, TypeScript, VKUI etc..."
+              header="Дневник СПО"
+              caption="Обёртка над дневником Сетевого города для СПО (API совпадает с Томской областью). В сервисе студенты могут полностью следить за своей успеваемостью и расписанием."
+            />
+            <ContentCard
+              onClick={() => window.open('https://github.com/Diary-SPO/diary-admin', '_blank')}
+              src={admin}
+              alt="preview"
+              subtitle="Preact, TypeScript, VKUI, Docker, ElysiaJS etc..."
+              header="Дневник Admin"
+              caption="Попытка сделать собственный дневник, а именно часть администратора: создание групп, расписаний, выставление оценок и тд."
+            />
+            <ContentCard
+              onClick={() => window.open('https://github.com/scffs/FakeDB', '_blank')}
+              src={db}
+              alt="preview"
+              subtitle="C#"
+              header="Fake DB"
+              caption="Консольное приложение для управления пользователями с использованием фейковой базы данных."
+            />
+            <ContentCard
+              onClick={() => window.open('https://github.com/scffs/WPF-Quiz', '_blank')}
+              src={wpf}
+              alt="preview"
+              subtitle="C#, WPF"
+              header="WPF Quiz"
+              caption="Игроку предлагается лист, на котором написан текст. В тексте некоторые слова заменены пиктограммами. Пиктограммы в тексте заменены в случайном порядке."
+            />
+          </CardGrid>
+        </Group>
+        <Footer>
+            Другие проекты есть на{' '}
             <Link href={GITHUB_URL} target='_blank'>
               GitHub
             </Link>
-          </Placeholder>
-        </Group>
+        </Footer>
       </Panel>
     </View>
   )