About Me

The About Me component provides a comprehensive overview section featuring personal information, education details, project statistics, and a showcase of technologies and skills using an animated logo carousel.

Overview

This component combines multiple elements including text content, SpotlightCards for highlighting information, and a LogoLoop carousel displaying technology stack. It creates an engaging “about” section for portfolio websites.

Props

The Aboutme component does not accept props. All content is defined within the component.

Dependencies

import { FaFolder } from "react-icons/fa";
import LogoLoop from "../LogoLoop/LogoLoop";
import SpotlightCard from "../SpotlightCard/SpotLightCard";

Usage

import Aboutme from './components/Aboutme/Aboutme';

function App() {
  return (
    <main>
      <section id="aboutme">
        <Aboutme />
      </section>
    </main>
  );
}

Component Structure

Section Layout

The component consists of two main parts:

Content Section: Bio, education, and project cards
Technology Carousel: Animated logo loop

return (
  <>
    <section className="flex flex-col md:flex-row items-center justify-center mt-28 px-6 md:px-10 gap-10 md:gap-16">
      {/* Text content and cards */}
    </section>
    
    <div className="logo-white w-full mt-16 relative overflow-hidden py-9">
      {/* LogoLoop component */}
    </div>
  </>
);

Features

1. Personal Bio

Displays:

Section heading with “ABOUT ME” label
Main description of role and expertise
Detailed bio paragraph
Personal motto or tagline

2. Information Cards

Uses SpotlightCard components to highlight:

Education Card

<SpotlightCard spotlightColor="rgba(0, 229, 255, 0.2)" className="w-[200px] h-[150px] rounded-2xl">
  <div className="flex flex-col items-center justify-center gap-1 p-2 h-full text-center">
    <h2 className="text-sm uppercase text-white">Education</h2>
    <p className="text-xs text-white">Universidad EAN - Systems Engineer</p>
    <p className="text-xs text-white">2023 - 2027</p>
  </div>
</SpotlightCard>

Projects Card

<SpotlightCard spotlightColor="rgba(0, 229, 255, 0.2)" className="w-[200px] h-[150px] rounded-2xl">
  <div className="flex flex-col items-center justify-center gap-1 p-2 h-full text-center">
    <FaFolder className="w-6 h-6" />
    <h2 className="text-sm uppercase text-white">Projects</h2>
    <p className="text-xs text-white">1</p>
  </div>
</SpotlightCard>

3. Technology Stack Carousel

Displays technology logos in an infinite scrolling carousel:

const icons = [
  {src: "/Icons/css.svg", alt: "css"},
  {src: "/Icons/git.svg", alt: "git"},
  {src: "/Icons/github.svg", alt: "github"},
  {src: "/Icons/html.svg", alt: "html"},
  {src: "/Icons/js.svg", alt: "javascript"},
  {src: "/Icons/mongo.svg", alt: "mongodb"},
  {src: "/Icons/node.svg", alt: "nodejs"},
  {src: "/Icons/postgre.svg", alt: "postgreSQL"},
  {src: "/Icons/python.svg", alt: "python"},
  {src: "/Icons/react.svg", alt: "react"},
  {src: "/Icons/tailwind.svg", alt: "tailwind"},
  {src: "/Icons/tensorfl.svg", alt: "tensorflow"},
];

<LogoLoop
  logos={icons}
  speed={90}
  direction="left"
  logoHeight={70}
  gap={80}
  pauseOnHover
  fadeOut
  fadeOutColor="transparent"
/>

Customization

Personalizing Content

function Aboutme() {
  return (
    <>
      <section className="flex flex-col md:flex-row items-center justify-center mt-28 px-6 md:px-10 gap-10 md:gap-16">
        <div className="flex flex-col text-center md:text-left">
          <div>
            <p id="aboutme" className="text-sm tracking-widest uppercase text-white/50 mb-2">
              ABOUT ME
            </p>
            <h2 className="text-2xl text-white mb-5 max-w-[500px]">
              [Your Role/Title]
            </h2>
            <hr className="border-2 border-[#3A3C41] w-3/4 mb-5 mx-auto md:mx-0" />
            <p className="text-base md:text-lg leading-relaxed max-w-[500px] text-[#C7C7C7] mb-5">
              [Your detailed bio]
            </p>
            <h3 className="text-2xl text-white">[Your Motto]</h3>
          </div>
          {/* Cards */}
        </div>
        {/* Image */}
      </section>
    </>
  );
}

Adding More Info Cards

<div className="flex gap-4 mt-8 flex-wrap justify-center md:justify-start">
  {/* Education Card */}
  <SpotlightCard spotlightColor="rgba(0, 229, 255, 0.2)" className="w-[200px] h-[150px] rounded-2xl">
    {/* Content */}
  </SpotlightCard>

  {/* Projects Card */}
  <SpotlightCard spotlightColor="rgba(0, 229, 255, 0.2)" className="w-[200px] h-[150px] rounded-2xl">
    {/* Content */}
  </SpotlightCard>

  {/* NEW: Experience Card */}
  <SpotlightCard spotlightColor="rgba(0, 229, 255, 0.2)" className="w-[200px] h-[150px] rounded-2xl">
    <div className="flex flex-col items-center justify-center gap-1 p-2 h-full text-center">
      <MdWork className="w-6 h-6" />
      <h2 className="text-sm uppercase text-white">Experience</h2>
      <p className="text-xs text-white">3 years</p>
    </div>
  </SpotlightCard>
</div>

