A simple multipage and responsive Vue.js & TailwindCSS portfolio theme with dark mode.

  • By Nangialai Stoman
  • Last update: Jan 6, 2023
  • Comments: 6

Vuejs & TailwindCSS Portfolio - With Dark Mode

A simple portfolio starter theme built with Vue.js v3 and TailwindCSS v2.

Vuejs-TailwindCSS-Portfolio

Demo URL

https://vuejs-tailwindcss-portfolio.netlify.com

Features

  • Simple and responsive design
  • Vue.js v3 with Vue Router
  • Tailwind CSS v2
  • Theme Switcher with Dark Mode
  • Composition API
  • Vue transitions
  • Auto Counter
  • Projects filter by category
  • Projects filter by search
  • 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:
brew install node
  1. Clone the repo:
git clone https://github.com/realstoman/vuejs-tailwindcss-portfolio.git
  1. Open the project folder:
cd vuejs-tailwindcss-portfolio
  1. Install packages and dependencies:
npm install
  1. 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
  • Coming Soon I'll be doing a screencast. 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 and Freepik
  • Images from Unsplash
  • Feel free to use it as your own portfolio
  • Contributions are welcome

Github

https://github.com/NangialaiStoman/vuejs-tailwindcss-portfolio

Comments(6)

  • 1

    Multiple Projects Support

    How would I be able to route each project to its own page that describes it instead of all the projects when I click on any of them will send me to the same page coded here: {{ SingleProject.vue }}

  • 2

    Fixed project filter method and event issues

    1. Project filtering is not working because the event name which is 'change' overlaps with the default event of the select element. So by changing it to something else like 'filter', the payload can get emitted successfully (ProjectGrid.vue & ProjectFilter.vue)
    2. The filterProjectsByCategory method should use filter instead of map (ProjectGrid.vue)
    3. Refactored selectedProject to selectedCategory (ProjectGrid.vue)
  • 3

    Bump follow-redirects from 1.14.1 to 1.14.7

    Bumps follow-redirects from 1.14.1 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 4

    Fix UI issues

    • Header updates
    • Footer icons and links
    • Projects grid different on responsive view
    • Rounded corners everywhere like images, cards, buttons and more updated
  • 5

    Best Practices Applied

    • Components best practices
    • Folder structure of components changed (single folder now)
    • Hire me modal components
    • Contact form component added
    • Added App prefix to shared components
    • Projects contents are dynamic
    • Pass in data through props
  • 6

    Projects logic more design

    • Dynamic Projects
    • Dynamic Clients
    • About Counter
    • Theme Switcher Button Correction
    • Footer Copyright Dynamic Date
    • Header & Footer Dynamic Contents
    • Small Screen Hire Me Modal
    • Hire Me Modal Dynamic
    • Overall Design Changes
    • About, Contact & More Dynamic Contents

Popular Tag

Related