PortfoHub Logo

PortfoHub Documentation

Customization

Make your portfolio unique with these customization options.

Theme Customization
globals.css
1:root {
2  --primary: #3b82f6;
3  --secondary: #10b981;
4  --background: #ffffff;
5  --foreground: #0f172a;
6}

Color Variables

Primary--primary
Secondary--secondary
Background--background
Foreground--foreground
Layout Customization

Adjust the layout of your portfolio by modifying the components in the following files:

src/components/Layout.tsx
1export default function Layout({ children }) {
2  return (
3    <div className="min-h-screen flex flex-col">
4      <Header />
5      <main className="flex-grow">{children}</main>
6      <Footer />
7    </div>
8  )
9}

Content Structure

src/app/page.tsx

Main homepage content

src/app/about/page.tsx

About page content

src/app/projects/page.tsx

Projects showcase

public/images/

Image assets

Customization Example

Customization Example