PortfolioLebs – Personal Portfolio VueJS Template

PortfolioLebs – Personal Portfolio VueJS Template is a polished, animation-rich personal portfolio solution for developers, designers, freelancers, and creatives who want a fast, modern online presence. It combines a long-form landing experience with dedicated inner pages for services, portfolio case studies, blog articles, pricing, testimonials, and legal content. Built with Vue 3, Vite, Vue Router, JavaScript (ES modules), GSAP (with ScrollTrigger), Bootstrap 5, Swiper, WOW.js, Animate.css, and Sass.

Features Overview

Vue 3 (Composition API & <script setup>)
The progressive framework used for reactive UI, route-based views, and reusable section components.

Vite
Fast dev server and optimized production builds — ideal for modern Vue single-page applications.

Vue Router 4
Client-side routing with history mode, lazy-loaded views, scroll-to-hash support, and a dedicated 404 route.

GSAP & ScrollTrigger
High-performance animations on the hero, sections, portfolio, skills, footer, and more — including scroll-driven reveals and interactive motion on the home layout.

WOW.js + Animate.css
Scroll-reveal classes on inner pages and content blocks for engaging entrance effects.

Bootstrap 5.x
Responsive grid, utilities, and components — paired with custom SCSS variables and theme tokens for light/dark styling.

Swiper
Touch-friendly testimonial carousel with navigation, pagination, and autoplay breakpoints.

Dark & light theme
Theme preference stored in local storage with global CSS variables for backgrounds, cards, and glass-style surfaces.

Rich home landing
Hero, services preview, about, skills (animated progress), experience, filterable portfolio, testimonials, pricing, blog preview, and contact — plus optional custom cursor and “back to top” on the home view.

Multiple inner page layouts
Services listing & single service, portfolio grid & single project, blog listing & single post (with sidebar widgets), about, experience, pricing plan, client reviews, contact, privacy policy, terms of service, and styled 404.

100% responsive
Mobile-first layouts that adapt from small screens to large desktops.

Sass (SCSS)
Global styles, Bootstrap integration, and component-scoped styling where used — maintainable and easy to extend.

Full Features List

Vue 3
Vite (build tool & dev server)
Vue Router 4 (history mode, lazy routes)
JavaScript (ES modules)
GSAP animations
GSAP ScrollTrigger plugin
Bootstrap 5.x (with Popper via Bootstrap bundle)
WOW.js scroll animations
Animate.css
Swiper slider (testimonials)
Dark / light theme toggle (persistent)
Page transition (fade) between routes
One multi-section home + many inner templates
Portfolio grid with category filter (home section)
Blog listing & single post layouts
Services listing & detail pages
Pricing section & dedicated pricing page
Testimonials & client reviews pages
Contact sections & contact page
Privacy policy & terms of service pages
404 error page with motion graphics
Sticky / smart header patterns & footer with animated accents
Google Fonts (Montserrat & Heebo)
Font Awesome 6 (free icon set)
Simple Icons–based SVG logos (remote) in the testimonial logo strip
SEO-friendly meta tags in the main HTML shell
Deploy helpers in public (e.g. SPA-friendly redirects / rewrites patterns)
Production build outputs static assets; optional dist package helper for local static preview (where configured)
Modern evergreen browsers (Chrome, Firefox, Safari, Edge)

What you get?

Full Vue 3 + Vite source (components, views, router, composables, data files, SCSS)
Organized asset folders (images, SVG logo)
Ready-to-run scripts: npm run dev, npm run build, npm run preview

Fonts Used

Google Fonts: Montserrat (headings) and Heebo (body)

Icons Used

Font Awesome 6 Free (CSS / webfont)
Brand / logo SVGs via Simple Icons (loaded from a public CDN in the testimonial section)

Sources and Credits

Image Credits

Demo / placeholder photography and graphics are included for preview purposes; replace with your own licensed work for production. Common stock sources authors use for similar items include Unsplash, Freepik, and similar royalty-free libraries — ensure your final images match your license.

Important notes

This item is delivered as a front-end Vue template. Backend, CMS, form endpoints, and analytics are not included — wire the contact form and any dynamic data to your own API or service as needed.
TypeScript is not used; the codebase is JavaScript.
Third-party packages may list optional dependencies; only those imported in the source affect the built site.