diff --git a/README.md b/README.md index b8f9c7c6..06ea6188 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Vuejs & TailwindCSS Portfolio - With Dark Mode -A simple portfolio starter theme built on the top of Vue.js v3 and TailwindCSS v2 +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.  @@ -11,27 +11,55 @@ A simple portfolio starter theme built on the top of Vue.js v3 and TailwindCSS v ## Features - 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) +- [Tailwind CSS v2](https://tailwindcss.com) - Theme Switcher with Dark Mode +- Composition API +- Vue transitions - Counter -- Vue.js Smooth Scroll -- Projects Carousel -- Dynamic Forms +- Projects filter by category +- Projects carousel +- Vue.js smooth scroll +- Dynamic forms +- Back to top button +- Download file button ## Installation -1. Make sure you have Node JS installed. If you don't have it: `npm install -g npm` -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` +1. ##### Make sure you have Node JS installed. If you don't have it: + +``` +npm install -g npm +``` + +2. ##### Clone the repo: + +``` +git clone https://github.com/NangialaiStoman/vuejs-tailwindcss-portfolio.git +``` + +3. ##### Open the project folder: + +``` +cd vuejs-tailwindcss-portfolio +``` + +4. ##### Install packages and dependencies: + +``` +npm install +``` + +5. ##### Start a local dev server at `http://localhost:8080`: + +``` +npm run serve +``` ## Notes - Always run `npm install` after pulling new changes - 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 -- 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 - 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 - Illustrations from [unDraw](https://undraw.co) and [Freepik](https://freepik.com) - Images from [Unsplash](https://unsplash.com) diff --git a/public/index.html b/public/index.html index 9d4e9c62..1407d170 100644 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,12 @@ + + + diff --git a/src/assets/css/app.css b/src/assets/css/app.css index 9ebf6370..23ba1b5a 100644 --- a/src/assets/css/app.css +++ b/src/assets/css/app.css @@ -2,3 +2,15 @@ * Vuejs & TailwindCSS Portfolio Main Styling CSS File * Powered by: @NangialaiStoman */ + +body { + font-family: 'Poppins', sans-serif !important; +} + +h1, +h2, +h3, +h4 { + font-family: 'Poppins', sans-serif !important; + font-weight: 500 !important; +} diff --git a/src/assets/images/mobile-project-1.jpg b/src/assets/images/mobile-project-1.jpg index a8612989..7842656e 100644 Binary files a/src/assets/images/mobile-project-1.jpg and b/src/assets/images/mobile-project-1.jpg differ diff --git a/src/assets/images/mobile-project-2.jpg b/src/assets/images/mobile-project-2.jpg index b8435fe5..039dfe17 100644 Binary files a/src/assets/images/mobile-project-2.jpg and b/src/assets/images/mobile-project-2.jpg differ diff --git a/src/assets/images/profile.jpeg b/src/assets/images/profile.jpeg index 190daad6..7cbe9d36 100644 Binary files a/src/assets/images/profile.jpeg and b/src/assets/images/profile.jpeg differ diff --git a/src/assets/images/ui-project-1.jpg b/src/assets/images/ui-project-1.jpg index 5c2a763c..e08299bf 100644 Binary files a/src/assets/images/ui-project-1.jpg and b/src/assets/images/ui-project-1.jpg differ diff --git a/src/assets/images/ui-project-2.jpg b/src/assets/images/ui-project-2.jpg index 835d05e6..6ef57b40 100644 Binary files a/src/assets/images/ui-project-2.jpg and b/src/assets/images/ui-project-2.jpg differ diff --git a/src/assets/images/web-project-1.jpg b/src/assets/images/web-project-1.jpg index 5b8257e2..c28f2fa5 100644 Binary files a/src/assets/images/web-project-1.jpg and b/src/assets/images/web-project-1.jpg differ diff --git a/src/assets/images/web-project-2.jpg b/src/assets/images/web-project-2.jpg index 0e8dc8a1..91ff5917 100644 Binary files a/src/assets/images/web-project-2.jpg and b/src/assets/images/web-project-2.jpg differ diff --git a/src/components/ThemeSwitcher.vue b/src/components/ThemeSwitcher.vue index 6fc7a7c8..76af3e66 100644 --- a/src/components/ThemeSwitcher.vue +++ b/src/components/ThemeSwitcher.vue @@ -1,5 +1,5 @@