feat(experience): setup

package.json

@@ -68,6 +68,7 @@
     "@hono/node-server": "^1.13.5",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "@remix-run/node": "^2.13.1",
     "@remix-run/react": "^2.13.1",

src/remix-app/components/experience/DraftKingsExperience.tsx

@@ -0,0 +1,87 @@
+import * as stylex from '@stylexjs/stylex';
+
+import Text from '../typography/text/Text';
+
+import Experience from './Experience';
+import { experienceStyles } from './experience.stylex';
+
+const DraftKingsExperience = () => (
+  <Experience
+    position="Senior Software Engineer"
+    company={{ name: 'DraftKings', url: 'https://draftkings.com' }}
+    range="April 2022 - Present"
+  >
+    <ul {...stylex.props(experienceStyles.list)}>
+      <li {...stylex.props(experienceStyles.listElement)}>
+        <Text
+          as="span"
+          size={5}
+          weight="regular"
+          wrap="pretty"
+          truncate={false}
+          style={experienceStyles.listElementText}
+        >
+          Create a Quick Deposit microfrontend to build trust with customers by enabling them to deposit to their
+          DraftKings wallet without having to leave their play session.
+        </Text>
+      </li>
+
+      <li {...stylex.props(experienceStyles.listElement)}>
+        <Text
+          as="span"
+          size={5}
+          weight="regular"
+          wrap="pretty"
+          truncate={false}
+          style={experienceStyles.listElementText}
+        >
+          Create scaleable applications and tooling for account management that handles peaks of 1 million users a day
+          and 300 thousand users per hour.
+        </Text>
+      </li>
+
+      <li {...stylex.props(experienceStyles.listElement)}>
+        <Text
+          as="span"
+          size={5}
+          weight="regular"
+          wrap="pretty"
+          truncate={false}
+          style={experienceStyles.listElementText}
+        >
+          Setup threat detection, monitoring, and logging. Ensuring stability of Account Platform applications by
+          reducing false positive errors and alerting developers early of production issues.
+        </Text>
+      </li>
+
+      <li {...stylex.props(experienceStyles.listElement)}>
+        <Text
+          as="span"
+          size={5}
+          weight="regular"
+          wrap="pretty"
+          truncate={false}
+          style={experienceStyles.listElementText}
+        >
+          Design financial tooling to integrate 3rd party payment offerings to increase deposits to DraftKings by 10%.
+        </Text>
+      </li>
+
+      <li {...stylex.props(experienceStyles.listElement)}>
+        <Text
+          as="span"
+          size={5}
+          weight="regular"
+          wrap="pretty"
+          truncate={false}
+          style={experienceStyles.listElementText}
+        >
+          Implemented a company-wide internal code coverage tool that gives developers a holistic view of their code
+          coverage. This led to better overall testing and less redundant test cases.
+        </Text>
+      </li>
+    </ul>
+  </Experience>
+);
+
+export default DraftKingsExperience;

src/remix-app/components/experience/Experience.tsx

@@ -0,0 +1,53 @@
+import { Link } from '@remix-run/react';
+import * as stylex from '@stylexjs/stylex';
+
+import { tokens } from '../../themes/tokens.stylex';
+import Heading from '../typography/heading/Heading';
+import Text from '../typography/text/Text';
+
+import type { PropsWithChildren } from 'react';
+
+interface Company {
+  name: string;
+  url: string;
+}
+
+interface ExperienceProps extends PropsWithChildren {
+  position: string;
+  company: Company;
+  range: string;
+}
+
+const styles = stylex.create({
+  companyLink: {
+    color: tokens.color_text_brand,
+    background: `none, linear-gradient(to right, ${tokens.color_text_brand}, ${tokens.color_text_brand})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: '100% 100%, 0 100%',
+    backgroundSize: {
+      default: '100% 0.2rem, 0 0.2rem',
+      ':hover': '0 0.2rem, 100% 0.2rem',
+      ':focus': '0 0.2rem, 100% 0.2rem',
+    },
+    transition: 'background-size 400ms',
+  },
+});
+
+const Experience = ({ position, company, range, children }: ExperienceProps) => (
+  <div>
+    <Heading as="h3" size={6} weight="bold" wrap="pretty" truncate={false}>
+      {position}{' '}
+      <Link {...stylex.props(styles.companyLink)} to={company.url} aria-label={company.name}>
+        @ {company.name}
+      </Link>
+    </Heading>
+
+    <Text as="p" size={4} weight="light" wrap="nowrap" truncate={false}>
+      {range}
+    </Text>
+
+    {children}
+  </div>
+);
+
+export default Experience;