A fully customizable portfolio website template built using Vue.js, Tailwind CSS, PrimeVue 4, and Lucide Icons. Easily modify the layout, add or remove sections, and showcase your work in a modern, responsive format. This project is perfect for developers, designers, or anyone looking for a clean and customizable online portfolio.
- Fully customizable: Add, remove, or rearrange sections as needed using a JSON file.
- PrimeVue UI components: Integration of PrimeVue 4 for high-quality UI components.
- Accent colors: Support for Tailwind CSS predefined colors as accent colors.
- Gradient support: Each section supports Tailwind CSS gradients for both light and dark themes.
- Ripple effect: Easily add ripple effects using the v-ripple directive for buttons and interactive elements.
- Modern design: Minimalistic, mobile-first design using Tailwind CSS.
- Fast and lightweight: Powered by Vue.js for a responsive and dynamic experience.
- Icon support: Lucide Icons for seamless icon integration.
- Responsive layout: Works on all screen sizes, from mobile to desktop.
- Easy setup: Simple installation and configuration process.
To add a new section, you need to create a corresponding Vue component (e.g., ContactSection.vue) and manage its data using the JSON configuration file. Here’s how to do it step-by-step:
-
Create the Component:
Create a new Vue component in your
componentsfolder. For example,ContactSection.vue -
Define the Section in the JSON File: Next, define the new section in your portfolio-data.json file. This is where you can manage the content of each section. For example, to add the ContactSection, you could define it as follows:
{
"sections": [
{
"name": "Home",
"path": "home",
"component": "HomeSection",
"gradient": {
"light": "",
"dark": ""
},
"content": {
"greeting": "Hey there!",
"name": "John Doe",
"secondaryName": "VU3CXF",
"title": "Your Friendly Neighborhood Python Developer",
"subtitle": "Ham Radio Enthusiast"
}
},
{
"name": "Contact",
"path": "contact",
"component": "ContactSection",
"gradient": {
"light": "from-pink-500 to-red-500",
"dark": "dark:from-pink-800/20 dark:to-red-800/20"
},
"content": {
"title": "Contact Me",
"description": "Feel free to reach out to me via email or connect on social media!",
"email": "your.email@example.com",
"socialLinks": [
{
"name": "LinkedIn",
"url": "https://linkedin.com/in/yourprofile",
"icon": "M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
}
]
}
}
]
}- Accent Colors: Each section can have an accent color, which is a predefined color from Tailwind CSS. This allows for easy theming and customization without needing to write custom CSS.
- Gradients: You can define gradient colors for both light and dark themes using Tailwind CSS's gradient utilities.
To add a ripple effect to buttons or other interactive elements, simply use the v-ripple directive:
<template>
<button v-ripple class="btn-primary">Click Me</button>
</template>This template uses PrimeVue 4 to offer a wide range of ready-to-use UI components. Example of using PrimeVue's Button component:
<template>
<Button label="Click Me" v-ripple />
</template>We leverage Vue's provide/inject pattern to make the section data accessible to child components without the need to pass props down multiple levels. This pattern is particularly useful for managing shared state across components.
For example, take a look at the contactSection variable in the HomeSection.vue component:
const sections = inject("sections");
const contactSection = computed(() =>
sections.find((section) => section.name === "Contact")
);-
Clone the repository:
git clone https://github.com/your-username/portfolio-template.git cd portfolio-template/frontend -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Build for production:
npm run build
-
Deploy: After building, the production-ready files can be found in the
distfolder. Deploy these to your preferred web hosting service.
For step-by-step instructions on deploying your Vue.js project to GitHub Pages, please refer to the official Vue.js documentation: Vue CLI - Deployment to GitHub Pages.
To add or remove sections, edit the portfolio.json file located in the root of the project. Add a new section object or remove an existing one. Each section requires a name, path, component, and content.
To customize the colors of your sections:
- Accent Colors: Use any of Tailwind CSS's predefined colors to set the accent color of each section.
- Gradients: Define gradients for both light and dark modes by utilizing Tailwind's gradient utilities.
The template currently supports English content. To extend this to other languages:
- Implement a localization system (e.g., Vue I18n).
- Store localized strings in JSON files or other formats.
- Modify components to dynamically load the appropriate language based on user preferences or browser settings.
- Vue.js 3: A progressive JavaScript framework for building user interfaces.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- PrimeVue 4: A comprehensive UI component library for Vue.js.
- Lucide Icons: A flexible and customizable icon library.
Contributions are welcome! If you'd like to improve this template or add new features, feel free to open a pull request.
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch). - Make your changes and commit them (
git commit -m 'Add new feature'). - Push to the branch (
git push origin feature-branch). - Open a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.