Videolize – Advanced Personal Portfolio

Videolize is a modern, interactive personal portfolio website designed to showcase your skills, projects, and creative journey in a visually stunning way. Inspired by Diagram.com, Videolize leverages advanced frontend techniques, smooth animations, and a modular structure to deliver a unique digital presence for creative professionals.

---

Table of Contents

• Demo
• Features
• Screenshots
• Project Structure
• Technologies Used
• Backend Features
• Interactive Elements
• Getting Started
• Usage
• Contributing
• Credits
• License

---

Demo

Visit the live site: https://solanki.elixpo.com

---

Features

• Modern Design:
  Utilizes GSAP, BentoBox, Glassmorphism, and Neumorphism for a cutting-edge look with smooth transitions and animations.

• Event-Driven Animations:
  Interactive animations triggered by user actions for a sleek, fluid experience.

• Modular Sections:

  • About Me: Personalized introduction and journey timeline.
  • Skills: Interactive display of key skills and software proficiencies.
  • Projects: Dynamic showcase of projects with lazy-loaded images and hover effects.
  • Gallery: Custom-designed gallery for photographs and creative works.
  • Contact: Contact form and social media links.
  • Footer: Animated social icons and quick navigation.

• CV Feature:
  View and download a professional resume/CV directly from the site.

• Smooth Navigation:
  Navbar with smooth scrolling and section highlighting.

• Responsive Design:
  Fully responsive for desktop and mobile devices.

---

Screenshots

Explore the key sections of Videolize through these screenshots:

Section	Preview
Home (Root)
Me
About
Gallery
Projects
Contact
Skills
More

---

Project Structure

Videolize/
├── src/
│   ├── index.html           # Home page
│   ├── about/               # About Me section
│   ├── skills/              # Skills & Software proficiency
│   ├── projects/            # Projects showcase
│   ├── gallery/             # Gallery page
│   ├── contact/             # Contact page
│   ├── me/                  # Personal bio page
│   ├── 404/                 # Custom 404 page
│   ├── CSS/                 # Stylesheets (modular)
│   ├── JS/                  # JavaScript modules (animations, effects, logic)
│   └── assets/              # Images, icons, etc.
├── README.md
├── PatchNotes.md
├── sitemap.xml
└── ...

---

Technologies Used

• Frontend:

  • HTML5, CSS3 (Tailwind, custom CSS)
  • JavaScript (ES6+)
  • GSAP (GreenSock Animation Platform)
  • Anime.js, ScrollReveal, Snap.svg
  • BentoBox, Glassmorphism, Neumorphism design patterns

• Backend:

  • Firebase (for user data, project info, and social links)

• Other:

  • Smooth scrolling (Locomotive Scroll)
  • LocalStorage API (for scroll memory)
  • Responsive design for all devices

---

Backend Features

• Firebase Integration:
  • Stores user data and project information.
  • Dynamic time counter showing experience in seconds (real-time growth).
  • Centralized social media links for easy updates.

---

Interactive Elements

• Smooth Scrolling:
  Internal navigation with animated transitions.

• Scroll Memory:
  Remembers user’s scroll position using localStorage.

• Lazy Loading:
  Optimized image loading for performance.

• Animated Tiles & Cards:
  Interactive project and skill tiles with hover and reveal effects.

• Custom Animations:
  Event-driven and section-based animations for engaging UX.

---

Getting Started

1. Clone the repository:

   git clone https://github.com/circuit-overtime/Videolize.git
   cd Videolize

2. Open src/index.html in your browser
   (No build step required; all dependencies are loaded via CDN.)

3. (Optional) Configure Firebase:
   Update Firebase config in the JS files if you want to use your own backend.

---

Usage

Visit the live portfolio:
Solanki Ghosh Portfolio

---

Contributing

Contributions are welcome!
Please open an issue or submit a pull request for improvements or new features.

---

Credits

• Design & Development:
  • Anwesha Chakraborty
  • Ayushman Bhattacharya
  • Vivek Yadav

---

License

This project is licensed under the MIT License.

---