add contact

src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-// TODO changer separateur entre lieux et  f
 import IAm from './components/IAm.vue'
+import GetInTouch from './components/GetInTouch.vue'
 import JobDescription from './components/JobDescription.vue'
 import LangLine from '@/components/Langline.vue'
 import JobDates from '@/components/JobDates.vue'
@@ -167,6 +167,10 @@ import SideMenu from './components/SideMenu.vue'
           <li>Radio Control FPV plane</li>
         </ul>
       </div>
+      <h3>Get in touch</h3>
+      <div class="section">
+        <GetInTouch />
+      </div>
     </div>
   </div>
   <div class="footer"></div>

src/components/GetInTouch.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+const phone = ref('06 67 ●● ●● ●●')
+const mail = ref('[name]@[domain].com')
+function showPhone() {
+  phone.value = '06 67 38 67 60'
+}
+function showMail() {
+  mail.value = 'julienlaville@pm.me'
+}
+</script>
+<template>
+  <div class="GetInTouch">
+    Phone: <span class="hidden" @click="showPhone()">{{ phone }}</span
+    >(click me)<br />
+    Email: <span class="hidden" @click="showMail()">{{ mail }}</span
+    >(reveal)
+  </div>
+</template>
+<style lang="css" scoped>
+.GetInTouch {
+  line-height: 32px;
+}
+.hidden {
+  cursor: pointer;
+  padding: 4px 8px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
+}
+</style>