Customizing Technology Stack

const icons = [
  // Your technologies
  {src: "/Icons/react.svg", alt: "react"},
  {src: "/Icons/typescript.svg", alt: "typescript"},
  {src: "/Icons/nextjs.svg", alt: "nextjs"},
  {src: "/Icons/tailwind.svg", alt: "tailwind"},
  // Add more...
];

<LogoLoop
  logos={icons}
  speed={100} // Adjust speed
  direction="left"
  logoHeight={60} // Adjust size
  gap={60} // Adjust spacing
  pauseOnHover
  fadeOut
  scaleOnHover // Add hover scale effect
/>

Changing Image

import abt from '/img/your-about-image.jpg';

<div className="flex-shrink-0">
  <img 
    src={abt} 
    alt="About me" 
    className="w-[250px] md:w-[350px] h-auto object-cover rounded-3xl" 
  />
</div>

Responsive Design

Layout Breakpoints

Mobile (< 768px):
- Column layout (flex-col)
- Centered text and cards
- Smaller image (250px)
- Cards wrap in center
Desktop (≥ 768px):
- Row layout (flex-row)
- Left-aligned text
- Larger image (350px)
- Cards align to start

Text Sizing

{/* Label */}
<p className="text-sm tracking-widest uppercase text-white/50 mb-2">

{/* Main heading */}
<h2 className="text-2xl text-white mb-5 max-w-[500px]">

{/* Body text */}
<p className="text-base md:text-lg leading-relaxed max-w-[500px] text-[#C7C7C7] mb-5">

Styling Details

Section Heading Style

<p className="text-sm tracking-widest uppercase text-white/50 mb-2">
  ABOUT ME
</p>

Small text size
Wide letter spacing
Uppercase transformation
50% white opacity

Divider Line

<hr className="border-2 border-[#3A3C41] w-3/4 mb-5 mx-auto md:mx-0" />

2px thick border
Dark gray color
75% width
Centered on mobile, left-aligned on desktop

Card Spotlight Effect

All cards use a cyan spotlight color:

spotlightColor="rgba(0, 229, 255, 0.2)"

File Structure

src/
├── components/
│   ├── Aboutme/
│   │   └── Aboutme.jsx
│   ├── SpotlightCard/
│   │   └── SpotLightCard.jsx
│   └── LogoLoop/
│       └── LogoLoop.jsx
└── public/
    ├── img/
    │   └── abt.jpg
    └── Icons/
        ├── css.svg
        ├── git.svg
        ├── github.svg
        ├── html.svg
        ├── js.svg
        ├── mongo.svg
        ├── node.svg
        ├── postgre.svg
        ├── python.svg
        ├── react.svg
        ├── tailwind.svg
        └── tensorfl.svg

Logo Carousel Configuration

The LogoLoop is configured with specific settings for optimal display:

Speed: 90 px/s - Moderate scrolling speed
Direction: left - Right to left scrolling
Logo Height: 70px - Large icons for visibility
Gap: 80px - Generous spacing between icons
Pause on Hover: Enabled - Allows users to examine individual logos
Fade Out: Enabled - Smooth edges for better aesthetics
Fade Color: Transparent - Blends with background

Accessibility

Semantic HTML structure
Proper heading hierarchy
ID anchor for navigation (id="aboutme")
Alt text for images
ARIA labels for LogoLoop
Focus states on interactive elements
Icon accessibility through react-icons

Best Practices

Update Content: Replace placeholder text with your actual information
Optimize Images: Compress images for web performance
SVG Icons: Use SVG format for technology icons (scales better)
Consistent Colors: Use the same spotlight color across cards
Mobile Testing: Verify layout on various screen sizes
Icon Quality: Ensure all technology icons are high quality and consistent style

Remember to update the education details, project count, bio text, and technology stack to reflect your actual skills and experience.

Get Started

Components

Customization

Deployment

About Me

About Me

Overview

Props

Dependencies

Usage

Component Structure

Section Layout

Features

1. Personal Bio

2. Information Cards

Education Card

Projects Card

3. Technology Stack Carousel

Customization

Personalizing Content

Adding More Info Cards

Customizing Technology Stack

Changing Image

Responsive Design

Layout Breakpoints

Text Sizing

Styling Details

Section Heading Style

Divider Line

Card Spotlight Effect

File Structure

Logo Carousel Configuration

Accessibility

Best Practices

Get Started

Components

Customization

Deployment

​About Me

​Overview

​Props

​Dependencies

​Usage

​Component Structure

​Section Layout

​Features

​1. Personal Bio

​2. Information Cards

​Education Card

​Projects Card

​3. Technology Stack Carousel

​Customization

​Personalizing Content

​Adding More Info Cards

​Customizing Technology Stack

​Changing Image

​Responsive Design

​Layout Breakpoints

​Text Sizing

​Styling Details

​Section Heading Style

​Divider Line

​Card Spotlight Effect

​File Structure

​Logo Carousel Configuration

​Accessibility

​Best Practices

About Me

Overview

Props

Dependencies

Usage

Component Structure

Section Layout

Features

1. Personal Bio

2. Information Cards

Education Card

Projects Card

3. Technology Stack Carousel

Customization

Personalizing Content

Adding More Info Cards

Customizing Technology Stack

Changing Image

Responsive Design

Layout Breakpoints

Text Sizing

Styling Details

Section Heading Style

Divider Line

Card Spotlight Effect

File Structure

Logo Carousel Configuration

Accessibility

Best Practices