change about page
TODO:
- photo bureau + lien contact me
- voir si on enleve les marges left/right
(et donc sur la nav bar aussi)
This commit is contained in:
parent
ebdea6ce76
commit
295ea9c7c9
228
src/about.ml
228
src/about.ml
@ -3,208 +3,40 @@ open Html
|
||||
open Lang
|
||||
|
||||
let get request =
|
||||
let alt = { en = "Picture of myself."; fr = "Une photo de moi." } in
|
||||
let photo = [ img request ~a:[] ~src:Sitemap.me ~alt ] in
|
||||
let cv =
|
||||
[ h6
|
||||
[ txt request ~fr:"Architecte diplomée d’État"
|
||||
~en:"State qualified architect"
|
||||
]
|
||||
; p
|
||||
[ txt_anylang
|
||||
"École Nationale Supérieure de la Ville et des territoires \
|
||||
Paris-Est, 2020"
|
||||
]
|
||||
; br ()
|
||||
; h6
|
||||
[ txt request ~fr:"Formation Structure et Architecture"
|
||||
~en:"Structure and Architecture training"
|
||||
]
|
||||
; p
|
||||
[ txt request
|
||||
~fr:
|
||||
"Département Génie Civil et Construction, École des Ponts \
|
||||
Paristech, 2020"
|
||||
~en:
|
||||
"Civil Engineering and Construction Department, École des Ponts \
|
||||
Paristech, 2020"
|
||||
]
|
||||
; br ()
|
||||
; h6
|
||||
[ txt request
|
||||
~fr:"Habilitation à la maîtrise d’ouvrage en son nom propre"
|
||||
~en:"Authorisation to manage projects in her own name"
|
||||
]
|
||||
; p
|
||||
[ txt_anylang
|
||||
"École Nationale Supérieure de la Ville et des territoires \
|
||||
Paris-Est, 2021"
|
||||
]
|
||||
]
|
||||
in
|
||||
let txt_choice = txt_choice request in
|
||||
(*let p o = p [ txt_choice o ] in*)
|
||||
let bio =
|
||||
[ p
|
||||
[ txt request
|
||||
~fr:
|
||||
"Après un début de carrière dans des agences engagées dans la \
|
||||
construction durable ainsi qu’en bureau d’étude structure, \
|
||||
j’exerce aujourd'hui en tant qu’architecte libérale et maître \
|
||||
d’œuvre afin de mettre mon savoir-faire pluridisciplinaire au \
|
||||
service des particuliers, des professionnels et des élus."
|
||||
~en:
|
||||
"After starting my career in agencies involved in sustainable \
|
||||
construction and in structural design offices, I now work as a \
|
||||
freelance architect and project manager, putting my \
|
||||
multi-disciplinary expertise at the service of private \
|
||||
individuals, professionals and elected representatives."
|
||||
]
|
||||
; p
|
||||
[ txt request
|
||||
~fr:
|
||||
"Ayant conscience que chaque projet est unique, je porte une \
|
||||
attention particulière à vos envies et vos besoins afin de vous \
|
||||
apporter des solutions qualitatives, qui vous ressemblent en \
|
||||
termes d’usage et d’esthétisme. Au delà des effets de mode, il \
|
||||
me tient à cœur de vous permettre de vous épanouir dans des \
|
||||
lieux confortables et pérennes."
|
||||
~en:
|
||||
"Aware that every project is unique, I pay particular attention \
|
||||
to your wishes and needs, so as to provide you with \
|
||||
high-quality solutions that reflect your style and use. Above \
|
||||
and beyond fashion trends, it's important to me that you can \
|
||||
flourish in comfortable, long-lasting spaces."
|
||||
]
|
||||
; p
|
||||
[ txt request
|
||||
~fr:
|
||||
"Riche de mon parcours, entre architecture, ingénierie et \
|
||||
design, je vous accompagne de la conception à la réalisation \
|
||||
dans tout type de projet."
|
||||
~en:
|
||||
"With a rich background in architecture, engineering and design, \
|
||||
I can help you with any type of project, from conception to \
|
||||
completion."
|
||||
]
|
||||
]
|
||||
in
|
||||
let photo =
|
||||
let alt = { fr = "Une photo de moi."; en = "Picture of myself." } in
|
||||
img request ~a:[] ~src:Sitemap.me ~alt
|
||||
in
|
||||
|
||||
let values =
|
||||
[ h3
|
||||
~a:[ a_class [ "left" ] ]
|
||||
[ txt request ~fr:"Analyser et concevoir" ~en:"Analysing and designing"
|
||||
]
|
||||
; p
|
||||
[ txt request
|
||||
~fr:
|
||||
"C’est en se questionnant sur les interactions entre la forme, \
|
||||
l’usage et la fonction que les dispositifs architecturaux se \
|
||||
dessinent. Grâce à la fusion de nombreux éléments et \
|
||||
paramètres, le projet se transforme en vecteur d’émotions et la \
|
||||
construction devient architecture. L’architecture n’est pas \
|
||||
seulement “construction”, elle est aussi “sociologie” : \
|
||||
comprendre pour qui et dans quel contexte elle est utile et \
|
||||
nécessaire. Cette démarche permet d’adapter le projet pour \
|
||||
qu’il soit au service des personnes, des villes et des \
|
||||
territoires auxquels il s’adresse, et à plus large échelle aux \
|
||||
sociétés dans lesquelles il s’implante."
|
||||
~en:
|
||||
"It’s by looking at the interactions between form, use and \
|
||||
function that architectural devices take shape. Thanks to the \
|
||||
fusion of numerous elements and parameters, the project is \
|
||||
transformed into a vector of emotions and the construction \
|
||||
becomes architecture. Architecture is not just ‘construction’, \
|
||||
it is also ‘sociology’: understanding for whom and in what \
|
||||
context it is useful and necessary. This approach enables the \
|
||||
project to be adapted so that it serves the people, towns and \
|
||||
territories it is designed for, and on a wider scale, the \
|
||||
societies in which it is implemented."
|
||||
]
|
||||
; h3
|
||||
~a:[ a_class [ "left" ] ]
|
||||
[ txt request ~fr:"Préserver et anticiper"
|
||||
~en:"Preserving and anticipating"
|
||||
]
|
||||
; p
|
||||
[ txt request
|
||||
~fr:
|
||||
"L’acte de bâtir n’est jamais anodin : La pérennité est une \
|
||||
préoccupation majeure lors de l’élaboration d’un projet, tant \
|
||||
bien par sa modularité que par sa qualité architecturale et \
|
||||
constructive. Il doit être pensé avec la volonté de s’inscrire \
|
||||
dans le temps, sans jamais perdre de son utilité ou de son \
|
||||
identité. Cette responsabilité liée au travail d’architecture \
|
||||
est d’autant plus vraie face aux enjeux environnementaux de \
|
||||
notre siècle."
|
||||
~en:
|
||||
"The act of building is never trivial: durability is a major \
|
||||
concern when developing a project, both in terms of its \
|
||||
modularity and its architectural and constructive quality. It \
|
||||
has to be designed with the intention of standing the test of \
|
||||
time, without ever losing its usefulness or its identity. The \
|
||||
responsibility that goes with architecture is all the more \
|
||||
important given the environmental challenges of our century."
|
||||
]
|
||||
; h3
|
||||
~a:[ a_class [ "left" ] ]
|
||||
[ txt request ~fr:"Bâtir durablement" ~en:"Building sustainably" ]
|
||||
; p
|
||||
[ txt request
|
||||
~fr:
|
||||
"Il est urgent de mieux concevoir nos bâtiments afin de tendre \
|
||||
vers une construction plus juste. Construire mieux, c’est \
|
||||
parfois construire moins : Restaurer, rénover, réhabiliter ; \
|
||||
c’est choisir d’introduire le réemploi de qualité dans nos \
|
||||
conceptions. Construire mieux, c’est aussi utiliser le bon \
|
||||
matériau au bon endroit en optimisant la quantité de matière ; \
|
||||
c’est sensibiliser aux alternatives de matériaux moins \
|
||||
polluants. Construire mieux, c’est respecter les territoires et \
|
||||
leur patrimoine, préserver et favoriser la biodiversité, \
|
||||
privilégier les ressources locales et les artisans, optimiser \
|
||||
et limiter nos consommations d’énergie, redonner de la place \
|
||||
aux espaces verts, encourager les nouvelles mobilités, innover \
|
||||
et repenser la ville de demain."
|
||||
~en:
|
||||
"We urgently need to improve the design of our buildings in \
|
||||
order to achieve fairer construction. Building better sometimes \
|
||||
means building less: restoring, renovating, rehabilitating; it \
|
||||
means choosing to introduce quality re-use into our designs. \
|
||||
Building better also means using the right material in the \
|
||||
right place, optimising the quantity of material; it means \
|
||||
raising awareness of less polluting alternative materials. \
|
||||
Building better means respecting local areas and their \
|
||||
heritage, preserving and promoting biodiversity, favouring \
|
||||
local resources and craftsmen, optimising and limiting our \
|
||||
energy consumption, giving green spaces back their rightful \
|
||||
place, encouraging new kind of mobilities, innovating and \
|
||||
rethinking the city of tomorrow."
|
||||
]
|
||||
]
|
||||
in
|
||||
|
||||
let content =
|
||||
let p_l = List.map (fun o -> p [ txt_choice o ]) About_data.bio_p_l in
|
||||
let bio_txt =
|
||||
div (h3 [ txt_choice { fr = "Bonjour,"; en = "Hello," } ] :: p_l)
|
||||
in
|
||||
div
|
||||
~a:[ a_class [ "about" ] ]
|
||||
[ h2
|
||||
~a:[ a_class [ "left" ] ]
|
||||
[ txt request ~fr:"Ma pratique" ~en:"My practice" ]
|
||||
; hr ()
|
||||
; div
|
||||
~a:[ a_class [ "about-grid" ] ]
|
||||
[ div
|
||||
[ div
|
||||
~a:[ a_class [ "about-subgrid" ] ]
|
||||
[ div photo; div ~a:[ a_class [ "cv" ] ] cv ]
|
||||
]
|
||||
; div bio
|
||||
]
|
||||
; h2
|
||||
~a:[ a_class [ "right" ] ]
|
||||
[ txt request ~fr:"Mes valeurs professionnelles" ~en:"My work values"
|
||||
]
|
||||
; hr ()
|
||||
; div ~a:[ a_class [ "values" ] ] values
|
||||
]
|
||||
~a:[ a_class [ "about-subgrid"; "left"; "no-indent" ] ]
|
||||
[ photo; bio_txt ]
|
||||
in
|
||||
let approach =
|
||||
let title =
|
||||
h2
|
||||
[ txt_choice
|
||||
{ fr = "MA PRATIQUE ET VISION DE L'ARCHITECTURE"
|
||||
; en = "MY APPROACH AND VISION OF ARCHITECTURE"
|
||||
}
|
||||
]
|
||||
in
|
||||
let p_l = List.map (fun o -> p [ txt_choice o ]) About_data.approach_p_l in
|
||||
let approach_txt = div p_l in
|
||||
div
|
||||
~a:[ a_class [ "about-subgrid"; "left"; "no-indent" ] ]
|
||||
[ title; approach_txt ]
|
||||
in
|
||||
let desk = div [] in
|
||||
|
||||
let content = div ~a:[ a_class [ "about-grid" ] ] [ bio; approach; desk ] in
|
||||
|
||||
let h1 = { en = "About"; fr = "À propos" } in
|
||||
|
||||
|
||||
106
src/about_data.ml
Normal file
106
src/about_data.ml
Normal file
@ -0,0 +1,106 @@
|
||||
open Lang
|
||||
|
||||
let bio_p1 =
|
||||
{ fr =
|
||||
"Je m'appelle Joanna Barreiro, je suis architecte libérale inscrite à \
|
||||
l'ordre et maître d'œuvre."
|
||||
; en =
|
||||
"My name is Joanna Barreiro and I'm a self-employed architect and \
|
||||
project manager."
|
||||
}
|
||||
|
||||
let bio_p2 =
|
||||
{ fr =
|
||||
"Issue d'un parcours pluridisciplinaire entre architecture, ingénierie \
|
||||
et design, j'ai fais mes armes dans des agences engagées dans la \
|
||||
transition énergétique et la construction durable, ainsi qu'en bureau \
|
||||
d'étude structure. Aujourd'hui, je pratique en indépendant afin de \
|
||||
mettre mon savoir-faire et mon savoir-être aux services des \
|
||||
professionnels, des particuliers et des élus."
|
||||
; en =
|
||||
"With a multi-disciplinary background in architecture, engineering and \
|
||||
design, I have worked in agencies committed to the energy transition \
|
||||
and sustainable construction, as well as in structural design offices. \
|
||||
Today, I work as a freelancer, putting my skills and know-how at the \
|
||||
service of professionals, private individuals and elected \
|
||||
representatives."
|
||||
}
|
||||
|
||||
let bio_p3 =
|
||||
{ fr =
|
||||
"Je vous accompagne de la conception à la réalisation de tout type de \
|
||||
projet, en portant une attention particulière à vos envies et vos \
|
||||
besoins afin de vous proposer des solutions qualitatives qui vous \
|
||||
ressemblent en termes d’usage et d’esthétisme."
|
||||
; en =
|
||||
"I work with you from the design stage through to completion of all \
|
||||
types of project, paying particular attention to your wishes and needs \
|
||||
so as to offer you high-quality solutions that reflect your personal \
|
||||
style and use."
|
||||
}
|
||||
|
||||
let bio_p4 =
|
||||
{ fr =
|
||||
"En complément, je réalise des audits énergétiques pour les \
|
||||
particuliers. Ce service à pour objectif de proposer des solutions \
|
||||
adaptées à chaque logement pour améliorer son confort et sa qualité, \
|
||||
tout en réduisant sa consommation énergétique et son impact \
|
||||
environnemental."
|
||||
; en =
|
||||
"I also carry out energy audits for private individuals. The aim of this \
|
||||
service is to propose solutions tailored to each home to improve its \
|
||||
comfort and quality, while reducing its energy consumption and \
|
||||
environmental impact."
|
||||
}
|
||||
|
||||
let bio_p5 =
|
||||
{ fr =
|
||||
"Je propose mes services principalement en Ile-de-France et \
|
||||
Maine-et-Loire. Si vous souhaitez échanger autour d'un projet ou d'une \
|
||||
problématique, n'hésitez pas à me contacter."
|
||||
; en =
|
||||
"I offer my services mainly in the Ile-de-France and Maine-et-Loire \
|
||||
regions. If you would like to discuss a project or a problem, please \
|
||||
don't hesitate to contact me."
|
||||
}
|
||||
|
||||
let approach_p1 =
|
||||
{ fr =
|
||||
"L'architecture, c'est ma façon de prendre soin : Prendre soin de nos \
|
||||
habitations pour prendre soin de leurs occupants ; Prendre soin de nos \
|
||||
bâtiments pour prendre soin de leurs usagers ; Prendre soin de nos \
|
||||
espaces publics pour prendre soin des territoires ; Prendre soin de \
|
||||
notre environnement pour prendre soin de la planète."
|
||||
; en =
|
||||
"Architecture is my way of taking care: taking care of our homes to take \
|
||||
care of their occupants; taking care of our buildings to take care of \
|
||||
their users; taking care of our public spaces to take care of our \
|
||||
territories; taking care of our environment to take care of the planet."
|
||||
}
|
||||
|
||||
let approach_p2 =
|
||||
{ fr =
|
||||
"L'architecture, c'est concevoir et construire mais c'est aussi \
|
||||
réhabiliter, restaurer, rénover. C'est vouloir écouter et comprendre \
|
||||
les autres. L'architecture, c'est parfois luxueux, parfois modeste. \
|
||||
C'est parfois sublimer, innover, et parfois s'adapter. C'est un outil \
|
||||
pour améliorer nos modes de vies et préserver notre santé. C'est \
|
||||
anticiper et optimiser. C'est s'assurer du confort, de l'intelligence \
|
||||
et de la pérennité des choses, de leur adaptabilité et de leur qualité. \
|
||||
L'architecture, c'est construire un héritage, le faire évoluer ou tout \
|
||||
simplement le préserver."
|
||||
; en =
|
||||
"Architecture means designing and building, but it also means \
|
||||
rehabilitating, restoring and renovating. It's about listening to and \
|
||||
understanding others. Architecture is sometimes luxurious, sometimes \
|
||||
modest. It's sometimes sublime, sometimes innovative, sometimes \
|
||||
adaptable. It's a tool for improving our lifestyles and preserving our \
|
||||
health. It means anticipating and optimising. It's about ensuring that \
|
||||
things are comfortable, intelligent, durable, adaptable and of high \
|
||||
quality. Architecture is about building a legacy, making it evolve or \
|
||||
simply preserving it."
|
||||
}
|
||||
|
||||
let bio_p_l = [ bio_p1; bio_p2; bio_p3; bio_p4; bio_p5 ]
|
||||
|
||||
let approach_p_l = [ approach_p1; approach_p2 ]
|
||||
@ -11,6 +11,7 @@
|
||||
--color-10: #997B66;
|
||||
--bg: #FFFFFF;
|
||||
--fg: #000000;
|
||||
--bg-ocre: #e1ceac;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@ -165,6 +166,18 @@ p {
|
||||
text-indent: 3em;
|
||||
}
|
||||
|
||||
.no-indent p {
|
||||
text-indent: 0em;
|
||||
}
|
||||
|
||||
.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* - projects grid - */
|
||||
|
||||
.projects-grid {
|
||||
@ -267,42 +280,34 @@ p {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.about-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4em;
|
||||
}
|
||||
|
||||
.about {
|
||||
font-size: 0.7rem;
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
.about-subgrid {
|
||||
font-size: 0.8rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 2em;
|
||||
padding-top: 5%;
|
||||
padding-bottom: 3%;
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
gap: 7%;
|
||||
}
|
||||
|
||||
.about h2 {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.2em;
|
||||
.about-subgrid:nth-child(odd) {
|
||||
background-color: var(--bg-ocre);
|
||||
}
|
||||
|
||||
.about h3 {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.2em;
|
||||
.about-subgrid h2 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.about-subgrid h3 {
|
||||
font-size: 2em;
|
||||
margin-top: 0em;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
.cv {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user