Merge pull request #3 from Yaty/dev

v0.3.0

index.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="Hugo Da Roit, I'm a full-stack developer. Check out my projects !">
 
-    <link rel="icon" type="image/png" sizes="32x32" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/logo_32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/logo_16x16.png">
     <!--[if IE]><link rel="shortcut icon" href="/static/img/icons/favicon.ico"><![endif]-->
     <!-- Add to home screen for Android and modern mobile browsers -->
     <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>static/manifest.json">
@@ -17,9 +17,9 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="apple-mobile-web-app-title" content="Hugo Da Roit">
-    <link rel="apple-touch-icon" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/logo_152x152.png">
     <!-- Add to home screen for Windows -->
-    <meta name="msapplication-TileImage" content="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/msapplication-icon-144x144.png">
+    <meta name="msapplication-TileImage" content="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/logo_144x144.png">
     <meta name="msapplication-TileColor" content="#000000">
     <% for (var chunk of webpack.chunks) {
         for (var file of chunk.files) {

src/App.vue

@@ -4,6 +4,7 @@
     <section class="section">
       <welcome></welcome>
       <projects></projects>
+      <opensource></opensource>
       <working-experiences></working-experiences>
       <school></school>
       <contact></contact>
@@ -16,14 +17,15 @@
   import MainHeader from './components/Header.vue'
   import Welcome from './components/Welcome.vue'
   import Projects from './components/Projects.vue'
+  import Opensource from './components/Opensource.vue'
   import WorkingExperiences from './components/WorkingExperiences.vue'
   import School from './components/School.vue'
   import Contact from './components/Contact.vue'
   import MainFooter from './components/Footer.vue'
 
   export default {
     name: 'app',
-    components: { MainHeader, Welcome, Projects, WorkingExperiences, School, Contact, MainFooter }
+    components: { MainHeader, Welcome, Projects, Opensource, WorkingExperiences, School, Contact, MainFooter }
   }
 </script>
 

src/assets/i18n.json

@@ -4,6 +4,7 @@
       "home": "Home",
       "projects": "Projects",
       "workXp": "Work experiences",
+      "opensource": "Open source contributions",
       "school": "Schooling",
       "contact": "Contact",
       "job": "Full-stack developer",
@@ -56,6 +57,7 @@
         "desc": "Draw with multiple users ! C school project."
       }
     },
