Contributing Templates

# Fork the repository on GitHub
# Then clone your fork
git clone https://github.com/YOUR_USERNAME/GitFolio.git
cd GitFolio

git checkout -b template/my-awesome-template

pnpm install

packages/templates/src/Templates/
└── YourTemplateName/
    ├── components/
    │   ├── Hero.tsx
    │   ├── Projects.tsx
    │   ├── Experience.tsx
    │   └── Footer.tsx
    └── template.tsx

# Build the renderer
pnpm run build --filter=renderer

# Start development server
pnpm run dev --filter=renderer

import { Your_Template_Name } from "@workspace/templates";

export default function Page() {
  return <Your_Template_Name />;
}

pnpm run build --filter=renderer

// ✅ Good: Proper typing
import { DATA } from "@workspace/types";

const template = ({ data = DummyData }: { data?: DATA }) => {
  return <div>{data.personalInfo.full_name}</div>;
};

// ❌ Bad: Using 'any'
const template = ({ data }: any) => {
  return <div>{data.personalInfo.full_name}</div>;
};

// ✅ Good: Small, focused components
interface HeroProps {
  data: PersonalInformation;
}

export default function Hero({ data }: HeroProps) {
  return (
    <section>
      <h1>{data.full_name}</h1>
      <p>{data.tagline}</p>
    </section>
  );
}

// ❌ Bad: Giant component with all sections
function Template() {
  return (
    <div>
      {/* 500+ lines of code */}
    </div>
  );
}

// ✅ Good: Tailwind utility classes
<div className="max-w-4xl mx-auto px-4 py-20">
  <h1 className="text-4xl font-bold text-foreground">
    Title
  </h1>
</div>

// ❌ Bad: Inline styles
<div style={{ maxWidth: '1024px', margin: '0 auto', padding: '80px 16px' }}>
  <h1 style={{ fontSize: '36px', fontWeight: 'bold' }}>
    Title
  </h1>
</div>

// ✅ Good: Semantic HTML and ARIA
<nav aria-label="Main navigation">
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#projects">Projects</a></li>
  </ul>
</nav>

<img src={profileImg} alt={`${full_name}'s profile photo`} />

<button aria-label="Toggle dark mode" onClick={toggleTheme}>
  <MoonIcon />
</button>

// ❌ Bad: No semantic HTML or alt text
<div onClick={nav}>
  <div>About</div>
  <div>Projects</div>
</div>

<img src={profileImg} />

<div onClick={toggleTheme}>
  <MoonIcon />
</div>

// ✅ Good: Mobile-first responsive design
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {projects.map(project => (
    <ProjectCard key={project.id} {...project} />
  ))}
</div>

// ✅ Good: Responsive typography
<h1 className="text-2xl md:text-4xl lg:text-5xl font-bold">
  {title}
</h1>

# Commit your changes
git add .
git commit -m "Add [Template Name] template"

# Push to your fork
git push origin template/my-awesome-template

## Template: [Your Template Name]

### Description
[Brief description of your template]

### Features
- Feature 1
- Feature 2
- Feature 3

### Theme Support
- [x] Dark mode
- [x] Light mode

### Preview
**Desktop:**
![Desktop Preview](URL_TO_IMAGE)

**Mobile:**
![Mobile Preview](URL_TO_IMAGE)

### Checklist
- [x] Follows code style guidelines
- [x] Fully responsive
- [x] Accessible (WCAG 2.1 AA)
- [x] Production build succeeds
- [x] Handles all DATA fields
- [x] Preview assets included

### Additional Notes
[Any special features, dependencies, or considerations]