Digital Portfolio - Kavlin Kaur

A sophisticated, elegant portfolio website showcasing creative development work, poetry, and reading interests.

Features Added

1. What I'm Reading Section

• Grid layout with book covers and quotes
• Elegant hover effects with image scaling
• Responsive design for all devices
• Matches the site's sophisticated color scheme

2. Project Images

• Added image placeholders for all projects
• Hover effects with subtle scaling
• Professional card layout with images

How to Add Images

For Book Covers (Reading Section)

1. Image Requirements:

   • Format: JPG, PNG, or WebP
   • Recommended size: 400x600px (2:3 aspect ratio)
   • File size: Under 500KB for fast loading

2. File Names:

   • book1.jpg - The Alchemist
   • book2.jpg - The Power of Now
   • book3.jpg - Atomic Habits
   • book4.jpg - Deep Work

3. Where to Place:

   • Save all book cover images in the same folder as your index.html file

For Project Images

1. Image Requirements:

   • Format: JPG, PNG, or WebP
   • Recommended size: 800x600px (4:3 aspect ratio)
   • File size: Under 1MB for fast loading

2. File Names:

   • project1.jpg - Poetry Website
   • project2.jpg - MCQ Quiz App
   • project3.jpg - Bus Management System
   • project4.jpg - Sangam Alumni Portal
   • project5.jpg - AI Chatbot
   • project6.jpg - E-Commerce Platform

3. Where to Place:

   • Save all project images in the same folder as your index.html file

Image Sources

You can find high-quality images from:

• Unsplash (unsplash.com) - Free stock photos
• Pexels (pexels.com) - Free stock photos
• Pixabay (pixabay.com) - Free stock photos
• Amazon - For book cover images
• Goodreads - For book cover images

Tips for Best Results

1. Book Covers: Use official book cover images for authenticity
2. Project Images: Use screenshots of your actual projects or relevant stock photos
3. Optimization: Compress images using tools like TinyPNG or ImageOptim
4. Consistency: Maintain similar lighting and style across all images
5. Alt Text: The HTML already includes descriptive alt text for accessibility

File Structure

digital resume/
├── index.html
├── styles.css
├── script.js
├── Kavlin.jpg
├── bitmoji.png
├── book1.jpg
├── book2.jpg
├── book3.jpg
├── book4.jpg
├── project1.jpg
├── project2.jpg
├── project3.jpg
├── project4.jpg
├── project5.jpg
└── project6.jpg

Features

• ✅ Responsive design
• ✅ Elegant hover effects
• ✅ Sophisticated color scheme
• ✅ Mobile-friendly layout
• ✅ Smooth animations
• ✅ Professional typography
• ✅ Accessibility features

Browser Support

• Chrome (recommended)
• Firefox
• Safari
• Edge

Performance

• Optimized CSS with efficient selectors
• Smooth transitions and animations
• Responsive images with proper sizing
• Fast loading with compressed assets