Add dark mode, MD file design and more UI changes

README.md

@@ -1,29 +1,31 @@
-# Clean Vue.js & TailwindCSS Portfolio Template
+# Vuejs & TailwindCSS Portfolio - With Dark Mode
 
-## Project setup
+A simple portfolio starter theme built on the top of Vue.js V3 and TailwindCSS V2
 
-```
-npm install
-```
+## Demo URL
 
-### Compiles and hot-reloads for development
+[https://vuejs-tailwindcss-portfolio.netlify.com](https://vuejs-tailwindcss-portfolio.netlify.com)
 
-```
-npm run serve
-```
+## Features
 
-### Compiles and minifies for production
+-   Simple and responsive design
+-   [Tailwind CSS v2](https://tailwindcss.com) (with PurgeCSS)
+-   [Vue.js v3](https://vuejs.org) with [Vue Router](https://router.vuejs.org)
+-   Theme Switcher with Dark Mode
+-   Smoth Scroll
+-   Projects Carousel
 
-```
-npm run build
-```
+## Installation
 
-### Lints and fixes files
+1. Make sure you have Node JS installed. If you don't have it: `npm install -g npm`
+1. Make sure you have Vue CLI installed. If you don't have it: `npm install -g @vue/cli`
+1. Clone the repo: `git clone https://github.com/NangialaiStoman/vuejs-tailwindcss-portfolio.git`
+1. `cd vuejs-tailwindcss-portfolio`
+1. `npm install`
+1. `npm run serve` to start a local dev server at `http://localhost:8080`
 
-```
-npm run lint
-```
+## Notes
 
-### Customize configuration
-
-See [Configuration Reference](https://cli.vuejs.org/config/).
+-   The dark mode is highly inspired by [Gridsome Portfolio Starter by Andre Madarang](https://github.com/drehimself/gridsome-portfolio-starter). Since that project is based on Gridsome, I wanted to create a Vue.js and TailwindCSS portfolio with dark mode
+-   Coming Soon [I'll be doing a screencast](https://www.youtube.com/c/StomanStudio). Soon I'll be uploading a video to my YouTube channel where I'll be going through the process of creating this portoflio
+-   Illustrations from [unDraw](https://undraw.co)

package.json

@@ -1,54 +1,54 @@
 {
-  "name": "vue-tailwindcss-dark-mode",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "@tailwindcss/forms": "^0.3.3",
-    "@tailwindcss/postcss7-compat": "^2.0.2",
-    "autoprefixer": "^9",
-    "core-js": "^3.6.5",
-    "feather-icons": "^4.28.0",
-    "postcss": "^7",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-import": "^14.0.2",
-    "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0",
-    "vue-cli-plugin-tailwind": "~2.0.6"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+	"name": "vuejs-tailwindcss-portfolio",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"serve": "vue-cli-service serve",
+		"build": "vue-cli-service build",
+		"lint": "vue-cli-service lint"
+	},
+	"dependencies": {
+		"@tailwindcss/forms": "^0.3.3",
+		"@tailwindcss/postcss7-compat": "^2.0.2",
+		"autoprefixer": "^9",
+		"core-js": "^3.6.5",
+		"feather-icons": "^4.28.0",
+		"postcss": "^7",
+		"postcss-flexbugs-fixes": "^5.0.2",
+		"postcss-import": "^14.0.2",
+		"postcss-preset-env": "^6.7.0",
+		"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
+		"vue": "^3.0.0",
+		"vue-router": "^4.0.0-0"
+	},
+	"devDependencies": {
+		"@vue/cli-plugin-babel": "~4.5.0",
+		"@vue/cli-plugin-eslint": "~4.5.0",
+		"@vue/cli-plugin-router": "~4.5.0",
+		"@vue/cli-service": "~4.5.0",
+		"@vue/compiler-sfc": "^3.0.0",
+		"babel-eslint": "^10.1.0",
+		"eslint": "^6.7.2",
+		"eslint-plugin-vue": "^7.0.0",
+		"vue-cli-plugin-tailwind": "~2.0.6"
+	},
+	"eslintConfig": {
+		"root": true,
+		"env": {
+			"node": true
+		},
+		"extends": [
+			"plugin:vue/vue3-essential",
+			"eslint:recommended"
+		],
+		"parserOptions": {
+			"parser": "babel-eslint"
+		},
+		"rules": {}
+	},
+	"browserslist": [
+		"> 1%",
+		"last 2 versions",
+		"not dead"
+	]
 }

src/App.vue

@@ -1,12 +1,14 @@
 <template>
-	<!-- Header Start -->
-	<Header></Header>
+	<div :class="appTheme">
+		<!-- Header Start -->
+		<Header></Header>
 
-	<!-- Render Active Component Contents Start -->
-	<router-view />
+		<!-- Render Active Component Contents Start -->
+		<router-view />
 
-	<!-- Footer Start -->
-	<Footer></Footer>
+		<!-- Footer Start -->
+		<Footer></Footer>
+	</div>
 </template>
 
 <script>
@@ -19,6 +21,11 @@ export default {
 		Header,
 		Footer,
 	},
+	data: () => {
+		return {
+			appTheme: localStorage.getItem('theme'),
+		};
+	},
 	mounted() {
 		feather.replace();
 	},
@@ -34,6 +41,5 @@ export default {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	text-align: center;
-	color: #2c3e50;
 }
 </style>

src/assets/css/app.css

@@ -2,61 +2,3 @@
  * Vuejs & TailwindCSS Portfolio Main Styling CSS File
  * Powered by: @NangialaiStoman
 */
-
-.theme-light {
-	--bg-background-primary: white;
-	--bg-background-secondary: #f7fafc;
-	--bg-background-tertiary: #e2e8f0;
-
-	--bg-background-form: white;
-
-	--text-copy-primary: #2d3748;
-	--text-copy-secondary: #4a5568;
-
-	--border-border-color-primary: white;
-}
-
-.theme-light .search-highlighted {
-	background: #f0fff4;
-}
-
-.theme-light .search-hover:hover {
-	background: #f0fff4;
-}
-
-.theme-dark .markdown-body {
-	color: #24292e;
-}
-
-.theme-dark .search-highlighted {
-	background: #2d3748;
-}
-
-.theme-dark .search-hover:hover {
-	background: #2d3748;
-}
-
-.theme-dark {
-	--bg-background-primary: #0d2438;
-	--bg-background-secondary: #102c44;
-	--bg-background-tertiary: #1e3951;
-
-	--bg-background-form: #1a202c;
-
-	--text-copy-primary: #cbd5e0;
-	--text-copy-secondary: #e2e8f0;
-
-	--border-border-color-primary: #1a202c;
-}
-
-.theme-dark .markdown-body {
-	color: #cbd5e0;
-}
-
-.theme-dark nav .active {
-	@apply border-white border-b;
-}
-
-.content-wrapper {
-	transition: background-color 0.25s;
-}

src/components/about/AboutCounter.vue

@@ -1,23 +1,47 @@
 <template>
-	<div class="mt-10 sm:mt-20 bg-gray-100 shadow-sm">
+	<div class="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
 		<div
 			class="container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
 		>
 			<div class="mb-20 sm:mb-0">
-				<p class="text-4xl font-bold text-gray-600 mb-2">12</p>
-				<span class="text-md text-gray-500">Years of experience</span>
+				<p
+					class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
+				>
+					12
+				</p>
+				<span class="text-md text-ternary-dark dark:text-ternary-light"
+					>Years of experience</span
+				>
 			</div>
 			<div class="mb-20 sm:mb-0">
-				<p class="text-4xl font-bold text-gray-600 mb-2">20k+</p>
-				<span class="text-md text-gray-500">Stars on GitHub</span>
+				<p
+					class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
+				>
+					20k+
+				</p>
+				<span class="text-md text-ternary-dark dark:text-ternary-light"
+					>Stars on GitHub</span
+				>
 			</div>
 			<div class="mb-20 sm:mb-0">
-				<p class="text-4xl font-bold text-gray-600 mb-2">92%</p>
-				<span class="text-md text-gray-500">Positive feedback</span>
+				<p
+					class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
+				>
+					92%
+				</p>
+				<span class="text-md text-ternary-dark dark:text-ternary-light"
+					>Positive feedback</span
+				>
 			</div>
 			<div>
-				<p class="text-4xl font-bold text-gray-600 mb-2">77</p>
-				<span class="text-md text-gray-500">Projects completed</span>
+				<p
+					class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
+				>
+					77
+				</p>
+				<span class="text-md text-ternary-dark dark:text-ternary-light"
+					>Projects completed</span
+				>
 			</div>
 		</div>
 	</div>

src/components/about/AboutMe.vue

@@ -8,7 +8,7 @@
 			/>
 		</div>
 		<div class="w-full sm:w-3/4 text-left">
-			<p class="mb-4 text-gray-500 text-lg">
+			<p class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
 				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
 				vel illum asperiores dignissimos cumque quibusdam et fugiat
 				voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,
@@ -22,19 +22,19 @@
 				recusandae quas, fuga voluptatibus nesciunt odit libero tenetur
 				neque consequatur ea.
 			</p>
-			<p class="mb-4 text-gray-500 text-lg">
+			<p class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
 				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
 				vel illum asperiores dignissimos cumque quibusdam et fugiat
 				voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,
 				fugit eligendi corporis laudantium adipisci soluta?
 			</p>
-			<p class="text-gray-500 text-lg">
+			<p class="text-ternary-dark dark:text-ternary-light text-lg">
 				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
 				vel illum asperiores dignissimos cumque quibusdam et fugiat
 				voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,
 				fugit eligendi corporis laudantium adipisci soluta?
 			</p>
-			<p class="mb-4 text-gray-500 text-lg">
+			<p class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
 				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
 				vel illum asperiores dignissimos cumque quibusdam et fugiat
 				voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,