A stunning, production-ready portfolio website to showcase professional certifications, achievements, and expertise with a beautiful black & white theme and smooth animations.
🚀 Live Demo • 📖 Documentation • 🛠️ Installation • 🎨 Customization
|
|
Make sure you have the following installed:
- Node.js (v18 or higher)
- npm or yarn
# Clone the repository
git clone https://github.com/AyushSingh360/portfolio.git
# Navigate to project directory
cd portfolio
# Install dependencies
npm install
# Start development server
npm run dev🎉 That's it! Your portfolio will be running at http://localhost:5173
| Command | Description |
|---|---|
npm run dev |
🚀 Start development server |
npm run build |
📦 Build for production |
npm run preview |
👀 Preview production build |
npm run lint |
🔍 Run ESLint |
- Navigate to
src/components/Certificates.tsx - Update the certificates array with your information:
const certificates: Certificate[] = [
{
id: 1,
title: "Your Certificate Title",
issuer: "Issuing Organization",
date: "2024",
description: "Detailed description of what this certificate validates...",
image: "/project/public/15.png",
credentialId: "YOUR-CREDENTIAL-ID",
verificationUrl: "https://verification-url.com"
},
// Add more certificates...
];📋 Personal Information
Hero Section (src/components/Hero.tsx):
// Update your name and title
<h1>Ayush Kumar</h1>
<p>Fresher</p>About Section (src/components/About.tsx):
// Update experience and location
<span>Experience: `` </span>
<span>Location: India, Bihar</span>Contact Information (src/components/Contact.tsx):
// Update contact details
<p>ayushsingh21109@gmail.com</p>
<p>+1 (555) 123-4567</p>🎨 Styling & Theme
Colors: Modify tailwind.config.js for custom colors
Animations: Update animation classes in components
Layout: Adjust grid layouts and spacing in component files
🔧 Skills & Expertise
Update src/components/Skills.tsx:
const skillCategories = [
{
title: "Your Skill Category",
icon: <YourIcon size={24} />,
skills: ["Skill 1", "Skill 2", "Skill 3"]
}
];professional-portfolio/
├── 📁 public/
│ └── Images
├── 📁 src/
│ ├── 📁 components/
│ │ ├── About.tsx # About section
│ │ ├── Certificates.tsx # Certificates showcase
│ │ ├── Contact.tsx # Contact information
│ │ ├── DarkModeToggle.tsx # Theme switcher
│ │ ├── Footer.tsx # Footer component
│ │ ├── Header.tsx # Navigation header
│ │ ├── Hero.tsx # Hero section
│ │ └── Skills.tsx # Skills showcase
│ ├── 📁 hooks/
│ │ └── useDarkMode.ts # Dark mode logic
│ ├── App.tsx # Main app component
│ ├── index.css # Global styles
│ └── main.tsx # App entry point
├── 📄 index.html
├── 📄 package.json
├── 📄 tailwind.config.js
├── 📄 tsconfig.json
└── 📄 vite.config.ts
- Interactive Cards - Click to view detailed information
- Verification Links - Direct links to credential verification
- Responsive Design - Perfect display on all screen sizes
- System Preference Detection - Respects user's OS theme
- Persistent Storage - Remembers user's choice
- Smooth Transitions - Elegant theme switching animations
- Mobile First - Optimized for mobile devices
- Flexible Grid - Adapts to any screen size
- Touch Friendly - Perfect for mobile interactions
# Build the project
npm run build
# Deploy to Netlify
# Drag and drop the 'dist' folder to Netlify# Install Vercel CLI
npm i -g vercel
# Deploy
vercel --prod# Install gh-pages
npm install --save-dev gh-pages
# Add to package.json scripts
"deploy": "gh-pages -d dist"
# Deploy
npm run build && npm run deployContributions are welcome! Here's how you can help:
- 🍴 Fork the repository
- 🌿 Create a feature branch (
git checkout -b feature/amazing-feature) - 💾 Commit your changes (
git commit -m 'Add amazing feature') - 📤 Push to the branch (
git push origin feature/amazing-feature) - 🔄 Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- React Team - For the amazing React framework
- Tailwind CSS - For the utility-first CSS framework
- Lucide - For the beautiful icon set
- Pexels - For the high-quality stock images
- Vite - For the lightning-fast build tool
If you have any questions or need help customizing your portfolio:
- 📧 Email: ayushsingh21109@gmail.com
- 💬 Issues: GitHub Issues
- ✨ linkedin: https://www.linkedin.com/in/ayushsingh360/
- ❤️ LIVE: https://portfolio-ashs-projects-0cd628f6.vercel.app/
