From 0934eb2f32b9fc52e6cf0f8f9e7230123ec1fb0b Mon Sep 17 00:00:00 2001 From: nstoman Date: Sat, 17 Jul 2021 20:11:44 +0430 Subject: [PATCH 01/15] MD file setup --- README.md | 42 ++++++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index bddc14fd..1b801d9f 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 --global @gridsome/cli` +1. Make sure you have Vue CLI installed. If you don't have it: `npm install --global @gridsome/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 the project is based on Gridsome, I wanted to create a pure Vue.js and TailwindCSS version of it +- Check out a [screencast I did](https://www.youtube.com/) where I go through the process of building this portfolio (Coming Soon). +- Illustrations from [unDraw](https://undraw.co) From 1e5e16648fd384854795d49ca4cb14fc6b0b869c Mon Sep 17 00:00:00 2001 From: nstoman Date: Sat, 17 Jul 2021 20:26:20 +0430 Subject: [PATCH 02/15] Dark mode changes --- src/assets/css/app.css | 74 +++++++++------------------ src/assets/css/tailwind.css | 30 +++++++++++ src/components/about/AboutCounter.vue | 2 +- src/components/shared/Footer.vue | 2 +- src/components/shared/Header.vue | 2 +- tailwind.config.js | 4 +- 6 files changed, 58 insertions(+), 56 deletions(-) diff --git a/src/assets/css/app.css b/src/assets/css/app.css index c2043b36..a053642f 100644 --- a/src/assets/css/app.css +++ b/src/assets/css/app.css @@ -4,59 +4,31 @@ */ .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; + /* + ** Light Mode: Background Colors Variables + */ + --bg-background-primary: #f7f8fc; + --bg-background-secondary: #ffffff; + --bg-background-ternary: #f6f7f8; + /* + ** Light Mode: Body Text Colors Variables + */ + --text-liText-primary: rgba(107, 114, 128, 1); + --text-liText-secondary: rgba(75, 85, 99, 1); + --text-liText-ternary: rgba(31, 41, 55, 1); } .theme-dark { + /* + ** Dark Mode: Background Colors Variables + */ --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; + --bg-background-secondary: #102d44; + --bg-background-ternary: #1e3851; + /* + ** Dark Mode: Body Text Colors Variables + */ + --text-liText-primary: #ffffff; + --text-liText-secondary: #f7f8fc; + --text-liText-ternary: #f6f7f8; } diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css index 7f393742..51b36731 100644 --- a/src/assets/css/tailwind.css +++ b/src/assets/css/tailwind.css @@ -3,3 +3,33 @@ @tailwind components; @tailwind utilities; + +.theme-light { + /* + ** Light Mode: Background Colors Variables + */ + --bg-background-primary: #f7f8fc; + --bg-background-secondary: #ffffff; + --bg-background-ternary: #f6f7f8; + /* + ** Light Mode: Body Text Colors Variables + */ + --text-liText-primary: rgba(107, 114, 128, 1); + --text-liText-secondary: rgba(75, 85, 99, 1); + --text-liText-ternary: rgba(31, 41, 55, 1); +} + +.theme-dark { + /* + ** Dark Mode: Background Colors Variables + */ + --bg-background-primary: #0d2438; + --bg-background-secondary: #102d44; + --bg-background-ternary: #1e3851; + /* + ** Dark Mode: Body Text Colors Variables + */ + --text-liText-primary: #ffffff; + --text-liText-secondary: #f7f8fc; + --text-liText-ternary: #f6f7f8; +} diff --git a/src/components/about/AboutCounter.vue b/src/components/about/AboutCounter.vue index 2e477bee..02bb431c 100644 --- a/src/components/about/AboutCounter.vue +++ b/src/components/about/AboutCounter.vue @@ -1,5 +1,5 @@