- 📷 Demo: Puzant Portfolio
- 🔗 Back-End repo: https://github.com/puzant/portfolio-backend
A modern and responsive portfolio showcasing projects, skills, and travels. Built with Vue 3, SCSS, Node.js, and Express.js, it features lazy loading with Intersection Observer API, seamless animations, and Cloudinary integration.
Intersection Observer for Lazy Loading
- Custom Lazy Loading: Utilizes a custom Vue directive with the Intersection Observer API.
- Optimized Image Loading: Images are fetched and loaded only when they appear in the viewport, enhancing performance.
- WebP Image Format: All images are served in the WebP format via Cloudinary for optimal quality and compression.
Backend API
- Express Server: Built with Node.js and Express.
- Cloudinary Integration: Fetches and transforms images dynamically using Cloudinary SDK.
- Deployed on Render: The backend is hosted on Render, ensuring robust performance and scalability.
Animations
- Fade In Effects: As user scrolls the section will loaded with fade in animation.
- Dynamic Layouts: Even and odd-indexed images have unique tilt effects for a creative aesthetic.
Navigation
- Horizontal and Vertical Navigation: Horizontal navigation transitions to a vertical sidebar navigation based on scroll position using the Intersection Observer API.
- Section Highlights: Active sections are highlighted dynamically for a seamless navigation experience
Contact Form
- EmailJS Integration: Fully functional contact form with EmailJS for sending messages.
- Validation: Includes field validations to ensure proper inputs.
🎨 Frontend
- Vue 3 with Composition API
- SCSS for styling
- Intersection Observer API
- EmailJS
💻 Backend
- Node.js
- Express
- Cloudinary SDK
- Back-End deployed on Render
- Front-End deployed on Netlify
This portfolio includes a backend to handle specific functionalities securely and efficiently. The main reason is to fetch and manage images stored in Cloudinary, which requires server-side authentication.
- The backend handles the authentication using the API key and secret.
- It fetches images from a designated folder in Cloudinary and returns them to the front end via a secure API.