+    "opensource": "Open source contributions",
     "working": {
       "title": "Working Experiences",
       "orange-intern": {
@@ -91,6 +93,7 @@
       "title": "Contact",
       "reset": "Reset",
       "submit": "Submit",
+      "mandatory": "mandatory",
       "name": {
         "label": "Name",
         "placeholder": "Your name"
@@ -114,7 +117,8 @@
     "header": {
       "home": "Accueil",
       "projects": "Projets",
-      "workXp": "Expériences de travail",
+      "workXp": "Expériences professionnelles",
+      "opensource": "Contributions Open Source",
       "school": "Scolarité",
       "contact": "Contact",
       "job": "Développeur full-stack",
@@ -167,6 +171,7 @@
         "desc": "Dessinez sur une même fenêtre avec plusieurs personnes ! Projet scolaire en C."
       }
     },
+    "opensource": "Contributions Open Source",
     "working": {
       "title": "Expériences professionnelles",
       "orange-intern": {
@@ -202,6 +207,7 @@
       "title": "Contact",
       "reset": "Réinitialiser",
       "submit": "Envoyer",
+      "mandatory": "obligatoire",
       "name": {
         "label": "Nom",
         "placeholder": "Votre nom"

src/components/Contact.vue

@@ -3,7 +3,7 @@
     <h2 class="title">{{ $t('contact.title') }}</h2>
     <form class="box">
       <div class="field">
-        <label class="label">{{ $t('contact.name.label') }}</label>
+        <label class="label">* {{ $t('contact.name.label') }}</label>
         <div class="control has-icons-left">
           <input class="input" type="text" :placeholder="$t('contact.name.placeholder')" v-model="name">
           <span class="icon is-small is-left">
@@ -13,7 +13,7 @@
       </div>
 
       <div class="field">
-        <label class="label">{{ $t('contact.email.label') }}</label>
+        <label class="label">* {{ $t('contact.email.label') }}</label>
         <div class="control has-icons-left">
           <input :class="{ input: true, 'is-danger': invalidEmail }" type="email" :placeholder="$t('contact.email.placeholder')" v-model="email">
           <span class="icon is-small is-left">
@@ -23,14 +23,14 @@
       </div>
 
       <div class="field">
-        <label class="label">{{ $t('contact.subject.label') }}</label>
+        <label class="label">* {{ $t('contact.subject.label') }}</label>
         <div class="control">
           <input class="input" type="text" :placeholder="$t('contact.subject.placeholder')" v-model="subject">
         </div>
       </div>
 
       <div class="field">
-        <label class="label">{{ $t('contact.message.label') }}</label>
+        <label class="label">* {{ $t('contact.message.label') }}</label>
         <div class="control">
           <textarea class="textarea" :placeholder="$t('contact.message.placeholder')" v-model="message"></textarea>
         </div>
@@ -40,7 +40,7 @@
 
       <div class="field is-grouped is-grouped-centered">
         <div class="control">
-          <a :class="{ button: true, 'is-primary': true, 'is-loading': contacting }" @click="send">
+          <a :class="{ button: true, 'is-primary': true, 'is-loading': contacting }" :disabled="isSubmitDisabled" @click="send">
             <span class="icon is-small" v-if="contactingSuccess">
               <i class="fa fa-check"></i>
             </span>
@@ -54,6 +54,12 @@
           <a class="button is-info" @click="reset">{{ $t('contact.reset') }}</a>
         </div>
       </div>
+      <div class="level">
+        <div class="level-left"></div>
+        <div class="level-right">
+          <p class="level-item heading">* {{ $t('contact.mandatory') }}</p>
+        </div>
+      </div>
     </form>
   </container>
 </template>
@@ -76,6 +82,17 @@
         invalidEmail: null
       }
     },
+    computed: {
+      isSubmitDisabled () {
+        const isEmailValid = Boolean(this.invalidEmail === false && this.email && this.email.length > 0)
+        const isNameValid = Boolean(this.name && this.name.length > 0)
+        const isSubjectValid = Boolean(this.subject && this.subject.length > 0)
+        const isMsgValid = Boolean(this.message && this.message.length > 0)
+        const isGotchaValid = Boolean(this.gotcha === null)
+        const res = Boolean(isEmailValid && isNameValid && isSubjectValid && isSubjectValid && isMsgValid && isGotchaValid)
+        return res === false
+      }
+    },
     watch: {
       email () {
         if (this.email) {

src/components/Header.vue

@@ -36,6 +36,7 @@
         <div id="navMenu" class="navbar-menu">
           <div class="navbar-end">
             <a class="navbar-item" href="#" v-scroll-to="'#projects'">{{ $t('header.projects') }}</a>
+            <a class="navbar-item" href="#" v-scroll-to="'#opensource'">{{ $t('header.opensource') }}</a>
             <a class="navbar-item" href="#" v-scroll-to="'#workingXp'">{{ $t('header.workXp') }}</a>
             <a class="navbar-item" href="#" v-scroll-to="'#school'">{{ $t('header.school') }}</a>
             <a class="navbar-item" href="#" v-scroll-to="'#contact'">{{ $t('header.contact') }}</a>

src/components/Opensource.vue

@@ -0,0 +1,21 @@
+<template>
+  <container id="opensource">
+    <h2 class="title">{{ $t('opensource') }}</h2>
+    <div class="columns is-centered">
+      <div class="column is-narrow">
+        <a class="image is-128x128" href="https://github.com/rafaelpimpa/buefy" target="_blank">
+          <img src="/static/img/buefy.png"/>
+        </a>
+      </div>
+    </div>
+  </container>
+</template>
+
+<script>
+  import Container from './layout/Container.vue'
+
+  export default {
+    name: 'opensource',
+    components: { Container }
+  }
+</script>

src/main.js

@@ -28,5 +28,4 @@ new Vue({
 
 // TODO Prerendering : https://github.com/vuejs-templates/pwa/blob/bcf1b27e12637dfef4c5b18ae9af1ce1a95449ca/docs/prerender.md
 // TODO Checklist : https://developers.google.com/web/progressive-web-apps/checklist
-// TODO Update /static/img/icons icons
 // TODO Open source contribution (liste verticale qui tourne ?)