Changes

jsconfig.json

@@ -4,6 +4,7 @@
     "module": "esnext",
     "baseUrl": "./",
     "moduleResolution": "node",
+    "experimentalDisableTemplateSupport": true,
     "paths": {
       "@/*": [
         "src/*"

package.json

@@ -8,17 +8,23 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "autoprefixer": "^10",
     "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "postcss": "^8",
+    "tailwindcss": "^3",
+    "vue": "^3.2.13",
+    "vue-router": "^4.1.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "vue-cli-plugin-tailwind": "~3.0.0"
   },
   "eslintConfig": {
     "root": true,

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

src/App.vue

@@ -1,17 +1,25 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <NavBar />
+  <router-view v-slot="{ Component, route }">
+    <transition name="fade" mode="out-in">
+      <div class="w-full" :key="route.name">
+        <component :is="Component" />
+      </div>
+    </transition>
+  </router-view>
+  <PageFooter />
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
+<script type="text/javascript">
+import NavBar from '@/components/NavBar.vue';
+import PageFooter from '@/components/PageFooter.vue';
 export default {
   name: 'App',
   components: {
-    HelloWorld
-  }
-}
+    NavBar,
+    PageFooter
+  },
+};
 </script>
 
 <style>
@@ -21,6 +29,5 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/assets/tailwind.css

@@ -0,0 +1,49 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;
+
+body {
+    background-color: #85CB85;
+}
+
+.bg-color {
+    background-color: #85CB85;
+}
+
+.bg-medium-green {
+    background-color: #62BC62;
+}
+
+.btn-dark-green {
+    background-color: #1B5E64;
+    @apply text-white p-3 font-semibold text-xl rounded-xl
+}
+
+.btn-dark-green:hover {
+    background-color: #237a82;
+}
+
+.bg-dark-green {
+    background-color: #1B5E64;
+}
+
+
+.btn-white {
+    background-color: #FFFFFF;
+    @apply text-black p-4 font-semibold rounded-xl
+}
+
+.text-medium-green {
+    color: #62BC62;
+}
+
+.text-input {
+    @apply border-4 p-2 rounded-lg;
+    border-color: #85CB85;
+}
+
+.border-green {
+    border-color: #85CB85;
+}

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/NavBar.vue

@@ -0,0 +1,51 @@
+<template>
+    <nav class="bg-color w-full sm:px-4 py-2.5">
+        <div class="flex flex-wrap justify-between items-center mx-20">
+            <a href="/" class="flex items-center">
+                <img src="../assets/logo.png" alt="logo" class=" rounded-xl w-14 h-14 mr-5">
+                <span class="font-semibold text-3xl">Killian' Portfolio</span>
+            </a>
+            <button @click="toggleMenu" type="button"
+                class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg xl:hidden"
+                aria-controls="navbar-default" aria-expanded="false">
+                <span class="sr-only">Open main menu</span>
+                <svg class="w-10 h-10" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd"
+                        d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                        clip-rule="evenodd"></path>
+                </svg>
+            </button>
+            <div class="hidden w-full xl:block xl:w-auto" id="navbar-default">
+                <router-link to="/" class="btn-dark-green ml-3">Home</router-link>
+                <router-link to="/projects" class="btn-dark-green ml-3">Projects</router-link>
+                <router-link to="/about" class="btn-dark-green ml-3">About Me</router-link>
+                <a to="/contact" class="btn-dark-green ml-3" href="mailto:contact@killiandalcin.fr" target="_blank">E-Mail Me</a>
+                <a href="tel:+33649193816" to="/blog" class="btn-dark-green ml-3">Call Me</a>
+            </div>
+        </div>
+        <div v-if="isMenuOpen" class="flex-row mx-20">
+            <router-link to="/" class="flex btn-dark-green">Home</router-link>
+            <router-link to="/projects" class="flex btn-dark-green">Projects</router-link>
+            <router-link to="/about" class="flex btn-dark-green">About Me</router-link>
+            <a to="/contact" class="flex btn-dark-green" href="mailto:contact@killiandalcin.fr" target="_blank">E-Mail Me</a>
+            <a href="tel:+33649193816" to="/blog" class="flex btn-dark-green">Call Me</a>
+        </div>
+    </nav>
+</template>
+
+<script>
+export default {
+    name: "NavBar",
+    data() {
+        return {
+            isMenuOpen: false,
+        };
+    },
+    methods: {
+        toggleMenu() {
+            this.isMenuOpen = !this.isMenuOpen;
+        },
+    },
+};
+</script>

