🖼️Creating a Template

Step 1 - Choose Your Section

The portfolio includes five main sections: Projects, Tech Stack, Connect, Clients, and Services. You can create custom templates for each of these sections.

Each section has its own dedicated type definition, which you can find in the types/components/layers directory:

• one.d.ts → Projects section

• two.d.ts → Services section

• three.d.ts → Clients section

• four.d.ts → Tech Stack section

• five.d.ts → Connect section

When creating a template for a section, make sure to use the corresponding type to ensure type safety and proper rendering.

Step 2 - Create Template

Create your template in src/templates folder and use the types that u choosed, use the data like the original template so you wont get any errors.

For example this is a Project Section Template:

import { yourType } from '@/types/components/yourType'

export default function One({ data = [] }: { data: yourType}) {
    return (
        <div>
            {data.map((item, index) => (
                //use your data here
            ))}
        </div>
    );
}

Step 3 - Add to Project

Once you've created your template, open the pages/index.tsx file and update the section rendering logic accordingly.

For example, if you’ve created a new template for the Projects section, locate the relevant section in index.tsx and replace the line responsible for rendering it with your new template component.

const componentToLayerMap: Record<string, any> = {
    'One': yourTemplate //this is your template 
    'One': layerOne,
    'Two': layerTwo,
    'Three': layerThree,
    'Four': layerFour,
    'Five': layerFive
};