Styling Customization

Learn how to customize styles and TailwindCSS configuration in your portfolio

Styling Customization

The Psi Lime Portfolio uses TailwindCSS for styling with custom configurations and patterns. This guide will help you customize the visual appearance of your portfolio.

TailwindCSS Configuration

The TailwindCSS configuration is located in tailwind.config.js:1-10. Currently, it uses the default configuration:

tailwind.config.js

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

While the config is minimal, TailwindCSS classes are used throughout the components via the @import "tailwindcss" directive in index.css:1.

Extending the Theme

You can extend the default TailwindCSS theme to add custom colors, spacing, or fonts:

1. Add custom colors

   Open tailwind.config.js and add your custom colors in the theme.extend object:

   tailwind.config.js

   export default {
     content: [],
     theme: {
       extend: {
         colors: {
           primary: '#b624f9',
           secondary: '#b39ef5',
           accent: '#bce8fb',
         },
       },
     },
     plugins: [],
   }
   
2. Use custom colors in components

   Replace hardcoded color values with your custom colors:

   // Before
   <div className="text-[#b5b5b5]">Text</div>
   
   // After
   <div className="text-primary">Text</div>
   

Common Styling Patterns

The portfolio uses several consistent styling patterns across components.

Glassmorphism Effect

The header and buttons use a glassmorphism effect with backdrop blur. Here’s the pattern from Header.jsx:7:

src/components/Header/Header.jsx

<header className="fixed bottom-5 md:top-5 md:bottom-auto left-1/2 -translate-x-1/2 z-50 flex gap-1 md:gap-2 px-3 md:px-5 py-2 bg-white/5 backdrop-blur-md border border-white/20 rounded-2xl">

Key classes:

• bg-white/5 - Semi-transparent white background
• backdrop-blur-md - Blur effect for glassmorphism
• border border-white/20 - Subtle border

Button Styling

Buttons throughout the portfolio use this consistent pattern from Presentation.jsx:33:

src/components/Presentation/Presentation.jsx

<button className="bg-white/10 backdrop-blur-md text-white px-5 py-3 rounded-xl text-sm font-medium border border-white/20 hover:bg-white/20 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 shadow-lg">
  Download CV
</button>

Key features:

• Glassmorphism background
• Hover lift effect with hover:-translate-y-0.5
• Smooth transitions with transition-all duration-200

To customize button styles globally, create a custom class in index.css and apply it to all buttons.

Responsive Design

The portfolio uses Tailwind’s responsive prefixes extensively. Example from Presentation.jsx:9:

src/components/Presentation/Presentation.jsx

<section className="flex flex-col-reverse md:flex-row items-center justify-center gap-10 md:gap-16 mt-20 md:mt-28 px-6 md:px-16 max-w-5xl mx-auto">

Breakpoints:

• Default (mobile): flex-col-reverse, gap-10, mt-20, px-6
• md: (768px+): flex-row, gap-16, mt-28, px-16

Text Color Hierarchy

The portfolio uses a consistent color hierarchy for text:

// Primary headings - Pure white
<h1 className="text-white">Hi, I'm Jeronimo Diaz</h1>

// Secondary text - Light gray
<h2 className="text-[#b5b5b5]">Systems Engineer / React developer</h2>

// Body text - Medium gray
<p className="text-[#C7C7C7]">Description text...</p>

// Labels - Muted white
<p className="text-white/50">ABOUT ME</p>

Custom CSS

The index.css file contains custom CSS for specific use cases.

Logo White Filter

The .logo-white class inverts logos to white (index.css:3-5):

src/index.css

.logo-white img {
  filter: brightness(0) invert(1);
}

This is used in Aboutme.jsx:66 to display technology logos in white:

src/components/Aboutme/Aboutme.jsx

<div className="logo-white w-full mt-16 relative overflow-hidden py-9">
  <LogoLoop logos={icons} />
</div>

Layout Patterns

Section Spacing

Sections use consistent top margin for spacing (Aboutme.jsx:24 and Projects.jsx:6):

<section className="flex flex-col items-center mt-28 px-16">

Horizontal Rules

Dividers use this pattern (Presentation.jsx:39):

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

Image Styling

Images use rounded corners and proper sizing (Presentation.jsx:63-64):

<div className="w-[250px] h-[250px] md:w-[400px] md:h-[400px] mx-2 flex-shrink-0">
  <img src={Pfp} className="w-full h-full object-cover rounded-2xl" />
</div>

Modifying Layouts

1. Adjust spacing between sections

   Modify the mt-28 class on section elements to change vertical spacing:

   // Smaller spacing
   <section className="mt-16 ...">
   
   // Larger spacing  
   <section className="mt-40 ...">
   
2. Change container width

   Modify the max-w-* classes to adjust content width:

   // Narrower
   <div className="max-w-3xl mx-auto">
   
   // Wider
   <div className="max-w-7xl mx-auto">
   
3. Adjust responsive breakpoints

   Change the md: prefix to other breakpoints:

   • sm: - 640px
   • lg: - 1024px
   • xl: - 1280px
   • 2xl: - 1536px

Adding Custom Styles

If you need styles that can’t be achieved with Tailwind classes:

1. Open src/index.css
2. Add your custom CSS after the Tailwind import:

src/index.css

@import "tailwindcss";

/* Custom animations */
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-in {
  animation: slide-in 0.5s ease-out;
}

/* Custom gradients */
.gradient-text {
  background: linear-gradient(90deg, #bce8fb, #b39ef5, #b624f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Use Tailwind’s @apply directive to create reusable component classes based on Tailwind utilities.