this repo has no description
✨ Add /about page, re-style work cards
+154
-42
+3
-1
components/gallery.templ
+3
-1
components/gallery.templ
···
12
12
13
13
templ GalleryPage(works []ortfodb.AnalyzedWork, language string, title string, titleIsAlreadyTranslated bool) {
14
14
<main class={ galleryPageMain() }>
15
-
<h1 i18n?={ !titleIsAlreadyTranslated }>{ title }</h1>
15
+
if title != "" {
16
+
<h1 i18n?={ !titleIsAlreadyTranslated }>{ title }</h1>
17
+
}
16
18
{ children... }
17
19
@WorksGrid(works, language, "works")
18
20
</main>
+10
components/intro.templ
+10
components/intro.templ
···
1
+
package components
2
+
3
+
templ Intro() {
4
+
<section class="intro">
5
+
<p class="pre-h1" i18n>Hi! I'm Ewen Le Bihan.</p>
6
+
<h1 i18n>These are my creations.</h1>
7
+
<p i18n>I'm interested in almost anything that is both creative and digital.</p>
8
+
{ children... }
9
+
</section>
10
+
}
+33
components/ui.templ
+33
components/ui.templ
···
1
+
package components
2
+
3
+
import "github.com/ewen-lbh/portfolio/shared"
4
+
5
+
css iconedLink() {
6
+
display: inline-flex;
7
+
align-items: center;
8
+
text-decoration: none;
9
+
transition: font-weight 0.125s ease-in-out;
10
+
}
11
+
12
+
css iconedLinkIcon() {
13
+
height: 1.3em;
14
+
}
15
+
16
+
css iconedLinkText() {
17
+
margin-left: 0.5em;
18
+
}
19
+
20
+
templ ArrowLink(href string) {
21
+
@shared.OnHover(
22
+
iconedLink(),
23
+
shared.Declarations{
24
+
"font-weight": "bold",
25
+
},
26
+
)
27
+
<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>
32
+
</a>
33
+
}
+15
-8
components/work_card.templ
+15
-8
components/work_card.templ
···
23
23
}
24
24
25
25
func css(work ortfodb.AnalyzedWork, language string) templ.Component {
26
-
return shared.CSS(map[string]map[string]string{
26
+
return shared.CSS(shared.Selectors{
27
27
"[data-work=" + work.ID + "]": {
28
28
"--secondary": shared.Color(work.Colors(language).Secondary),
29
29
"--primary": shared.Color(work.Colors(language).Primary),
···
37
37
38
38
css card() {
39
39
display: flex;
40
-
background-color: var(--primary, white);
41
-
color: var(--secondary, black);
40
+
background-color: white;
41
+
color: black;
42
42
overflow: hidden;
43
-
border-radius: 0.75em;
44
-
transition: transform 0.2s ease-in-out;
43
+
transition: all 0.25s ease, box-shadow 0.12s ease-in-out;
45
44
width: 300px;
45
+
box-shadow: 0 0 0 0px var(--primary, black);
46
46
}
47
47
48
48
css image() {
49
49
height: 100%;
50
50
width: 100%;
51
51
background-color: white;
52
+
transition: all 0.25s ease 0.12s;
52
53
}
53
54
54
55
css anchor() {
···
79
80
padding: 0;
80
81
margin: 0;
81
82
column-gap: 0.5em;
83
+
font-size: 0.8em;
82
84
}
83
85
84
86
css title() {
···
92
94
@css(work, language)
93
95
<style>
94
96
article.work:hover, article.work:focus-within {
95
-
transform: scale(1.1);
96
-
z-index: 1;
97
+
box-shadow: 0 0 0 5px var(--primary, black);
98
+
color: var(--secondary, black);
99
+
background-color: var(--primary, white);
100
+
border-radius: 0.75em;
101
+
}
102
+
article.work:hover img, article.work:focus-within img {
103
+
border-radius: 0 0 0.75em 0.75em;
97
104
}
98
105
99
106
article.work .info * {
···
122
129
}
123
130
<div class={ "info", info() }>
124
131
<div class={ infoTitleAndDate() }>
125
-
<span class={title()}>
132
+
<span class={ title() }>
126
133
@shared.HTML(work.Content[language].Title)
127
134
</span>
128
135
if work.Metadata.CreatedAt().Year() != 9999 {
+33
-24
i18n/fr.po
+33
-24
i18n/fr.po
···
12
12
"Content-Transfer-Encoding: 8bit\n"
13
13
"X-Generator: Poedit 3.4.1\n"
14
14
15
+
msgid "Get my resume"
16
+
msgstr "Voir mon CV"
17
+
15
18
msgid "Hi! I'm Ewen Le Bihan."
16
19
msgstr "Hey! Je suis Ewen Le Bihan."
20
+
21
+
msgid "I'm interested in almost anything that is both creative and digital."
22
+
msgstr "Je suis intéressé par tout ce qui est à la fois créatif et numérique."
23
+
24
+
msgid "Learn more"
25
+
msgstr "En savoir plus"
17
26
18
27
msgid "Proudly powered by <a href=\"https://github.com/ortfo\">ortfo</a>, my portfolio database management system and <a href=\"https://github.com/a-h/templ\">templ</a>"
19
28
msgstr "Fièrement propulsé par <a href=\"https://github.com/ortfo\">ortfo</a>, mon système de gestion de base de données pour les portfolios et <a href=\"https://github.com/a-h/templ\">templ</a>"
···
132
141
msgid "motion design"
133
142
msgstr "motion design"
134
143
135
-
msgid "posters"
136
-
msgstr "affiches"
137
-
138
-
msgid "programs"
139
-
msgstr "programmes"
140
-
141
-
msgid "sites"
142
-
msgstr "sites"
143
-
144
-
msgid "thumbnails"
145
-
msgstr "miniatures"
146
-
147
-
msgid "typefaces"
148
-
msgstr "fontes"
149
-
150
-
msgid "typography"
151
-
msgstr "typographie"
152
-
153
-
msgid "visual identities"
154
-
msgstr "identités visuelles"
155
-
156
-
msgid "web extensions"
157
-
msgstr "extensions web"
158
-
159
144
msgid "music"
160
145
msgstr "musique"
161
146
···
174
159
msgid "poster"
175
160
msgstr "affiche"
176
161
162
+
msgid "posters"
163
+
msgstr "affiches"
164
+
177
165
msgid "program"
178
166
msgstr "programme"
167
+
168
+
msgid "programs"
169
+
msgstr "programmes"
170
+
171
+
msgid "sites"
172
+
msgstr "sites"
173
+
174
+
msgid "thumbnails"
175
+
msgstr "miniatures"
179
176
180
177
msgid "programming"
181
178
msgstr "programmation"
···
191
188
192
189
msgid "typeface"
193
190
msgstr "fonte"
191
+
192
+
msgid "typefaces"
193
+
msgstr "fontes"
194
+
195
+
msgid "typography"
196
+
msgstr "typographie"
197
+
198
+
msgid "visual identities"
199
+
msgstr "identités visuelles"
200
+
201
+
msgid "web extensions"
202
+
msgstr "extensions web"
194
203
195
204
msgid "visual identity"
196
205
msgstr "identité visuelle"
+2
main.go
+2
main.go
···
99
99
redirect(filepath.Join("to", site.Name), site.URL)
100
100
}
101
101
102
+
handlePage("about", pages.AboutPage(translations.language))
103
+
102
104
go http.ListenAndServe(":"+fmt.Sprint(port), server)
103
105
fmt.Printf("[%s] Server started on http://localhost:%d\n", translations.language, port)
104
106
+32
pages/about.templ
+32
pages/about.templ
···
1
+
package pages
2
+
3
+
import "github.com/ewen-lbh/portfolio/components"
4
+
5
+
templ english() {
6
+
<section><h2>arts</h2><p>Drawing at the school of fine arts in Nîmes, painting and sculpture workshops. Since I was 7 years old, I've been composing electronic music, taking piano and DJ lessons and participating in a music production masterclass. During my college years, I made many posters and logos using various software (3D, motion design, graphic design...)</p></section>
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
+
<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
+
<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
+
}
12
+
13
+
templ french() {
14
+
<section><h2>artistique</h2><p>Dessin à l'école des beaux-arts de Nîmes, ateliers de peinture, de sculpture. Depuis mes 7 ans, je compose de la musique électronique, j'ai suivi des cours de piano et de DJ et participé à une masterclass de production musicale. Pendant mes années de collège, j'ai réalisé de nombreuses affiches et logos en utilisant divers logiciels (3D, motion design, graphisme…)</p></section>
15
+
<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
+
<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
+
<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>
19
+
}
20
+
21
+
templ AboutPage(language string) {
22
+
@components.Intro() {
23
+
@components.ArrowLink("/resume") {
24
+
Get my resume
25
+
}
26
+
}
27
+
if language == "fr" {
28
+
@french()
29
+
} else {
30
+
@english()
31
+
}
32
+
}
+5
-2
pages/index.templ
+5
-2
pages/index.templ
···
4
4
import "github.com/ewen-lbh/portfolio/components"
5
5
6
6
templ Index(db ortfodb.Database, language string) {
7
-
@components.GalleryPage(db.WorksSlice(), language, "Hi! I'm Ewen Le Bihan.", false) {
8
-
<p i18n class="intro">These are my creations.</p>
7
+
@components.Intro() {
8
+
@components.ArrowLink("/about") {
9
+
Learn more
10
+
}
9
11
}
12
+
@components.GalleryPage(db.WorksSlice(), language, "", false)
10
13
}
+6
-6
pages/work.templ
+6
-6
pages/work.templ
···
5
5
import "github.com/ewen-lbh/portfolio/shared"
6
6
import "fmt"
7
7
8
-
func gridAreas(layout ortfodb.Layout) map[string]map[string]string {
8
+
func gridAreas(layout ortfodb.Layout) shared.Selectors {
9
9
var areas []string
10
10
for _, row := range layout.Normalize() {
11
11
var rowAreas []string
···
15
15
areas = append(areas, "'"+strings.Join(rowAreas, " ")+"'")
16
16
}
17
17
18
-
declarations := make(map[string]map[string]string)
18
+
declarations := make(shared.Selectors)
19
19
20
-
declarations["section.content"] = map[string]string{
20
+
declarations["section.content"] = shared.Declarations{
21
21
"display": "grid",
22
22
"grid-template-areas": strings.Join(areas, " "),
23
23
}
24
24
25
25
for _, id := range layout.BlockIDs() {
26
-
declarations["[data-block='"+id+"']"] = map[string]string{
26
+
declarations["[data-block='"+id+"']"] = shared.Declarations{
27
27
"grid-area": string(id),
28
28
}
29
29
}
···
31
31
return declarations
32
32
}
33
33
34
-
func colorVariables(work ortfodb.AnalyzedWork, language string) map[string]map[string]string {
34
+
func colorVariables(work ortfodb.AnalyzedWork, language string) shared.Selectors {
35
35
palette := work.Colors(language)
36
-
return map[string]map[string]string{
36
+
return shared.Selectors{
37
37
"body": {
38
38
"--primary": shared.Color(palette.Secondary),
39
39
"--secondary": shared.Color(palette.Primary),
