-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
195 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { ResumeProfile } from 'data'; | ||
|
|
||
| type WorkItemLogoLinkProps = { | ||
| work: NonNullable<ResumeProfile['work']>[0]; | ||
| }; | ||
|
|
||
| const logoWidth = 150; | ||
|
|
||
| const WorkItemLogoLink: React.FC<WorkItemLogoLinkProps> = ({ work }) => ( | ||
| <a href={work.url}> | ||
| {work.iconDark && ( | ||
| <img | ||
| alt={`${work.name} logo`} | ||
| src={`/images/company-icons/${work.iconDark}`} | ||
| width={logoWidth} | ||
| className="hidden dark:inline" | ||
| /> | ||
| )} | ||
| <img | ||
| alt={`${work.name} logo`} | ||
| src={`/images/company-icons/${work.icon}`} | ||
| width={logoWidth} | ||
| className={work.iconDark ? 'inline dark:hidden' : undefined} | ||
| /> | ||
| </a> | ||
| ); | ||
|
|
||
| export default WorkItemLogoLink; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import { ResumeProfile } from 'data'; | ||
| import { Button, List, Modal } from 'flowbite-react'; | ||
| import KeywordsPipeList from 'components/KeywordsPipeList'; | ||
| import React from 'react'; | ||
| import WorkItemLogoLink from './WorkItemLogoLink'; | ||
| import ResumeTimelineDates from './Dates'; | ||
|
|
||
| type WorkItemModalProps = { | ||
| work: NonNullable<ResumeProfile['work']>[0]; | ||
| isOpen: boolean; | ||
| setIsOpen: (open: boolean) => void; | ||
| }; | ||
|
|
||
| const keywordListClasses = 'ml-6 text-black dark:text-white'; | ||
|
|
||
| const Heading: React.FC<{ children: string }> = ({ children }) => ( | ||
| <h5 className="mb-4 mt-10 font-heading text-xl">{children}</h5> | ||
| ); | ||
|
|
||
| const WorkItemModal: React.FC<WorkItemModalProps> = ({ | ||
| work, | ||
| isOpen, | ||
| setIsOpen, | ||
| }) => ( | ||
| <Modal show={isOpen} onClose={() => setIsOpen(false)} size="3xl" dismissible> | ||
| <Modal.Header | ||
| as="h4" | ||
| className="flex flex-col justify-between gap-6 md:flex-row" | ||
| > | ||
| <WorkItemLogoLink work={work} /> | ||
| </Modal.Header> | ||
| <Modal.Body> | ||
| <p className="mb-4 text-lg font-semibold"> | ||
| {work.position} | ||
| <span className="sr-only"> at </span> | ||
| <div className="font-light italic"> | ||
| <a href={work.url}>{work.name}</a> | ||
| </div> | ||
| <ResumeTimelineDates | ||
| className="text-gray-500 dark:text-gray-300" | ||
| startDate={work.startDate as string} | ||
| endDate={work.endDate as string} | ||
| /> | ||
| </p> | ||
|
|
||
| <p>{work.summary}</p> | ||
|
|
||
| <Heading>Highlights</Heading> | ||
| <List className="ml-6 list-outside text-black dark:text-white"> | ||
| {work.highlights?.map((h) => <List.Item>{h}</List.Item>)} | ||
| </List> | ||
|
|
||
| {work.skills && ( | ||
| <> | ||
| <Heading>Technical Skills and Tools</Heading> | ||
| <dl className="text-gray-500 dark:text-gray-300"> | ||
| {work.skills.primary && ( | ||
| <> | ||
| <dt>Primary</dt> | ||
| <dd> | ||
| <KeywordsPipeList | ||
| className={keywordListClasses} | ||
| keywords={work.skills.primary} | ||
| /> | ||
| </dd> | ||
| </> | ||
| )} | ||
| {work.skills.tools && ( | ||
| <> | ||
| <dt>Tools</dt> | ||
| <dd> | ||
| <KeywordsPipeList | ||
| className={keywordListClasses} | ||
| keywords={work.skills.tools} | ||
| /> | ||
| </dd> | ||
| </> | ||
| )} | ||
| {work.skills.other && ( | ||
| <> | ||
| <dt>Other</dt> | ||
| <dd> | ||
| <KeywordsPipeList | ||
| className={keywordListClasses} | ||
| keywords={work.skills.other} | ||
| /> | ||
| </dd> | ||
| </> | ||
| )} | ||
| </dl> | ||
| </> | ||
| )} | ||
|
|
||
| {/* <Heading>Projects</Heading> | ||
| <List className="ml-6 list-outside text-black dark:text-white"> | ||
| {work.projects?.map((p) => <List.Item>{p}</List.Item>)} | ||
| </List> */} | ||
| </Modal.Body> | ||
| <Modal.Footer> | ||
| <Button onClick={() => setIsOpen(false)}>Close</Button> | ||
| </Modal.Footer> | ||
| </Modal> | ||
| ); | ||
|
|
||
| // It'd be cool if you could next/prev through these like a carousel | ||
|
|
||
| export default WorkItemModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,48 @@ | ||
| import { useState } from 'react'; | ||
| import { PiBuildingOfficeFill } from 'react-icons/pi'; | ||
| import { Timeline, Card } from 'flowbite-react'; | ||
| import { Timeline, Card, Button } from 'flowbite-react'; | ||
| import { ResumeProfile } from 'data'; | ||
| import ResumeTimelineDates from './Dates'; | ||
| import WorkItemModal from './WorkItemModal'; | ||
| import WorkItemLogoLink from './WorkItemLogoLink'; | ||
|
|
||
| type WorkTimelineItemProps = { | ||
| work: NonNullable<ResumeProfile['work']>[0]; | ||
| }; | ||
|
|
||
| const logoWidth = 150; | ||
| const WorkTimelineItem: React.FC<WorkTimelineItemProps> = ({ work }) => { | ||
| const [showModal, setShowModal] = useState(false); | ||
|
|
||
| const WorkTimelineItem: React.FC<WorkTimelineItemProps> = ({ work }) => ( | ||
| <Timeline.Item key={work.name}> | ||
| <Timeline.Point icon={PiBuildingOfficeFill} /> | ||
| <Timeline.Content> | ||
| <Card> | ||
| <ResumeTimelineDates | ||
| startDate={work.startDate as string} | ||
| endDate={work.endDate as string} | ||
| /> | ||
| <Timeline.Title className="flex flex-col justify-between gap-6 md:flex-row"> | ||
| <div> | ||
| {work.position} | ||
| <div className="font-light italic">{work.name}</div> | ||
| </div> | ||
| <div className="flex-none"> | ||
| <a href={work.url}> | ||
| {work.iconDark && ( | ||
| <img | ||
| alt={`${work.name} logo`} | ||
| src={`/images/company-icons/${work.iconDark}`} | ||
| width={logoWidth} | ||
| className="hidden dark:inline" | ||
| /> | ||
| )} | ||
| <img | ||
| alt={`${work.name} logo`} | ||
| src={`/images/company-icons/${work.icon}`} | ||
| width={logoWidth} | ||
| className={work.iconDark ? 'inline dark:hidden' : undefined} | ||
| /> | ||
| </a> | ||
| </div> | ||
| </Timeline.Title> | ||
| <Timeline.Body>{work.summary}</Timeline.Body> | ||
| {/* <Button>Read more</Button> */} | ||
| </Card> | ||
| </Timeline.Content> | ||
| </Timeline.Item> | ||
| ); | ||
| return ( | ||
| <Timeline.Item key={work.name}> | ||
| <Timeline.Point icon={PiBuildingOfficeFill} /> | ||
| <Timeline.Content> | ||
| <Card> | ||
| <ResumeTimelineDates | ||
| startDate={work.startDate as string} | ||
| endDate={work.endDate as string} | ||
| /> | ||
| <Timeline.Title className="flex flex-col justify-between gap-6 md:flex-row"> | ||
| <div> | ||
| {work.position} | ||
| <span className="sr-only"> at </span> | ||
| <div className="font-light italic">{work.name}</div> | ||
| </div> | ||
| <div className="flex-none"> | ||
| <WorkItemLogoLink work={work} /> | ||
| </div> | ||
| </Timeline.Title> | ||
| <Timeline.Body>{work.summary}</Timeline.Body> | ||
| <Button onClick={() => setShowModal(true)}>Read more</Button> | ||
| <WorkItemModal | ||
| work={work} | ||
| isOpen={showModal} | ||
| setIsOpen={setShowModal} | ||
| /> | ||
| </Card> | ||
| </Timeline.Content> | ||
| </Timeline.Item> | ||
| ); | ||
| }; | ||
|
|
||
| export default WorkTimelineItem; |