my personal site
Enhance profile section in index.html: Update name display to include pronouns, add a subtitle for current role, and improve social link icon. Update style.css: Increase gap in profile layout, adjust font size for name, and introduce new styles for subtitle and pronouns for better readability and aesthetics.
+32
-22
+11
images/orbyt-logo.svg
+11
images/orbyt-logo.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="894" height="894" viewBox="112 70 800 860">
2
+
<!-- Layer 1: Outline (bottom) -->
3
+
<path fill="#f3f5fe" stroke="#f3f5fe" stroke-width="85" stroke-linejoin="round" stroke-linecap="round" d="M349 129.3c-23.9 5.4-36.8 31.5-26.1 53.2 8 16.2 25.2 24.4 42.1 20.1 7.4-1.9 5.3-3.4 18.5 13.9 10.3 13.6 33.6 44.2 36.7 48.4 3.5 4.6 3.5 4.6-1.1 8.9-5.9 5.6-14.1 16.9-19 26-5 9.4-3.4 8.6-22.1 10.2-136.2 11.1-177 34.7-192.6 111.5-16.5 81.2-16.5 193.6.1 276.7 10.5 52.9 39.8 83.7 89.3 93.9 6 1.3 6 1.3 2.5 8.8-18.4 39.4-5.4 73.1 30 78.1 24.5 3.5 32.3-1.8 73.7-50 20.8-24.3 16.8-22.1 37-20.5 50.9 4.1 138.2 4.1 189 0 20.2-1.6 16.2-3.8 37 20.5 41.4 48.2 49.2 53.5 73.7 50 35.4-5 48.4-38.7 30-78.1-3.5-7.5-3.5-7.5 2.5-8.8 49.5-10.2 78.8-41 89.3-93.9 16.6-83.1 16.6-195.5.1-276.7C824 344.7 783.2 321.1 647 310c-18.7-1.6-17.1-.8-22.1-10.2-4.9-9.1-13.1-20.4-19-26-4.6-4.3-4.6-4.3-1.1-8.9 3.1-4.2 26.4-34.8 36.7-48.4 13.2-17.3 11.1-15.8 18.5-13.9 41.5 10.6 64.2-49.2 26.3-69.3-32-17.1-68 17.2-51.7 49.3 3.1 6.1 3.1 6.1-11.8 25.5-8.2 10.7-20 26-26.1 34.1-11.1 14.8-11.1 14.8-14.7 12.6-44.5-26.5-94.5-26.5-139 0-3.6 2.2-3.6 2.2-14.7-12.6-6.1-8.1-17.9-23.4-26.1-34.1-14.9-19.4-14.9-19.4-11.8-25.5 13.8-27.1-11.7-59.8-41.4-53.3Z"/>
4
+
5
+
<!-- Layer 2: Body (middle) -->
6
+
<path fill="#000" d="M349 129.3c-23.9 5.4-36.8 31.5-26.1 53.2 8 16.2 25.2 24.4 42.1 20.1 7.4-1.9 5.3-3.4 18.5 13.9 10.3 13.6 33.6 44.2 36.7 48.4 3.5 4.6 3.5 4.6-1.1 8.9-5.9 5.6-14.1 16.9-19 26-5 9.4-3.4 8.6-22.1 10.2-136.2 11.1-177 34.7-192.6 111.5-16.5 81.2-16.5 193.6.1 276.7 10.5 52.9 39.8 83.7 89.3 93.9 6 1.3 6 1.3 2.5 8.8-18.4 39.4-5.4 73.1 30 78.1 24.5 3.5 32.3-1.8 73.7-50 20.8-24.3 16.8-22.1 37-20.5 50.9 4.1 138.2 4.1 189 0 20.2-1.6 16.2-3.8 37 20.5 41.4 48.2 49.2 53.5 73.7 50 35.4-5 48.4-38.7 30-78.1-3.5-7.5-3.5-7.5 2.5-8.8 49.5-10.2 78.8-41 89.3-93.9 16.6-83.1 16.6-195.5.1-276.7C824 344.7 783.2 321.1 647 310c-18.7-1.6-17.1-.8-22.1-10.2-4.9-9.1-13.1-20.4-19-26-4.6-4.3-4.6-4.3-1.1-8.9 3.1-4.2 26.4-34.8 36.7-48.4 13.2-17.3 11.1-15.8 18.5-13.9 41.5 10.6 64.2-49.2 26.3-69.3-32-17.1-68 17.2-51.7 49.3 3.1 6.1 3.1 6.1-11.8 25.5-8.2 10.7-20 26-26.1 34.1-11.1 14.8-11.1 14.8-14.7 12.6-44.5-26.5-94.5-26.5-139 0-3.6 2.2-3.6 2.2-14.7-12.6-6.1-8.1-17.9-23.4-26.1-34.1-14.9-19.4-14.9-19.4-11.8-25.5 13.8-27.1-11.7-59.8-41.4-53.3m249.3 243.2C752 381.3 773.8 399.3 781.1 523c5.8 98.9-9.4 168.3-41.5 189.8-59.5 39.8-394.7 39.8-454.2 0-32.1-21.5-47.3-90.9-41.5-189.8 7.7-130.5 28.8-144.8 226.1-152.4 19.3-.8 104.3.5 128.3 1.9"/>
7
+
8
+
<!-- Layer 3: Eyes (top) - Centered in screen (512, 550) -->
9
+
<rect fill="#000" x="372" y="482" width="82" height="136" rx="41" ry="41"/>
10
+
<rect fill="#000" x="570" y="482" width="82" height="136" rx="41" ry="41"/>
11
+
</svg>
+3
-6
index.html
+3
-6
index.html
···
66
66
height="76"
67
67
>
68
68
<div class="profile-info">
69
-
<h1 itemprop="name" class="name">Jack Hannon</h1>
70
-
<p class="school" itemscope itemprop="alumniOf" itemtype="https://schema.org/CollegeOrUniversity">
71
-
<svg class="vt-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.1925 98.1875" aria-hidden="true"><g transform="matrix(1.25 0 0 -1.25 -127.51 602.7)"><g transform="translate(.77443 .77443)"><path class="vt-path" d="m108.14 476.89h20.034l14.814-27.544 15.446 27.544h100.79l-9.184-17.112h-27.752l-27.547-51.75h-20.24l27.751 51.54h-32.97l-26.082-48.203-35.06 65.525z"/></g></g></svg>
72
-
<span itemprop="name">Class of 2025</span>
73
-
</p>
69
+
<h1 itemprop="name" class="name">Jack Hannon <span class="pronouns">(he/him)</span></h1>
70
+
<p class="subtitle">Marketing at <a href="https://vicino.ai" rel="noopener noreferrer external" target="_blank">Vicino</a></p>
74
71
</div>
75
72
</header>
76
73
<ul class="social-links">
···
108
105
</li>
109
106
<li>
110
107
<a class="social-link" href="https://getorbyt.com/@jack.orbyt.video" rel="noopener noreferrer external" target="_blank">
111
-
<img src="images/orbyt-icon.png" alt="" class="icon orbyt-icon" aria-hidden="true">
108
+
<img src="images/orbyt-logo.svg" alt="" class="icon orbyt-icon" aria-hidden="true">
112
109
<span>@jack</span>
113
110
</a>
114
111
</li>
+18
-16
style.css
+18
-16
style.css
···
87
87
.profile {
88
88
display: flex;
89
89
flex-direction: column;
90
-
gap: 0.75rem;
90
+
gap: 1.25rem;
91
91
max-width: 25rem;
92
92
}
93
93
···
115
115
}
116
116
117
117
.name {
118
-
font-size: 1.25rem;
118
+
font-size: 1.5rem;
119
119
font-weight: 600;
120
120
letter-spacing: -0.05ch;
121
121
}
122
122
123
-
.school {
124
-
display: flex;
125
-
align-items: center;
126
-
gap: 0.25rem;
127
-
color: var(--color-vt-maroon);
128
-
font-weight: 600;
123
+
.pronouns {
124
+
font-size: 0.875rem;
125
+
font-weight: 500;
126
+
color: var(--color-text-muted);
129
127
}
130
128
131
-
/* VT Logo */
132
-
.vt-logo {
133
-
height: 0.9rem;
134
-
width: auto;
129
+
.subtitle {
130
+
color: var(--color-text-muted);
131
+
font-weight: 500;
135
132
}
136
133
137
-
.vt-path {
138
-
fill: var(--color-bg);
139
-
stroke: currentColor;
140
-
stroke-width: 8;
134
+
.subtitle a {
135
+
text-decoration: underline;
136
+
text-decoration-color: var(--color-border);
137
+
text-underline-offset: 0.15em;
138
+
transition: text-decoration-color 0.15s ease;
139
+
}
140
+
141
+
.subtitle a:hover {
142
+
text-decoration-color: currentColor;
141
143
}
142
144
143
145
/* Social Links */