Cyberpunk Portfolio - React Edition

A modern, scalable React.js portfolio application with a stunning cyberpunk aesthetic, featuring neon colors, glassmorphism effects, and smooth animations.

✨ Features

• 🎨 Modern Design: Cyberpunk-themed UI with neon accents and glassmorphism effects
• ⚡ Built with React: Component-based architecture for easy maintenance and scalability
• 🎭 Fully Responsive: Optimized for all screen sizes
• 🚀 Fast Performance: Powered by Vite for lightning-fast development and builds
• 💅 Tailwind CSS: Utility-first CSS framework for rapid UI development
• 🎯 SEO Optimized: Built-in SEO component with React Helmet
• 📦 Easy to Customize: All content managed through a single data file

📁 Project Structure

src/
├── components/              # Reusable React components
│   ├── Navbar.jsx          # Navigation bar
│   ├── Hero.jsx            # Hero/landing section
│   ├── About.jsx           # About me section
│   ├── Projects.jsx        # Projects grid container
│   ├── ProjectCard.jsx     # Individual project card
│   ├── Contact.jsx         # Contact section
│   ├── Footer.jsx          # Page footer
│   ├── FloatingDownloadButton.jsx  # Download button
│   └── SEO.jsx             # SEO metadata component
├── hooks/                   # Custom React hooks
│   └── useSmoothScroll.js  # Smooth scrolling functionality
├── pages/                   # Page components
│   └── Home.jsx            # Main home page
├── styles/                  # Stylesheets
│   ├── App.css             # Custom CSS styles
│   └── index.css           # Global styles & Tailwind imports
├── data/                    # Content data
│   └── content.js          # Portfolio content (EDIT THIS FILE)
├── assets/                  # Static assets (images, etc.)
├── App.jsx                  # Main App component
└── main.jsx                 # Application entry point

🚀 Quick Start

Prerequisites

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

Installation

1. Clone or download this repository

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and visit:

   http://localhost:5173
   

🎨 Customization

Editing Content

All portfolio content is centralized in src/data/content.js. Edit this file to customize:

• Personal information (name, role, email)
• About me section (bio, skills)
• Projects (title, description, images, technologies)
• Social media links

// Example: src/data/content.js
export const portfolioContent = {
  personal: {
    firstName: "YOUR",
    lastName: "NAME",
    email: "your@email.com",
    // ... more fields
  },
  // ... more sections
};

Changing Colors

The color theme is defined in tailwind.config.js:

colors: {
  cyber: {
    bg: '#050510',       // Main Background
    dark: '#0a0a1f',     // Secondary Background
    cyan: '#00f3ff',     // Primary Accent
    pink: '#d946ef',     // Secondary Accent
    green: '#0aff0a',    // Success Color
    // ... more colors
  }
}

Adding New Components

1. Create a new file in src/components/YourComponent.jsx
2. Import and use it in src/pages/Home.jsx

📦 Building for Production

npm run build

This creates an optimized production build in the dist/ folder.

🔍 Preview Production Build

npm run preview

🛠️ Technologies Used

• React 18.3 - UI library
• Vite 6.0 - Build tool and dev server
• Tailwind CSS 3.4 - Utility-first CSS framework
• React Helmet - SEO and meta tags management
• Google Fonts - Orbitron & Rajdhani fonts
• Material Symbols - Icon library

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🤝 Contributing

Feel free to fork this project and customize it for your own use!

📄 License

This project is open source and available under the MIT License.

👤 Author

JOHN DOE

• GitHub: @yourusername
• LinkedIn: Your LinkedIn

🙏 Acknowledgments

• Original template design inspiration from cyberpunk aesthetics
• Icons by Material Symbols
• Fonts by Google Fonts

---

Note: Replace placeholder images and links with your own content. The images in the template use placeholder URLs that should be replaced with your actual project screenshots and profile photo.

For questions or support, please open an issue in the repository.