Merge pull request #1 from Yaty/dev

v0.1.0
Yaty · Sep 16, 2017 · 98ce402 · 98ce402
2 parents 12a56f9 + 69421b7
commit 98ce402
Show file tree

Hide file tree

Showing 23 changed files with 580 additions and 117 deletions.
diff --git a/index.html b/index.html
@@ -24,10 +24,11 @@
         for (var file of chunk.files) {
           if (file.match(/\.(js|css)$/)) { %>
     <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
   <body>
     <noscript>
-      This is your fallback content in case JavaScript fails to load.
+      Please enable Javascript and reload this page. Contact me : <a href="mailto:[email protected]">[email protected]</a>
     </noscript>
     <div id="app"></div>
     <!-- Todo: only include in production -->

diff --git a/package.json b/package.json
@@ -14,8 +14,8 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "vue": "^2.3.3",
-    "vue-router": "^2.3.1"
+    "bulma": "^0.5.2",
+    "vue": "^2.3.3"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

diff --git a/src/App.vue b/src/App.vue
@@ -1,54 +1,34 @@
 <template>
   <div id="app">
-    <header>
-      <span>Vue.js PWA</span>
-    </header>
-    <main>
-      <img src="./assets/logo.png" alt="Vue.js PWA">
-      <router-view></router-view>
-    </main>
+    <main-header></main-header>
+    <section class="section">
+      <welcome></welcome>
+      <projects></projects>
+      <working-experiences></working-experiences>
+      <school></school>
+      <contact></contact>
+    </section>
+    <main-footer></main-footer>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'app'
-}
-</script>
-
-<style>
-body {
-  margin: 0;
-}
-
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
+  import MainHeader from './components/Header.vue'
+  import Welcome from './components/Welcome.vue'
+  import Projects from './components/Projects.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'
 
-main {
-  text-align: center;
-  margin-top: 40px;
-}
-
-header {
-  margin: 0;
-  height: 56px;
-  padding: 0 16px 0 24px;
-  background-color: #35495E;
-  color: #ffffff;
-}
+  export default {
+    name: 'app',
+    components: { MainHeader, Welcome, Projects, WorkingExperiences, School, Contact, MainFooter }
+  }
+</script>
 
-header span {
-  display: block;
-  position: relative;
-  font-size: 20px;
-  line-height: 1;
-  letter-spacing: .02em;
-  font-weight: 400;
-  box-sizing: border-box;
-  padding-top: 16px;
-}
+<style scoped>
+  #app .container:not(:first-child) {
+    padding-top: 2rem;
+  }
 </style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/photo.jpg b/src/assets/photo.jpg
diff --git a/src/components/Contact.vue b/src/components/Contact.vue
@@ -0,0 +1,118 @@
+<template>
+  <container id="contact">
+    <h2 class="title">Contact</h2>
+    <form class="box">
+      <div class="field">
+        <label class="label">Name</label>
+        <div class="control has-icons-left">
+          <input class="input" type="text" placeholder="Your name" v-model="name">
+          <span class="icon is-small is-left">
+            <i class="fa fa-user"></i>
+          </span>
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="label">Email</label>
+        <div class="control has-icons-left">
+          <input :class="{ input: true, 'is-danger': invalidEmail }" type="email" placeholder="Your email" v-model="email">
+          <span class="icon is-small is-left">
+            <i class="fa fa-envelope"></i>
+          </span>
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="label">Subject</label>
+        <div class="control">
+          <input class="input" type="text" placeholder="Subject" v-model="subject">
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="label">Message</label>
+        <div class="control">
+          <textarea class="textarea" placeholder="Message" v-model="message"></textarea>
+        </div>
+      </div>
+
+      <input class="is-hidden" type="text" v-model="gotcha"/>
+
+      <div class="field is-grouped is-grouped-centered">
+        <div class="control">
+          <a :class="{ button: true, 'is-primary': true, 'is-loading': contacting }" @click="send">
+            <span class="icon is-small" v-if="contactingSuccess">
+              <i class="fa fa-check"></i>
+            </span>
+            <span class="icon is-small" v-else-if="contactingSuccess === false">
+              <i class="fa fa-close"></i>
+            </span>
+            <span>Submit</span>
+          </a>
+        </div>
+        <div class="control">
+          <a class="button is-info" @click="reset">Reset</a>
+        </div>
+      </div>
+    </form>
+  </container>
+</template>
+
+<script>
+  import Container from './layout/Container.vue'
+
+  export default {
+    name: 'contact',
+    components: { Container },
+    data () {
+      return {
+        name: null,
+        subject: null,
+        email: null,
+        message: null,
+        gotcha: null,
+        contacting: null,
+        contactingSuccess: null,
+        invalidEmail: null
+      }
+    },
+    watch: {
+      email () {
+        if (this.email) {
+          this.invalidEmail = !/\S+@\S+\.\S+/.test(this.email)
+        }
+      }
+    },
+    methods: {
+      send () {
+        this.contacting = true
+        this.contactingSuccess = null
+        const http = new XMLHttpRequest()
+        const url = 'https://formspree.io/[email protected]' // We use Formspree in order to send the email
+        const data = {
+          _subject: this.subject,
+          _replyto: this.email,
+          _gotcha: this.gotcha,
+          name: this.name,
+          message: this.message
+        }
+
+        http.open('POST', url, true)
+        http.setRequestHeader('Content-Type', 'application/json')
+        http.onreadystatechange = () => {
+          if (http.readyState === XMLHttpRequest.DONE) {
+            this.contactingSuccess = http.status === 200
+            this.contacting = false
+          }
+        }
+        http.send(JSON.stringify(data))
+      },
+      reset () {
+        this.name = null
+        this.subject = null
+        this.email = null
+        this.message = null
+      }
+    }
+  }
+</script>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -0,0 +1,35 @@
+<template>
+  <footer class="footer">
+    <div class="container">
+      <div class="content has-text-centered">
+        <p>
+          Made with <span class="icon"><i class="fa fa-heart"></i></span> by <a href="mailto:[email protected]">Hugo Da Roit</a>.<br>
+          The source code is licensed <a target="_blank" href="http://opensource.org/licenses/mit-license.php">MIT</a> and is available <a target="_blank" href="https://github.com/Yaty/hdaroit.fr">here</a>.
+        </p>
+        <p>
+          <a target="_blank" href="https://github.com/Yaty">
+            <span class="icon is-large">
+              <i class="fa fa-2x fa-github"></i>
+            </span>
+          </a>
+          <a target="_blank" href="https://www.linkedin.com/in/hugo-d-71b8a8104/">
+            <span class="icon is-large">
+              <i class="fa fa-2x fa-linkedin"></i>
+            </span>
+          </a>
+          <a href="mailto:[email protected]">
+            <span class="icon is-large">
+              <i class="fa fa-2x fa-envelope"></i>
+            </span>
+          </a>
+        </p>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+  export default {
+    name: 'footer'
+  }
+</script>