Portfolio

Professional Portfolio Template

This is a fully advanced, professional single-page portfolio template designed to help you showcase your skills, projects, and experience. It combines modern web technologies and best practices to deliver an impeccable user experience.

Overview

This portfolio template is built with plain HTML, CSS, and JavaScript along with several libraries and APIs. It includes features such as:

• Responsive Design: Optimized for all devices.
• Dark Mode Toggle: Automatically persists your theme preference via localStorage and honors system settings.
• Preloader: A stylish spinner that fades out on page load.
• Hero Section Animations: Canvas particle animation, typed text effect, and GSAP-driven entrance animations.
• Animate on Scroll (AOS): Smooth fade-in effects as you scroll through sections.
• Project Section with Filters: Easily filter projects by category and view details via modal pop-ups.
• Testimonials Carousel: Showcase feedback using a fully functional carousel.
• Lazy Loading: Optimized image loading for improved performance.
• PWA Support: Basic setup with a manifest file and service worker registration, paving the way for offline use and home screen installation.
• SEO & Accessibility: Includes advanced meta tags (Open Graph, Twitter Cards) and ARIA attributes.

Features

• Modern Design & Interactivity:
  Utilizes GSAP with ScrollTrigger for dynamic entrance animations, as well as subtle parallax and bounce effects.

• Enhanced User Experience:
  Built-in dark mode, preloader, “back to top” button, and smooth scroll behavior.

• Customizable Content:
  Easily update placeholder texts (e.g., [Your Name], [Your Field], [link-to-resume.pdf]) and assets to match your personal brand.

• Progressive Web App (PWA) Ready:
  Includes references to a manifest.json and registers a service worker (sw.js) for basic offline caching and app-like behavior.

Installation & Deployment

1. Clone the Repository:

   git clone https://github.com/your-username/your-portfolio-repo.git
   
   

2. Customize

• Open the index.html file in your preferred code editor.
• Replace all placeholder content (e.g., [Your Name], [Your Field], [YourURL], [link-to-resume.pdf], [YourImageURL]) with your own details.
• Update asset URLs for images, resume links, social media links, and the PWA manifest as needed.
• Adjust project categories and modal content under the Projects section to reflect your work accurately.
• Modify additional sections (e.g., About, Testimonials, Skills) to align with your personal branding.

3. Run/Deploy

• To test the template locally, simply open the index.html file in your web browser.
• To fully enable features like the service worker (for PWA) and proper caching, serve the files through a web server.
• Deploy your site on a static hosting service such as GitHub Pages, Netlify, or Vercel.

4. Contribute

• Feel free to fork this repository and make improvements or customizations.
• Submit pull requests for new features, enhancements, or bug fixes.
• All contributions are welcome to help refine and expand this portfolio template.

Additional Resources

• GSAP Documentation: https://greensock.com/docs/
• AOS Library: https://michalsnik.github.io/aos/
• PWA Guides: https://developers.google.com/web/progressive-web-apps
• Bootstrap Documentation: https://getbootstrap.com/docs/5.3/getting-started/introduction/

License

This project is licensed under the GPL License.

Author: Bocaletto Luca Co-authored-by: Giovanni Rossi [email protected] Co-authored-by: Luca [email protected]