racafe IDE
Loading workspace...
rafaelcarrion.dev
M↓ README.md

Welcome to rafaelcarrion.dev

Hello! I'm Rafael Carrión, a Senior Software Engineer / Solution Architect / CTO based in Nuremberg, Germany. Currently working at noris network AG and co-owning Technit Solutions México , where I've led the development of 30+ mobile applications. This portfolio is designed to look and feel like VS Code — because if you're going to read about a developer, why not do it in their natural habitat?

Quick Start

Navigate through the file explorer on the left to discover different sections:

  • README.md — You are here
  • about.md — Learn more about me
  • experience.json — My professional journey
  • skills.ts — Technical toolkit
  • education.yaml — Education & certifications
  • contact.tsx — Let's connect

Features

This interactive portfolio includes:

  • File Explorer — Click files to open them as tabs
  • Tab System — Multiple files open at once, just like a real IDE
  • Search — Search for files and content
  • Source Control — View Git commit history and diffs
  • Customize Panel — Customize the appearance of the IDE
  • Themes — Dark+, Light and Monokai
  • Syntax Highlighting — Code displayed with proper colors
  • Mobile Responsive — Collapsible sidebar and touch-friendly navigation
  • AI Chat Assistant — Ask questions about Rafael's experience

About This Project

Built with Astro and styled with Tailwind CSS. The design faithfully recreates VS Code's Dark+ theme with attention to the small details: the activity bar icons, the file tree animations, and the status bar at the bottom.

"Any sufficiently advanced portfolio is indistinguishable from an actual IDE."

Tip
Use the file explorer on the left to navigate, or click on any tab to switch between open files.

About Me

Hi there! I'm Rafael Carrión, a Senior Software Engineer / Solution Architect / CTO based in Nuremberg, Germany. I'm currently working at noris network AG as Senior Software Engineer, and I'm also the co-owner and CTO of Technit Solutions México , where I've led the development of 30+ mobile applications.

What I Do

Senior Software Engineer at noris network AG and CTO/Co-owner of Technit Solutions México with 15+ years of experience in solution architecture, full-stack development, and mobile app development. Led development of 30+ mobile applications and enterprise software solutions. Expert in system design, cloud architecture, and leading technical teams.

  • Programming Languages: JavaScript, TypeScript, HTML5, Modern CSS, PHP, SQL, Python
  • Frameworks & Libraries: Angular, Ionic, NestJS, React, Laravel, Bootstrap, Materialize, Cordova, Capacitor, Tailwind CSS, Astro, Next.js, TanStack
  • Testing: Jasmine, Jest, Vitest, Cypress, Playwright, Selenium
  • Databases: MySQL/MariaDB, SQL Server, SQLite, Firebase, MongoDB
  • OS & Server: Windows, Mac, Ubuntu, CentOS, Porteus
  • Cloud & DevOps: AWS (EC2, S3, RDS, Lambda, EB, Amplify), Firebase, Docker, CI/CD, Git, Monolithic Architecture, Microservices Architecture, GitLab CI/CD, GitHub Actions, Nixpack, Coolify, Vercel

My Approach

I believe in understanding business problems first, then designing software solutions that best meet the project's needs. I focus on how technology can solve business challenges, which frameworks and platforms to use, how applications will scale, and how they will be maintained. I'm passionate about software architecture, system design, and leading development teams to deliver high-quality solutions.

"The best code is no code at all. The second best is code that's easy to understand and change."

Key Strengths

Teamwork, Active listening & communication, Leadership, Forward thinking, Comfortable working with deadlines, Creative, Adaptability, Problem-solving, Think outside the box

Beyond the Code

When I'm not coding, you'll find me exploring Nuremberg, contributing to open-source projects, or working on new mobile applications and software solutions through Technit.

Let's Connect

I'm always open to interesting conversations and new opportunities. Find me on:

