Getcraft is part of the list

apps/website/src/app/(home)/components/Experience/index.tsx

@@ -3,7 +3,6 @@
 import Position from '@/types/Position'
 
 import ExperiencePosition from '@/components/ExperiencePosition'
-import TargetBlankLink from '@/components/TargetBlankLink'
 
 import positions from '@/app/positions/db'
 
@@ -29,15 +28,6 @@ const Contractor = () => {
       <section>Remote B2B Contractor (2018 - present)</section>
       <ul className={listStyle}>
         <Roles />
-        <li>
-          Software Architect,{' '}
-          <TargetBlankLink
-            text="Getcraft.com"
-            title="Software Architect at getcraft.com"
-            href="https://www.getcraft.com"
-          />
-          : July, 2019 - June, 2020; (Team size: 20+)
-        </li>
       </ul>
     </div>
   )

apps/website/src/app/positions/db.ts

@@ -5,12 +5,14 @@ import collinsonGroup from './full-stack-engineer-collinson/details'
 import siemens from './blockchain-architect-siemens-energy/details'
 import propine from './blockchain-staff-engineer-propine/details'
 import elephantstock from './software-engineering-manager/details'
+import getCraft from './software-architect-getcraft/details'
 
 const positions = new Map<string, Position>()
 positions.set('collinsonGroup', collinsonGroup)
 positions.set('siemens', siemens)
 positions.set('theInternationRedCross', theInternationRedCross)
 positions.set('propine', propine)
 positions.set('elephantstock', elephantstock)
+positions.set('getCraft', getCraft)
 
 export default positions

apps/website/src/app/positions/software-architect-getcraft/Content.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import StrongLabel from '@/styled-components/Text/StrongLabel'
+import TargetBlankLink from '@/components/TargetBlankLink'
+import {HFlexBox} from '@/styled-components/Grid'
+
+import stack from './stack'
+
+import {width} from '../consants'
+
+import position from './details'
+
+const Content = () => {
+  return (
+    <>
+      <HFlexBox>
+        <StrongLabel width={width}>Company:</StrongLabel>
+        <TargetBlankLink
+          href={position.externalUrl}
+          title={position.title}
+          text={position.company}
+        />
+      </HFlexBox>
+      <HFlexBox>
+        <StrongLabel width={width}>Role:</StrongLabel>
+        <span>{position.title}</span>
+      </HFlexBox>
+      <HFlexBox>
+        <StrongLabel width={width}>Team Size:</StrongLabel>
+        <span>{position.teamSize}</span>
+      </HFlexBox>
+      <HFlexBox>
+        <StrongLabel width={width}>Technologies:</StrongLabel>
+        <span>{stack.join(', ')}</span>
+      </HFlexBox>
+    </>
+  )
+}
+
+export default Content

apps/website/src/app/positions/software-architect-getcraft/details.ts

@@ -0,0 +1,17 @@
+import type Position from '@/types/Position'
+
+const position = 'Software Architect'
+const teamSize = '10+'
+
+const getCraft: Position = {
+  title: position,
+  teamSize,
+  sufix: 'software-architect-getcraft',
+  externalUrl: 'https://www.linkedin.com/company/getcraft/',
+  company: 'Getcraft.com',
+  period: 'June, 2019 - July, 2020',
+}
+
+export {position, teamSize}
+
+export default getCraft

apps/website/src/app/positions/software-architect-getcraft/page.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import type {NextPage} from 'next'
+
+import Content from './Content'
+
+import Layout from '@/components/MainLayout'
+import LeftDrawer from '@/components/Drawers/LeftDrawer'
+import {menuItems} from '@/menu'
+
+import {drawerWidth} from '@/config/layout'
+import {LayoutProvider} from '@/providers'
+
+const Title = () => {
+  return <h1>Software Architect</h1>
+}
+
+const PageContent = () => {
+  return (
+    <LayoutProvider>
+      <Content />
+    </LayoutProvider>
+  )
+}
+
+const Page: NextPage = () => {
+  return (
+    <Layout
+      PageContent={PageContent}
+      HeaderTitle={Title}
+      drawerWidth={drawerWidth}
+      LeftDrawer={<LeftDrawer items={menuItems} />}
+    />
+  )
+}
+
+export default Page

apps/website/src/app/positions/software-architect-getcraft/stack.tsx

@@ -0,0 +1,9 @@
+const stack = [
+  'React',
+  'Go',
+  'Google Cloud',
+  'Docker',
+  'Safari Push notifications',
+]
+
+export default stack