Skip to main content
The Work component renders a single work experience entry on the portfolio. It displays a company logo, a role title, an optional description of responsibilities, and a date range with location.

​
Props

PropTypeRequiredDescription
titlestringYesJob title or role name, displayed in bold.
textstringNoShort description of responsibilities at the role. Some entries omit this field.
imagestringNoURL of the company logo, typically hosted on Cloudinary. Some entries omit this field.
timeLinestringYesDate range and location string, e.g. "May - August 2023. Seattle, WA".

​
Usage

The following example renders a GoDaddy internship entry: 
<Work
  title="GoDaddy Software Engineer Intern:"
  text="A/B Tested features on GoDaddy's Checkout Page."
  image="https://res.cloudinary.com/dlk3ezbal/image/upload/v1702062289/gd_zdghmr.png"
  timeLine="May - August 2023. Seattle, WA"
/>

​
Entries without image or text

Newer entries — such as a stealth startup founder role — may omit both text and image. The component renders gracefully without them: 
<Work
  title="Stealth Startup — Founder"
  timeLine="September 2023 — Present"
/>
When image is omitted, no img element is rendered. When text is omitted, the description paragraph is empty but the layout is otherwise unchanged.

​
How Work is rendered in Home.js

Home.js maintains a currentWorkExperience state variable. It starts as the first 2 entries of the full array and maps over all items in the state to render one Work per entry: 
// Initial state — only first 2 entries visible
const [currentWorkExperience, setCurrentWorkExperience] = useState(
  workExperience.slice(0, 2)
);

// Toggle to show all or collapse back to 2
const toggleWorkExperience = () => {
  if (currentWorkExperience.length === 2) {
    setCurrentWorkExperience(workExperience);
  } else {
    setCurrentWorkExperience(workExperience.slice(0, 2));
  }
};

// Render — maps over the full currentWorkExperience state
{currentWorkExperience.map((work) => (
  <Work
    title={work.title}
    text={work.text}
    image={work.image}
    timeLine={work.timeLine}
    key={work.title}
  />
))}
The slice happens when state is set, not at render time. To always show all entries, initialize state with the full array: useState(workExperience).

​
CSS classes

The component uses the following CSS class names:
ClassElementPurpose
internshipCardOuter wrapper divCard layout, border, and spacing.
bold2p wrapping title and textSets font size for the content block.
boldspan wrapping titleMakes the role name bold.
internshipDatep wrapping timeLineRight-aligns or styles the date string.