@@ -9,28 +9,15 @@ public struct HomePage: Page {
9
9
struct Style : Sendable , StyleSheet {
10
10
let container = Class ( module: " container " )
11
11
let svgIcon = Class ( module: " svgIcon " )
12
+ let reversed = Class ( module: " reversed " )
13
+ let location = Class ( module: " location " )
14
+ let educationItem = Class ( module: " eductation-item " )
12
15
13
16
var body : some Rule {
14
- Pseudo ( class : . root ) => {
17
+ Attribute ( " data-theme " , match : . exact , value : " dark " ) => {
15
18
Variable ( " pico-background-color " , value: " #1c1c1c " )
16
19
}
17
20
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
-
34
21
self . svgIcon => {
35
22
Display ( . inlineBlock)
36
23
AnyProperty ( " vertical-align " , " middle " )
@@ -41,16 +28,25 @@ public struct HomePage: Page {
41
28
AnyProperty ( " margin-right " , " 0.25rem " )
42
29
}
43
30
44
- Class ( " reversed " ) => {
31
+ self . reversed => {
45
32
AnyProperty ( " scale " , " calc(100% * -1) 100% " )
46
33
}
34
+
35
+ self . location > Element ( . span) => {
36
+ Color ( " #fff " )
37
+ }
38
+
39
+ self . educationItem => {
40
+ Display ( . flex)
41
+ AnyProperty ( " justify-content " , " space-between " )
42
+ }
47
43
}
48
44
}
49
45
50
46
@Dependency ( \. activityClient) private var activityClient
51
47
52
48
public init ( ) { }
53
-
49
+
54
50
private static let yearDateFormatter = DateFormatter ( )
55
51
56
52
var year : String {
@@ -64,7 +60,7 @@ public struct HomePage: Page {
64
60
65
61
public var content : some HTML {
66
62
HTMLRaw ( " <!DOCTYPE html> " )
67
- html ( . lang( " en " ) ) {
63
+ html ( . lang( " en " ) , . custom ( name : " data-theme " , value : " dark " ) ) {
68
64
head {
69
65
title { " Erik Bautista Santibanez " }
70
66
meta ( . charset( . utf8) )
@@ -82,47 +78,53 @@ public struct HomePage: Page {
82
78
let location = self . activityClient. location ( )
83
79
let residency = location? . residency ?? . default
84
80
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) "
90
89
}
91
90
92
- " \( residency) "
93
-
94
91
if let location, location. city != residency. city || location. state != residency. state {
95
92
" \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
- }
100
93
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
+ }
105
110
}
106
111
}
107
112
}
108
113
}
109
114
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
+ // }
118
122
section ( . ariaLabel( " Education " ) ) {
119
- h3 { " Education " }
120
- div {
123
+ h5 { " Education " }
124
+ div ( . class ( styling . educationItem ) ) {
121
125
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 "
126
128
}
127
129
p { " Bachelor of Science in Computer Science " }
128
130
}
0 commit comments