Skip to main content
The Card component renders a single portfolio project entry. It displays a media asset (image or video), a bold project title, a multi-line description, and one or more external links.

​
Props

PropTypeRequiredDescription
titlestringYesProject title displayed in bold before the description.
textstring[]YesArray of text paragraphs. Each entry is rendered on its own line using <br />.
imagestringYesURL of the project image or video file.
isVideobooleanYesWhen true, renders a <video> element with autoPlay and controls. When false, renders an <img> element.
linksArray<{ text: string, href: string }>YesExternal links rendered as anchor tags. Each object requires a text label and an href URL.

​
Usage

The following example shows a real project entry from the portfolio — the Courser project that won HackUIowa 2023: 
<Card
  title="Courser"
  text={['ChatGPT for University classrooms', '- Won HackUIowa 2023']}
  image="https://res.cloudinary.com/dlk3ezbal/image/upload/v1702057000/Untitled_design_y9npsz.png"
  isVideo={false}
  links={[
    { text: 'Github', href: 'https://github.com/GautamSharda/courser' },
    { text: 'Website', href: 'https://chatcourser.com/' }
  ]}
/>

​
Video example

For projects that have a recorded demo, set isVideo to true and point image at a video file URL. The Hand Gesture Remote project uses this pattern with a .mov file hosted on Cloudinary: 
<Card
  title="Hand Gesture Remote"
  text={['I used OpenCV and Linear Regression to create a hand gesture remote that can be used to control a TV.']}
  image="https://res.cloudinary.com/dlk3ezbal/video/upload/v1693158666/swipe_gs02yz.mov"
  isVideo={true}
  links={[
    { text: 'Github', href: 'https://github.com/paaatrrrick/Hand-Gesture-Remote' }
  ]}
/>

​
Link styling

Links are rendered in order. The last link in the array receives the CSS class link. All preceding links receive link mR, which adds a right margin to separate them visually.

Single link

One link → class link

Multiple links

First link → class link mR
Last link → class link
All links open in a new tab (target="_blank") with rel="noreferrer" for security.

​
CSS classes

The component uses the following CSS class names, which are defined in the site’s stylesheet:
ClassElementPurpose
codingChunkOuter wrapper divProvides card layout and spacing.
codingChunk-contentInner content divStacks media, text, and links vertically.
codingImageimg or videoConstrains media dimensions.
codingParagraphpStyles the description block.
boldspan wrapping titleMakes the project title bold.
card-linkdiv wrapping linksLays out anchor tags horizontally.
linkLast a tagBase link style.
link mRAll but last a tagsBase link style with right margin.