Skip to main content

​
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:
  1. Content Section: Bio, education, and project cards
  2. 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>
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
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

  1. Update Content: Replace placeholder text with your actual information
  2. Optimize Images: Compress images for web performance
  3. SVG Icons: Use SVG format for technology icons (scales better)
  4. Consistent Colors: Use the same spotlight color across cards
  5. Mobile Testing: Verify layout on various screen sizes
  6. 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.

Build docs developers (and LLMs) love

Get started for freeTalk to us