Skip to content

Commit 7ef9ef8

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#16 from NangialaiStoman/projects-filter-and-dark-mode
Composition API & Readme Updates
2 parents 2f3fd8d + 2a1bed0 commit 7ef9ef8

File tree

12 files changed

+89
-12
lines changed

12 files changed

+89
-12
lines changed

‎README.md

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Vuejs & TailwindCSS Portfolio - With Dark Mode
22

3-
A simple portfolio starter theme built on the top of Vue.js v3 and TailwindCSS v2
3+
A simple portfolio starter theme built with Vue.js v3 and TailwindCSS v2. This is a simple portfolio theme and its geared towards beginners. For sure there's room for improvements and if there's anything missing or to be corrected or you have a better idea for it, please fork this repo and make a PR.
44

55
![Vuejs-TailwindCSS-Portfolio](https://user-images.githubusercontent.com/16396664/137613185-4e94cf76-002b-4f7e-8d9b-f452c97cadf2.PNG)
66

@@ -11,27 +11,55 @@ A simple portfolio starter theme built on the top of Vue.js v3 and TailwindCSS v
1111
## Features
1212

1313
- Simple and responsive design
14-
- [Tailwind CSS v2](https://tailwindcss.com) (with PurgeCSS)
1514
- [Vue.js v3](https://vuejs.org) with [Vue Router](https://router.vuejs.org)
15+
- [Tailwind CSS v2](https://tailwindcss.com)
1616
- Theme Switcher with Dark Mode
17+
- Composition API
18+
- Vue transitions
1719
- Counter
18-
- Vue.js Smooth Scroll
19-
- Projects Carousel
20-
- Dynamic Forms
20+
- Projects filter by category
21+
- Projects carousel
22+
- Vue.js smooth scroll
23+
- Dynamic forms
24+
- Back to top button
25+
- Download file button
2126

2227
## Installation
2328

24-
1. Make sure you have Node JS installed. If you don't have it: `npm install -g npm`
25-
1. Clone the repo: `git clone https://github.com/NangialaiStoman/vuejs-tailwindcss-portfolio.git`
26-
1. `cd vuejs-tailwindcss-portfolio`
27-
1. `npm install`
28-
1. `npm run serve` to start a local dev server at `http://localhost:8080`
29+
1. ##### Make sure you have Node JS installed. If you don't have it:
30+
31+
```
32+
npm install -g npm
33+
```
34+
35+
2. ##### Clone the repo:
36+
37+
```
38+
git clone https://github.com/NangialaiStoman/vuejs-tailwindcss-portfolio.git
39+
```
40+
41+
3. ##### Open the project folder:
42+
43+
```
44+
cd vuejs-tailwindcss-portfolio
45+
```
46+
47+
4. ##### Install packages and dependencies:
48+
49+
```
50+
npm install
51+
```
52+
53+
5. ##### Start a local dev server at `http://localhost:8080`:
54+
55+
```
56+
npm run serve
57+
```
2958

3059
## Notes
3160

3261
- Always run `npm install` after pulling new changes
3362
- I'll be constantly updating this repo as I'll be adding more sections to it, so please always check the projects section of this repo to see what tasks are under todo and in progress
34-
- 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
3563
- 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
3664
- Illustrations from [unDraw](https://undraw.co) and [Freepik](https://freepik.com)
3765
- Images from [Unsplash](https://unsplash.com)

‎public/index.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
77
<link rel="icon" href="./favicon.png" />
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"
12+
rel="stylesheet"
13+
/>
814
<title><%= htmlWebpackPlugin.options.title %></title>
915
</head>
1016
<body id="app-theme" class="app-theme">

‎src/assets/css/app.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,15 @@
22
* Vuejs & TailwindCSS Portfolio Main Styling CSS File
33
* Powered by: @NangialaiStoman
44
*/
5+
6+
body {
7+
font-family: 'Poppins', sans-serif !important;
8+
}
9+
10+
h1,
11+
h2,
12+
h3,
13+
h4 {
14+
font-family: 'Poppins', sans-serif !important;
15+
font-weight: 500 !important;
16+
}

‎src/assets/images/mobile-project-1.jpg

-170 KB
Loading

‎src/assets/images/mobile-project-2.jpg

-205 KB
Loading

‎src/assets/images/profile.jpeg

-728 Bytes
Loading

‎src/assets/images/ui-project-1.jpg

-262 KB
Loading

‎src/assets/images/ui-project-2.jpg

-148 KB
Loading

‎src/assets/images/web-project-1.jpg

-239 KB
Loading

‎src/assets/images/web-project-2.jpg

-312 KB
Loading

‎src/components/ThemeSwitcher.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<a href="#" @click.prevent="toggleTheme" aria-label="Theme Switcher">
2+
<a href="#" @click="toggleTheme" aria-label="Theme Switcher">
33
<i
44
v-if="theme === 'light'"
55
data-feather="moon"

‎src/composables/useThemeSwitcher.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { ref } from '@vue/reactivity';
2+
3+
export default function useThemeSwitcher() {
4+
const currentTheme = ref('light');
5+
6+
function toggleTheme() {
7+
if (currentTheme.value == 'dark') {
8+
setLightTheme();
9+
} else {
10+
setDarkTheme();
11+
}
12+
}
13+
14+
// Light Theme Function
15+
function setLightTheme() {
16+
currentTheme.value = 'light';
17+
18+
process.isClient && localStorage.setItem('theme', 'light');
19+
}
20+
21+
// Dark Theme Function
22+
function setDarkTheme() {
23+
currentTheme.value = 'dark';
24+
25+
process.isClient && localStorage.setItem('theme', 'dark');
26+
}
27+
28+
return {
29+
toggleTheme,
30+
};
31+
}

0 commit comments

Comments
 (0)