ProfessionalWebsite/case-study-template.html at main · diogogcunha/ProfessionalWebsite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CB6C1S1G32"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-CB6C1S1G32');
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Case Study Title] | Diogo G. Cunha</title>
    <meta name="description" content="Case study: [Brief description of the case study and outcome].">
    <meta name="robots" content="index, follow">
    <meta name="theme-color" content="#f9fafb" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#111827" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="stylesheet" href="styles.css?v=20260223">
    <script src="theme.js?v=20260224" defer></script>
</head>
<body>
    <a href="#main-content" class="skip-link">Skip to main content</a>
    <div class="container">
        <header>
            <nav aria-label="Primary Navigation">
                <a href="/" class="logo">Diogo G. Cunha</a>
                <div class="nav-right">
                    <div class="nav-links">
                        <a href="/#services">How can I help</a>
                        <a href="/#case-studies">Cases</a>
                        <a href="/#about">About</a>
                        <a href="/#contact">Contact</a>
                    </div>
                    <button class="theme-toggle" type="button" data-theme-toggle aria-label="Switch theme" title="Switch theme">
                        <span class="theme-toggle-icon" aria-hidden="true">☀️</span>
                    </button>
                </div>
            </nav>
        </header>

        <main id="main-content">
            <div class="case-study-header">
                <h1>[Case Study Title]</h1>
                <div class="case-study-meta">
                    <div class="case-study-meta-item">
                        <span class="case-study-meta-label">Market</span>
                        <span>[Market/Industry]</span>
                    </div>
                    <div class="case-study-meta-item">
                        <span class="case-study-meta-label">Scale</span>
                        <span>[Key Metric/Scale]</span>
                    </div>
                    <div class="case-study-meta-item">
                        <span class="case-study-meta-label">Role</span>
                        <span>[Your Role/Contribution]</span>
                    </div>
                </div>
            </div>

            <img src="[Unsplash Image URL]" alt="[Image Description]" class="case-study-hero-img">

            <div class="case-study-content">
                <h2>The Challenge</h2>
                <p>
                    [Open with the business consequence of inaction: what risk existed if this was not solved (market share, cost, churn, compliance, delivery delay, etc.).]
                </p>
                <p>
                    [Describe the initial problem, the market context, and the specific pain points. Add an explicit timeline anchor, e.g., "Over 12 months..." or "In the first 90 days..."]
                </p>

                <h2>My Role</h2>
                <p>
                    [Specify your personal contribution vs. team contribution. Example: architecture decisions, stakeholder alignment, coaching managers, migration sequencing, etc.]
                </p>

                <h2>The Solution</h2>
                <p>
                    [Describe the high-level approach taken to solve the problem, including the engagement timeline.]
                </p>
                <h3>1. [Key Action/Architecture 1]</h3>
                <p>
                    [Details about the first major step or technical decision.]
                </p>
                <h3>2. [Key Action/Architecture 2]</h3>
                <p>
                    [Details about the second major step or technical decision.]
                </p>

                <h2>The Outcome</h2>
                <ul>
                    <li><strong>[Outcome 1]:</strong> [Description of the measurable result.]</li>
                    <li><strong>[Outcome 2]:</strong> [Description of the measurable result.]</li>
                    <li><strong>[Outcome 3]:</strong> [Description of the measurable result.]</li>
                </ul>

                <h2>Stakeholder Perspective</h2>
                <blockquote>
                    “[Single anonymized stakeholder quote that validates the change and adds trust.] — [Role, anonymized]”
                </blockquote>
            </div>

            <section class="case-study-cta-panel" aria-label="Discuss your challenge">
                <h2>Facing a similar challenge?</h2>
                <div class="cta-buttons">
                    <a class="btn btn-primary" target="_blank" rel="noopener noreferrer" href="https://calendar.app.google/xemYrdCnvPd2d8v4A">Let's discuss your challenge</a>
                    <a class="btn btn-secondary" href="/#contact">More contact options</a>
                </div>
            </section>

            <!-- Case Studies Section -->
            <section id="case-studies" class="section case-studies">
                <h2>Case Studies</h2>
                <div class="case-studies-controls" aria-label="Case studies carousel navigation">
                    <button class="case-nav-btn" type="button" data-case-nav="prev" aria-label="Previous case study">←</button>
                    <div class="case-studies-dots" data-case-dots role="tablist" aria-label="Case study pages"></div>
                    <button class="case-nav-btn" type="button" data-case-nav="next" aria-label="Next case study">→</button>
                </div>
                <div class="case-studies-grid">
                    <a href="case-study-book-retail.html" class="case-card">
                        <div class="case-thumb">
                            <img src="img/book-retail-thumb.jpg" alt="Book Retail SaaS Case Study" loading="lazy">
                        </div>
                        <div class="case-info">
                            <span class="case-market">Book Retail (Netherlands)</span>
                            <h3>Scaling a National Book Retail SaaS</h3>
                        </div>
                    </a>
                    <a href="case-study-portugal-tech-hub.html" class="case-card">
                        <div class="case-thumb">
                            <img src="img/tech-hub-thumb.jpg" alt="Technology hub team collaboration case study" loading="lazy">
                        </div>
                        <div class="case-info">
                            <span class="case-market">Technology Hub Expansion (Portugal)</span>
                            <h3>Launching a Remote-First Engineering Hub in Portugal</h3>
                        </div>
                    </a>
                    <a href="case-study-engineering-department-scaling.html" class="case-card">
                        <div class="case-thumb">
                            <img src="img/eng-dept-thumb.jpg" alt="Engineering department scaling case study" loading="lazy">
                        </div>
                        <div class="case-info">
                            <span class="case-market">Engineering Organization Transformation</span>
                            <h3>Scaling into a Multi-Service Engineering Department</h3>
                        </div>
                    </a>
                    <a href="case-study-career-path-performance-feedback.html" class="case-card">
                        <div class="case-thumb">
                            <img src="img/career-path-thumb.jpg" alt="Career path and performance feedback case study" loading="lazy">
                        </div>
                        <div class="case-info">
                            <span class="case-market">Career Path, Performance & Feedback</span>
                            <h3>Building a Career & Feedback Operating System for Engineering at Scale</h3>
                        </div>
                    </a>
                </div>
                <div class="case-studies-view-all">
                    <a href="case-studies.html" class="btn btn-secondary">View All Case Studies</a>
                </div>
            </section>
        </main>

        <footer>
            <div class="footer-content">
                <nav class="footer-nav" aria-label="Footer Navigation">
                    <a href="/">Home</a>
                    <a href="/#services">Services</a>
                    <a href="/#case-studies">Case Studies</a>
                    <a href="/#about">About</a>
                    <a href="/#contact">Contact</a>
                    <a href="/privacy.html">Privacy Policy</a>
                </nav>
                <p class="footer-registration">Registered independent consultancy in Portugal. Tax registration details available on request.</p>
            </div>
        </footer>
    </div>
    <script src="main.js?v=20260225" defer></script>
</body>
</html>