src/components/PageFooter.vue

@@ -0,0 +1,20 @@
+<template>
+    <nav class="bg-dark-green w-full sm:px-4 py-2.5">
+        <div class="mx-20 my-10">
+            <a href="/" class="flex items-center">
+                <img src="../assets/logo.png" alt="logo" class="rounded-xl w-16 h-16 mr-5">
+                <div class="w-full h-full">
+                    <span class="text-white flex justify-start font-bold text-3xl">Killian'</span>
+                    <span class="text-white flex justify-start font-bold text-3xl">DAL-CIN</span>
+                </div>
+            </a>
+            <span class="text-white flex justify-start font-semibold text-3xl">French self-taught fullstack developer.</span>
+        </div>
+    </nav>
+</template>
+
+<script>
+export default {
+    name: "PageFooter",
+};
+</script>

src/components/svgs/RightArrow.vue

@@ -0,0 +1,13 @@
+<template>
+    <svg width="88" height="205" viewBox="0 0 88 205" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M83.2071 109.129L24.7527 197.33C18.1843 207.24 2.75 202.59 2.75 190.7L2.75 14.2996C2.75 2.40982 18.1843 -2.24042 24.7527 7.67037L83.2071 95.8708C85.8703 99.8891 85.8703 105.111 83.2071 109.129Z"
+            fill="white" stroke="#1B5E64" stroke-width="4" />
+    </svg>
+</template>
+
+<script>
+export default {
+    name: 'RightArrow',
+};
+</script>

src/main.js

@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
+import './assets/tailwind.css'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')

src/router/index.js

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomePage from '../views/HomePage.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'HomePage',
+    component: HomePage
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router

