Menu
Create portfolios using Devsync template with automated CV, GitHub, LinkedIn, and academics generation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.
Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).
| name | devsync-portfolio |
| description | Create portfolios using Devsync template with automated CV, GitHub, LinkedIn, and academics generation |
Create and maintain developer portfolios using the Devsync template system. This skill guides you through building portfolios where all content comes from DEVSYNC.json - never hardcode text in templates.
All UI text must use translations[lang]['key'] from @devsync/src/devsync/fields-translations.ts. Never write <h3>Projects</h3> - use <h3>{translations[lang]['Projects']}</h3>.
Templates are framework-agnostic. The developer chooses their own stack (Astro, Next.js, SvelteKit, Vue, vanilla HTML, etc.).
When generating a template, always ask:
Infer multilingual support directly unless user specifies otherwise.
{
"defaultLang": "en",
"site": "https://your-site.com",
"name": "Your Name",
"img": "https://image-url.com/photo.jpg",
"socialMedia": [{ "name": "LinkedIn", "url": "...", "icon": "...", "mdBadge": "..." }],
"githubUserName": "your-username"
}
{
"defaultLang": "en",
"site": "https://devsync.work",
"name": "Your Full Name",
"img": "https://your-image-url.com/your-image.jpg",
"socialMedia": [
{
"name": "LinkedIn",
"url": "https://www.linkedin.com/in/your-linkedin-handle",
"icon": "/icons/linkedin.svg",
"mdBadge": ""
}
],
"githubUserName": "your-github-username",
"en": {
"description": "Write a short professional summary about yourself. Example: Full-stack developer focused on developer experience, performance, and product quality.",
"jobTitle": "Your Current Job Title",
"status": {
"status": "your-status",
"badge": ""
},
"languages": [
{
"name": "Your Language 1 / Your Language 2",
"mdBadge": "",
"icon": "https://cdn.simpleicons.org/googletranslate"
}
],
"experience": [
{
"company": "Your Company Name",
"position": "Your Position Title",
"img": "https://your-image-url.com/company-image.jpg",
"web": "https://your-company-website.com",
"description": "Describe your role and impact in one concise sentence.",
"date": "MM/YY - Present",
"links": [
{
"name": "Company Website",
"url": "https://your-company-website.com",
"mdBadge": "",
"icon": "https://cdn.simpleicons.org/googlechrome"
}
],
"list": {
"title": "key-achievements",
"items": [
{
"highlight": "Achievement headline",
"description": "Describe one measurable result you delivered (performance, revenue, growth, reliability, etc.)."
}
]
},
"skills": [
{
"name": "Your Key Skill",
"mdBadge": "",
"icon": "https://cdn.simpleicons.org/codeforces"
}
]
}
],
"projects": [
{
"name": "Your Project Name",
"img": "https://your-image-url.com/project-image.jpg",
"web": "https://your-project-url.com",
"links": [
{
"name": "GitHub",
"url": "https://github.com/your-github-username/your-project-repo",
"mdBadge": "",
"icon": "/icons/github.svg"
}
],
"description": "Describe what the project does and why it matters.",
"list": {
"title": "project-highlights",
"items": [
{
"highlight": "Technical highlight",
"description": "Describe one concrete technical decision or outcome from this project."
}
]
},
"skills": [
{
"name": "Project Skill",
"mdBadge": "",
"icon": "https://cdn.simpleicons.org/git"
}
]
}
],
"education": [
{
"name": "Your University or Institution",
"degree": "Your Degree / Program",
"img": "https://your-image-url.com/education-image.jpg",
"date": "MM/YY - MM/YY",
"links": [
{
"name": "Program URL",
"url": "https://your-program-link.com",
"mdBadge": "",
"icon": "https://cdn.simpleicons.org/googlechrome"
}
],
"list": {
"title": "education-highlights",
"items": [
{
"highlight": "Academic highlight",
"description": "Describe a relevant course, thesis, capstone, or achievement."
}
]
}
}
],
"certifications": [
{
"name": "Your Certification Name",
"url": "https://your-certification-url.com",
"list": {
"title": "what-this-validates",
"items": [
{
"highlight": "Validated area",
"description": "Describe what this certification validates for your profile."
}
]
},
"skills": [
{
"name": "Certification Skill",
"mdBadge": "",
"icon": "https://cdn.simpleicons.org/coursera"
}
]
}
]
}
}
Key flexibility: Any section can be omitted - if experience is missing, it simply won't appear in CV. Portfolio can add custom fields beyond CV requirements.
{
"devsync": {
"pathToCompiledCV": "src/[lang]/cv.html"
}
}
Important: [lang] is a placeholder. The devsync build command iterates through available languages and replaces [lang] with each language code. If your portfolio is monolingual, the replacement still occurs but only one iteration happens.
The CLI command (bunx devsync build) executes:
bun installbun run buildDEVSYNC.json, filters out global fields to get language codespackage.json, replaces [lang], fetches HTML, generates PDFlinkedin-{lang}.md with professional summaryREADME.mdacademics/README.mdAvailable in 8 languages (en, es, fr, pt, de, zh, ja, ko):
Description, jobTitle, Status, LanguagesProfessional Experience, Projects, Education, CertificationsCore Skills, credential, academicsView Certificate, Selected projects, Let's connect, Github Profile, I am, LinksExtensible: Add new keys as needed for portfolio-specific UI text.
When a template needs UI text not covered by existing keys, add it to src/devsync/fields-translations.ts in all 8 languages:
'Open to work')// fields-translations.ts
export const translations = {
en: {
// ... existing keys
'Open to work': 'Open to work', // ← add here
},
es: {
// ... existing keys
'Open to work': 'Disponible para trabajar',
},
fr: {
'Open to work': 'Disponible',
},
// ... repeat for pt, de, zh, ja, ko
} as const
translations[lang]['Open to work']Never use the key string as literal UI text — always go through
translations[lang]. Missing a language will cause a TypeScript type error, which is the intended safety net.
.github/workflows/update-on-devsync-change.yml triggers on DEVSYNC.json pushes:
- run: bunx devsync build # Updates CV, README, LinkedIn, academics
- uses: git-auto-commit-action # Commits changes
bunx devsync build to generate artifactscv/{lang}.pdf - PDF CVREADME.md - GitHub profilelinkedin/{lang}.md - LinkedIn copyacademics/README.md - Academic historyZod schema in src/devsync/devsync-validator.ts validates:
Use parseDevsync(devsync) from @devsync/src/devsync/devsync.ts for validation.
import devsync, { devsyncGlobalFields, languages, defaultLang, parseDevsync } from '@devsync/src/devsync/devsync'
Required structure for a Devsync portfolio template:
your-template/
├── public/
│ ├── poster-light-mode.webp # Light theme preview (600x315px)
│ ├── poster-dark-mode.webp # Dark theme preview (600x315px)
│ └── icons/ # Optional custom icons (linkedin.svg, github.svg, etc.)
├── src/
│ └── devsync/ # Copy from @devsync/src/devsync/
│ ├── devsync.ts
│ ├── devsync-validator.ts
│ └── fields-translations.ts
├── .github/
│ └── workflows/
│ └── update-on-devsync-change.yml
├── DEVSYNC.json
└── package.json
Required files:
public/poster-*.webp - Preview images for template gallerysrc/devsync/ - Core Devsync modules for translations and validation.github/workflows/update-on-devsync-change.yml - Auto-update workflowDEVSYNC.json - Configuration templatepackage.json - With devsync.pathToCompiledCV and devsync.poster configOptional:
public/icons/ - Custom icon SVGs referenced in socialMedia[].icon and links[].iconWhen publishing your Devsync template, include poster images for preview:
{
"name": "@your-username/devsync-template",
"devsync": {
"pathToCompiledCV": "src/[lang]/cv.html"
}
}
Poster images (required for template preview):
public/poster-light-mode.webp - Light theme preview (recommended: 600x315px)public/poster-dark-mode.webp - Dark theme preview (recommended: 600x315px)If posters are not provided, the default Devsync posters will be shown.
/icons/ for local, CDN URLs for externalMM/YY - Present or MM/YY - MM/YY