Prerequisites
Before you begin, ensure you have the following installed:
- Node.js (v16 or higher)
- npm or yarn package manager
- A code editor (VS Code recommended)
- Git for version control
Check your Node.js version with node --version. The portfolio was built with Node.js v18+.
Installation
First, clone the portfolio repository from GitHub:
git clone https://github.com/Ritam369/My_Portfolio.git
cd My_Portfolio
Install all required npm packages:
This will install all dependencies defined in package.json, including:
React 18 and React DOM
Vite build tool
Tailwind CSS and related plugins
Framer Motion for animations
EmailJS for contact form
React Router DOM for navigation
Shadcn/ui components
And more…
The installation may take 1-2 minutes depending on your internet connection.
The contact form requires EmailJS credentials. Create a .env file in the root directory:
VITE_SEVICE_ID=your_emailjs_service_id
VITE_TEMPLATE_ID=your_emailjs_template_id
VITE_PUBLIC_KEY=your_emailjs_public_key
Never commit your .env file to version control. It’s already included in .gitignore.
Getting EmailJS Credentials
Visit EmailJS Dashboard
Create a free account
Set up an email service (Gmail, Outlook, etc.)
Create an email template with these variables:
from_name - Sender’s namefrom_email - Sender’s emailto_name - Your name (default: “Ritam Saha”)to_email - Your emailmessage - Message content
Copy your Service ID, Template ID, and Public Key to .env
Run the Vite development server:
You should see output similar to:
VITE v5.4.1 ready in 1234 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
Open your browser and navigate to http://localhost:5173/ to see the portfolio running.
Vite provides instant hot module replacement (HMR). Changes to your code will reflect immediately without full page reloads.
Available Scripts
The portfolio includes several npm scripts for development and production:
Development
Starts the Vite development server with HMR on http://localhost:5173/
Build for Production
Creates an optimized production build in the dist/ folder with:
- Minified JavaScript and CSS
- Tree-shaken dependencies
- Optimized assets
- Source maps
Preview Production Build
Locally preview the production build before deployment
Lint Code
Runs ESLint to check for code quality issues and potential errors
Configuration Files
Understanding key configuration files:
Vite Configuration
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})
@ alias allows importing from src/ using @/ prefix:
// Instead of:
import { Button } from '../../../components/ui/button'
// Use:
import { Button } from '@/components/ui/button'
Tailwind Configuration
The tailwind.config.js includes custom theme extensions:
export default {
darkMode: ["class"],
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
colors: {
navy: {
50: '#f8fafc',
100: '#f1f5f9',
// ... custom color palette
900: '#0f172a',
},
},
animation: {
blob: "blob 7s infinite",
fadeIn: 'fadeIn 0.5s ease-in',
},
}
},
plugins: [require("tailwindcss-animate")],
}
Shadcn/ui Configuration
The components.json configures Shadcn/ui components:
{
"style": "new-york",
"rsc": false,
"tsx": false,
"tailwind": {
"config": "tailwind.config.js",
"baseColor": "stone",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui"
}
}
Customization
Update Personal Information
Edit src/constants/index.js to customize the portfolio:
const words = [
"Software Developer",
"Problem Solver",
"MERN Stack Developer",
"Context-Prompt Engineer",
];
const socialsData = [
{
name: "LinkedIn",
url: "https://www.linkedin.com/in/ritamsaha137",
icon: "bx bxl-linkedin"
},
{
name: "GitHub",
url: "https://github.com/Ritam369",
icon: "bx bxl-github"
},
// Add more social links...
];
const navLinks = [
{ id: "skills", title: "Skills" },
{ id: "education", title: "Education" },
{ id: "projects", title: "Projects" },
{ id: "contact", title: "Contact" },
];
const services = [
{
title: "Problem Solving & Algorithms",
icon: Computational,
description: "Expert in data structures and algorithms..."
},
// Add more services...
];
const techStack = [
"C", "Java", "html", "css", "js", "nodejs",
"Expressjs", "React", "Tailwind", "Mysql", "Mongodb"
].map(name => ({
name,
imageUrl: `https://go-skill-icons.vercel.app/api/icons?i=${name.toLowerCase()}`
}));
const Email = "[email protected]";
Modify Theme Colors
Adjust colors in tailwind.config.js to match your brand:
colors: {
// Change primary color scheme
primary: "#0f172a",
secondary: "#64748b",
tertiary: "#f1f5f9",
}
Replace Profile Picture
Replace public/My_pic.jpg with your own profile picture. The Hero component will automatically use it:
<img
src="My_pic.jpg"
alt="My Picture"
className="relative w-56 sm:w-64 md:w-80 rounded-full..."
/>
Common Issues
Port Already in Use
If port 5173 is already in use, Vite will automatically try the next available port. You can specify a different port:
npm run dev -- --port 3000
EmailJS Not Working
Verify your .env variables are correctly named:
VITE_SEVICE_ID (note: typo exists in source code)VITE_TEMPLATE_IDVITE_PUBLIC_KEY
All Vite environment variables must start with VITE_ prefix.
Build Errors
Clear the cache and reinstall dependencies:
rm -rf node_modules package-lock.json
npm install
npm run build
Next Steps
Now that your portfolio is running locally:
- Customize the content in
src/constants/index.js
- Update your profile picture and assets
- Configure EmailJS for the contact form
- Modify the theme colors to match your brand
- Add your projects and work experience
- Test on different devices and screen sizes
- Build and deploy to production
The portfolio is optimized for deployment on platforms like Vercel, Netlify, or GitHub Pages.
