Skip to main content

​
Overview

GitFolio offers a curated collection of professionally designed templates that transform your GitHub profile into a stunning portfolio website. Each template is fully responsive, optimized for performance, and designed to highlight your projects and experience.

​
Available templates

GitFolio currently offers 8 unique templates, each with its own design aesthetic:

Black & White

Minimalist design with bold typography and clean layouts

DevPro

Developer-focused template with project highlights

Persona

Personal branding with animated text effects

Clean Slate

Modern and minimal with emphasis on readability

White Space

Spacious design with clear visual hierarchy

Pixel Perfect

GitHub-inspired design with contribution graphs

Obsidian

Dark-themed template with gradient accents

Notion Theme

Notion-inspired clean interface

​
Template structure

All templates follow a consistent structure defined in packages/templates/src/Templates/: 
const template = ({ data = DummyData }: { data?: DATA }) => {
  return (
    <main>
      <Navbar />
      <HeroSection data={data.personalInfo} />
      <ProjectsSection data={data.projects} />
      <ExperienceSection data={data.experience} />
      <EducationSection data={data.education} />
      <Footer socialLinks={data.socialLinks} />
    </main>
  );
};

​
Selecting a template

Choose your template from the dashboard:
1

Navigate to Templates

Go to the Templates tab in your dashboard sidebar
2

Browse templates

View all available templates with live previews
3

Select your template

Click on a template card to see full details and preview
4

Activate template

Click the activate button to apply the template to your portfolio
Your active template is saved in the activeTemplateId field on your user profile and persists across sessions.

​
Template availability

All templates are currently free and available to all users immediately upon signup. 
model Template {
  id          String   @id @default(uuid())
  title       String   @unique
  category    String   // "FREE" for all current templates
  USDpricing  Float    // 0.00
  INRpricing  Float    // 0.00
}
While the codebase includes support for premium templates, all 8 templates currently available are free with no purchase required.

​
Template features

Each template includes these common components: Responsive navigation bars with smooth scrolling to sections: 
const navItems = [
  { id: "none", name: "Home", link: "#home" },
  { id: "projects", name: "Work", link: "#work" },
  { id: "skills", name: "About", link: "#about" },
  { id: "experience", name: "Experience", link: "#experience" },
];

​
Hero section

Displays your profile information, tagline, and bio from your GitHub account.

​
Projects showcase

Dynamically renders all projects marked as isIncluded: true with:
  • Project thumbnails
  • Descriptions and topics
  • GitHub repository links
  • Live demo links
  • Star and fork counts
  • Programming language badges

​
Experience timeline

Chronological display of your work experience with company logos, roles, and descriptions.

​
Education section

Showcases your educational background with institution logos and degree information.

​
Skills grid

Visual display of your technology skills and expertise areas. Footer with links to your social media profiles and contact information.

​
Template data binding

Templates receive data through a standardized DATA interface: 
interface DATA {
  personalInfo: PersonalInformation;
  projects: Projects[];
  experience: Experience[];
  education: Education[];
  socialLinks: SocialLinks;
  skills: string[];
}
This ensures all templates can display your information consistently regardless of design.

​
Previewing templates

Before activating a template:
  1. Navigate to the Preview tab in your dashboard
  2. Your current template renders with your actual data
  3. Compare different templates by switching between them
  4. The preview updates in real-time as you edit your information
Template rendering happens through the renderer service at apps/server/src/Routes/v1/renderer.route.ts:
  1. User data is fetched from the database
  2. Template component is loaded based on activeTemplateId
  3. Data is passed to the template component
  4. Server-side rendering generates the HTML
  5. Page is served at your portfolio URL

​
Template switching

You can switch templates at any time without losing data: 
// From dashboard/page.tsx
const onSave = async ({ type, data }: SavePayload) => {
  if (type === "Template") {
    await updateUserData(userId, { activeTemplateId: data.activeTemplateId });
  }
};
All your content (projects, experience, education) remains intact when changing templates.

​
Next steps

Customize your portfolio

Learn how to customize your profile, projects, and experience

Theme customization

Explore dark/light mode and theme options

Build docs developers (and LLMs) love

Get started for freeTalk to us