Skip to content

Commit 66e81ad

Browse files
realstomanrealstoman
authored
Merge pull request #9 from NangialaiStoman/dark-mode-2
Add dark mode, MD file design and more UI changes
2 parents 761c48a + 4b0a546 commit 66e81ad

23 files changed

+437
-356
lines changed

‎README.md‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,31 @@
1-
# Clean Vue.js & TailwindCSS Portfolio Template
1+
# Vuejs & TailwindCSS Portfolio - With Dark Mode
22

3-
## Project setup
3+
A simple portfolio starter theme built on the top of Vue.js V3 and TailwindCSS V2
44

5-
```
6-
npm install
7-
```
5+
## Demo URL
86

9-
### Compiles and hot-reloads for development
7+
[https://vuejs-tailwindcss-portfolio.netlify.com](https://vuejs-tailwindcss-portfolio.netlify.com)
108

11-
```
12-
npm run serve
13-
```
9+
## Features
1410

15-
### Compiles and minifies for production
11+
- Simple and responsive design
12+
- [Tailwind CSS v2](https://tailwindcss.com) (with PurgeCSS)
13+
- [Vue.js v3](https://vuejs.org) with [Vue Router](https://router.vuejs.org)
14+
- Theme Switcher with Dark Mode
15+
- Smoth Scroll
16+
- Projects Carousel
1617

17-
```
18-
npm run build
19-
```
18+
## Installation
2019

21-
### Lints and fixes files
20+
1. Make sure you have Node JS installed. If you don't have it: `npm install -g npm`
21+
1. Make sure you have Vue CLI installed. If you don't have it: `npm install -g @vue/cli`
22+
1. Clone the repo: `git clone https://github.com/NangialaiStoman/vuejs-tailwindcss-portfolio.git`
23+
1. `cd vuejs-tailwindcss-portfolio`
24+
1. `npm install`
25+
1. `npm run serve` to start a local dev server at `http://localhost:8080`
2226

23-
```
24-
npm run lint
25-
```
27+
## Notes
2628

27-
### Customize configuration
28-
29-
See [Configuration Reference](https://cli.vuejs.org/config/).
29+
- 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
30+
- 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
31+
- Illustrations from [unDraw](https://undraw.co)

‎package.json‎

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,54 @@
11
{
2-
"name": "vue-tailwindcss-dark-mode",
3-
"version": "0.1.0",
4-
"private": true,
5-
"scripts": {
6-
"serve": "vue-cli-service serve",
7-
"build": "vue-cli-service build",
8-
"lint": "vue-cli-service lint"
9-
},
10-
"dependencies": {
11-
"@tailwindcss/forms": "^0.3.3",
12-
"@tailwindcss/postcss7-compat": "^2.0.2",
13-
"autoprefixer": "^9",
14-
"core-js": "^3.6.5",
15-
"feather-icons": "^4.28.0",
16-
"postcss": "^7",
17-
"postcss-flexbugs-fixes": "^5.0.2",
18-
"postcss-import": "^14.0.2",
19-
"postcss-preset-env": "^6.7.0",
20-
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
21-
"vue": "^3.0.0",
22-
"vue-router": "^4.0.0-0"
23-
},
24-
"devDependencies": {
25-
"@vue/cli-plugin-babel": "~4.5.0",
26-
"@vue/cli-plugin-eslint": "~4.5.0",
27-
"@vue/cli-plugin-router": "~4.5.0",
28-
"@vue/cli-service": "~4.5.0",
29-
"@vue/compiler-sfc": "^3.0.0",
30-
"babel-eslint": "^10.1.0",
31-
"eslint": "^6.7.2",
32-
"eslint-plugin-vue": "^7.0.0",
33-
"vue-cli-plugin-tailwind": "~2.0.6"
34-
},
35-
"eslintConfig": {
36-
"root": true,
37-
"env": {
38-
"node": true
39-
},
40-
"extends": [
41-
"plugin:vue/vue3-essential",
42-
"eslint:recommended"
43-
],
44-
"parserOptions": {
45-
"parser": "babel-eslint"
46-
},
47-
"rules": {}
48-
},
49-
"browserslist": [
50-
"> 1%",
51-
"last 2 versions",
52-
"not dead"
53-
]
2+
"name": "vuejs-tailwindcss-portfolio",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"@tailwindcss/forms": "^0.3.3",
12+
"@tailwindcss/postcss7-compat": "^2.0.2",
13+
"autoprefixer": "^9",
14+
"core-js": "^3.6.5",
15+
"feather-icons": "^4.28.0",
16+
"postcss": "^7",
17+
"postcss-flexbugs-fixes": "^5.0.2",
18+
"postcss-import": "^14.0.2",
19+
"postcss-preset-env": "^6.7.0",
20+
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
21+
"vue": "^3.0.0",
22+
"vue-router": "^4.0.0-0"
23+
},
24+
"devDependencies": {
25+
"@vue/cli-plugin-babel": "~4.5.0",
26+
"@vue/cli-plugin-eslint": "~4.5.0",
27+
"@vue/cli-plugin-router": "~4.5.0",
28+
"@vue/cli-service": "~4.5.0",
29+
"@vue/compiler-sfc": "^3.0.0",
30+
"babel-eslint": "^10.1.0",
31+
"eslint": "^6.7.2",
32+
"eslint-plugin-vue": "^7.0.0",
33+
"vue-cli-plugin-tailwind": "~2.0.6"
34+
},
35+
"eslintConfig": {
36+
"root": true,
37+
"env": {
38+
"node": true
39+
},
40+
"extends": [
41+
"plugin:vue/vue3-essential",
42+
"eslint:recommended"
43+
],
44+
"parserOptions": {
45+
"parser": "babel-eslint"
46+
},
47+
"rules": {}
48+
},
49+
"browserslist": [
50+
"> 1%",
51+
"last 2 versions",
52+
"not dead"
53+
]
5454
}

‎src/App.vue‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<template>
2-
<!-- Header Start -->
3-
<Header></Header>
2+
<div :class="appTheme">
3+
<!-- Header Start -->
4+
<Header></Header>
45

5-
<!-- Render Active Component Contents Start -->
6-
<router-view />
6+
<!-- Render Active Component Contents Start -->
7+
<router-view />
78

8-
<!-- Footer Start -->
9-
<Footer></Footer>
9+
<!-- Footer Start -->
10+
<Footer></Footer>
11+
</div>
1012
</template>
1113

1214
<script>
@@ -19,6 +21,11 @@ export default {
1921
Header,
2022
Footer,
2123
},
24+
data: () => {
25+
return {
26+
appTheme: localStorage.getItem('theme'),
27+
};
28+
},
2229
mounted() {
2330
feather.replace();
2431
},
@@ -34,6 +41,5 @@ export default {
3441
-webkit-font-smoothing: antialiased;
3542
-moz-osx-font-smoothing: grayscale;
3643
text-align: center;
37-
color: #2c3e50;
3844
}
3945
</style>

‎src/assets/css/app.css‎

Lines changed: 0 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,61 +2,3 @@
22
* Vuejs & TailwindCSS Portfolio Main Styling CSS File
33
* Powered by: @NangialaiStoman
44
*/
5-
6-
.theme-light {
7-
--bg-background-primary: white;
8-
--bg-background-secondary: #f7fafc;
9-
--bg-background-tertiary: #e2e8f0;
10-
11-
--bg-background-form: white;
12-
13-
--text-copy-primary: #2d3748;
14-
--text-copy-secondary: #4a5568;
15-
16-
--border-border-color-primary: white;
17-
}
18-
19-
.theme-light .search-highlighted {
20-
background: #f0fff4;
21-
}
22-
23-
.theme-light .search-hover:hover {
24-
background: #f0fff4;
25-
}
26-
27-
.theme-dark .markdown-body {
28-
color: #24292e;
29-
}
30-
31-
.theme-dark .search-highlighted {
32-
background: #2d3748;
33-
}
34-
35-
.theme-dark .search-hover:hover {
36-
background: #2d3748;
37-
}
38-
39-
.theme-dark {
40-
--bg-background-primary: #0d2438;
41-
--bg-background-secondary: #102c44;
42-
--bg-background-tertiary: #1e3951;
43-
44-
--bg-background-form: #1a202c;
45-
46-
--text-copy-primary: #cbd5e0;
47-
--text-copy-secondary: #e2e8f0;
48-
49-
--border-border-color-primary: #1a202c;
50-
}
51-
52-
.theme-dark .markdown-body {
53-
color: #cbd5e0;
54-
}
55-
56-
.theme-dark nav .active {
57-
@apply border-white border-b;
58-
}
59-
60-
.content-wrapper {
61-
transition: background-color 0.25s;
62-
}

‎src/assets/images/Screen Shot 2021-07-18 at 11.15.24 AM.png‎

610 KB
Loading

‎src/assets/images/Screen Shot 2021-07-18 at 11.17.07 AM.png‎

625 KB
Loading

‎src/assets/images/logo-dark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/assets/images/logo-light.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/assets/images/logo.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/components/about/AboutCounter.vue‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,47 @@
11
<template>
2-
<div class="mt-10 sm:mt-20 bg-gray-100 shadow-sm">
2+
<div class="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
33
<div
44
class="container mx-auto py-20 block sm:flex sm:justify-between sm:items-center"
55
>
66
<div class="mb-20 sm:mb-0">
7-
<p class="text-4xl font-bold text-gray-600 mb-2">12</p>
8-
<span class="text-md text-gray-500">Years of experience</span>
7+
<p
8+
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
9+
>
10+
12
11+
</p>
12+
<span class="text-md text-ternary-dark dark:text-ternary-light"
13+
>Years of experience</span
14+
>
915
</div>
1016
<div class="mb-20 sm:mb-0">
11-
<p class="text-4xl font-bold text-gray-600 mb-2">20k+</p>
12-
<span class="text-md text-gray-500">Stars on GitHub</span>
17+
<p
18+
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
19+
>
20+
20k+
21+
</p>
22+
<span class="text-md text-ternary-dark dark:text-ternary-light"
23+
>Stars on GitHub</span
24+
>
1325
</div>
1426
<div class="mb-20 sm:mb-0">
15-
<p class="text-4xl font-bold text-gray-600 mb-2">92%</p>
16-
<span class="text-md text-gray-500">Positive feedback</span>
27+
<p
28+
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
29+
>
30+
92%
31+
</p>
32+
<span class="text-md text-ternary-dark dark:text-ternary-light"
33+
>Positive feedback</span
34+
>
1735
</div>
1836
<div>
19-
<p class="text-4xl font-bold text-gray-600 mb-2">77</p>
20-
<span class="text-md text-gray-500">Projects completed</span>
37+
<p
38+
class="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2"
39+
>
40+
77
41+
</p>
42+
<span class="text-md text-ternary-dark dark:text-ternary-light"
43+
>Projects completed</span
44+
>
2145
</div>
2246
</div>
2347
</div>

0 commit comments

Comments
 (0)