Skip to content

Commit 66e81ad

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#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>

‎src/components/about/AboutMe.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
/>
99
</div>
1010
<div class="w-full sm:w-3/4 text-left">
11-
<p class="mb-4 text-gray-500 text-lg">
11+
<p class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
1212
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
1313
vel illum asperiores dignissimos cumque quibusdam et fugiat
1414
voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,
@@ -22,19 +22,19 @@
2222
recusandae quas, fuga voluptatibus nesciunt odit libero tenetur
2323
neque consequatur ea.
2424
</p>
25-
<p class="mb-4 text-gray-500 text-lg">
25+
<p class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
2626
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
2727
vel illum asperiores dignissimos cumque quibusdam et fugiat
2828
voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,
2929
fugit eligendi corporis laudantium adipisci soluta?
3030
</p>
31-
<p class="text-gray-500 text-lg">
31+
<p class="text-ternary-dark dark:text-ternary-light text-lg">
3232
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
3333
vel illum asperiores dignissimos cumque quibusdam et fugiat
3434
voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,
3535
fugit eligendi corporis laudantium adipisci soluta?
3636
</p>
37-
<p class="mb-4 text-gray-500 text-lg">
37+
<p class="mb-4 text-ternary-dark dark:text-ternary-light text-lg">
3838
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil
3939
vel illum asperiores dignissimos cumque quibusdam et fugiat
4040
voluptatem nobis suscipit explicabo, eaque consequatur nesciunt,

0 commit comments

Comments
 (0)