diff --git a/README.md b/README.md index bddc14fd..6fecc11c 100644 --- a/README.md +++ b/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) diff --git a/package.json b/package.json index 5941f248..eb0cd482 100644 --- a/package.json +++ b/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" + ] } diff --git a/src/App.vue b/src/App.vue index d4e385a1..625da7bc 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,12 +1,14 @@ @@ -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; } diff --git a/src/assets/css/app.css b/src/assets/css/app.css index c2043b36..9ebf6370 100644 --- a/src/assets/css/app.css +++ b/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; -} diff --git a/src/assets/images/Screen Shot 2021-07-18 at 11.15.24 AM.png b/src/assets/images/Screen Shot 2021-07-18 at 11.15.24 AM.png new file mode 100644 index 00000000..32a33e16 Binary files /dev/null and b/src/assets/images/Screen Shot 2021-07-18 at 11.15.24 AM.png differ diff --git a/src/assets/images/Screen Shot 2021-07-18 at 11.17.07 AM.png b/src/assets/images/Screen Shot 2021-07-18 at 11.17.07 AM.png new file mode 100644 index 00000000..cb971254 Binary files /dev/null and b/src/assets/images/Screen Shot 2021-07-18 at 11.17.07 AM.png differ diff --git a/src/assets/images/logo-dark.svg b/src/assets/images/logo-dark.svg new file mode 100644 index 00000000..c9e61f55 --- /dev/null +++ b/src/assets/images/logo-dark.svg @@ -0,0 +1 @@ +Stoman \ No newline at end of file diff --git a/src/assets/images/logo-light.svg b/src/assets/images/logo-light.svg new file mode 100644 index 00000000..7a64ff3f --- /dev/null +++ b/src/assets/images/logo-light.svg @@ -0,0 +1 @@ +Stoman \ No newline at end of file diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg deleted file mode 100644 index 4f977f9e..00000000 --- a/src/assets/images/logo.svg +++ /dev/null @@ -1 +0,0 @@ -Stoman \ No newline at end of file diff --git a/src/components/about/AboutCounter.vue b/src/components/about/AboutCounter.vue index 2e477bee..49dad39d 100644 --- a/src/components/about/AboutCounter.vue +++ b/src/components/about/AboutCounter.vue @@ -1,23 +1,47 @@