this repo has no description
✨ Style work pages & more stuff
+146
-23
+29
-6
components/ui.templ
+29
-6
components/ui.templ
···
7
7
align-items: center;
8
8
text-decoration: none;
9
9
transition: font-weight 0.125s ease-in-out;
10
+
text-underline-offset: .5ch;
10
11
}
11
12
12
13
css iconedLinkIcon() {
···
17
18
margin-left: 0.5em;
18
19
}
19
20
20
-
templ ArrowLink(href string) {
21
+
func optionalStyles(styles ...templ.CSSClass) templ.CSSClass {
22
+
if len(styles) == 0 {
23
+
return templ.ConstantCSSClass("")
24
+
}
25
+
return styles[0]
26
+
}
27
+
28
+
templ ArrowLink(href string, styles ...templ.CSSClass) {
29
+
@shared.OnHover(
30
+
iconedLink(),
31
+
shared.Declarations{
32
+
"text-decoration": "underline 0.125em",
33
+
},
34
+
)
35
+
<a class={ iconedLink(), optionalStyles(styles...) } href={ templ.SafeURL(href) }>
36
+
<svg class={ iconedLinkIcon() } width="66" height="33" viewBox="0 0 66 33" fill="none" xmlns="http://www.w3.org/2000/svg">
37
+
<path d="M17.9625 2L3 16.5M3 16.5L17.9625 31M3 16.5H66" stroke="currentColor" stroke-width="3" transform="rotate(180 33 16.5)"></path>
38
+
</svg>
39
+
{ children... }
40
+
</a>
41
+
}
42
+
43
+
templ GoBackLink(href string) {
21
44
@shared.OnHover(
22
45
iconedLink(),
23
46
shared.Declarations{
24
-
"font-weight": "bold",
47
+
"text-decoration": "underline 0.125em",
25
48
},
26
49
)
27
50
<a class={ iconedLink() } href={ templ.SafeURL(href) }>
28
-
<img class={ iconedLinkIcon() } src={ string(shared.Asset("icons/arrow-right.svg")) }/>
29
-
<span i18n>
30
-
{ children... }
31
-
</span>
51
+
<svg class={ iconedLinkIcon() } width="66" height="33" viewBox="0 0 66 33" fill="none" xmlns="http://www.w3.org/2000/svg">
52
+
<path d="M17.9625 2L3 16.5M3 16.5L17.9625 31M3 16.5H66" stroke="currentColor" stroke-width="3"></path>
53
+
</svg>
54
+
{ children... }
32
55
</a>
33
56
}
34
57
+12
-3
pages/about.templ
+12
-3
pages/about.templ
···
7
7
<section><h2>digital</h2><p>I learned to program in different computer languages: HTML, Python and JavaScript, which allowed me to create my website and, currently, a web application for students. All my programming projects are visible to everyone on my GitHub profile: all my projects are "Open Source".</p></section>
8
8
<section><h2>linguistics</h2><p>English being essential to read documentations, I have deepened this language (TOEIC Bridge: 176/180), conversed by mail with an American to realize a logo. I am also fascinated by writing since childhood: Cyrillic (hence my choice of <abbr title="Langue Vivante 3, an optional third language course available to high school students">LV3</abbr>, Russian), Greek (private lessons) and hiraganas and katakanas (Japanese, self-taught).</p></section>
9
9
<section><h2>science</h2><p>I'm also interested in mathematic's language: I chose to continue my scientific education after high school by enrolling in a "classe préparatoire aux grandes écoles", an intensive 2-year program that prepares students for the competitive entrance exams to the top engineering schools. I sometimes learn complex mathematical concepts by browsing on wikipedia or by watching videos from YouTube channels such as "3Blue1Brown" or "Numerphile".</p></section>
10
-
<section class="go-back"><a class="arrow-link" href="/"><img src="https://assets.ewen.works/icons/arrow-left.svg"/><p>Back home</p></a></section>
11
10
}
12
11
13
12
templ french() {
···
15
14
<section><h2>numérique</h2><p>J'ai appris à programmer dans différents langages informatiques: HTML, Python et JavaScript, ce qui m'a permis de créer mon site et, actuellement, une application web pour étudiants. J'ai aussi pour projet la création de plusieurs langages de programmation.</p><p>Tout mes projets de programmation sont visibles par tous sur mon <a href="https://github.com/ewen-lbh">profil Github</a>: tout mes projets sont dits "Open Source".</p></section>
16
15
<section><h2>linguistique</h2><p>L'anglais étant indispensable à la lecture de documentations et plus généralement à l'autodidactie, j'ai approfondi cette langue (TOEIC: 950/990), conversé par mail avec un américain pour réaliser un logo. Je suis aussi fasciné depuis l'enfance par l'écriture: le cyrillique (d'où mon choix de LV3, le russe), le grec (cours particuliers) et les hiraganas et katakanas (japonais en autodidacte).</p></section>
17
16
<section><h2>scientifique</h2><p>Le langage mathématique m'intéresse tout autant: j'ai choisi de poursuivre mon éducation scientifique après le lycée en m'inscrivant en classe préparatoire aux grandes écoles, un cursus intensif en 2 ans préparant aux concours d'admissions à des grandes écoles d'ingénieur. Il m'arrive d'appréhender des concepts complexes mathématiques en naviguant sur wikipédia anglais ou en regardant des vidéos de chaînes YouTube telles que <a href="https://www.youtube.com/c/3blue1brown">3Blue1Brown</a> ou <a href="https://youtube.com/c/numberphile">Numerphile</a></p></section>
18
-
<section class="go-back"><a class="arrow-link" href="/"><img src="https://assets.ewen.works/icons/arrow-left.svg"/><p>Retour</p></a></section>
17
+
}
18
+
19
+
css goBackSection() {
20
+
display: flex;
21
+
justify-content: center;
22
+
align-items: center;
19
23
}
20
24
21
25
templ AboutPage(language string) {
22
26
@components.Intro() {
23
27
@components.ArrowLink("/resume") {
24
-
Get my resume
28
+
<i18n>Get my resume</i18n>
25
29
}
26
30
}
27
31
if language == "fr" {
···
29
33
} else {
30
34
@english()
31
35
}
36
+
<section class={ goBackSection() }>
37
+
@components.GoBackLink("/") {
38
+
<i18n>Go back</i18n>
39
+
}
40
+
</section>
32
41
}
+1
-1
pages/index.templ
+1
-1
pages/index.templ
+93
-13
pages/work.templ
+93
-13
pages/work.templ
···
10
10
for _, row := range layout.Normalize() {
11
11
var rowAreas []string
12
12
for _, cell := range row {
13
-
rowAreas = append(rowAreas, string(cell))
13
+
rowAreas = append(rowAreas, string("_"+cell))
14
14
}
15
15
areas = append(areas, "'"+strings.Join(rowAreas, " ")+"'")
16
16
}
···
18
18
declarations := make(shared.Selectors)
19
19
20
20
declarations["section.content"] = shared.Declarations{
21
-
"display": "grid",
22
21
"grid-template-areas": strings.Join(areas, " "),
23
22
}
24
23
25
24
for _, id := range layout.BlockIDs() {
26
25
declarations["[data-block='"+id+"']"] = shared.Declarations{
27
-
"grid-area": string(id),
26
+
"grid-area": fmt.Sprintf("_%s", id),
28
27
}
29
28
}
30
29
···
70
69
}
71
70
72
71
templ MediaBlock(block ortfodb.Media) {
73
-
<figure>
72
+
<figure class={ figureStyles() }>
73
+
if block.Caption != "" {
74
+
<figcaption class={ figureCaptionStyles() }>{ block.Caption }</figcaption>
75
+
}
74
76
switch GeneralContentType(block.ContentType) {
75
77
case "image":
76
-
<a href={ templ.URL(shared.Media(block.DistSource)) }>
77
-
<img src={ MediaSrc(block) } alt={ block.Alt }/>
78
+
<a class={ figureLinkStyles() } href={ templ.URL(shared.Media(block.DistSource)) }>
79
+
<img class={ imageStyles() } src={ MediaSrc(block) } alt={ block.Alt }/>
78
80
</a>
79
81
case "video":
80
82
<video
···
100
102
default:
101
103
switch block.ContentType {
102
104
case "application/pdf":
103
-
<a href={ templ.URL(shared.Media(block.DistSource)) }>
105
+
<a class={ figureLinkStyles() } href={ templ.URL(shared.Media(block.DistSource)) }>
104
106
<img src={ MediaSrc(block) } alt={ block.Alt }/>
105
107
</a>
106
108
default:
107
109
@UnsupportedMediaTypeConsoleError(block.ContentType)
108
110
}
109
111
}
110
-
if block.Caption != "" {
111
-
<figcaption>{ block.Caption }</figcaption>
112
-
}
113
112
</figure>
114
113
}
115
114
115
+
css linkBlockDomain() {
116
+
font-family: Inconsolata, monospace;
117
+
font-weight: 500;
118
+
font-size: 0.8em;
119
+
opacity: 0.7;
120
+
line-height: 1;
121
+
}
122
+
123
+
css linkBlockText() {
124
+
line-height: 1;
125
+
}
126
+
127
+
css linkBlockContent() {
128
+
display: flex;
129
+
flex-direction: column;
130
+
justify-content: center;
131
+
row-gap: 0.25em;
132
+
}
133
+
116
134
templ LinkBlock(block ortfodb.Link) {
117
-
<a href={ templ.URL(block.URL) } class="standalone-link">{ block.Text.String() }</a>
135
+
@components.ArrowLink(block.URL, linkBlockLinkStyle()) {
136
+
<div class={ linkBlockContent() }>
137
+
<span class={ linkBlockText() }>
138
+
@shared.HTML(block.Text)
139
+
</span>
140
+
<div class={ linkBlockDomain() }>{ shared.DomainOfURL(block.URL) }</div>
141
+
</div>
142
+
}
118
143
}
119
144
120
145
css tagLink() {
···
138
163
font-size: 1.5em;
139
164
}
140
165
166
+
css contentSectionStyles() {
167
+
display: grid;
168
+
gap: 2em;
169
+
margin: 2rem auto;
170
+
max-width: 1200px;
171
+
}
172
+
173
+
css blockStyles() {
174
+
background-color: var(--primary, black);
175
+
color: var(--secondary, white);
176
+
display: flex;
177
+
justify-content: center;
178
+
border-radius: 0.5rem;
179
+
overflow: hidden;
180
+
min-width: 0;
181
+
min-height: 0;
182
+
font-size: 1.2rem;
183
+
}
184
+
185
+
css paragraphBlockStyle() {
186
+
padding: 1rem 2rem;
187
+
}
188
+
189
+
css linkBlockLinkStyle() {
190
+
padding: 1rem 2rem;
191
+
width: 100%;
192
+
display: flex;
193
+
justify-content: center;
194
+
align-items: center;
195
+
text-decoration: none;
196
+
}
197
+
198
+
css figureLinkStyles() {
199
+
display: flex;
200
+
}
201
+
202
+
css figureStyles() {
203
+
display: flex;
204
+
flex-direction: column;
205
+
margin: 0;
206
+
}
207
+
208
+
css figureCaptionStyles() {
209
+
display: flex;
210
+
justify-content: center;
211
+
align-items: center;
212
+
flex-grow: 1;
213
+
padding: 1rem 2rem;
214
+
font-size: 1rem;
215
+
}
216
+
217
+
css imageStyles() {
218
+
width: 100%;
219
+
}
220
+
141
221
templ Work(work ortfodb.AnalyzedWork, tags []shared.Tag, techs []shared.Technology, lang string) {
142
222
@components.IntroWith(
143
223
shared.FormatDate(work.Metadata.CreatedAt(), "January 2006", lang),
···
157
237
}
158
238
<main>
159
239
@shared.CSS(shared.Merge(colorVariables(work, lang), gridAreas(work.Content[lang].Layout)))
160
-
<section class="content">
240
+
<section class={ contentSectionStyles(), "content" }>
161
241
for _, block := range work.Content[lang].Blocks {
162
242
<div
163
-
class="block"
243
+
class={ blockStyles(), templ.KV(paragraphBlockStyle(), block.Type.IsParagraph()) }
164
244
data-block={ block.ID }
165
245
if block.Anchor != "" {
166
246
id={ block.Anchor }