Get in Touch
Want to work together or just say hi? Check out contact.tsx in the file explorer for my contact form. 
 1// skills.ts - Technical Skills & Expertise
 2// Last updated: 2026
 3
 4interface Developer {
 5languages: string[];
 6frameworks: string[];
 7databases: string[];
 8os: string[];
 9cloud: string[];
10}
11
12const rafael: Developer = {
13languages: [
14    "JavaScript",
15    "TypeScript",
16    "HTML5",
17    "Modern CSS",
18    "PHP",
19    "SQL",
20    "Python"
21  ],
22
23frameworks: [
24    "Angular",
25    "Ionic",
26    "NestJS",
27    "React",
28    "Laravel",
29    "Bootstrap",
30    "Materialize",
31    "Cordova",
32    "Capacitor",
33    "Tailwind CSS",
34    "Astro",
35    "Next.js",
36    "TanStack"
37  ],
38
39databases: [
40    "MySQL/MariaDB",
41    "SQL Server",
42    "SQLite",
43    "Firebase",
44    "MongoDB"
45  ],
46
47os: [
48    "Windows",
49    "Mac",
50    "Ubuntu",
51    "CentOS",
52    "Porteus"
53  ],
54
55cloud: [
56    "AWS (EC2, S3, RDS, Lambda, EB, Amplify)",
57    "Firebase",
58    "Docker",
59    "CI/CD",
60    "Git",
61    "Monolithic Architecture",
62    "Microservices Architecture",
63    "GitLab CI/CD",
64    "GitHub Actions",
65    "Nixpack",
66    "Coolify",
67    "Vercel"
68  ],
69};
70
71export default rafael;
<span class="line"><span class="line-number"> 1</span><span class="syntax-comment">// contact.tsx - Get in Touch Component</span></span>
<span class="line"><span class="line-number"> 2</span><span class="syntax-comment">// Rafael Carrión - Senior Software Engineer / Solution Architect / CTO</span></span>
<span class="line"><span class="line-number"> 3</span></span>
<span class="line"><span class="line-number"> 4</span><span class="syntax-keyword">import</span> <span class="syntax-variable">React</span>, &#123; <span class="syntax-variable">useState</span> &#125; <span class="syntax-keyword">from</span> <span class="syntax-string">'react'</span>;</span>
<span class="line"><span class="line-number"> 5</span></span>
<span class="line"><span class="line-number"> 6</span><span class="syntax-keyword">interface</span> <span class="syntax-type">ContactFormProps</span> &#123;</span>
<span class="line"><span class="line-number"> 7</span>  <span class="syntax-variable">recipient</span>: <span class="syntax-type">string</span>;</span>
<span class="line"><span class="line-number"> 8</span>  <span class="syntax-variable">theme</span>?: <span class="syntax-string">'dark'</span> | <span class="syntax-string">'light'</span>;</span>
<span class="line"><span class="line-number"> 9</span>&#125;</span>
<span class="line"><span class="line-number">10</span></span>
<span class="line"><span class="line-number">11</span><span class="syntax-keyword">export const</span> <span class="syntax-function">ContactForm</span>: <span class="syntax-type">React.FC</span>&lt;<span class="syntax-type">ContactFormProps</span>&gt; = (&#123;</span>
<span class="line"><span class="line-number">12</span>  <span class="syntax-variable">recipient</span> = <span class="syntax-string">"rafael@rafaelcarrion.dev"</span>,</span>
<span class="line"><span class="line-number">13</span>  <span class="syntax-variable">theme</span> = <span class="syntax-string">"dark"</span></span>
<span class="line"><span class="line-number">14</span>&#125;) =&gt; &#123;</span>
<span class="line"><span class="line-number">15</span></span>
<span class="line"><span class="line-number">16</span>  <span class="syntax-keyword">return</span> (</span>
<span class="line"><span class="line-number">17</span>    &lt;<span class="syntax-type">form</span> <span class="syntax-variable">className</span>=<span class="syntax-string">"contact-form"</span>&gt;</span>
<span class="line"><span class="line-number">18</span></span>

              19      <Input
20        type="text"
21        name="name"
22        label="Your Name"
23        required={true}
24        value={
            

                25}
26      />
              

              27
28      <Input
29        type="email"
30        name="email"
31        label="Email Address"
32        required={true}
33        value={
            

                34}
35      />
              

              36
37      <TextArea
38        name="message"
39        label="Message"
40        rows={5}
41        required={true}
42        value={
            

                43}
44      />
              

              45
46      <Button
47        type="submit"
48        variant="primary"
49        onClick={handleSubmit}
50      >
            
              51</Button>
            
52
53    </form>
54  );
55};
56
57export default ContactForm;
 1# education.yaml - Education & Certifications
 2# Rafael Carrión - Senior Software Engineer / Solution Architect / CTO
 3
 4certifications:
 5  - name: "Certified Application Developer (CAD)"
 6    issuer: "ServiceNow"
 7    year: 2026
 8
 9  - name: "Certified ServiceNow Administrator (CSA)"
