Create a Custom Template

Devsync templates do not require a specific framework as long as they compile to HTML. And let’s be honest—if you’re considering SSR (Server-Side Rendering) for a portfolio, is everything okay at home?

Note

If you already have a portfolio, you can migrate it to use Devsync by following this guide; however, you will need to install zod manually.

1. Run the create-template command:

   bunx @jannael/devsync create-template

2. This will generate a template structure like this:

   • Directory.agents

     • Directoryskills

       • Directorydevsync-portfolio

         • SKILL.md
   • Directory.github

     • Directoryworkflows

       • update-on-devsync-change.yml
   • Directorypublic

     • poster-dark-mode.webp
     • poster-light-mode.webp
   • Directorysrc

     • Directorydevsync

       • devsync-validator.ts
       • devsync.ts
       • fields-translations.ts
   • DEVSYNC.json
   • package.json

   The important files are:

   • fields-translations.ts: This file contains the translations the Devsync CLI uses to build the GitHub Profile, LinkedIn, CV, and academics. This defines which languages are available for the build.
   • skills: This directory contains an agent skill that helps AI understand how to operate the template and build portfolios from prompts.
   • update-on-devsync-change.yml: This is a GitHub Action that automatically updates your GitHub Profile, LinkedIn, CV, and academics whenever you update the DEVSYNC.json file.
   • devsync.ts: This file exports everything necessary to use the template within your project.

3. Create your portfolio or refactor your current portfolio to use Devsync, you can use the skill to ask AI to do it for you.

4. Add the devsync configuration to your package.json:

   "devsync": {
     "pathToCompiledCV": "./dist/[lang]/cv/index.html"
   },

   Devsync generates the CV PDF from pure HTML, so ensure this path points to the HTML file containing your CV.

   If you are using internationalization for your template, the [lang] placeholder will be replaced with the language codes defined in DEVSYNC.json. If you do not need this feature, simply remove [lang] from the path and point it directly to your CV file.

Note

GitHub Action: The GitHub Action only includes Bun and Node.js setup. If your portfolio requires additional system dependencies to perform the build, you will need to install them within the GitHub Action.

Using Devsync with types

There are two ways to import DEVSYNC.json to use the template in your project:

import devsync from './DEVSYNC.json'

import devsync from './src/devsync'

The first method imports the local DEVSYNC.json file directly, while the second uses the Devsync logic with Zod schema validation.

Recommendation

Configure a path alias in your tsconfig.json to import Devsync more easily:

{
  "compilerOptions": {
    "paths": {
      "@core": ["./src/devsync/devsync"],
    }
  }
}

Tips

• DEVSYNC.json is not set in stone; you can modify it to suit your needs. For example, if your portfolio requires a new field, simply add it and then update devsync-validator.ts accordingly.
• Devsync Skill: Use the included agent skill when you want AI to assist you in building your portfolio or updating your profile.