<mxfile host="app.diagrams.net" modified="2026-04-17T12:00:00.000Z" agent="Claude" version="24.7.17">
  <diagram id="c4-context" name="C4 System Context">
    <mxGraphModel dx="1400" dy="900" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1400" pageHeight="1050" math="0" shadow="0">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>

        <!-- Title -->
        <mxCell id="title" value="System Context Diagram — Portfolio Website" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=20;fontStyle=1;fontColor=#1F2937;" vertex="1" parent="1">
          <mxGeometry x="350" y="20" width="700" height="40" as="geometry"/>
        </mxCell>
        <mxCell id="subtitle" value="[C4 Level 1 — System Context]" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;fontSize=12;fontStyle=2;fontColor=#6B7280;" vertex="1" parent="1">
          <mxGeometry x="500" y="55" width="400" height="25" as="geometry"/>
        </mxCell>

        <!-- Person: Visitor -->
        <mxCell id="visitor" value="&lt;b&gt;Visitor&lt;/b&gt;&lt;br&gt;&lt;br&gt;A person who wants to&lt;br&gt;learn about Sven's work,&lt;br&gt;download a CV, or&lt;br&gt;send a message" style="shape=mxgraph.c4.person2;whiteSpace=wrap;html=1;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0]];fillColor=#08427B;fontColor=#ffffff;strokeColor=#073B6F;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="580" y="100" width="200" height="180" as="geometry"/>
        </mxCell>

        <!-- Person: Recruiter / Hiring Manager -->
        <mxCell id="recruiter" value="&lt;b&gt;Recruiter /&lt;br&gt;Hiring Manager&lt;/b&gt;&lt;br&gt;&lt;br&gt;Reviews portfolio,&lt;br&gt;downloads CV,&lt;br&gt;sends contact request" style="shape=mxgraph.c4.person2;whiteSpace=wrap;html=1;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0]];fillColor=#08427B;fontColor=#ffffff;strokeColor=#073B6F;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="130" y="100" width="200" height="180" as="geometry"/>
        </mxCell>

        <!-- Person: Developer (Sven) -->
        <mxCell id="developer" value="&lt;b&gt;Developer&lt;/b&gt;&lt;br&gt;(Sven)&lt;br&gt;&lt;br&gt;Pushes code,&lt;br&gt;manages infra,&lt;br&gt;reviews docs" style="shape=mxgraph.c4.person2;whiteSpace=wrap;html=1;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0]];fillColor=#08427B;fontColor=#ffffff;strokeColor=#073B6F;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="1030" y="100" width="200" height="180" as="geometry"/>
        </mxCell>

        <!-- Person: Content Editor (Sven in author role) -->
        <mxCell id="content_editor" value="&lt;b&gt;Content Editor&lt;/b&gt;&lt;br&gt;(Sven)&lt;br&gt;&lt;br&gt;Creates and manages&lt;br&gt;site content via&lt;br&gt;Strapi CMS admin" style="shape=mxgraph.c4.person2;whiteSpace=wrap;html=1;align=center;metaEdit=1;points=[[0.5,0,0],[1,0.5,0],[1,0.75,0],[0.75,1,0],[0.5,1,0],[0.25,1,0],[0,0.75,0],[0,0.5,0]];fillColor=#08427B;fontColor=#ffffff;strokeColor=#073B6F;fontSize=11;" vertex="1" parent="1">
          <mxGeometry x="1250" y="100" width="200" height="180" as="geometry"/>
        </mxCell>

        <!-- System: Portfolio Website -->
        <mxCell id="portfolio_system" value="&lt;b&gt;Portfolio Website&lt;/b&gt;&lt;br&gt;[Software System]&lt;br&gt;&lt;br&gt;Showcases professional experience,&lt;br&gt;projects, skills, and certifications.&lt;br&gt;Provides contact form and CV download.&lt;br&gt;Hosts technical documentation.&lt;br&gt;Uses headless CMS for content management." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#438DD5;fontColor=#ffffff;strokeColor=#3C7FC0;arcSize=5;fontSize=11;align=center;" vertex="1" parent="1">
          <mxGeometry x="460" y="420" width="440" height="160" as="geometry"/>
        </mxCell>

        <!-- External: GitHub -->
        <mxCell id="github_system" value="&lt;b&gt;GitHub&lt;/b&gt;&lt;br&gt;[External System]&lt;br&gt;&lt;br&gt;Source code hosting,&lt;br&gt;CI/CD via GitHub Actions,&lt;br&gt;GitHub Pages (backup docs)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#999999;fontColor=#ffffff;strokeColor=#8C8C8C;arcSize=5;fontSize=11;align=center;" vertex="1" parent="1">
          <mxGeometry x="970" y="420" width="280" height="140" as="geometry"/>
        </mxCell>

        <!-- External: Gmail SMTP -->
        <mxCell id="gmail_system" value="&lt;b&gt;Gmail SMTP&lt;/b&gt;&lt;br&gt;[External System]&lt;br&gt;&lt;br&gt;Delivers contact form&lt;br&gt;notification and confirmation&lt;br&gt;emails via SMTP/TLS" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#999999;fontColor=#ffffff;strokeColor=#8C8C8C;arcSize=5;fontSize=11;align=center;" vertex="1" parent="1">
          <mxGeometry x="480" y="720" width="260" height="140" as="geometry"/>
        </mxCell>

        <!-- External: Microsoft Entra ID -->
        <mxCell id="entra_system" value="&lt;b&gt;Microsoft Entra ID&lt;/b&gt;&lt;br&gt;[External System]&lt;br&gt;&lt;br&gt;OIDC federation for CI/CD,&lt;br&gt;EasyAuth SSO for dev env" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#999999;fontColor=#ffffff;strokeColor=#8C8C8C;arcSize=5;fontSize=11;align=center;" vertex="1" parent="1">
          <mxGeometry x="110" y="420" width="260" height="140" as="geometry"/>
        </mxCell>

        <!-- External: Azure Cost Management (NEW) -->
        <mxCell id="cost_mgmt" value="&lt;b&gt;Azure Cost Management&lt;/b&gt;&lt;br&gt;[External System]&lt;br&gt;&lt;br&gt;Queried weekly by cost-report&lt;br&gt;workflow to generate cost&lt;br&gt;dashboard in docs" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#999999;fontColor=#ffffff;strokeColor=#8C8C8C;arcSize=5;fontSize=11;align=center;" vertex="1" parent="1">
          <mxGeometry x="760" y="720" width="280" height="140" as="geometry"/>
        </mxCell>

        <!-- Relationships -->
        <!-- Visitor → Portfolio -->
        <mxCell id="e1" value="Browses portfolio,&lt;br&gt;submits contact form,&lt;br&gt;downloads CV" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;fontColor=#707070;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" source="visitor" target="portfolio_system" parent="1">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>

        <!-- Recruiter → Portfolio -->
        <mxCell id="e2" value="Reviews experience,&lt;br&gt;downloads CV,&lt;br&gt;sends message" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;fontColor=#707070;" edge="1" source="recruiter" target="portfolio_system" parent="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="230" y="380"/>
              <mxPoint x="560" y="380"/>
            </Array>
          </mxGeometry>
        </mxCell>

        <!-- Developer → GitHub -->
        <mxCell id="e3" value="Pushes code,&lt;br&gt;triggers deploys" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;fontColor=#707070;" edge="1" source="developer" target="github_system" parent="1">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>

        <!-- Developer → Portfolio (reviews docs) -->
        <mxCell id="e3b" value="Reviews docs" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;fontColor=#707070;" edge="1" source="developer" target="portfolio_system" parent="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1130" y="380"/>
              <mxPoint x="800" y="380"/>
            </Array>
          </mxGeometry>
        </mxCell>

        <!-- Content Editor → Portfolio Website -->
        <mxCell id="e_editor" value="Manages content via&lt;br&gt;Strapi CMS admin&lt;br&gt;(cms.sven-relijveld.com)" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;fontColor=#707070;" edge="1" source="content_editor" target="portfolio_system" parent="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1350" y="380"/>
              <mxPoint x="800" y="380"/>
            </Array>
          </mxGeometry>
        </mxCell>

        <!-- Portfolio → Gmail -->
        <mxCell id="e4" value="Sends emails via&lt;br&gt;SMTP/TLS (port 587)" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;fontColor=#707070;" edge="1" source="portfolio_system" target="gmail_system" parent="1">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>

        <!-- Portfolio → Entra ID -->
        <mxCell id="e5" value="Authenticates dev&lt;br&gt;environment users" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;fontColor=#707070;" edge="1" source="portfolio_system" target="entra_system" parent="1">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>

        <!-- GitHub → Portfolio -->
        <mxCell id="e6" value="Deploys via&lt;br&gt;GitHub Actions" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;fontSize=9;fontColor=#707070;" edge="1" source="github_system" target="portfolio_system" parent="1">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>

        <!-- GitHub → Entra (OIDC) -->
        <mxCell id="e7" value="OIDC federation" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;dashed=1;fontSize=9;fontColor=#707070;" edge="1" source="github_system" target="entra_system" parent="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1110" y="630"/>
              <mxPoint x="240" y="630"/>
            </Array>
          </mxGeometry>
        </mxCell>

        <!-- GitHub → Cost Management (cost-report workflow) -->
        <mxCell id="e8" value="cost-report.yml&lt;br&gt;queries weekly" style="edgeStyle=orthogonalEdgeStyle;rounded=1;html=1;strokeColor=#707070;strokeWidth=1.5;dashed=1;fontSize=9;fontColor=#707070;" edge="1" source="github_system" target="cost_mgmt" parent="1">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="1110" y="790"/>
            </Array>
          </mxGeometry>
        </mxCell>

        <!-- Legend -->
        <mxCell id="legend_bg" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#F9FAFB;strokeColor=#D1D5DB;arcSize=5;" vertex="1" parent="1">
          <mxGeometry x="30" y="750" width="300" height="155" as="geometry"/>
        </mxCell>
        <mxCell id="leg_title" value="Legend" style="text;html=1;strokeColor=none;fillColor=none;fontSize=11;fontStyle=1;fontColor=#374151;" vertex="1" parent="1">
          <mxGeometry x="45" y="758" width="60" height="20" as="geometry"/>
        </mxCell>
        <mxCell id="leg_person" value="" style="shape=mxgraph.c4.person2;fillColor=#08427B;fontColor=#ffffff;strokeColor=#073B6F;" vertex="1" parent="1">
          <mxGeometry x="50" y="785" width="24" height="28" as="geometry"/>
        </mxCell>
        <mxCell id="leg_person_lbl" value="Person" style="text;html=1;strokeColor=none;fillColor=none;fontSize=10;fontColor=#374151;" vertex="1" parent="1">
          <mxGeometry x="82" y="790" width="80" height="18" as="geometry"/>
        </mxCell>
        <mxCell id="leg_sys" value="" style="rounded=1;fillColor=#438DD5;strokeColor=#3C7FC0;" vertex="1" parent="1">
          <mxGeometry x="50" y="820" width="24" height="18" as="geometry"/>
        </mxCell>
        <mxCell id="leg_sys_lbl" value="Software System (this project)" style="text;html=1;strokeColor=none;fillColor=none;fontSize=10;fontColor=#374151;" vertex="1" parent="1">
          <mxGeometry x="82" y="820" width="200" height="18" as="geometry"/>
        </mxCell>
        <mxCell id="leg_ext" value="" style="rounded=1;fillColor=#999999;strokeColor=#8C8C8C;" vertex="1" parent="1">
          <mxGeometry x="50" y="845" width="24" height="18" as="geometry"/>
        </mxCell>
        <mxCell id="leg_ext_lbl" value="External System" style="text;html=1;strokeColor=none;fillColor=none;fontSize=10;fontColor=#374151;" vertex="1" parent="1">
          <mxGeometry x="82" y="845" width="120" height="18" as="geometry"/>
        </mxCell>
        <mxCell id="leg_new" value="★ Updated: Strapi CMS added; Content Editor persona" style="text;html=1;strokeColor=none;fillColor=#FEF9C3;rounded=1;arcSize=10;fontSize=9;fontStyle=2;fontColor=#374151;" vertex="1" parent="1">
          <mxGeometry x="42" y="872" width="265" height="20" as="geometry"/>
        </mxCell>

      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