10    issuer: "ServiceNow"
11    year: 2024
12
13education:
14  - degree: "Master in eCommerce"
15    institution: "Tec de Monterrey"
16    location: "México"
17    year: 2011
18    period: "2010 - 2011"
19    honors:
20      - "Master in eCommerce"
21
22  - degree: "Computer Engineering"
23    institution: "Tec de Monterrey"
24    location: "México"
25    year: 2009
26    period: "2005 - 2009"
27    gpa: "95/100"
28    honors:
29      - "Magna Cum Laude"
30      - "Outstanding grade in CENEVAL final global examination"
31    specializations:
32      - "Project Management Specialization"
33      - "Software Engineering Specialization"
34      - "Computer Engineering Core Curriculum"
35
36  - degree: "Advanced English for Science"
37    institution: "Boston University"
38    location: "Boston, USA"
39    year: 2005
40    period: "2004 - 2005"
41    type: "Language Certificate"
42
43continuous_learning:
44  platforms:
45    - "NOW Learning"
46    - "Pluralsight"
47    - "Udemy"
48    - "Frontend Masters"
49  current_focus:
50    - "Cloud Architecture"
51    - "Security Best Practices"
52    - "System Design"
TIMELINE
4 entries
responsibilities.diff +6
+ Developing and maintaining enterprise software solutions
+ Collaborating with cross-functional teams on complex technical challenges
+ Served as ServiceNow developer with primary focus on Customer Service Management (CSM) Portal development
+ Collaboratively designed and developed internal phone directory application using Angular framework
+ Collaboratively designed and developed internal employee timesheet and vacation management system using Angular framework
+ Collaboratively maintained customer-facing portal application built with Angular framework
tech-stack.json 

                    
{
  "technologies": ["JavaScript", "TypeScript", "Node.js", "AWS", "Docker", "ServiceNow", "Angular", "AngularJS"]
}
responsibilities.diff +6
+ Developed Intranet from zero to production using MariaDB, SQL Server, Sybase, and LDAP integration
+ Maintained and upgraded Datawarehouse (SQL Server) with optimized SQL views for controlling department
+ Deployed real-time data dashboards from multiple sources/APIs using Docker and Ruby
+ Configured and deployed Icinga2 for computer system and network monitoring
+ Developed iOS and Android mobile applications for administration board
+ Implemented user and role level security across all systems
tech-stack.json 

                    
{
  "technologies": ["MariaDB", "SQL Server", "Sybase", "LDAP", "Docker", "Ruby", "Icinga2", "iOS", "Android"]
}
responsibilities.diff +8
+ Co-owner and CTO of IT & graphic design company specialized in mobile applications and cloud-based solutions
+ Launched more than 30 mobile applications with many others in development or update status
+ Technology infrastructure and IT operations manager
+ IT software projects budget management and strategic decision making
+ Technology stack decision maker and software solutions architect
+ Client requirements analysis, software solutions planning, deploying, testing and supervising
+ Software development life cycle planning and supervising
+ Interviewing clients and prospects for defining software requirements and presenting solutions
tech-stack.json 

                    
{
  "technologies": ["Ionic", "Angular", "React", "Laravel", "PHP", "JavaScript", "TypeScript", "MySQL", "MongoDB", "AWS", "Firebase"]
}
responsibilities.diff +1
+ Developed Project Management online course based on PMBOK of Project Management Institute (PMI) on Moodle platform
tech-stack.json 

                    
{
  "technologies": ["Moodle", "PHP", "MySQL"]
}
Career journey continues...

Entity Framework Core with MySQL

Published Article

A comprehensive guide on integrating Entity Framework Core with MySQL databases. This article covers best practices, configuration, and real-world examples for .NET developers looking to work with MySQL.

Overview

Entity Framework Core is a powerful ORM for .NET applications, but working with MySQL requires specific configuration and considerations. This guide walks through the complete setup process.

