| Detail | Value |
|---|---|
| Name | Faoziyyah Busari |
| Static Site Generator | VitePress |
This is a comprehensive personal portfolio site and digital hub dedicated to books, movies, and the literary community. Built using the VitePress Static Site Generator, the site features extensive content, custom layouts, and interactive components to track reading progress and manage media collections.
The project demonstrates mastery of modern web development principles, including responsive design, Vue.js component integration, and seamless deployment.
The site is publicly published and automatically deployed via Netlify.
- Live URL: https://literacy-cinema-hub.netlify.app/
- Deployment: Configured for automatic deployment upon push to the main branch via GitHub/Netlify integration.
| Category | Details |
|---|---|
| Static Site Generator | VitePress (using Vue.js 3) |
| Styling | Custom CSS with CSS variables, gradients, and animations |
| Interactivity | Interactive Vue components for dynamic features |
| Deployment | Netlify / GitHub Pages compatible build |
- Interactive Bookshelf: Custom Vue component enabling real-time genre filtering and book tracking using pure JavaScript logic wrapped to be SSR-safe
- Reading Visualization: Custom progress trackers providing statistics and progress bar visualization
- Extensive Content: Over 12 distinct pages providing genuine, non-placeholder content covering books, movies, reviews, and personal statistics
- Responsive Design: Optimized using a mobile-first approach to ensure a seamless experience on all screen sizes
- Site-Wide Navigation: Comprehensive navigation structure for easy access to all sections
The project utilizes distinct layouts to satisfy the assignment requirement of using at least two different templates:
- VitePress Home Layout: Used for the main landing page, featuring hero content and a high-level overview
- VitePress Standard Page Layout: Used for all other standard content pages (Authors, Blog, etc.)
- Custom Component Integration: Unique layout structures achieved by embedding full-page custom Vue components within the Standard Page Layout
| Section | Description |
|---|---|
| Home | Landing page with key features and recent activity |
| About | Personal introduction and reading philosophy |
| Bookshelf | Interactive book collection with genre filtering |
| Movie Collection | Curated film library and reviews |
| Adaptations | Analysis of book-to-movie and film-to-book adaptations |
| Blog | Literary reviews and personal thoughts |
| Reading Journey | Personal reading timeline and milestones |
| Reading Stats | In-depth analytics and reading habit breakdown |
| Community | Reading groups and discussion forums |
| Authors | Favorite authors and literary influences |
| Recommendations | Personalized suggestions for books and films |
| Resources | Tools and platforms for readers |
| Literary Events | Calendar and community events |
- Node.js (version 16 or higher)
- npm or yarn
# Clone the repository
git clone https://github.com/busa0019/Literary-Cinema-Hub.git
# Navigate to project directory
cd mtm6407-static-site-faozee
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build Contributions, issues, and feature requests are welcome! Feel free to reach out.
"That is part of the beauty of all literature. You discover that your longings are universal longings, that you're not lonely and isolated from anyone. You belong."
— F. Scott Fitzgerald
Built with passion for stories that connect us all. 📚🎬