🚀 set up nuxt - tailwind css

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,90 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

README.md

@@ -0,0 +1,20 @@
+# aymaneMx.com
+
+## Build Setup
+
+```bash
+# install dependencies
+$ npm install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

components/Blogs.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="wrapper-small my-5">
+    <div class="project-card md:flex mt-8">
+      <div class="img max-w-lg md:max-w-sm  mx-auto m-2">
+        <img src="~/assets/vue-vite.png" class="rounded-xl" alt="">
+      </div>
+      <div class="flex flex-col justify-between max-w-lg mx-auto">
+        <div class="txt md:px-5 lg:px-0">
+          <h2 class="text-xl font-semibold text-gray-800">Set up a Vue app running on Vite</h2>
+          <p class="text-base text-gray-700 my-3">This is a beginner guide on how to set up a vue.js app running on
+            Vite. I’ll also add and configure ESLint & Prettier for linting and code formatting, set up Tailwind CSS for
+            styling, and finally configure VueX and Vue Router.</p>
+          <a href="#" class="text-base font-semibold text-gray-700 my-3">Read more ></a>
+        </div>
+      </div>
+    </div>
+
+    <div class="project-card md:flex mt-8">
+      <div class="img max-w-lg md:max-w-sm  mx-auto m-2">
+        <img src="~/assets/docker-django-elasticsearch.png" class="rounded-xl" alt="">
+      </div>
+      <div class="flex flex-col justify-between max-w-lg mx-auto">
+        <div class="txt md:px-5 lg:px-0">
+          <h2 class="text-xl font-semibold text-gray-800">Set up a Vue app running on Vite</h2>
+          <p class="text-base text-gray-700 my-3">This is a beginner guide on how to set up a vue.js app running on
+            Vite. I’ll also add and configure ESLint & Prettier for linting and code formatting, set up Tailwind CSS for
+            styling, and finally configure VueX and Vue Router.</p>
+          <a href="#" class="text-base font-semibold text-gray-700 my-3">Read more ></a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

components/Footer.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="wrapper mx-auto px-5">
+    <hr class="h-px mt-6 border-gray-300 max-w-screen-xl mx-auto">
+    <div class="md:py-5">
+      <div class="flex flex-col items-center justify-between mt-6 md:mt-0 md:flex-row">
+        <div class="logo">
+          <nuxt-link to="/">
+            <h1 class="text-xl font-semibold text-gray-700"> <span
+              class="text-primary font-bold">Aymane</span>Mx.</h1>
+          </nuxt-link>
+        </div>
+
+        <!--        <div class="sm:hidden md:my-0 order-last md:order-none text-center">-->
+        <!--          <p class="text-lg font-semibold text-gray-600">Made with ❤</p>-->
+        <!--        </div>-->
+
+        <div>
+          <Social/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Social from '../components/Social.vue'
+
+export default {
+  components: {
+    Social
+  }
+}
+</script>

components/Header.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <nav class="wrapper py-6">
+      <div class="px-10 flex justify-between items-center">
+        <div class="logo">
+          <nuxt-link to="/">
+            <h1 class="text-2xl font-semibold text-gray-700"> <span class="text-primary font-bold">Aymane</span>Mx.</h1>
+          </nuxt-link>
+        </div>
+
+        <div class="navbar hidden md:block">
+          <nuxt-link class="nav-link hover:text-primary" to="/">Blog</nuxt-link>
+          <nuxt-link class="nav-link hover:text-primary" to="/">About</nuxt-link>
+          <nuxt-link class="nav-link hover:text-primary" to="/"><i class='bx bxs-sun'></i></nuxt-link>
+        </div>
+
+        <div class="ml-3 flex md:hidden">
+          <!-- Mobile menu button -->
+          <button @click="toggle" class="flex-center rounded-md">
+            <svg :class="[isOpen ? 'hidden' : 'block', 'h-6 w-6']" stroke="currentColor" fill="none" viewBox="0 0 24 24"
+                 width="24" height="24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+            </svg>
+            <svg :class="[isOpen ? 'block' : 'hidden', 'h-6 w-6']" stroke="currentColor" fill="none" viewBox="0 0 24 24"
+                 width="24" height="24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </nav>
+    <div :class="[isOpen ? '' : 'hidden', 'md:hidden']">
+      <div class="px-2 pt-2 pb-3 sm:px-3 bg-primary">
+        <nuxt-link to="blog" class="mt-1 mobile-link focus:outline-none hover:text-gray-500">Blog</nuxt-link>
+        <nuxt-link to="about" class="mt-1 mobile-link focus:outline-none hover:text-gray-500">About</nuxt-link>
+        <nuxt-link to="credits" class="mt-1 mobile-link focus:outline-none hover:text-gray-500">light!</nuxt-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  data() {
+    return {
+      isOpen: false
+    }
+  },
+  methods: {
+    toggle() {
+      this.isOpen = !this.isOpen
+    }
+  }
+}
+</script>
+
+<style>
+.mobile-link{
+  @apply block px-3 py-2 text-lg text-gray-900 rounded-md text-white font-medium text-center;
+}
+.nav-link{
+  @apply ml-12 font-medium text-lg text-gray-700;
+}
+</style>

components/Hero.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="flex h-96 text-center text-gray-700 m-8">
+    <div class="m-auto">
+      <h3 class="text-xl md:text-2xl lg:text-3xl font-semibold text-gray-800">
+        <span class="font-normal text-gray-700"> Hello, I am </span>Aymane MIMOUNI</h3>
+      <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-primary">I am a Software Engineer.</h2>
+      <h4 class="text-lg lg:text-xl font-semibold">I help founders add value to society by crafting software.</h4>
+      <div class="mt-5">
+        <Social />
+      </div>
+    </div>
+  </div>
+</template>

components/Social.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="wrapper text-center ">
+    <a class="social-link hover:text-primary mx-3 text-2xl text-gray-800" href="https://github.com/aymaneMx" aria-label="Github">
+      <i class='bx bxl-github'></i>
+    </a>
+
+    <a class="social-link hover:text-primary mx-3 text-2xl text-gray-800" href="https://twitter.com/aymane_max" aria-label="Twitter">
+      <i class='bx bxl-twitter'></i>
+    </a>
+
+    <a class="social-link hover:text-primary mx-3 text-2xl text-gray-800" href="https://aymanemx.medium.com/" aria-label="Instagram">
+      <i class='bx bxl-medium'></i>
+    </a>
+
+    <a class="social-link hover:text-primary mx-3 text-2xl text-gray-800" href="https://www.linkedin.com/in/aymane-mimouni/" aria-label="LinkedIn">
+      <i class='bx bxl-linkedin-square'></i>
+    </a>
+  </div>
+</template>
+
+<style>
+/*.social-link{*/
+/*  @apply mx-3 text-2xl text-gray-800;*/
+/*}*/
+</style>

components/TechStack.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="wrapper-small text-center my-5">
+    <div class="text-4xl md:text-5xl text-gray-700 text-center">
+      <i class='bx bxl-python mx-2 md:mx-4' ></i>
+      <i class='bx bxl-django mx-2 md:mx-4'></i>
+      <i class='bx bxl-javascript mx-2 md:mx-4'></i>
+      <i class='bx bxl-vuejs mx-2 md:mx-4' ></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style>
+</style>

layouts/default.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="flex flex-col h-screen justify-between">
+    <div class="">
+      <Header />
+    </div>
+    <div class="mb-auto">
+      <Nuxt />
+    </div>
+    <div class="h-10">
+      <Footer />
+    </div>
+  </div>
+</template>
+
+<style>
+.wrapper{
+  @apply max-w-screen-xl mx-auto;
+}
+.wrapper-small{
+  @apply max-w-screen-lg mx-auto px-6;
+}
+.flex-center{
+  @apply flex justify-center items-center;
+}
+</style>

nuxt.config.js

@@ -0,0 +1,49 @@
+export default {
+  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
+  ssr: false,
+
+  // Target: https://go.nuxtjs.dev/config-target
+  target: 'static',
+
+  // Global page headers: https://go.nuxtjs.dev/config-head
+  head: {
+    title: 'aymaneMx.com',
+    htmlAttrs: {
+      lang: 'en'
+    },
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: '' }
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+    ]
+  },
+
+  // Global CSS: https://go.nuxtjs.dev/config-css
+  css: [
+    'boxicons/css/boxicons.min.css'
+  ],
+
+  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+  plugins: [
+  ],
+
+  // Auto import components: https://go.nuxtjs.dev/config-components
+  components: true,
+
+  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
+  buildModules: [
+    // https://go.nuxtjs.dev/tailwindcss
+    '@nuxtjs/tailwindcss',
+  ],
+
+  // Modules: https://go.nuxtjs.dev/config-modules
+  modules: [
+  ],
+
+  // Build Configuration: https://go.nuxtjs.dev/config-build
+  build: {
+  }
+}