🚀 Cyber Portfolio - Developer Portfolio Website
Click to Check Live

     

✨ Features

🎨 Design & UI

• Terminal Boot Screen - Immersive boot sequence animation on page load
• Cyberpunk Aesthetic - Neon green (#00FF8C) and cyan (#00D9FF) color scheme
• Glassmorphism Effects - Modern transparent card designs with backdrop blur
• Smooth Animations - Intersection Observer API for scroll-triggered animations
• Responsive Design - Mobile-first approach, works on all devices

🛠️ Technical Features

• Pure Vanilla JavaScript - No frameworks or libraries required
• CSS Grid & Flexbox - Modern layout techniques
• Custom Animations - Handcrafted CSS keyframe animations
• Lazy Loading - Performance-optimized content loading
• Smooth Scrolling - Enhanced navigation experience
• Interactive Elements - Hover effects and transitions throughout

📱 Sections

• Hero - Welcome section with terminal window
• About - Personal introduction with statistics and code snippet
• Skills - Categorized skill sets with animated progress bars
• Experience - Professional journey timeline
• Education - Academic background timeline
• Certifications - Achievements and awards showcase
• Projects - Portfolio of featured work
• Blog - Latest articles and posts
• Contact - Interactive contact form and social links

---

🚀 Quick Start

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• Basic text editor (VS Code recommended)
• Optional: Local web server (Live Server, Python SimpleHTTPServer, etc.)

Installation

1. Clone the repository

   git clone https://github.com/serozr/cyber-portfolio.git
   cd cyber-portfolio

2. Open in browser

   Option A: Direct File Access

   # Simply open index.html in your browser
   # Windows
   start index.html
   
   # macOS
   open index.html
   
   # Linux
   xdg-open index.html

   Option B: Local Server (Recommended)

   # Using Python 3
   python -m http.server 8000
   
   # Using Node.js (http-server)
   npx http-server
   
   # Using VS Code Live Server extension
   # Right-click on index.html and select "Open with Live Server"

3. Navigate to

   http://localhost:8000
   

---

📁 Project Structure

cyber-portfolio/
│
├── index.html            # Main HTML entry point
├── LICENSE               # MIT License
├── README.md             # Project documentation
│
└── src/                  # Source files
  ├── assets/           # Static assets
  │   └── images/       # Image files
  │
  ├── css/              # Stylesheets
  │   ├── animations.css # Custom animation keyframes
  │   └── main.css       # Main stylesheet
  │
  └── js/               # JavaScript files
    └── main.js        # Interactions and animations

---

🎨 Customization Guide

Changing Colors

Edit the CSS variables or colors directly in src/css/main.css:

/* Primary accent color - Neon Green */
#00FF8C

/* Secondary accent color - Cyan */
#00D9FF

/* Background color */
#121212

/* Card background */
rgba(26, 26, 26, 0.8)

Modifying Content

1. Personal Information: Edit index.html to update your name, bio, and details
2. Skills: Modify the skills sections and percentage values
3. Projects: Add your own projects in the projects section
4. Social Links: Update contact information and social media links

Adding New Sections

1. Add section HTML in index.html
2. Style it in src/css/main.css
3. Add animation triggers in src/js/main.js if needed

---

🌐 Browser Support

Browser	Version
Chrome	✅ Latest
Firefox	✅ Latest
Safari	✅ Latest
Edge	✅ Latest
Opera	✅ Latest

Note: IE11 is not supported due to modern CSS and JavaScript features.

---

📱 Responsive Breakpoints

• Desktop: > 768px
• Tablet: 768px
• Mobile: < 768px

---

⚡ Performance

Optimization Features

• Intersection Observer API for lazy loading
• CSS animations over JavaScript animations
• Minimal dependencies (no external libraries)
• Optimized asset loading
• Efficient event listeners

Lighthouse Scores

(Run your own Lighthouse audit to display scores)

• Performance: 95+
• Accessibility: 90+
• Best Practices: 95+
• SEO: 95+

---

🛠️ Built With

• HTML5 - Semantic markup
• CSS3 - Styling and animations
  • CSS Grid
  • Flexbox
  • CSS Custom Properties
  • Keyframe Animations
• Vanilla JavaScript - Interactivity and dynamic content
  • Intersection Observer API
  • DOM Manipulation
  • Event Handling

---

📝 To-Do / Future Enhancements

• Add dark/light theme toggle
• Implement form backend integration
• Add blog section with real CMS
• Create project detail pages
• Add loading animations for images
• Implement PWA features
• Add multilingual support
• Create admin panel for content management
• Add search functionality for blog posts
• Implement analytics tracking

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

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

---

👨‍💻 Author

serozr

• GitHub: @serozr
• Twitter: @serozr
• Portfolio: serozr.me

---

🙏 Acknowledgments

• Inspiration from terminal-based interfaces and cyberpunk aesthetics
• Color scheme inspired by classic terminal green
• Icons and emojis for visual enhancement
• The open-source community for continuous inspiration

---

📞 Support

If you like this project, please give it a ⭐️ on GitHub!

For questions or support, please open an issue or contact me through the portfolio website.

---

Made with ❤️ by serozr

Crafted with attention to detail and a passion for web development