Overview All text content in Dev Showcase is stored in JSON files located in wwwroot/languages/. The portfolio supports multiple languages (English and Spanish by default), with easy extensibility for additional languages.
Language Files Content is organized in two main files:
wwwroot/languages/en.json - English contentwwwroot/languages/es.json - Spanish content
Both files follow the same structure, making it easy to maintain consistency across languages.
Content Structure The JSON files are organized into logical sections:
{ "header" : { ... }, "navigation" : { ... }, "introduction" : { ... }, "skills" : { ... }, "projects" : { ... }, "education" : { ... } }
Customize your name and typewriter effect:
"typewriter" : { "prefix" : "I'm " , "phrases" : [ "Ricardo Alejandro Pérez Santillán" , "a Data enthusiast" , "an automation addict" ] }, "header" : { "hello" : "#HELLO WORLD" , "name" : "I'm Ricardo Alejandro Pérez Santillán" }
Customization:
typewriter.phrases: Add or modify rotating phrases (3-5 phrases work best)header.hello: Change the greeting textheader.name: Update your full name
Introduction Section Update your personal information and professional summary:
"introduction" : { "aboutTitle" : "About Me" , "aboutContent_dataScience" : "I am a software developer with..." , "aboutContent_webDev" : "Web developer with a background in..." , "aboutContent_dataAnalyst" : "Data Analyst with a background in..." , "skillsTitle" : "Skills & Technologies" , "panels" : { "webDev" : "Web Development" , "desktopDev" : "Desktop Development" , "databases" : "Databases" , "erp" : "ERP" , "versionControl" : "Version Control" , "methodologies" : "Methodologies" }, "certificationsTitle" : "Certifications" , "goalTitle" : "Professional Goal" , "goalContent" : "Evolve toward Data Science roles..." , "journeyTitle" : "My Journey" , "journeyContent" : "My journey through technology led me..." }
The portfolio can display different “About Me” content based on context. Update all aboutContent_* fields to match your various professional roles.
Skills Section Skill Categories Define your skill panels:
"skills" : { "panels" : { "webDev" : "Web Development" , "dataScience" : "Data Science" , "databases" : "Databases" , "desktopDev" : "Desktop Development" , "versionControl" : "Version Control" , "generalProgramming" : "General Programming" } }
Progress Bars Set proficiency levels for each technology (0-100):
"progressBars" : { "webDev" : { "htmlcss" : 90 , "aspnet" : 85 , "csharp" : 85 , "javascript" : 65 }, "dataScience" : { "excel" : 90 , "python" : 75 , "powerbi" : 75 , "pandasnumpy" : 70 , "matplotlibseaborn" : 65 }, "databases" : { "sqlserver" : 85 , "oracle" : 85 , "mysql" : 80 , "derby" : 30 } }
Guidelines for proficiency values:
90-100 : Expert level, extensive production experience75-89 : Advanced, comfortable with complex tasks60-74 : Intermediate, can work independently40-59 : Basic understanding, needs guidance0-39 : Beginner, limited experience
Soft Skills Add your soft skills with proficiency ratings:
"progressBars" : { "softSkills" : { "teamwork" : 88 , "confidence" : 82 , "independence" : 85 , "initiative" : 80 , "problemSolving" : 90 } }
List of soft skills to display:
"soft" : { "criticalThinking" : "Critical Thinking" , "analyticalThinking" : "Analytical Thinking" , "communication" : "Effective Communication" , "teamwork" : "Teamwork" , "adaptability" : "Adaptability" , "timeManagement" : "Time Management" , "attention" : "Attention to Detail" , "persistence" : "Persistence" , "workEthic" : "Work Ethics" }
Projects Section Showcase your professional and personal projects:
Work Experience "projects" : { "work" : { "blockTitle" : "Professional Experience" , "daikin" : { "name" : "Daikin Manufacturing México" , "role" : "Software Developer" , "period" : "Sept 2024 – Dec 2025" , "description" : "Development and support of enterprise applications..." , "resp" : { "maintenance" : "Maintenance of critical production applications" , "apis" : "Design and implementation of internal APIs" , "sql" : "SQL query and stored procedure optimization" , "ux" : "UX/UI improvements in internal systems" , "agile" : "Participation in agile methodologies and Scrum" }, "projects" : { "overtime" : "OverTime Request — Overtime request management" , "etiquetas" : "Labels — Production label generation system" , "masterLabel" : "Master Label — Master labeling control" , "budget" : "Budget Control — Budget control module" } } } }
Personal Projects "personal" : { "blockTitle" : "Personal Projects & Datathons" , "devportfolio" : { "name" : "DevPortfolio" , "short" : "Professional portfolio" , "description" : "Professional web portfolio with spatial design..." , "h1" : "Dark mode design with animated particles" , "h2" : "Multilanguage ES/EN support with dynamic JSON" , "h3" : "Vocational charts with Chart.js" , "h4" : "Infinite carousel with touch support" , "h5" : "Downloadable CV in two languages" }, "wids2022" : { "name" : "WiDS Datathon 2022" , "short" : "Breast cancer detection" , "description" : "Participation in the WiDS 2022 datathon..." , "h1" : "Exploratory analysis of clinical data" , "h2" : "Preprocessing and missing value handling" , "h3" : "Binary classification model training" , "h4" : "Evaluation with AUC-ROC metrics" } }
Each project supports up to 5 highlights (h1-h5) and multiple image descriptions. Use these to showcase key features and achievements.
Education Section Academic Training "education" : { "academic" : { "title" : "Academic Training" , "forge" : { "institution" : "Fundación Forge" , "program" : "Professional competencies" , "period" : "Nov 2025 – Dec 2025" }, "smart" : { "institution" : "Smart Teaching" , "program" : "English Level B2 TOEFL IBT" , "period" : "Feb 2025 – Nov 2025" }, "utan" : { "institution" : "Universidad Tangamanga" , "program" : "Information Technology Engineering" , "period" : "Jul 2022 – Aug 2025" } } }
Professional Development "professional" : { "title" : "Professional Development" , "cluster" : { "institution" : "Automotive Cluster" , "program" : "Technological trends in the automotive sector" } }
Certifications "certificates" : { "forge" : { "title" : "Forge Badges" , "commitment" : "Commitment to Learning" , "teamwork" : "Teamwork" , "achievement" : "Achievement Orientation" , "leadership" : "Personal Leadership" , "year" : "2025" }, "udemy" : { "title" : "Udemy" , "javascript" : "JavaScript — Expert" , "javascriptDate" : "2024" , "python" : "Python — Data Analysis" , "pythonDate" : "2025" }, "mos" : { "title" : "Microsoft Office Specialist" , "excel" : "Excel — MOS 2019" , "word" : "Word — MOS 2019" , "powerpoint" : "PowerPoint — MOS 2019" , "year" : "2019" } }
Adding New Sections To add a completely new content section:
Add the content to JSON:
"newSection" : { "title" : "My New Section" , "content" : "Section content here" , "items" : [ "Item 1" , "Item 2" ] }
Update both language files (en.json and es.json) with the same structure
Reference the content in your HTML/JavaScript using the JSON keys
Always maintain the same JSON structure across all language files. Missing keys will cause errors when users switch languages.
Navigation Labels Update navigation menu text:
"navigation" : { "introduction" : "Introduction" , "skills" : "Skills" , "projects" : "Projects & Experience" , "education" : "Education" , "downloadCV" : "Download CV" }
Customize social media tooltips:
"sidebar" : { "socialTitle" : "Social Media" , "tooltips" : { "whatsapp" : "WhatsApp" , "linkedin" : "LinkedIn" , "github" : "GitHub" , "twitter" : "X (Twitter)" , "gmail" : "Gmail" } }
Testing Your Changes
Edit JSON files
Update content in wwwroot/languages/en.json and wwwroot/languages/es.json
Validate JSON syntax
Use a JSON validator to ensure proper formatting (no trailing commas, proper quotes)
Test language switching
Run your portfolio and switch between languages to verify all content displays correctly
Check responsive views
Test on mobile and tablet to ensure content fits properly
Best Practices
Keep descriptions concise and impactful (2-3 sentences)
Use consistent tense (present for current roles, past for previous)
Include specific metrics and achievements where possible
Maintain parallel structure across similar sections
Keep proficiency percentages honest and realistic
Common Issues
Content not updating after changes
Clear your browser cache or do a hard refresh (Ctrl+Shift+R or Cmd+Shift+R). The browser may be caching the old JSON file.
Language switching shows blank content
Ensure both language files have identical keys. Check for typos in key names and verify JSON syntax is valid.
Special characters not displaying correctly
Ensure your JSON files are saved with UTF-8 encoding. Use Unicode escape sequences for special characters if needed (e.g., \u00e9 for é).
Next Steps
Theming Customize colors, fonts, and visual theme
Styling Guide Learn about CSS architecture and component styling