wip

README.md

@@ -9,3 +9,5 @@ git clone https://github.com/scffs/portfolio
 ```
 For installing all dependencies type `yarn`
 > If you get some error delete `.node_modules` and try again **or** create an issue about that
+
+#### P.S. there are a lot of type errors because react types and preact types are not always compatible

src/AppWrapper/App/index.tsx

@@ -12,11 +12,12 @@ import {
   useAdaptivityConditionalRender,
   usePlatform
 } from '@vkontakte/vkui'
-import { Suspense, lazy, useCallback, useEffect, useState } from 'react'
-import Sidebar from '../../components/Sidebar'
+import { useCallback, useEffect, useState } from 'react'
+import Suspense from '../../components/Suspense.tsx'
 import { VIEW_PROFILE } from '../../routes'
 import { Pages } from '../../types'
 import Epic from './Epic.tsx'
+import Sidebar from './Sidebar.tsx'
 
 const App = () => {
   const platform = usePlatform()

src/assets/technologies.ts

@@ -1,11 +1,18 @@
+import ava from './avaSmall.jpg'
 import bun from './bun.png'
 import charp from './charp.png'
 import docker from './docker.png'
 import elysia from './elysia.svg'
 import fastify from './fastify.png'
+import github from './github.svg'
 import go from './go.png'
+import habr from './habr.svg'
 import js from './js.png'
+import avaKot from './kot.png'
 import kuber from './kuber.png'
+import leetcode from './leetcode.svg'
+import avaVKT from './logovkt.webp'
+import mdn from './mdn.svg'
 import mongodb from './mongodb.svg'
 import mysql from './mysql.svg'
 import nest from './nest.png'
@@ -25,6 +32,11 @@ import vue from './vue.svg'
 import zustand from './zustand.png'
 
 export {
+  mdn,
+  habr,
+  avaVKT,
+  avaKot,
+  ava,
   bun,
   charp,
   docker,
@@ -46,7 +58,9 @@ export {
   styled,
   ts,
   vite,
+  leetcode,
   vk,
+  github,
   vue,
   elysia,
   zustand

src/components/ProfileInfo/UserInfo.tsx → src/views/Profile/ProfileInfo/UserInfo.tsx

@@ -12,9 +12,8 @@ import {
 
 import { gradientBorder, infoStyle, styles } from './styles'
 
-import ava from '../../assets/avaSmall.jpg'
-
-import { VK_URL } from '../../constants'
+import { ava } from '../../../assets/technologies.ts'
+import { VK_URL } from '../../../constants'
 import { userInfoItems } from './data.tsx'
 
 const UserInfo = () => (

src/components/ProfileInfo/UserStory.tsx → src/views/Profile/ProfileInfo/UserStory.tsx

@@ -1,8 +1,6 @@
 import { Accordion, Div, Gradient, Paragraph, Spacing } from '@vkontakte/vkui'
-
-import { gradientBorder } from './styles'
-
-import { userStoryContent } from './data'
+import { userStoryContent } from './data.tsx'
+import { gradientBorder } from './styles.ts'
 
 const UserStory = () => (
   <Gradient style={gradientBorder}>

src/components/ProfileInfo/data.tsx → src/views/Profile/ProfileInfo/data.tsx

@@ -4,6 +4,18 @@ import {
   Icon28ServicesOutline
 } from '@vkontakte/icons'
 import { Avatar, Div, Link, Spacing } from '@vkontakte/vkui'
+import {
+  avaKot,
+  avaVKT,
+  github,
+  habr,
+  leetcode,
+  mdn,
+  python,
+  react,
+  vk
+} from '../../../assets/technologies.ts'
+import Flex from '../../../components/Flex.tsx'
 import {
   GITHUB_URL,
   HABR_URL,
@@ -15,22 +27,9 @@ import {
   TEPT_URL,
   VKT_URL,
   VKUI_URL
-} from '../../constants'
-import Flex from '../Flex'
-
-import LinkWithImage from '../LinkWithImage'
-
-import github from '../../assets/github.svg'
-import habr from '../../assets/habr.svg'
-import avaKot from '../../assets/kot.png'
-import leetcode from '../../assets/leetcode.svg'
-import avaVKT from '../../assets/logovkt.webp'
-import mdn from '../../assets/mdn.svg'
-import python from '../../assets/python.png'
-import react from '../../assets/react.svg'
-import vkui from '../../assets/vk.svg'
-
-import { VIEW_PROJECTS, VIEW_STACK } from '../../routes'
+} from '../../../constants'
+import { VIEW_PROJECTS, VIEW_STACK } from '../../../routes'
+import LinkWithImage from "./LinkWithImage.tsx";
 
 export const userInfoItems = [
   {
@@ -152,7 +151,7 @@ export const userStoryContent = [
         прошлом был модератором и участником крупнейшей веб-документации{' '}
         <LinkWithImage linkText='MDN' href={MDN_URL} icon={mdn} /> и других
         крупных OpenSource проектов, например,
-        <LinkWithImage linkText='VKUI' href={VKUI_URL} icon={vkui} /> и
+        <LinkWithImage linkText='VKUI' href={VKUI_URL} icon={vk} /> и
         {/* Логотип реакта не квадратный, поэтому для полного отображения изменяю ширину */}
         <LinkWithImage
           linkText='React'

src/views/Profile.tsx → src/views/Profile/index.tsx

@@ -14,11 +14,10 @@ import {
   View
 } from '@vkontakte/vkui'
 import { FC } from 'react'
-
-import PanelHeaderWithBack from '../components/PanelHeaderWithBack'
-import { UserInfo, UserStory } from '../components/ProfileInfo'
-import Suspense from '../components/Suspense'
-import { VKT_URL } from '../constants'
+import PanelHeaderWithBack from '../../components/PanelHeaderWithBack'
+import Suspense from '../../components/Suspense.tsx'
+import { VKT_URL } from '../../constants'
+import { UserInfo, UserStory } from './ProfileInfo'
 
 const Profile: FC<{ id: string }> = ({ id }) => {
   const { panel: activePanel, panelsHistory } = useActiveVkuiLocation()

src/views/Settings.tsx → src/views/Settings/index.tsx

@@ -13,9 +13,8 @@ import {
   View
 } from '@vkontakte/vkui'
 import { FC, useEffect, useState } from 'react'
-
-import PanelHeaderWithBack from '../components/PanelHeaderWithBack'
-import ToggleTheme from '../components/ToggleTheme'
+import PanelHeaderWithBack from "../../components/PanelHeaderWithBack";
+import ToggleTheme from "./ToggleTheme.tsx";
 
 const formatKeyText = (key: string) => {
   if (key.startsWith('orientation')) {