Skip to content

Commit 885f045

Browse files
rmfisher26rmfisher26
committed
Added about.astro page and updated footer details
1 parent 5d39fe3 commit 885f045

File tree

3 files changed

+327
-7
lines changed

3 files changed

+327
-7
lines changed

‎src/components/Footer.astro‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
---
2+
const base = import.meta.env.BASE_URL.replace(/\/$/, '');
23
---
34
<footer>
45
<div class="footer-col">
56
<h4>Series</h4>
6-
<a href="/series">1 · Core Concepts</a>
7-
<a href="/series">2 · Compiler Internals</a>
8-
<a href="/series">3 · Source Deep Dives</a>
7+
<a href={`${base}/series`}>1 · Core Concepts</a>
8+
<a href={`${base}/series`}>2 · Compiler Internals</a>
9+
<a href={`${base}/series`}>3 · Source Deep Dives</a>
910
</div>
1011
<div class="footer-col">
1112
<h4>On GitHub</h4>
@@ -16,9 +17,8 @@
1617
</div>
1718
<div class="footer-col">
1819
<h4>About</h4>
19-
<a href="/about">Robert's open source work</a>
20-
<a href="https://linkedin.com" target="_blank" rel="noopener">LinkedIn ↗</a>
21-
<a href="/rss.xml">RSS feed</a>
20+
<a href={`${base}/about`}>Robert's open source work</a>
21+
<a href="https://www.linkedin.com/in/rmfisher26/" target="_blank" rel="noopener">LinkedIn ↗</a>
2222
</div>
2323
</footer>
2424
<div class="footer-bottom">

‎src/components/Header.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
const base = import.meta.env.BASE_URL;
2+
const base = import.meta.env.BASE_URL.replace(/\/$/, '');
33
const currentPath = Astro.url.pathname;
44
---
55
<header>

‎src/pages/about.astro‎

