Merge pull request jorgef#20 from setagana/differentiated-graphs

Add differentiated graphs for dark and light mode

Developer.md

@@ -14,7 +14,11 @@ Role also known as programmer or software engineer, requires a deep level of tec
 
 ## D1 - Developer 1
 
-![Developer 1](/charts/developer-1.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/developer-1-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/developer-1.png">
+  <img alt="Developer 1" src="/charts/developer-1.png">
+</picture>
 
 * **Adopts**: actively learns and adopts the technology and tools defined by the team
 * **Enhances**: successfully pushes new features and bug fixes to improve and extend the system
@@ -24,7 +28,11 @@ Role also known as programmer or software engineer, requires a deep level of tec
 
 ## D2 - Developer 2
 
-![Developer 2](/charts/developer-2.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/developer-2-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/developer-2.png">
+  <img alt="Developer 2" src="/charts/developer-2.png">
+</picture>
 
 * **Adopts**: actively learns and adopts the technology and tools defined by the team
 * **Designs**: designs and implements medium to large size features while reducing the system's tech debt
@@ -34,7 +42,11 @@ Role also known as programmer or software engineer, requires a deep level of tec
 
 ## D3 - Developer 3
 
-![Developer 3](/charts/developer-3.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/developer-3-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/developer-3.png">
+  <img alt="Developer 3" src="/charts/developer-3.png">
+</picture>
 
 * **Specializes**: is the go-to person for one or more technologies and takes initiative to learn new ones
 * **Designs**: designs and implements medium to large size features while reducing the system's tech debt
@@ -44,7 +56,11 @@ Role also known as programmer or software engineer, requires a deep level of tec
 
 ## D4 - Developer 4
 
-![Developer 4](/charts/developer-4.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/developer-4-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/developer-4.png">
+  <img alt="Developer 4" src="/charts/developer-4.png">
+</picture>
 
 * **Evangelizes**: researches, creates proofs of concept and introduces new technologies to the team
 * **Owns**: owns the production operation and monitoring of the system and is aware of its SLAs
@@ -54,7 +70,11 @@ Role also known as programmer or software engineer, requires a deep level of tec
 
 ## D5 - Developer 5
 
-![Developer 5](/charts/developer-5.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/developer-5-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/developer-5.png">
+  <img alt="Developer 5" src="/charts/developer-5.png">
+</picture>
 
 * **Masters**: has very deep knowledge about the whole technology stack of the system
 * **Evolves**: evolves the architecture to support future requirements and defines its SLAs
@@ -64,7 +84,11 @@ Role also known as programmer or software engineer, requires a deep level of tec
 
 ## D6 - Developer 6
 
-![Developer 6](/charts/developer-6.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/developer-6-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/developer-6.png">
+  <img alt="Developer 6" src="/charts/developer-6.png">
+</picture>
 
 * **Creates**: designs and creates new technologies that are widely used either by internal or external teams
 * **Leads**: leads the technical excellence of the system and creates plans to mitigate outages
@@ -74,7 +98,11 @@ Role also known as programmer or software engineer, requires a deep level of tec
 
 ## D7 - Developer 7
 
-![Developer 7](/charts/developer-7.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/developer-7-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/developer-7.png">
+  <img alt="Developer 7" src="/charts/developer-7.png">
+</picture>
 
 * **Creates**: designs and creates new technologies that are widely used either by internal or external teams
 * **Leads**: leads the technical excellence of the system and creates plans to mitigate outages

EngineeringManager.md

@@ -12,7 +12,11 @@ If you have other managers as direct reports, you might want to read the [Managi
 
 ## EM5 - Engineering Manager 5
 
-![Engineering Manager 5](/charts/engineeringmanager-5.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/engineeringmanager-5-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/engineeringmanager-5.png">
+  <img alt="Engineering Manager 5" src="/charts/engineeringmanager-5.png">
+</picture>
 
 * **Evangelizes**: researches, creates proofs of concept and introduces new technologies to the team
 * **Owns**: owns the production operation and monitoring of the system and is aware of its SLAs
@@ -22,7 +26,11 @@ If you have other managers as direct reports, you might want to read the [Managi
 
 ## EM6 - Engineering Manager 6
 
-![Engineering Manager 5](/charts/engineeringmanager-6.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/engineeringmanager-6-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/engineeringmanager-6.png">
+  <img alt="Engineering Manager 6" src="/charts/engineeringmanager-6.png">
+</picture>
 
 * **Evangelizes**: researches, creates proofs of concept and introduces new technologies to the team
 * **Evolves**: evolves the architecture to support future requirements and defines its SLAs
@@ -32,7 +40,11 @@ If you have other managers as direct reports, you might want to read the [Managi
 
 ## EM7 - Engineering Manager 7
 
-![Engineering Manager 5](/charts/engineeringmanager-7.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/engineeringmanager-7-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/engineeringmanager-7.png">
+  <img alt="Engineering Manager 7" src="/charts/engineeringmanager-7.png">
+</picture>
 
 * **Evangelizes**: researches, creates proofs of concept and introduces new technologies to the team
 * **Evolves**: evolves the architecture to support future requirements and defines its SLAs

Managing-Managers.md

@@ -5,7 +5,11 @@
 When you get to higher levels of the manager's ladder, chances are that some of your direct reports will be other managers. 
 The manager's actions have a bigger impact on their teams and therefore you need to set expectations differently.
 
-![Dashboard](/charts/dashboard.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/dashboard-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/dashboard.png">
+  <img alt="Dashboard" src="/charts/dashboard.png">
+</picture>
 
 How do you assess the managing skills of other managers?
 Managers face conflicting forces all the time, and a big part of their job is to keep things balanced.

README.md

@@ -6,7 +6,11 @@ Although the framework uses roles and levels that are somewhat standard in the U
 
 The framework relies heavily in radar charts to show visually the different perspectives and expectations of a given position:
 
-![Template Chart](charts/template.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="charts/template-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="charts/template.png">
+  <img alt="Template Chart" src="charts/template.png">
+</picture>
 
 # Career Ladders
 

TechLead.md

@@ -12,7 +12,11 @@ Role also known as dev lead, is the owner of the system and requires a unique ba
 
 ## TL4 - Tech Lead 4
 
-![Tech Lead 4](/charts/techlead-4.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/techlead-4-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/techlead-4.png">
+  <img alt="Tech Lead 4" src="/charts/techlead-4.png">
+</picture>
 
 * **Specializes**: is the go-to person for one or more technologies and takes initiative to learn new ones
 * **Owns**: owns the production operation and monitoring of the system and is aware of its SLAs
@@ -22,7 +26,11 @@ Role also known as dev lead, is the owner of the system and requires a unique ba
 
 ## TL5 - Tech Lead 5
 
-![Tech Lead 5](/charts/techlead-5.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/techlead-5-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/techlead-5.png">
+  <img alt="Tech Lead 5" src="/charts/techlead-5.png">
+</picture>
 
 * **Evangelizes**: researches, creates proofs of concept and introduces new technologies to the team
 * **Evolves**: evolves the architecture to support future requirements and defines its SLAs
@@ -32,7 +40,11 @@ Role also known as dev lead, is the owner of the system and requires a unique ba
 
 ## TL6 - Tech Lead 6
 
-![Tech Lead 6](/charts/techlead-6.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/techlead-6-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/techlead-6.png">
+  <img alt="Tech Lead 6" src="/charts/techlead-6.png">
+</picture>
 
 * **Masters**: has very deep knowledge about the whole technology stack of the system
 * **Leads**: leads the technical excellence of the system and creates plans to mitigate outages
@@ -42,7 +54,11 @@ Role also known as dev lead, is the owner of the system and requires a unique ba
 
 ## TL7 - Tech Lead 7
 
-![Tech Lead 7](/charts/techlead-7.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/techlead-7-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/techlead-7.png">
+  <img alt="Tech Lead 7" src="/charts/techlead-7.png">
+</picture>
 
 * **Masters**: has very deep knowledge about the whole technology stack of the system
 * **Leads**: leads the technical excellence of the system and creates plans to mitigate outages

TechnicalProgramManager.md

@@ -12,7 +12,11 @@ Role responsible for coordinating and driving to completion initiatives that exp
 
 ## TPM4 - Technical Program Manager 4
 
-![Technical Program Manager 4](/charts/technicalprogrammanager-4.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/technicalprogrammanager-4-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/technicalprogrammanager-4.png">
+  <img alt="Technical Program Manager 4" src="/charts/technicalprogrammanager-4.png">
+</picture>
 
 * **Specializes**: is the go-to person for one or more technologies and takes initiative to learn new ones
 * **Designs**: designs and implements medium to large size features while reducing the system's tech debt
@@ -22,7 +26,11 @@ Role responsible for coordinating and driving to completion initiatives that exp
 
 ## TPM5 - Technical Program Manager 5
 
-![Technical Program Manager 5](/charts/technicalprogrammanager-5.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/technicalprogrammanager-5-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/technicalprogrammanager-5.png">
+  <img alt="Technical Program Manager 5" src="/charts/technicalprogrammanager-5.png">
+</picture>
 
 * **Specializes**: is the go-to person for one or more technologies and takes initiative to learn new ones
 * **Designs**: designs and implements medium to large size features while reducing the system's tech debt
@@ -32,7 +40,11 @@ Role responsible for coordinating and driving to completion initiatives that exp
 
 ## TPM6 - Technical Program Manager 6
 
-![Technical Program Manager 6](/charts/technicalprogrammanager-6.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/technicalprogrammanager-6-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/technicalprogrammanager-6.png">
+  <img alt="Technical Program Manager 6" src="/charts/technicalprogrammanager-6.png">
+</picture>
 
 * **Specializes**: is the go-to person for one or more technologies and takes initiative to learn new ones
 * **Owns**: owns the production operation and monitoring of the system and is aware of its SLAs
@@ -42,7 +54,11 @@ Role responsible for coordinating and driving to completion initiatives that exp
 
 ## TPM7 - Technical Program Manager 7
 
-![Technical Program Manager 7](/charts/technicalprogrammanager-7.png)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="/charts/technicalprogrammanager-7-dark.png">
+  <source media="(prefers-color-scheme: light)" srcset="/charts/technicalprogrammanager-7.png">
+  <img alt="Technical Program Manager 7" src="/charts/technicalprogrammanager-7.png">
+</picture>
 
 * **Specializes**: is the go-to person for one or more technologies and takes initiative to learn new ones
 * **Evolves**: evolves the architecture to support future requirements and defines its SLAs