src/views/HomePage.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="flex justify-between items-center rounded-xl bg-dark-green mx-24 mt-20">
+        <div class="text-white text-left ml-28 my-28">
+            <div class="font-bold text-6xl pb-4">Hi, i'm Killian DAL-CIN</div>
+            <p class="font-medium text-2xl max-w-4xl">My name is Killian' DAL-CIN, I am 19 years old, I am passionate about programming, Linux servers, all that is management of these as well as their installations in server rooms. I also have a great curiosity for new technologies, I like to learn and discover new things.</p>
+            <button class="btn-white text-xl mt-4 hover:bg-gray-300">Hire me</button>
+        </div>
+        <div>
+            <img src="../assets/logo.png" alt="logo" class="rounded-xl sm:h-32 sm:w-32 ml-auto mr-20">
+        </div>
+    </div>
+    <div class="mt-20 px-24 bg-medium-green">
+        <div class="text-white text-left py-20">
+            <div class="font-bold text-6xl pb-20">Timeline</div>
+            <div class="flex justify-between items-center">
+                <div class="bg-dark-green rounded-xl p-16 max-w-lg h-72 mx-3">
+                    <div class="font-bold text-4xl pb-4">In <span class="text-medium-green font-black">2017</span></div>
+                    <p class="tt font-normal text-4xl max-w-4xl">Started to discover Javascript and all it's capabilities.</p>
+                </div>
+                <RightArrow />
+                <div class="bg-dark-green rounded-xl p-16 max-w-lg h-72 mx-3">
+                    <div class="font-bold text-4xl pb-4">In <span class="text-medium-green font-black">2019</span></div>
+                    <p class="font-normal text-4xl max-w-4xl">Created my first public Javascript project.</p>
+                </div>
+                <RightArrow />
+                <div class="bg-dark-green rounded-xl p-16 max-w-lg h-72 mx-3">
+                    <div class="font-bold text-4xl pb-4">In <span class="text-medium-green font-black">2022</span></div>
+                    <p class="font-normal text-4xl max-w-4xl">First real Website development project.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="rounded-xl bg-dark-green mx-24 my-20">
+        <div class="mt-24">
+            <div class="p-20 grid overflow-hidden grid-cols-5 grid-rows-5">
+                <div class="box row-span-1 col-start-1 col-end-3 flex items-center">
+                    <div class="font-bold text-6xl pb-5 text-start text-white">Get in touch</div>
+                </div>
+                <div class="box row-span-1 col-start-3 col-end-6 flex items-center">
+                    <div class="font-bold text-6xl pb-5 text-start text-white">Socials</div>
+                </div>
+                <div class="box row-start-2 row-span-4 col-start-1 col-end-3 flex-auto">
+                    <div class="flex text-white font-semibold mb-2 text-3xl">Name:</div>
+                    <input class="focus:outline-green-800 flex text-input mb-10 text-3xl w-96 h-20" placeholder="Enter your name..." type="text">
+                    <div class="flex text-white font-semibold mb-2 text-3xl">Email Address:</div>
+                    <input class="focus:outline-green-800 flex text-input mb-10 text-3xl w-96 h-20" placeholder="Enter your email address..." type="text">
+                    <div class="flex text-white font-semibold mb-2 text-3xl">Message:</div>
+                    <textarea class="focus:outline-green-800 flex text-input text-3xl resize-x max-w-lg min-w-fit h-64 w-96 mb-2" placeholder="Enter your message..." type="text"></textarea>
+                    <button class="btn-white text-xl flex hover:bg-gray-300">Send</button>
+                </div>
+                <div class="box flex justify-between items-center row-start-2 row-span-2 col-start-3 col-end-6">
+                    <a href="https://github.com/Mr-KayJayDee" target="_blank" class="border-4 border-green rounded-xl w-64 h-56 bg-white transform transition duration-500 hover:scale-125">
+                        <div class="flex justify-center items-center font-bold text-4xl py-2">Github</div>
+                        <div class="flex justify-center items-center">
+                            <img src="../assets/github.png" alt="logo" class="rounded-xl h-max w-max">
+                        </div>
+                    </a>
+                    <a href="https://www.linkedin.com/in/killian-dal-cin/" target="_blank" class="border-4 border-green rounded-xl w-64 h-56 bg-white transform transition duration-500 hover:scale-125">
+                        <div class="flex justify-center items-center font-bold text-4xl py-2">Linkedin</div>
+                        <div class="flex justify-center items-center">
+                            <img src="../assets/linkedin.png" alt="logo" class="rounded-xl h-max w-max">
+                        </div>
+                    </a>
+                    <a href="https://twitter.com/killiandalcin" target="_blank" class="border-4 border-green rounded-xl w-64 h-56 bg-white transform transition duration-500 hover:scale-125">
+                        <div class="flex justify-center items-center font-bold text-4xl py-2">Twitter</div>
+                        <div class="flex justify-center items-center">
+                            <img src="../assets/twitter.png" alt="logo" class="rounded-xl h-max w-max">
+                        </div>
+                    </a>
+                </div>
+                <div class="box flex justify-between items-center row-start-4 row-span-2 col-start-3 col-end-6">
+                    <a href="https://discord.gg/5ZSGFYtnqw" target="_blank" class="border-4 border-green rounded-xl w-64 h-56 bg-white transform transition duration-500 hover:scale-125">
+                        <div class="flex justify-center items-center font-bold text-4xl py-2">Discord</div>
+                        <div class="flex justify-center items-center">
+                            <img src="../assets/discord.png" alt="logo" class="rounded-xl h-max w-max">
+                        </div>
+                    </a>
+                    <a href="https://www.instagram.com/mrkayjaydee/" target="_blank" class="border-4 border-green rounded-xl w-64 h-56 bg-white transform transition duration-500 hover:scale-125">
+                        <div class="flex justify-center items-center font-bold text-4xl py-2">Instagram</div>
+                        <div class="flex justify-center items-center">
+                            <img src="../assets/instagram.png" alt="logo" class="rounded-xl h-max w-max">
+                        </div>
+                    </a>
+                    <a href="mailto:contact@killiandalcin.fr" target="_blank" class="border-4 border-green rounded-xl w-64 h-56 bg-white transform transition duration-500 hover:scale-125">
+                        <div class="flex justify-center items-center font-bold text-4xl py-2">Mail</div>
+                        <div class="flex justify-center items-center">
+                            <img src="../assets/mail.png" alt="logo" class="rounded-xl h-max w-max">
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import RightArrow from '@/components/svgs/RightArrow.vue';
+export default {
+    name: 'HomePage',
+    components: {
+        RightArrow,
+    },
+};
+</script>

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      screens: {
+        '4xl': '1832px',
+      },
+    },
+  },
+  plugins: [],
+}