Key Topics Covered

  • Database Configuration - Setting up connection strings and DbContext
  • Model Design - Creating entities with MySQL-compatible data types
  • Migrations - Managing database schema changes
  • Performance Optimization - Query optimization and indexing strategies
  • Common Pitfalls - Avoiding typical issues when using EF Core with MySQL

Code Sample


        
          public class ApplicationDbContext : 
          DbContext
          
{
    
          public DbSet<
          Product> Products { 
          get; set; }
          

    
          protected override void OnConfiguring
          (
          
        
          DbContextOptionsBuilder options)
          
    {
        
          options.UseMySql(
          
            
          connectionString,
          
            
          ServerVersion.AutoDetect(
          connectionString)
          
        );
    }
}

Why This Matters

MySQL remains one of the most popular open-source databases, and understanding how to integrate it with modern .NET applications is a valuable skill. This article bridges the gap between the official documentation and practical implementation.

Read the Full Article
This article was published on my technical blog. The full version includes step-by-step instructions, complete code samples, and troubleshooting tips.

Other Projects

A collection of side projects, experiments, and contributions that showcase different aspects of my development work. These projects range from utility tools to learning experiments.

rafaelcarrion.dev

This very portfolio you're viewing!

A VS Code-inspired interactive portfolio built with Astro and Tailwind CSS. Features include a functional file explorer, tabbed content system, and the iconic Dark+ theme.

  • Stack: Astro, TypeScript, Tailwind CSS
  • Features: File explorer, tabs, syntax highlighting, responsive design

CLI Tools & Automation

Various command-line utilities built for personal productivity and workflow automation:

  • Git workflow helpers - Scripts for common Git operations
  • Project scaffolding - Templates for quick project setup
  • Data processing scripts - Python tools for ETL tasks

Open Source Contributions

I believe in giving back to the community that has helped me grow as a developer. My contributions include:

  • Documentation improvements for popular libraries
  • Bug fixes and feature implementations
  • Issue triage and community support

Learning Projects

Projects built specifically to explore new technologies and concepts:

  • Security labs - CTF challenges and vulnerability research
  • Cloud infrastructure - Terraform and Docker experiments
  • API integrations - Connecting various third-party services
GitHub
Check out my GitHub profile for the latest projects and contributions. 
 1// rafael.config.js - Developer Configuration
 2// WARNING: Modifying these values may cause unexpected behavior
 3
 4module.exports = &#123;
 5name: "Rafael Carrión",
 6location: "Nuremberg",
 7timezone: "Europe/Berlin",
 8
 9  // Core Settings
10coffeeLevel: "critical",
11caffeineThreshold: 3, // cups before functioning
12preferredIDE: "VS Code", // obviously
13darkMode: true, // always
14
15  // Debugging Behavior
16debugMode: process.env.NODE_ENV === "development",
17rubberDuckEnabled: true,
18stackOverflowTabsOpen: 47,
19
20  // Work-Life Balance
21workHours: &#123;
22start: "09:00",
23end: "18:00",
24actualEnd: "whenever the bug is fixed",
25  &#125;,
26
27  // Error Handling
28onError: (err) => &#123;
29    if (err.type === "MERGE_CONFLICT") &#123;
30      return "git stash && cry";
31    &#125;
32    if (err.type === "PRODUCTION_DOWN") &#123;
33      return "panic().then(debug)";
34    &#125;
35    return "console.log('This should never happen')";
36  &#125;,
37
38  // Feature Flags
39features: &#123;
40optimism: true,
41imposterSyndrome: true, // can't disable
42perfectionism: true,
43procrastination: "enabled_for_side_projects",
44  &#125;,
45
46  // Easter Egg
47secretHandshake: "↑ ↑ ↓ ↓ ← → ← → B A",
48&#125;;

You Found a Secret!

"The code is strong with this one..."

Congratulations, curious explorer! You've discovered the hidden .secrets folder. Not many visitors venture this deep into the file tree.

The Konami Code

There's an old legend among developers. A secret combination passed down through generations of gamers and coders alike: 

↑ ↑ ↓ ↓ ← → ← → B A

Some say if you enter this sequence on this very page, something magical might happen...

