MyUI

Hover-Reveal Experience Card

A section to display professional experience. Cards reveal more details on hover with a smooth grid-based animation.

SectionCardHover EffectLayout

Experience

Senior Developer @ Example Inc.

2023 - Present

  • Led the development of a new web platform.
  • Mentored junior developers and conducted code reviews.
  • Architected a scalable frontend using Next.js and TypeScript.
  • Implemented a full CI/CD pipeline for automated testing and deployment.
  • Reduced API response times by 30% through query optimization.

Mid-Level Engineer @ Tech Solutions

2020 - 2023

  • Contributed to open-source UI component libraries.
  • Developed and maintained client-facing applications.
  • Refactored a legacy codebase to use modern React hooks and contexts.
  • Integrated Framer Motion to improve user experience with fluid animations.
  • Worked closely with designers to ensure pixel-perfect implementation.

Card

Versatile card components for displaying content. Includes a standard static card and an interactive card with hover effects.

LayoutContent

Standard Card

This is a simple and clean card for displaying static content. Its perfect for articles, profiles, or information blocks.

InteractiveCard

Versatile card components for displaying content. Includes a standard static card and an interactive card with hover effects.

LayoutContentInteractive

Interactive Card

This card has a hover effect, making it ideal for navigation links or calls to action. The border glows and the arrow moves.

Contribution Heatmap card

A component to visualize data over the past year, similar to a GitHub contribution graph.

Data VizChartCalendar
Dec
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Mon
Wed
Fri

Profile Card

Versatile card components for displaying content. Includes a standard static card and an interactive card with hover effects.

LayoutContentInteractive

Alex Doe

Software Engineer

Product Sale Card

An animated card for showcasing products on sale, with a hover effect and interactive 'Add to Cart' button.

eCommerceCardAnimation

Men s Apparel

AeroGlide Runners

$79.99

$129.99

Skills Section

A section to display skills or technologies, categorized into interactive spotlight cards.

SectionLayoutInteractive

Technologies We Use

A look at the modern stack that powers our components.

Category One

LoremIpsumDolorSitAmetConsecteturAdipiscing

Category Two

ElitSedDoEiusmodTemporIncididuntLabore

Category Three

DoloreMagnaAliquaUtEnimMinimVeniam

Code Snippet

A read-only component for displaying formatted and highlighted code blocks, styled like a macOS window.

DisplayUtilityCode
snippet.js

Neobrutalism Code Snippet

A retro, neobrutalist-style component for displaying highlighted code blocks with a sharp, chunky border.

DisplayUtilityCodeNeobrutalism
snippet.js
Next: Effects