Skip to content

Commit f5e1f24

Browse files
committed
wip: add some stylings
1 parent b1e91df commit f5e1f24

File tree

5 files changed

+58
-146
lines changed

5 files changed

+58
-146
lines changed

Package.swift

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ let package = Package(
99
],
1010
products: [
1111
.library(name: "ActivityClient", targets: ["ActivityClient"]),
12-
.library(name: "Reactive", targets: ["Reactive"]),
1312
.library(name: "SyntaxHighlight", targets: ["SyntaxHighlight"]),
1413
.library(name: "Models", targets: ["Models"]),
1514
.library(name: "Routes", targets: ["Routes"]),
@@ -46,7 +45,6 @@ let package = Package(
4645
.target(
4746
name: "Pages",
4847
dependencies: [
49-
"Reactive",
5048
"Models",
5149
"SyntaxHighlight",
5250
"ActivityClient",
@@ -75,7 +73,6 @@ let package = Package(
7573
.product(name: "SwiftParser", package: "swift-syntax"),
7674
]
7775
),
78-
.target(name: "Reactive"),
7976

8077
/// Executable
8178
.executableTarget(

README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
Porfolio Website
22

3-
> Porfoliio website using Swift + Hummingbird + Elementary
3+
> Porfolio website using Swift + Hummingbird + Elementary
44
55
### Notes
66

77
Initially, I was using NextJS, buy why not just use Swift?
8+
9+
### Resources
10+
- [Swift](https://swift.org)
11+
- [Hummingbird](https://hummingbird.codes)
12+
- [swift-parsing](https://github.com/pointfreeco/swift-parsing)
13+
- [Phosphor Icons](https://phosphoricons.com/)

Sources/Pages/HomePage.swift

Lines changed: 51 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,15 @@ public struct HomePage: Page {
99
struct Style: Sendable, StyleSheet {
1010
let container = Class(module: "container")
1111
let svgIcon = Class(module: "svgIcon")
12+
let reversed = Class(module: "reversed")
13+
let location = Class(module: "location")
14+
let educationItem = Class(module: "eductation-item")
1215

1316
var body: some Rule {
14-
Pseudo(class: .root) => {
17+
Attribute("data-theme", match: .exact, value: "dark") => {
1518
Variable("pico-background-color", value: "#1c1c1c")
1619
}
1720

18-
// self.container => {
19-
// Display(.flex)
20-
// Background("#1c1c1c")
21-
// Color(.white)
22-
// // AnyProperty("justify-self", "center")
23-
// }
24-
25-
// self.container > Class("main") => {
26-
// Width(.full)
27-
// Height(.full)
28-
29-
// Media(maxWidth: 2xl) => {
30-
// MaxWidth(.rem(20))
31-
// }
32-
// }
33-
3421
self.svgIcon => {
3522
Display(.inlineBlock)
3623
AnyProperty("vertical-align", "middle")
@@ -41,16 +28,25 @@ public struct HomePage: Page {
4128
AnyProperty("margin-right", "0.25rem")
4229
}
4330

44-
Class("reversed") => {
31+
self.reversed => {
4532
AnyProperty("scale", "calc(100% * -1) 100%")
4633
}
34+
35+
self.location > Element(.span) => {
36+
Color("#fff")
37+
}
38+
39+
self.educationItem => {
40+
Display(.flex)
41+
AnyProperty("justify-content", "space-between")
42+
}
4743
}
4844
}
4945

5046
@Dependency(\.activityClient) private var activityClient
5147

5248
public init() {}
53-
49+
5450
private static let yearDateFormatter = DateFormatter()
5551

5652
var year: String {
@@ -64,7 +60,7 @@ public struct HomePage: Page {
6460

6561
public var content: some HTML {
6662
HTMLRaw("<!DOCTYPE html>")
67-
html(.lang("en")) {
63+
html(.lang("en"), .custom(name: "data-theme", value: "dark")) {
6864
head {
6965
title { "Erik Bautista Santibanez" }
7066
meta(.charset(.utf8))
@@ -82,47 +78,53 @@ public struct HomePage: Page {
8278
let location = self.activityClient.location()
8379
let residency = location?.residency ?? .default
8480

85-
p(.ariaLabel("Location")) {
86-
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .ariaLabel("Map pin icon"), .class(styling.svgIcon)) {
87-
path(
88-
.d("M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z")
89-
)
81+
p {
82+
span(.ariaLabel("Residency")) {
83+
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .ariaLabel("Map pin icon"), .class(styling.svgIcon)) {
84+
path(
85+
.d("M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z")
86+
)
87+
}
88+
"\(residency)"
9089
}
9190

92-
"\(residency)"
93-
9491
if let location, location.city != residency.city || location.state != residency.state {
9592
" \u{2022} "
96-
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .class(styling.svgIcon), .class("reversed"), .ariaLabel("Navigation icon")) {
97-
path(.d("M234.35,129,152,152,129,234.35a8,8,0,0,1-15.21.27l-65.28-176A8,8,0,0,1,58.63,48.46l176,65.28A8,8,0,0,1,234.35,129Z"))
98-
path(.d("M237.33,106.21,61.41,41l-.16-.05A16,16,0,0,0,40.9,61.25a1,1,0,0,0,.05.16l65.26,175.92A15.77,15.77,0,0,0,121.28,248h.3a15.77,15.77,0,0,0,15-11.29l.06-.2,21.84-78,78-21.84.2-.06a16,16,0,0,0,.62-30.38ZM149.84,144.3a8,8,0,0,0-5.54,5.54L121.3,232l-.06-.17L56,56l175.82,65.22.16.06Z"))
99-
}
10093

101-
span { "Currently in " }
102-
[location.city, location.state, location.region == "United States" ? nil : location.region]
103-
.compactMap(\.self)
104-
.joined(separator: ", ")
94+
span(.ariaLabel("Location"), .class(styling.location)) {
95+
svg(.xmlns(), .fill("currentColor"), .viewBox("0 0 256 256"), .class(styling.svgIcon), .class(styling.reversed), .ariaLabel("Navigation icon")) {
96+
path(.d("M234.35,129,152,152,129,234.35a8,8,0,0,1-15.21.27l-65.28-176A8,8,0,0,1,58.63,48.46l176,65.28A8,8,0,0,1,234.35,129Z"))
97+
path(.d("M237.33,106.21,61.41,41l-.16-.05A16,16,0,0,0,40.9,61.25a1,1,0,0,0,.05.16l65.26,175.92A15.77,15.77,0,0,0,121.28,248h.3a15.77,15.77,0,0,0,15-11.29l.06-.2,21.84-78,78-21.84.2-.06a16,16,0,0,0,.62-30.38ZM149.84,144.3a8,8,0,0,0-5.54,5.54L121.3,232l-.06-.17L56,56l175.82,65.22.16.06Z"))
98+
}
99+
100+
"Currently in "
101+
102+
span {
103+
strong {
104+
[location.city, location.state, location.region == "United States" ? nil : location.region]
105+
.compactMap(\.self)
106+
.joined(separator: ", ")
107+
}
108+
}
109+
}
105110
}
106111
}
107112
}
108113
}
109114
main {
110-
section(.ariaLabel("Experience")) {
111-
h3 { "Experience" }
112-
}
113-
114-
section(.ariaLabel("Projects")) {
115-
h3 { "Projects" }
116-
}
117-
115+
// TODO: Do a timeline with filters
116+
// section(.ariaLabel("Experience")) {
117+
// h5 { "Experience" }
118+
// }
119+
// section(.ariaLabel("Projects")) {
120+
// h5 { "Projects" }
121+
// }
118122
section(.ariaLabel("Education")) {
119-
h3 { "Education" }
120-
div {
123+
h5 { "Education" }
124+
div(.class(styling.educationItem)) {
121125
div {
122-
h6 {
123-
a(.target(.blank), .rel("noopener noreferrer"), .href("https://stedwards.edu/")) {
124-
"St. Edward's University"
125-
}
126+
a(.target(.blank), .rel("noopener noreferrer"), .href("https://stedwards.edu/")) {
127+
"St. Edward's University"
126128
}
127129
p { "Bachelor of Science in Computer Science" }
128130
}

Sources/Reactive/AnyReactivePath.swift

Lines changed: 0 additions & 34 deletions
This file was deleted.

Sources/Reactive/Reactive.swift

Lines changed: 0 additions & 59 deletions
This file was deleted.

0 commit comments

Comments
 (0)