Hint
Try using your keyboard arrow keys followed by 'B' and 'A'. Who knows what you might unlock?

Why Easter Eggs?

Because coding should be fun! Hidden features and secret messages are a time-honored tradition in software development. They're a way for developers to add personality to their work and reward curious users who explore.

Keep exploring - there might be more secrets hidden in this portfolio... 

 1// achievements.unlock - Hidden Features Registry
 2// Status: CLASSIFIED
 3
 4ACHIEVEMENT_LIST = {
 5
 6  // ══════════════════════════════════════════════
 7  //  DISCOVERABLE EASTER EGGS
 8  // ══════════════════════════════════════════════
 9
10  "SECRET_HUNTER": {
11    name: "Secret Hunter",
12    description: "Found the .secrets folder",
13    status: "[UNLOCKED]",
14    points: 100,
15  },
16
17  "KONAMI_MASTER": {
18    name: "Konami Master",
19    description: "Entered the legendary code",
20    hint: "↑ ↑ ↓ ↓ ← → ← → B A",
21    status: "[LOCKED]",
22    points: 500,
23  },
24
25  "CONFIG_READER": {
26    name: "Config Reader",
27    description: "Read rafael.config.js",
28    status: "[LOCKED]",
29    points: 50,
30  },
31
32  "CAREER_ARCHAEOLOGIST": {
33    name: "Career Archaeologist",
34    description: "Read the career debug logs",
35    status: "[LOCKED]",
36    points: 75,
37  },
38
39  "TAB_HOARDER": {
40    name: "Tab Hoarder",
41    description: "Open all files at once",
42    status: "[LOCKED]",
43    points: 150,
44  },
45
46  "NIGHT_OWL": {
47    name: "Night Owl",
48    description: "Visit the site between 2-4 AM",
49    status: "[LOCKED]",
50    points: 200,
51  },
52
53  // ══════════════════════════════════════════════
54  //  TOTAL POINTS AVAILABLE: 1075
55  //  YOUR SCORE: ???
56  // ══════════════════════════════════════════════
57
58};
 1// career.log - Debug Output from Life
 2// Generated by: rafael.exe v29.0
 3
 4[2004] INFO  - Advanced English for Science at Boston University
 5[2005] INFO  - Started Computer Engineering at Tec de Monterrey
 6[2005] DEBUG  - First "Hello World" executed. Coffee dependency initialized
 7
 8[2009] INFO  - Graduated Computer Engineering - Magna Cum Laude (95/100)
 9[2009] DEBUG  - Outstanding grade in CENEVAL final global examination
10[2009] INFO  - Joined T-Systems Puebla - Developed PMBOK/PMI course on Moodle
11
12[2010] INFO  - Co-founded Technit Solutions México as CTO
13[2010] INFO  - Started Master in eCommerce at Tec de Monterrey
14[2011] INFO  - Completed Master in eCommerce
15[2011] DEBUG  - First mobile app launched through Technit
16
17[2018] INFO  - Joined Schulte & Schmidt GmbH as Solution Architect
18[2018] DEBUG  - Developed Intranet from zero (MariaDB, SQL Server, Sybase, LDAP)
19[2019] INFO  - Deployed real-time dashboards (Docker, Ruby)
20[2020] INFO  - Configured Icinga2 monitoring system
21[2021] INFO  - Developed iOS/Android apps for administration board
22
23[2021] INFO  - Joined noris network AG as Senior Software Engineer
24[2021] DEBUG  - Location updated: Nuremberg, Germany
25[2021] INFO  - Technit: 30+ mobile apps launched milestone reached
26
27[2022] DEBUG  - Balancing dual roles: noris network AG + Technit CTO
28[2023] INFO  - Continuing solution architecture work at Noris
29[2024] DEBUG  - Tech stack: JavaScript, TypeScript, React, Angular, Ionic, Laravel
30
31[2025] INFO  - Technit: Ongoing mobile app development and cloud solutions
32[2025] DEBUG  - Solution architecture expertise: Monolithic & Microservices
33
34[2026] INFO  - Building this VS Code portfolio
35[2026] DEBUG  - Meta moment: you're reading logs inside a fake IDE
36[2026] INFO  - Career.status = "evolving" | Location: Nuremberg, Germany
37
38// EOF - More logs coming soon...