Portfolio live

Introduction

Building and deploying a personal portfolio is a rewarding experience for any developer. It showcases your skills, projects, and professional journey to potential employers and collaborators. Recently, I deployed my portfolio on Vercel, and I’m excited to share the steps and experiences involved. In this post, I’ll walk you through the deployment process, highlight some of the challenges I faced, and provide useful tips that could help you in your deployment journey. You can view my live portfolio here.

Getting Started with Vercel

Vercel is a popular cloud platform that enables developers to host and deploy web applications with ease. It offers seamless integration with GitHub and a variety of other platforms, making it an excellent choice for deploying projects created with modern frameworks like React and Vite.

Step 1: Preparing My Portfolio for Deployment

Before deploying, I needed to ensure that my portfolio project was ready for production. This involved:

Optimizing the Code: I reviewed my React components and cleaned up any unnecessary code. I made sure to optimize the images and other assets used within the portfolio to ensure faster loading times.
Setting the Build Configuration: In the vite.config.js file, I specified the output directory as dist to make sure Vite generates the production build correctly.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
  },
});

Step 2: Setting Up Vercel

Creating an Account: If you don’t already have a Vercel account, you can sign up at vercel.com. You can use your GitHub account to make the sign-up process quicker and easier.
Importing the Project: Once logged in, click on the “New Project” button and import your portfolio repository from GitHub. Vercel automatically detects the project settings, such as the framework and build command. In my case, it correctly identified that I was using Vite with React.
Configuring Project Settings: Ensure that the correct build command (vite build) and output directory (dist) are set in the Vercel settings. These configurations are critical for a successful deployment.

Step 3: Deploying the Portfolio

Connecting GitHub Repository: I linked my GitHub repository containing the portfolio code to Vercel. Vercel listens for changes in the repository, allowing it to automatically redeploy whenever updates are pushed.
Running the Deployment: Clicking on the “Deploy” button started the deployment process. Vercel handled the rest, building the project and hosting it. Within moments, my portfolio was live!

Challenges Faced and Solutions

Image Not Showing After Deployment: One of the challenges I faced was that images stored in the public folder were not displaying correctly once the project was deployed. Initially, the images worked fine on my local server, but they broke on the live site.

Solution: I used raw links from GitHub for images instead of relative paths. For example, I replaced src="Public/profileImage.JPG" with a GitHub raw URL like src="https://raw.githubusercontent.com/golu7059/My-portfolio/master/Public/profileImage.JPG". This approach ensured that images loaded correctly across different environments.

Enhancing User Experience with Mouse Hover Effects

To make my portfolio more interactive, I added a tilt effect to the profile image using mouse hover events. Here’s how I implemented it:

const handleMouseMove = (e) => {
    if (imgRef.current) {
        const rect = imgRef.current.getBoundingClientRect();
        const x = e.clientX - rect.left - rect.width / 2;
        const y = e.clientY - rect.top - rect.height / 2;
        const maxTilt = 20; 
        const tiltX = (y / rect.height) * maxTilt;
        const tiltY = -(x / rect.width) * maxTilt;
        setTiltStyle({
            transform: `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale(1.05)`,
            boxShadow: `${-tiltY * 2}px ${tiltX * 2}px 20px rgba(0, 0, 255, 0.3)`, // Blue color for hover effect
            transition: "transform 0.1s ease, box-shadow 0.1s ease",
        });
    }
};

const handleMouseLeave = () => {
    setTiltStyle({
        transform: "perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1)",
        boxShadow: "0 10px 20px rgba(0, 0, 255, 0.1)",
        transition: "transform 0.3s ease, box-shadow 0.3s ease",
    });
};

Reflecting on the Process

Yesterday, I explored troubleshooting techniques related to image path issues in Vite projects and the use of raw GitHub links. The lessons learned came in handy when facing similar challenges today. This iterative learning process helped in efficiently solving deployment problems and enhancing the functionality of my portfolio.

Conclusion

Deploying a portfolio can seem daunting, but platforms like Vercel simplify the process with their integration features and automatic build configurations. Throughout this journey, I learned valuable lessons about optimizing my application, handling image paths, and implementing interactive UI effects.

I encourage anyone looking to showcase their work to go through the process of creating and deploying their portfolio. It’s not just about presenting your skills; it’s also a great learning experience in itself.

Feel free to explore my portfolio here and connect with me on LinkedIn or GitHub to share your thoughts and feedback. Happy coding!

About the Author

Golu Kumar is a passionate Full Stack Developer pursuing a B.Tech in Computer Science at Parul University. Specializing in MERN Stack, Golu has a keen interest in building responsive and interactive web applications. Check out more of his work on his GitHub profile.

This blog post not only covers the deployment steps but also ties in previous experiences, making it relatable and educational for readers who might be facing similar challenges.