Skip to content

Commit 78ee0d4

Browse files
erikbdeverikbdev
committed
feat: add social links
1 parent e26cc2d commit 78ee0d4

File tree

4 files changed

+114
-48
lines changed

4 files changed

+114
-48
lines changed

‎Sources/Pages/Components/HeaderView.swift

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ private struct CodeSelector: HTML {
4545
.inlineStyle("font-size", "0.8em")
4646
.inlineStyle("background", "unset")
4747
.inlineStyle("border", "1.16px solid #444")
48-
.inlineStyle("border-radius", "0.3rem")
4948
.inlineStyle("padding", "0.28rem 0.4rem")
5049
.inlineStyle("color", "#AAA")
5150
.inlineStyle("cursor", "pointer")
@@ -87,7 +86,6 @@ private struct CodeSelector: HTML {
8786
// .inlineStyle("margin-top", "0.25rem")
8887
.inlineStyle("background", "#2A2A2A")
8988
.inlineStyle("border-radius", "1rem")
90-
// .inlineStyle("font-size", "1.125em")
9189
}
9290
.inlineStyle("position", "relative")
9391
}

‎Sources/Pages/Components/SectionView.swift

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ struct SectionView<Header: HTML, Content: HTML>: HTML {
3939
self.header(lang)
4040
}
4141
}
42+
.inlineStyle("white-space", "pre-wrap")
4243
} else {
4344
hgroup {
4445
self.header(nil)

‎Sources/Pages/HomePage.swift

Lines changed: 106 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@ private struct UserView: HTML {
5555
.joined(separator: ", ")
5656
}
5757

58+
static let aboutDescription = """
59+
I'm a passionate software developer who builds applications using Swift and modern web technologies.
60+
"""
61+
5862
@HTMLBuilder
5963
var body: some HTML {
6064
SectionView(id: "user", selected: selected) { lang in
@@ -65,7 +69,10 @@ private struct UserView: HTML {
6569
name: "Erik Bautista Santibanez",
6670
role: "Mobile & Web Developer",
6771
home: "\(residency ?? .default)"\
68-
\(currentLocation.flatMap { ",\n location: \"Currently in \($0)\"" } ?? "")
72+
\(currentLocation.flatMap { ",\n location: \"Currently in \($0)\"" } ?? ""),
73+
about: \"\"\"
74+
\(Self.aboutDescription)
75+
\"\"\"
6976
)
7077
"""
7178
case .typescript:
@@ -74,7 +81,8 @@ private struct UserView: HTML {
7481
name: "Erik Bautista Santibanez",
7582
role: "Mobile & Web Developer",
7683
home: "\(residency ?? .default)"\
77-
\(currentLocation.flatMap { ",\n location: \"Currently in \($0)\"" } ?? "")
84+
\(currentLocation.flatMap { ",\n location: \"Currently in \($0)\"" } ?? ""),
85+
about: `\(Self.aboutDescription)`
7886
};
7987
"""
8088
case .rust:
@@ -83,7 +91,8 @@ private struct UserView: HTML {
8391
name: "Erik Bautista Santibanez",
8492
role: "Mobile & Web Developer",
8593
home: "\(residency ?? .default)"\
86-
\(currentLocation.flatMap { ",\n location: \"Currently in \($0)\"" } ?? "")
94+
\(currentLocation.flatMap { ",\n location: \"Currently in \($0)\"" } ?? ""),
95+
about: "\(Self.aboutDescription)"
8796
};
8897
"""
8998
case .none:
@@ -134,39 +143,77 @@ private struct UserView: HTML {
134143
.inlineStyle("font-weight", "700")
135144
}
136145
}
146+
147+
p(.aria.label("about me")) {
148+
Self.aboutDescription
149+
}
150+
.inlineStyle("margin-top", "0.75rem")
137151
}
138152
.inlineStyle("color", "#d8d8d8")
139153
}
140154
} content: {
141-
// div {
142-
// p {
143-
// """
144-
// I'm a passionate software developer who builds applications using Swift and modern web technologies.
145-
// """
146-
// }
147-
// div {
148-
// button {
149-
// "Resume"
150-
// }
151-
152-
// button {
153-
// "GitHub"
154-
// }
155-
156-
// button {
157-
// "LinkedIn"
158-
// }
159-
160-
// button {
161-
// "Contact"
162-
// }
163-
// }
164-
// .inlineStyle("display", "flex")
165-
// .inlineStyle("flex-direction", "row")
166-
// .inlineStyle("gap", "1.125rem")
167-
// }
168-
// .inlineStyle("padding", "0 1.5rem 1.5rem")
169-
EmptyHTML()
155+
div {
156+
div {
157+
a(.href("mailto:me@erikb.dev")) {
158+
ConditionalCodeLabel(
159+
label: "email",
160+
value: "me@erikb.dev",
161+
selected: selected
162+
)
163+
}
164+
.primaryButtonStyle()
165+
166+
a(
167+
.href("https://github.com/erikbdev"),
168+
.target(.blank),
169+
.rel("noopener noreferrer")
170+
) {
171+
ConditionalCodeLabel(
172+
label: "github",
173+
value: "@erikbdev",
174+
selected: selected
175+
)
176+
}
177+
.secondaryButtonStyle()
178+
179+
a(
180+
.href("https://www.linkedin.com/in/erikbautista"),
181+
.target(.blank),
182+
.rel("noopener noreferrer")
183+
) {
184+
ConditionalCodeLabel(
185+
label: "linkedin",
186+
value: "@erikbautista",
187+
selected: selected
188+
)
189+
}
190+
.secondaryButtonStyle()
191+
}
192+
.inlineStyle("display", "flex")
193+
.inlineStyle("flex-direction", "row")
194+
.inlineStyle("flex-wrap", "wrap")
195+
.inlineStyle("gap", "0.625rem")
196+
}
197+
.inlineStyle("margin-top", "-1rem")
198+
.inlineStyle("padding", "0 1.5rem 1.5rem")
199+
}
200+
}
201+
202+
struct ConditionalCodeLabel: HTML {
203+
let label: String
204+
let value: String
205+
let selected: Vue.Expression<CodeLang?>
206+
207+
var body: some HTML {
208+
CodeLang.conditionalCases(initial: selected) { lang in
209+
code {
210+
if let lang {
211+
"user.\(label)()\(lang.hasSemiColon ? ";" : "")"
212+
} else {
213+
"[\(label)](\(value))"
214+
}
215+
}
216+
}
170217
}
171218
}
172219
}
@@ -227,7 +274,7 @@ private struct PostsView: HTML {
227274
// .v.show("!selection || selection == '\(self.post.kind.rawValue)'")
228275
) {
229276
header {
230-
section {
277+
hgroup {
231278
span { self.post.datePosted.uppercased() }
232279
.inlineStyle("flex-grow", "1")
233280
.inlineStyle("color", "#9A9A9A")
@@ -287,7 +334,7 @@ private struct PostsView: HTML {
287334
}
288335
}
289336
.inlineStyle("color", "#7A7A7A")
290-
.inlineStyle("font-size", "0.7em")
337+
.inlineStyle("font-size", "0.73em")
291338
.inlineStyle("margin-top", "0.75rem")
292339
}
293340
}
@@ -374,18 +421,7 @@ private struct PostsView: HTML {
374421
.svgIconStyling()
375422
}
376423
}
377-
.inlineStyle("all", "unset")
378-
.inlineStyle("font-size", "0.85em")
379-
.inlineStyle("font-weight", "550")
380-
.inlineStyle("align-content", "center")
381-
.inlineStyle("min-height", "1.5rem")
382-
.inlineStyle("min-width", "2rem")
383-
.inlineStyle("padding", "0.375rem 0.75rem")
384-
.inlineStyle("cursor", "pointer")
385-
.inlineStyle("border-radius", "0.5rem")
386-
.inlineStyle("color", self.link.role == .primary ? "white" : "black")
387-
.inlineStyle("background", self.link.role == .primary ? "linear-gradient(to bottom, hsla(0, 0%, 24%, 1), hsla(0, 0%, 16%, 1))" : "linear-gradient(to bottom, hsl(0deg 0% 100%), hsl(0deg 0% 92.91%))")
388-
.inlineStyle("box-shadow", self.link.role == .primary ? "inset 0 1px 1px rgba(255, 255, 255, 0.12)" : "inset 0px -1px 2px 0px hsl(0 0% 50% / 0.5)")
424+
.buttonStyle(isPrimary: self.link.role == .primary)
389425
}
390426
}
391427
}
@@ -408,4 +444,28 @@ private extension HTML {
408444
.inlineStyle("overflow-x", "auto", post: " pre")
409445
.inlineStyle("font-size", "0.85em", post: " pre")
410446
}
447+
448+
func primaryButtonStyle() -> HTMLInlineStyle<Self> {
449+
self.inlineStyle("all", "unset")
450+
.inlineStyle("padding", "0.5rem 0.625rem")
451+
.inlineStyle("border", "#444 1px solid")
452+
.inlineStyle("font-size", "0.8em")
453+
.inlineStyle("font-weight", "500")
454+
.inlineStyle("align-items", "center")
455+
.inlineStyle("cursor", "pointer")
456+
}
457+
458+
func secondaryButtonStyle() -> HTMLInlineStyle<Self> {
459+
self.primaryButtonStyle()
460+
.inlineStyle("background-color", "#f0f0f0")
461+
.inlineStyle("color", "#0f0f0f")
462+
}
463+
464+
func buttonStyle(isPrimary: Bool = true) -> HTMLInlineStyle<Self> {
465+
if isPrimary {
466+
self.primaryButtonStyle()
467+
} else {
468+
self.secondaryButtonStyle()
469+
}
470+
}
411471
}

‎Sources/Pages/Models/CodeLang.swift

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,13 @@ public enum CodeLang: String, Hashable, Encodable, CaseIterable, Sendable, RawRe
3434
}
3535
}
3636

37+
var hasSemiColon: Bool {
38+
switch self {
39+
case .swift: false
40+
default: true
41+
}
42+
}
43+
3744
@HTMLBuilder static func conditionalCases<Content: HTML>(
3845
initial selected: Vue.Expression<CodeLang?>,
3946
@HTMLBuilder content: (CodeLang?) -> Content

0 commit comments

Comments
 (0)