Lines changed: 320 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,320 @@
1+
---
2+
import Base from '../layouts/Base.astro';
3+
import Header from '../components/Header.astro';
4+
---
5+
6+
<Base title="About" description="About Robert Fisher and the GuppyFisher blog.">
7+
<Header />
8+
9+
<main class="about">
10+
11+
<div class="about-header">
12+
<div class="eyebrow">about this site</div>
13+
<h1>Learning in <em>public</em></h1>
14+
<p class="subtitle">
15+
I'm Robert Fisher — a software engineer with over a decade of experience, learning the internals
16+
of <a href="https://github.com/CQCL/guppylang" target="_blank" rel="noopener">Guppylang</a>
17+
by reading source code, tracing PRs, and writing about what I find.
18+
</p>
19+
</div>
20+
21+
<hr class="rule" />
22+
23+
<div class="two-col">
24+
25+
<div class="col-text">
26+
<h2>Why this blog?</h2>
27+
<p>
28+
Guppy is a quantum programming language embedded in Python, compiled to
29+
<a href="https://github.com/CQCL/hugr" target="_blank" rel="noopener">HUGR</a>
30+
— a hierarchical graph IR built for quantum hardware. The compiler is genuinely
31+
interesting, and the documentation for its internals is sparse.
32+
</p>
33+
<p>
34+
So I'm writing the documentation I wish existed — one PR and one source file at a time.
35+
No pretending to know it all up front. This is a working log.
36+
</p>
37+
38+
<h2>What you'll find here</h2>
39+
<ul>
40+
<li><strong>Series 1 — Core Concepts:</strong> The ideas behind linear types, the no-cloning theorem, and why Guppy's type system is shaped the way it is.</li>
41+
<li><strong>Series 2 — Compiler Internals:</strong> How the compilation pipeline works, from the <code>@guppy</code> decorator to HUGR output.</li>
42+
<li><strong>Series 3 — Source Deep Dives:</strong> Full walkthroughs of specific PRs — what broke, how it was fixed, and what the fix reveals about the architecture.</li>
43+
</ul>
44+
</div>
45+
46+
<div class="col-stack">
47+
<div class="stack-card">
48+
<div class="stack-label">Language</div>
49+
<div class="stack-value">Python + Guppylang</div>
50+
</div>
51+
<div class="stack-card">
52+
<div class="stack-label">IR</div>
53+
<div class="stack-value">HUGR</div>
54+
</div>
55+
<div class="stack-card">
56+
<div class="stack-label">This site</div>
57+
<div class="stack-value">Astro + MDX</div>
58+
</div>
59+
<div class="stack-card">
60+
<div class="stack-label">Employer</div>
61+
<div class="stack-value">Quantinuum</div>
62+
</div>
63+
<div class="stack-card accent">
64+
<div class="stack-label">Status</div>
65+
<div class="stack-value">Learning in public</div>
66+
</div>
67+
</div>
68+
69+
</div>
70+
71+
<hr class="rule" />
72+
73+
<div class="links-section">
74+
<h2>Find me elsewhere</h2>
75+
<div class="link-grid">
76+
<a href="https://github.com/rmfisher26" target="_blank" rel="noopener" class="link-card">
77+
<div class="link-icon">⌥</div>
78+
<div>
79+
<div class="link-title">GitHub</div>
80+
<div class="link-sub">rmfisher26</div>
81+
</div>
82+
</a>
83+
<a href="https://github.com/CQCL/guppylang" target="_blank" rel="noopener" class="link-card">
84+
<div class="link-icon">⬡</div>
85+
<div>
86+
<div class="link-title">guppylang</div>
87+
<div class="link-sub">CQCL/guppylang</div>
88+
</div>
89+
</a>
90+
<a href="https://github.com/CQCL/hugr" target="_blank" rel="noopener" class="link-card">
91+
<div class="link-icon">◈</div>
92+
<div>
93+
<div class="link-title">HUGR</div>
94+
<div class="link-sub">CQCL/hugr</div>
95+
</div>
96+
</a>
97+
</div>
98+
</div>
99+
100+
</main>
101+
</Base>
102+
103+
<style>
104+
.about {
105+
max-width: 900px;
106+
margin: 0 auto;
107+
padding: 0 2rem 5rem;
108+
animation: fadeUp 0.6s ease both;
109+
}
110+
111+
@keyframes fadeUp {
112+
from { opacity: 0; transform: translateY(20px); }
113+
to { opacity: 1; transform: translateY(0); }
114+
}
115+
116+
.about-header {
117+
padding: 5rem 0 3rem;
118+
}
119+
120+
.eyebrow {
121+
font-family: 'JetBrains Mono', monospace;
122+
font-size: 0.8rem;
123+
color: var(--accent);
124+
letter-spacing: 0.05em;
125+
margin-bottom: 1.5rem;
126+
display: flex;
127+
align-items: center;
128+
gap: 0.5rem;
129+
}
130+
131+
.eyebrow::before {
132+
content: '';
133+
display: inline-block;
134+
width: 2rem;
135+
height: 1px;
136+
background: var(--accent);
137+
}
138+
139+
h1 {
140+
font-family: 'Syne', sans-serif;
141+
font-weight: 800;
142+
font-size: clamp(2.5rem, 6vw, 4.5rem);
143+
line-height: 0.95;
144+
letter-spacing: -0.04em;
145+
margin-bottom: 1.5rem;
146+
}
147+
148+
h1 em {
149+
font-style: italic;
150+
font-family: 'Lora', serif;
151+
font-weight: 400;
152+
color: var(--accent2);
153+
}
154+
155+
.subtitle {
156+
font-size: 1.1rem;
157+
color: var(--muted);
158+
max-width: 580px;
159+
line-height: 1.7;
160+
font-style: italic;
161+
}
162+
163+
.subtitle a {
164+
color: var(--accent);
165+
text-decoration: none;
166+
}
167+
168+
.subtitle a:hover { text-decoration: underline; }
169+
170+
.rule {
171+
border: none;
172+
border-top: 1px solid var(--border);
173+
margin: 2rem 0 3rem;
174+
}
175+
176+
/* Two-column layout */
177+
.two-col {
178+
display: grid;
179+
grid-template-columns: 1fr 280px;
180+
gap: 4rem;
181+
margin-bottom: 3rem;
182+
}
183+
184+
.col-text h2 {
185+
font-family: 'Syne', sans-serif;
186+
font-weight: 800;
187+
font-size: 1.15rem;
188+
letter-spacing: -0.02em;
189+
margin: 2rem 0 0.75rem;
190+
}
191+
192+
.col-text h2:first-child { margin-top: 0; }
193+
194+
.col-text p {
195+
font-size: 1rem;
196+
line-height: 1.75;
197+
color: var(--ink);
198+
margin-bottom: 1.2rem;
199+
}
200+
201+
.col-text p a {
202+
color: var(--accent);
203+
text-decoration: none;
204+
}
205+
206+
.col-text p a:hover { text-decoration: underline; }
207+
208+
.col-text ul {
209+
padding-left: 1.2rem;
210+
line-height: 1.9;
211+
font-size: 0.95rem;
212+
}
213+
214+
.col-text li { margin-bottom: 0.4rem; }
215+
216+
.col-text code {
217+
font-family: 'JetBrains Mono', monospace;
218+
font-size: 0.82em;
219+
background: rgba(0,200,150,0.1);
220+
padding: 0.1em 0.35em;
221+
border-radius: 3px;
222+
}
223+
224+
/* Stack cards */
225+
.col-stack {
226+
display: flex;
227+
flex-direction: column;
228+
gap: 0.75rem;
229+
padding-top: 0.25rem;
230+
}
231+
232+
.stack-card {
233+
border: 1px solid var(--border);
234+
border-radius: 4px;
235+
padding: 0.85rem 1rem;
236+
background: var(--card);
237+
}
238+
239+
.stack-card.accent {
240+
border-color: var(--accent);
241+
background: rgba(0,200,150,0.05);
242+
}
243+
244+
.stack-label {
245+
font-family: 'JetBrains Mono', monospace;
246+
font-size: 0.65rem;
247+
color: var(--muted);
248+
letter-spacing: 0.05em;
249+
text-transform: uppercase;
250+
margin-bottom: 0.25rem;
251+
}
252+
253+
.stack-value {
254+
font-family: 'Syne', sans-serif;
255+
font-weight: 700;
256+
font-size: 0.95rem;
257+
}
258+
259+
.stack-card.accent .stack-value { color: var(--accent); }
260+
261+
/* Links section */
262+
.links-section h2 {
263+
font-family: 'Syne', sans-serif;
264+
font-weight: 800;
265+
font-size: 1.15rem;
266+
letter-spacing: -0.02em;
267+
margin-bottom: 1.5rem;
268+
}
269+
270+
.link-grid {
271+
display: grid;
272+
grid-template-columns: repeat(3, 1fr);
273+
gap: 1rem;
274+
}
275+
276+
.link-card {
277+
border: 1px solid var(--border);
278+
border-radius: 4px;
279+
padding: 1.25rem;
280+
display: flex;
281+
align-items: center;
282+
gap: 1rem;
283+
text-decoration: none;
284+
color: inherit;
285+
background: var(--card);
286+
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
287+
}
288+
289+
.link-card:hover {
290+
transform: translate(-2px, -2px);
291+
box-shadow: 4px 4px 0 var(--ink);
292+
border-color: var(--ink);
293+
}
294+
295+
.link-icon {
296+
font-size: 1.4rem;
297+
line-height: 1;
298+
color: var(--muted);
299+
}
300+
301+
.link-title {
302+
font-family: 'Syne', sans-serif;
303+
font-weight: 700;
304+
font-size: 0.9rem;
305+
margin-bottom: 0.2rem;
306+
}
307+
308+
.link-sub {
309+
font-family: 'JetBrains Mono', monospace;
310+
font-size: 0.65rem;
311+
color: var(--muted);
312+
}
313+
314+
@media (max-width: 700px) {
315+
.two-col { grid-template-columns: 1fr; gap: 2rem; }
316+
.col-stack { flex-direction: row; flex-wrap: wrap; }
317+
.stack-card { flex: 1; min-width: 120px; }
318+
.link-grid { grid-template-columns: 1fr; }
319+
}
320+
</style>

0 commit comments

Comments
 (0)