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 @@
-
+
diff --git a/src/components/shared/Footer.vue b/src/components/shared/Footer.vue
index fe8b0c5a..636f140f 100644
--- a/src/components/shared/Footer.vue
+++ b/src/components/shared/Footer.vue
@@ -1,5 +1,5 @@
-
+
Follow me
diff --git a/src/components/shared/Header.vue b/src/components/shared/Header.vue
index 3560fe00..eb51b27a 100644
--- a/src/components/shared/Header.vue
+++ b/src/components/shared/Header.vue
@@ -1,5 +1,5 @@
-