Layout fixes & publication section

src/components/layout/Layout.tsx

@@ -1,23 +1,23 @@
-import React from 'react';
-import { Box, Center, HStack, Link, Text, VStack } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import { Box, Center, HStack, Icon, Link, Spacer, VStack } from '@chakra-ui/react';
+import { FiExternalLink } from 'react-icons/fi';
 import NavLink from './NavLink';
 
-const Layout = (props: { children: React.ReactNode }) => (
-  <Center height="100%" width="100%" padding="0.5em" boxSizing="border-box">
+const Layout = (props: { children: ReactNode }) => (
+  <Center height="100%" width="100%" paddingX="3" boxSizing="border-box">
     <VStack height="100%" align="stretch" width="container.lg">
-      <HStack>
+      <HStack paddingTop="1">
         <NavLink to="/">home</NavLink>
         <NavLink to="/cv">cv</NavLink>
+        <Spacer />
+        <Link href={`https://github.com/${import.meta.env.VITE_GITHUB_REPO}`} isExternal>
+          source code
+          <Icon as={FiExternalLink} marginX={2} />
+        </Link>
       </HStack>
       <Box flexGrow="1" as="section">
         {props.children}
       </Box>
-      <Text textAlign="center">
-        Source code of this website is available at{' '}
-        <Link href={`https://github.com/${import.meta.env.VITE_GITHUB_REPO}`} isExternal>
-          GitHub
-        </Link>
-      </Text>
     </VStack>
   </Center>
 );

src/i18n.ts

@@ -8,6 +8,7 @@ import soft_skills from './pages/cv/data/soft_skills';
 import summary from './pages/cv/data/summary';
 import info from './pages/cv/data/info';
 import tech_skills from './pages/cv/data/tech_skills';
+import publications from './pages/cv/data/publications';
 
 i18n.use(initReactI18next).init({
   resources: {
@@ -36,6 +37,11 @@ i18n.use(initReactI18next).init({
             content: projects.en,
           },
 
+          publications: {
+            title: 'Publications',
+            content: publications.en,
+          },
+
           tech_skills: {
             title: 'Technical skills',
             languages: 'Programming languages',
@@ -98,6 +104,11 @@ i18n.use(initReactI18next).init({
             content: education.ru,
           },
 
+          publications: {
+            title: 'Публикации',
+            content: publications.ru,
+          },
+
           languages: {
             title: 'Языки',
             content: languages.ru,

src/pages/Home.tsx

@@ -1,5 +1,4 @@
-import { Link as RouteLink } from 'react-router-dom';
-import { Text, Heading, Link, Box } from '@chakra-ui/react';
+import { Text, Heading, Link, Box, ListItem, UnorderedList } from '@chakra-ui/react';
 import Layout from '../components/layout/Layout';
 
 const Home = () => (
@@ -12,8 +11,8 @@ const Home = () => (
         </Text>{' '}
         here.
       </Text>
-      <Heading size="lg" marginY="0.5em">
-        Who?
+      <Heading size="md" marginY="0.5em">
+        About me
       </Heading>
       <Text>
         <Text as="span" fontFamily="mono">
@@ -24,19 +23,38 @@ const Home = () => (
       <Text>
         My real name is <b>Vladislav Safonov</b>, I am a software developer. In 2023, I finished my
         bachelor&#39;s degree at{' '}
-        <Link href="https://innopolis.university/">Innopolis University</Link>.
+        <Link href="https://innopolis.university/" isExternal>
+          Innopolis University
+        </Link>
+        .
       </Text>
-      <Heading size="lg" marginY="0.5em">
-        So?
-      </Heading>
       <Text>
-        Originally this site is meant to hold my{' '}
-        <Link as={RouteLink} to="/cv">
-          CV
-        </Link>{' '}
-        written in React.
+        By the way, I made my thesis publicly available at{' '}
+        <Link href="https://dx.doi.org/10.13140/RG.2.2.24800.25609" isExternal>
+          ResearchGate
+        </Link>
+        .
       </Text>
-      <Text>Probably, I will add more stuff here later, we&#39;ll see.</Text>
+      <Heading size="md" marginY="0.5em">
+        Links
+      </Heading>
+      <UnorderedList>
+        <ListItem>
+          <Link href="https://t.me/ntdesmond" isExternal>
+            telegram
+          </Link>
+        </ListItem>
+        <ListItem>
+          <Link href="https://t.me/the_moon_bear" isExternal>
+            telegram channel (ru)
+          </Link>
+        </ListItem>
+        <ListItem>
+          <Link href="https://github.com/ntdesmond" isExternal>
+            github profile
+          </Link>
+        </ListItem>
+      </UnorderedList>
     </Box>
   </Layout>
 );

src/pages/cv/CVDocument.tsx

@@ -32,6 +32,7 @@ import type { LanguageProficiency } from './data/languages';
 import type { WorkEntryId, WorkExperience } from './data/work';
 import type { Education, EducationId } from './data/education';
 import type { ProgrammingLanguageId, TechSkillId } from './data/tech_skills';
+import { Publication, PublicationId } from './data/publications';
 
 const CVDocument = () => {
   const [allTags, setTags] = useState<Set<string>>(new Set(['Frontend', 'Backend']));
@@ -58,7 +59,7 @@ const CVDocument = () => {
   const tagsContextValue = useMemo(() => ({ tags: allTags, pushTag }), [pushTag, allTags]);
 
   return (
-    <Grid rowGap="1em" columnGap="3em" margin={isPrintMode ? '0' : '2em'}>
+    <Grid rowGap="1em" columnGap="3em" margin={isPrintMode ? 0 : { base: 0, md: 4 }}>
       <TagsContext.Provider value={tagsContextValue}>
         <GridItem sx={{ '@media print': { gridColumn: 'span 2' } }} colSpan={{ base: 1, md: 2 }}>
           <Stack
@@ -67,7 +68,11 @@ const CVDocument = () => {
             align="center"
             spacing="0"
           >
-            <Box margin="0">
+            <Box
+              margin="0"
+              sx={{ '@media print': { textAlign: 'left' } }}
+              textAlign={{ base: 'center', md: 'left' }}
+            >
               <Heading as="h1" size="xl" fontFamily="cv_name" whiteSpace="nowrap">
                 {t('info.cv_name')}
               </Heading>
@@ -159,7 +164,7 @@ const CVDocument = () => {
               ).map(([id, project]) => (
                 <HStack key={id} justify="space-between" align="center">
                   <Box>
-                    <Heading size="md">
+                    <Heading size="sm">
                       <Link href={project.url} isExternal>
                         {project.name}
                       </Link>
@@ -174,6 +179,28 @@ const CVDocument = () => {
               ))}
             </VStack>
           </Section>
+          <Section title={t('sections.publications.title')}>
+            <VStack align="stretch" spacing="1em">
+              {Object.entries(
+                t('sections.publications.content', { returnObjects: true }) as Record<
+                  PublicationId,
+                  Publication
+                >,
+              ).map(([id, publication]) => (
+                <HStack key={id} justify="space-between" align="center">
+                  <Box>
+                    <Heading size="sm">
+                      <Link href={publication.url} isExternal>
+                        {publication.name}
+                      </Link>
+                    </Heading>
+                    <Text>{publication.type}</Text>
+                    <Text>{publication.date}</Text>
+                  </Box>
+                </HStack>
+              ))}
+            </VStack>
+          </Section>
         </Box>
         <Box lineHeight="2em">
           <Section title={t('sections.tech_skills.title')}>

src/pages/cv/components/tags/Tag.tsx

@@ -44,6 +44,7 @@ const Tag = ({
           fontWeight={isSelected ? 'bold' : 'normal'}
           color={isSelected ? 'blue.800' : undefined}
           textDecoration="underline dotted 1px"
+          textAlign="center"
           as={RouteLink}
           to={target}
         >

src/pages/cv/data/education.ts

@@ -14,7 +14,7 @@ const education = merge({
     iu: {
       specialty: 'Computer science, Bachelor',
       organization: 'Innopolis University',
-      period: '2021 — 2023',
+      period: '2019 — 2023',
     },
   },
   ru: {

src/pages/cv/data/publications.ts

@@ -0,0 +1,31 @@
+import merge from './merge';
+
+export interface Publication {
+  name: string;
+  type: string;
+  date: string;
+  url: string;
+}
+
+const publication_ids = ['kiosk'] as const;
+export type PublicationId = (typeof publication_ids)[number];
+
+const publications = merge({
+  en: {
+    kiosk: {
+      name: 'Development of software for an interactive information kiosk',
+      url: 'https://dx.doi.org/10.13140/RG.2.2.24800.25609',
+      type: "Bachelor's Thesis",
+      date: 'July 2023',
+    },
+  },
+  ru: {
+    kiosk: {
+      name: 'Разработка программного обеспечения для информационного киоска',
+      type: 'Бакалаврская работа',
+      date: 'Июль 2023',
+    },
+  },
+});
+
+export default publications;

src/pages/cv/data/tech_skills.ts

@@ -9,8 +9,8 @@ export type TechSkillId = (typeof tech_skill_ids)[number];
 const tech_skills = merge({
   en: {
     languages: {
-      python: 'Python: <Tag name="FastAPI" />, pandas, numpy',
       js: 'JS: TypeScript, <Tag name="React" />, <Tag name="Electron" />, Vite',
+      python: 'Python: <Tag name="FastAPI" />, pandas, numpy',
       csharp: 'C#: WPF, WinForms',
     },
     other: {