A sleek, responsive portfolio website built with Astro, React, and Tailwind CSS, featuring modern animations and glassmorphism effects.

• ✨ Modern Design: Clean, professional layout with glassmorphism effects
• 🎨 Animations: Smooth transitions and interactive elements using Framer Motion
• 🌙 Dark/Light Mode: Seamless theme switching with system preference detection
• 📱 Fully Responsive: Optimized for all devices and screen sizes
• 🚀 Performance Focused: Built with Astro for excellent loading speeds
• 🧩 Modular Structure: Easy to customize and extend
• 🔍 SEO Friendly: Structured content for better search engine visibility

• Node.js (v18 or higher recommended)
• npm or yarn or bun

note: check your version

1. Clone the repository:

   git clone https://github.com/yourusername/my-portfolio.git
   cd portfolio

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   bun install

3. Start the development server:

   npm run dev
   # or
   yarn dev
   # or
   bun dev

4. Open your browser and visit http://localhost:4321

This portfolio is designed to be easily customizable mainly by editing the data in the src/lib/data.ts file:

1. Personal Information: Update your name, location, email, and social links

   export const personalInfo = {
     name: "Your Name",
     location: "Your Location",
     email: "your.email@example.com",
     github: "https://github.com/yourusername",
     linkedin: "https://www.linkedin.com/in/yourusername/",
   };

2. Work Experience: Add or modify your professional experience

   export const workExperience = [
     {
       company: "Company Name",
       location: "Location",
       position: "Your Position",
       period: "Start Date - End Date",
       achievements: [
         "Achievement 1",
         "Achievement 2",
         // ...
       ],
     },
     // Add more work experiences
   ];

3. Education: Update your educational background

   export const education = [
     {
       institution: "University Name",
       location: "Location",
       degree: "Your Degree",
       period: "Start Date - End Date",
       achievements: [
         "Achievement 1",
         "Achievement 2",
         // ...
       ],
     },
     // Add more education entries
   ];

4. Skills: Customize your skills by category

   export const skills = {
     programmingLanguages: ["Skill 1", "Skill 2"],
     frontendDevelopment: ["Skill 1", "Skill 2"],
     // Other skill categories
   };

5. Projects: Showcase your projects

   export const projects = [
     {
       title: "Project Name",
       github: "https://github.com/yourusername/project",
       description: [
         "Description point 1",
         "Description point 2",
         // ...
       ],
     },
     // Add more projects
   ];

6. Awards: Highlight your achievements

   export const awards = [
     {
       name: "Award Name",
       issuer: "Issuer",
       date: "Date",
       type: "Type",
       position: "Position",
     },
     // Add more awards
   ];

To create a production build:

npm run build
# or
yarn build
# or
bun run build

To preview the production build locally:

npm run preview
# or
yarn preview

This portfolio can be deployed to any static site hosting service like Vercel, Netlify, GitHub Pages, etc.

This project is licensed under the MIT License - see the LICENSE file for details.

This template is designed to be used as a starting point for your personal portfolio. You are free to use it for your own portfolio by simply modifying the data.ts file and making any design adjustments. However, please include attribution to the original author when using this template.

• Astro
• React
• Tailwind CSS
• Framer Motion
• Lucide Icons