Component Showcase
A collection of all reusable components available in this application
PageHero Component
Example:
Sample Page Title
This is a sample subtitle for the page hero component
<PageHero title="Sample Page Title" subtitle="This is a sample subtitle" />
SectionHeading Component
Example:
Sample Section Heading
<SectionHeading>Sample Section Heading</SectionHeading>
ExpertiseGrid Component
Example:
Skill 1
Description of skill 1
Skill 2
Description of skill 2
Skill 3
Description of skill 3
Skill 4
Description of skill 4
<ExpertiseGrid items={[
{ title: 'Skill 1', description: 'Description of skill 1' },
{ title: 'Skill 2', description: 'Description of skill 2' }
]} />ExperienceCard Component
Example (Normal):
Senior Developer at Sample Company
Led development of major features and mentored junior developers
Example (Highlighted):
Lead Developer at Current Company
Currently leading the engineering team
<ExperienceCard
company="Sample Company"
url="https://example.com"
title="Senior Developer"
description="Led development of major features"
highlighted={false}
/>AuthorCard Component
Example:
The AuthorCard introduces readers to the author and welcomes them to the site. Used at the top of blog post sidebars.
About the Author
Hi, I'm Steven Alan Wilson, a Digital, Technical, and AI Leader with over 20 years of experience helping organizations build exceptional digital products and high-performing teams.
I share insights on leadership, technical strategy, and building great teams. Welcome to my corner of the internet.
<AuthorCard />
ContactCard Component
Example:
The ContactCard displays a call-to-action for working together, including operating areas and contact methods. It uses the same content as the Work With Me footer component.
<ContactCard />
StatsCard Component
Example:
Sample Statistics
Metric 1100+
Metric 250+
Metric 325+
<StatsCard
title="Sample Statistics"
stats={[
{ label: 'Metric 1', value: '100+' },
{ label: 'Metric 2', value: '50+' }
]}
/>Sidebar Component
Example:
The Sidebar component combines ContactCard and StatsCard with predefined data from the config.
<Sidebar />
Post Component
Example:
The Post component renders markdown content as styled HTML.
<Post content={markdownString} />LoadingSpinner Component
Example:
Full-screen fixed position loading indicator that covers the entire viewport with a semi-transparent overlay.
Note: The LoadingSpinner uses fixed positioning and covers the entire screen. It's used for page transitions and is displayed in the post page when loading.
<LoadingSpinner message="Loading post..." />
Tagline Component
Example:
A reusable tagline component used in the footer. Can display custom text.
<Tagline text="Your custom tagline here" />
ServicesList Component
Example:
Displays the consultancy services from the footer. Pulls data from footerServices config.
Services
<ServicesList />
LatestPosts Component
Example:
Displays recent blog posts dynamically. Used in the footer and can be reused elsewhere.
Latest Thinking
<LatestPosts posts={posts} limit={2} />WorkWithMe Component
Example:
Call-to-action component with operating areas and contact methods. Used in footer and sidebar.
Work With Me
<WorkWithMe />