Overview
A photography portfolio website built with pug.js and gulp.js and I made some changes on it. Key features include:
• Change the tech stack from pug.js and gulp.js to Next.js and Tailwind CSS
• Change the design to be more responsive and user-friendly.
• Add a dynamic photo gallery with smooth transitions.
Challenges & Solutions
• Image Performance:
- Challenge: Loading multiple high-resolution images efficiently without slowing down the site.
- Solution: Employed lazy loading, manually converted all images to WebP to ensure optimized delivery regardless of future changes in the technology stack (So I made my "Images Converter" project to convert all the images at the same time).
• Automatic Directory Image Loading:
- Challenge: Getting the website to scan a directory and display all images without manual updates, especially as the portfolio grows.
- Solution: Used node.js with fs module to read image files from a given folder and serve them dynamically to the frontend.
• Responsive Layouts:
- Challenge: Ensuring galleries and pages look great on all devices.
- Solution: Used Tailwind CSS.
Implementation
Built using:
• Next.js for the frontend and server-side rendering.
• Tailwind CSS for styling, ensuring a modern and responsive design.
• Typed.js for dynamic text effects.
• Node.js with fs module to read images from a directory and serve them dynamically.
