lambdaway :: laura

5 | list | login |load

| |

;; voici l'interface "utilisateur" de la page wiki, le "UI", le User Interface

_h1 LAURA'S

{uncover data/challenge_accepted.jpg 300 700  ;; un premier bloc "uncover"

_h2 mon coin à moi sur le web.

_p Bon, tout ça c'est pas tout ça, le digital et autres {i métaverses} c'est pas ma tasse de thé, mais comme il faut tous y passer voici mon espace à moi, où, quand j'aurai le temps, je viendrai déposer quelques-uns de mes nombreux travaux de conception pour des clients dans le genre [[LVMH|https://www.lvmh.fr/]] et autres menues sociétés.

_p Stay in touch ... vous voyez, je parle même english.

_p Laura

}                                     ;; ne pas oublier l'accolade fermant le premier bloc "uncover"

_h1 PROJETS

{center

{PICT {URL}101624527_11.jpg 100 650 
_h2 An amazing wooden house

{{col} 
_p Une éudte de [[l’uetinrivsé de Cgibamdre|https://www.cam.ac.uk/]] a mtrnoé que l’on peut sans pèolmrbe lrie un texte dont les lrttees sont dans le drrésode pour peu que la perrèime et la deiènrre lertte de cahuqe mot rtesent à la bnnoe pclae. Ceci mtnroe que le cveaeru ne lit pas toutes les ltreets mais pnerd le mot cmome un tout. La prveue : auoevz que vuos n’aevz pas eu de mal à lrie ce ttexe.

} ;; fin de la colonne 1

{{col} 
_p « {i L’art n’a pas pour fin de laisser des oeuvres que le temps ruine, mais de créer des artistes en tous les hommes et d’éveiller dans le vulgaire le génie endormi.} » Nietzsche.
_p Et voilà !

} ;; fin de la colonne 2

} ;; fin du PICT

{PICT {URL}184294290_08.jpg 101 400 somewhere in Japan}
{PICT {URL}280228458_06.jpg 101 900 made of a clever stack}
{PICT {URL}293969968_13.jpg 101 900 of identical pieces of wood}

{PICT {URL}308568066_09.jpg 120 900 cutted in a unique 1'x1' squared section} 
{PICT {URL}545740290_07.jpg 120 900 used to define every parts of the house}
{PICT {URL}636003070_02.jpg 120 900 the floor, walls, equipments, furnitures}

{PICT {URL}681189984_03.jpg 120 900 windows are made of simple rotating unframed glasses,}
{PICT {URL}728188514_04.jpg 120 900 the roof is a square glass facing the sky}
{PICT {URL}815229107_16.jpg 120 900 It's probably not easy to leave in such a space}

{PICT {URL}1216185341_15.jpg 101 900 but it's certainly a fantastic experience}
{PICT {URL}1245680113_12.jpg 101 900 this house is {i at home} in the forest}
{PICT {URL}1540333628_14.jpg 101 400 the nature comes inside the house}
{PICT {URL}1844683163_05.jpg 101 900 in fact there is no inside, no outside,{div} it's just something between sculpture and architecture!}

}

_h1 CONTACT / INFOS

{uncover ../lambdaway/data/escher_hands.jpg 100 400  
{div {@ style="text-align:left; "}

_p Informations diverses :

_ul {b CV}
_ul e-mail: [[laurasuteau@gmail.com|mailto:laurasuteau@gmail.com]]
_ul [[www.ijules.fr|http://www.ijules.fr/ijules/intro.html]], le site de mon frère Julien,
_ul [[colette.cerda.free.fr|http://colette.cerda.free.fr]], le port-folio de ma tata coco,
_ul [[ze '{λy} project|http://lambdaway.free.fr/lambdawalks]], le monde étrange de mon parrain,
_ul [[laura2]], première maquette,
_ul en préparation une version bilingue, dans le genre [[concepts]],
_ul ...
_ul dernière mise à jour : 2022/12/13

_p {i Laura Suteau}
}}

;; {uncover data/amelie_poulain 20 450 Et comme Amélie Poulain, j'adoooore Paris.}

;; fin de l'interface "utilisateur", passons à l'interface "codeur"

;; ce qui suit est l'espace "technique" à déplacer en principe dans une autre page, une "library"

;; le code lambdatalk

{SHOW}

{{hide}

{def col div {@ style="display:inline-block; width:45%; padding:0 2%; vertical-align:top;"}}

;; le code des blocs (image + texte)

{def URL http://b2b3.free.fr/wh_tilt/imgs/}

{def PICT
 {lambda {:url :h :w :txt}
  {div {@ class="pict" onclick="SHOW.display(this, :w)"}
   {img {@ src=":url" style="height::hpx"}} 
   {div {@ style="display:none;"}:txt} 
}}}

{def SHOW
 {div {@ id="grey" class="grey"}}
 {div {@ id="show" onclick="SHOW.hide()"} 
  {img {@ src="" width="100%" onclick="return false"}}
  {div {@ onclick="return false"}}  
}} 
{def SHOW
 {div {@ id="grey" class="grey"}}
 {div {@ id="show"} 
  {img {@ src="" width="100%" onclick="SHOW.hide()"}}
  {div {@ onclick="return true"}}   
}} 
}

;; le code javascript

{script

// le code des blocs (image + texte)

var SHOW = (function () {

var display = function(obj, w) {
    var show = document.getElementById('show');
    show.style.width = w + 'px';
    show.style.marginLeft = -(w+20)/2 + 'px';
    document.getElementById("show").children[0].src = obj.children[0].src; 
    document.getElementById("show").children[1].innerHTML = obj.children[1].innerHTML;
    show.style.display = 'block';    
    document.getElementById('grey').style.display = 'block'; 
  };

var hide = function() { 
    document.getElementById('grey').style.display = 'none'; 
    document.getElementById('show').style.display = 'none'; 
  };

return {display:display, hide:hide}

})();

}

;; les règles CSS

{style

;; les règles des blocs (image + texte)

img { box-shadow:0 0 8px #000; }

.pict {
  display:inline-block;
  vertical-align:top;
  margin:5px; padding:0;  
  cursor:grab;
  transition:all 1s; 
}

.pict:hover {
  box-shadow:0 0 8px #0ff;
  transform:scale( 1.5 );
  ;; transform:rotate( -5deg );
}

.grey {
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:2000px;  
  background:#000;
  opacity:0.5;
}

#show {
  display:none;
  position:fixed;
  top:10px; left:50%;
  width:600px; margin-left:-310px;
  box-shadow:0 0 8px #000;
  background:#333;
  color:#fff;
  padding:10px; 
}

;; les règles de la page

@font-face {
  font-family: 'Quicksand';
  src: url(data/quicksand.woff) format('woff');
}

body { background:#222; } 
#page_frame { border:0; background:#222; width:600px; }
#page_content { background:transparent; color:#fff; border:0; box-shadow:0 0 0; font-family:Quicksand, optima; }
.page_menu { background:transparent; opacity:0.3; color:#fff; }

a { color:#f80; }
a[href^="http://"]:after { content: " ➚"; } 
pre { box-shadow:0 0 8px #000; padding:5px; background:#444; color:#fff; font:normal 1.0em courier; }
b { color:red; }
}