-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathportfolio.html
More file actions
277 lines (251 loc) · 7.7 KB
/
portfolio.html
File metadata and controls
277 lines (251 loc) · 7.7 KB
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio | Catherine Brockman</title>
<style>
body {
margin: 0;
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #222;
}
/* Shared left block */
.hero-left, .section-left {
flex: 0 0 50%;
width: 50%;
background: #0f6ba5;
display: flex;
justify-content: flex-end;
text-align: right;
color: #fff;
padding-right: 2.5rem;
box-sizing: border-box;
}
/* Hero vertical centering */
.hero-left {
align-items: center;
}
/* Section titles align to top */
.section-left {
align-items: flex-start;
padding-top: 3rem; /* match .section-right padding */
}
.section-left h2 {
font-size: 2rem;
margin: 0;
}
/* Hero */
.hero {
display: flex;
min-height: 70vh;
}
.hero-right {
flex: 0 0 50%;
width: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
.hero-right img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.hero-left h1 {
font-size: 4rem; /* Much bigger title */
margin: 0 0 1rem 0;
}
.hero-left p {
margin: 0;
font-size: 1.2rem;
}
/* Section container */
.section {
display: flex;
min-height: 60vh;
}
.section-right {
flex: 0 0 50%;
width: 50%;
background: #fff;
padding: 3rem 2rem; /* equal padding left & right */
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
}
/* Portfolio thumbnails */
.portfolio-item img,
.portfolio-thumbs img {
display: block;
max-width: 280px; /* desktop thumbnail size */
width: auto;
height: auto;
border-radius: 6px;
cursor: pointer;
transition: transform 0.3s ease;
}
/* Lightbox */
.lightbox {
display: none;
position: fixed;
z-index: 9999;
left: 0; top: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.85);
justify-content: center;
align-items: center;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
border-radius: 8px;
}
.lightbox:target {
display: flex;
}
/* Unified mobile adjustments */
@media (max-width: 900px) {
/* Stack sections and hero vertically */
.hero, .section {
flex-direction: column;
}
/* Left and right blocks full-width and centered */
.hero-left, .hero-right, .section-left, .section-right {
width: 100%;
flex: unset;
text-align: center;
justify-content: center;
padding: 2rem;
box-sizing: border-box;
}
/* Section-left titles padding */
.section-left {
padding-top: 2rem;
}
/* Hero-left padding */
.hero-left {
padding-right: 2rem;
}
/* Portfolio thumbnails centered and responsive */
.portfolio-thumbs {
align-items: center;
}
.portfolio-item img,
.portfolio-thumbs img {
width: 100%;
max-width: 280px;
}
}
</style>
</head>
<body>
<!-- Hero -->
<header class="hero">
<div class="hero-left">
<div>
<h1>Inkling Portfolio</h1>
<h1>Catherine Brockman</h1>
<p>Communications Strategy, Copy, and Project Management</p>
</div>
</div>
<div class="hero-right">
<img src="images/samples/portrait-forest.JPG" alt="Hero image">
</div>
</header>
<!-- Services -->
<section class="section" id="services">
<div class="section-left">
<h2>Services</h2>
</div>
<div class="section-right">
<p><strong>AI Workshops:</strong> Discover how AI can revolutionise your work. Enhance your productivity, creativity, and communication skills with the power of AI.</p>
<p><strong>Communications Coaching:</strong> Fine-tune your strategy. I can coach your team to run your own communications strategy using the most efficient tools available.</p>
<p><strong>Project Management:</strong> I create impactful campaigns for websites, emails, videos, and social media, focusing on automation and growth.</p>
</div>
</section>
<!-- Portfolio -->
<section class="section" id="portfolio">
<div class="section-left">
<h2>Portfolio</h2>
</div>
<div class="section-right">
<div class="portfolio-item">
<h3>LinkedIn post, AI Sweden</h3>
<p>Part of a multi-pronged approach to increase partner engagement.</p>
<a href="#img1"><img src="images/samples/AI Sweden Linkedin Post sample.png" alt="AI Sweden"></a>
</div>
<div class="portfolio-item">
<h3>Community content writing, AI Sweden</h3>
<p>Targeting audiences with the most relevant offerings and opportunities.</p>
<a href="#img2"><img src="images/samples/AI Sweden News sample.png" alt="Community content"></a>
</div>
<div class="portfolio-item">
<h3>Voiceover on explainer video, AI Sweden</h3>
<p>Writing and recording high-quality audio for this in-a-nutshell explanation.</p>
<a href="#video1"><img src="images/samples/EdgeLearningLab thumbnail.png" alt="Voiceover"></a>
</div>
<!-- Lightbox video -->
<div id="video1" class="lightbox">
<video controls autoplay style="max-width:90%; max-height:80%; border-radius:8px;">
<source src="images/samples/EdgeLearningLab.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<a href="#">Close</a>
</div>
<div class="portfolio-item">
<h3>Strategy and copy, Freespee</h3>
<p>Internal communications were a key part of this new strategy.</p>
<a href="#img3"><img src="images/samples/Freespee Slides sample.png" alt="Freespee strategy communications"></a>
</div>
<div class="portfolio-item">
<h3>Video production and copy, Freespee</h3>
<p>Video was a new area for this client and we experimented with free downloadable assets to accompany each episode.</p>
<!-- PDF thumbnail 1 -->
<a href="images/samples/Unmute downloadable Ep1.pdf" target="_blank">
<img src="images/samples/Unmute sample Ep1.png" alt="Freespee PDF 1">
</a>
<!-- PDF thumbnail 2 -->
<a href="images/samples/Unmute downloadable Ep2.pdf" target="_blank">
<img src="images/samples/Unmute_02 sample.png" alt="Freespee PDF 2">
</a>
</div>
<div class="portfolio-item">
<h3>Social media campaign, How the Pod</h3>
<p>Building hype for each episode with the most memorable content.</p>
<a href="#img4"><img src="images/samples/How_the_Pod_sample.png" alt="Social media posts"></a>
</div>
</div>
</section>
<!-- Contact -->
<section class="section" id="contact">
<div class="section-left">
<h2>Contact</h2>
</div>
<div class="section-right">
<p>Need some fresh solutions? I consult through my company, Inkling, on tasks big and small.</p>
<p>
<a href="mailto:catherinebrockman.mejl@gmail.com">Email</a> |
<a href="https://linkedin.com/in/cathbrockman/">LinkedIn</a> |
<a href="https://github.com/Cath-B">GitHub</a>
</p>
</div>
</section>
<!-- Lightbox images -->
<div id="img1" class="lightbox">
<a href="#"><img src="images/samples/AI Sweden Linkedin Post sample.png" alt="">AI Sweden Linkedin Post sample</a>
</div>
<div id="img2" class="lightbox">
<a href="#"><img src="images/samples/AI Sweden News sample.png" alt="">AI Sweden News sample</a>
</div>
<div id="img3" class="lightbox">
<a href="#"><img src="images/samples/Freespee Slides sample.png" alt="">Freespee strategy communications</a>
</div>
<div id="img4" class="lightbox">
<a href="#"><img src="images/samples/How_the_Pod_sample.png" alt="">Social media posts</a>
</div>
</body>
</html>