A modern cybersecurity website featuring an enhanced UI, comprehensive cyber calendar, and integrated news scraping with newspaper-style design. Built for the cybersecurity community to stay informed and connected.
🔗 [Visit CybeReach Website]((https://harshith1201.github.io/CybeReach_Website/)
Modern cybersecurity hub with integrated news and calendar
- Modern, responsive design with improved typography
- Smooth animations and transitions
- Better color schemes and visual hierarchy
- Mobile-optimized layouts
- Newspaper cutout design for cybersecurity news
- Open-source text summarization using Hugging Face transformers
- Real-time news scraping from Economic Times cybersecurity section
- Automatic summarization with bullet points
- Responsive newspaper layout with main story and sidebar articles
- 20+ real cybersecurity events including:
- Historical milestones (Morris Worm, first computer virus, etc.)
- Important people birthdays (Kevin Mitnick, John McAfee, etc.)
- Major conferences (RSA, Black Hat, DEF CON, etc.)
- Awareness events (Cybersecurity Awareness Month, Data Privacy Day, etc.)
- Interactive calendar with detailed descriptions
- Color-coded categories for easy identification
- HTML5/CSS3 with modern styling
- JavaScript ES6+ for dynamic functionality
- Responsive design for all devices
- CSS Grid & Flexbox for layouts
- Python 3.7+ for news scraping
- Flask for API server
- BeautifulSoup4 for web scraping
- Hugging Face Transformers for text summarization (optional)
- Pandas for data processing
- No browser automation (removed Selenium dependency)
- Lightweight extractive summarization as fallback
- Optional Hugging Face models for advanced summarization
- Respectful scraping with delays and error handling
- Open the website in your browser
- The news section will automatically load with the latest cybersecurity news
- Click "Refresh News" to get updated articles
- Articles are displayed in a newspaper cutout style
- Navigate to the Cyber Calendar section
- Browse through months to see cybersecurity events
- Click on events for detailed descriptions
- Events are color-coded by category
// Get latest news
fetch('http://localhost:5000/api/news?limit=5')
.then(response => response.json())
.then(data => console.log(data.articles));
// Search news
fetch('http://localhost:5000/api/news/search?q=ransomware')
.then(response => response.json())
.then(data => console.log(data.articles));- Authentic newspaper typography using Times New Roman and Georgia fonts
- Rotated article cards for realistic cutout effect
- Vintage color scheme with proper contrast
- Responsive grid layout adapting to screen sizes
- Enhanced animations with smooth transitions
- Better spacing and typography for improved readability
- Modern color gradients and visual effects
- Mobile-first responsive design
News not loading:
- Check if the Flask API is running on port 5000
- Verify internet connection for news scraping
- Check browser console for JavaScript errors
Scraping errors:
- The scraper includes fallback mechanisms
- Demo data will load if scraping fails
- Check the console logs for detailed error messages
CORS issues:
- Ensure Flask-CORS is installed
- API server must be running for frontend to access news
For better performance:
- Use the lightweight extractive summarization (default)
- Limit the number of articles scraped (default: 10-15)
- Enable caching by keeping the API server running
For better summarization quality:
- Install Hugging Face transformers
- Set
use_local_model=Truein the scraper - Note: This requires more system resources
Cyber Reach Website/
├── index.html # Main website
├── html/
│ ├── calendar.html # Enhanced cyber calendar
│ ├── projects.html # Projects page
│ ├── blogs.html # Blogs page
│ └── aboutus.html # About page
├── css/
│ └── style.css # Enhanced styles with newspaper design
├── js/
│ ├── script.js # Main website functionality
│ ├── news-integration.js # News display and management
│ └── cyber-events.js # Calendar event management
├── backend/
│ ├── cyber_news_scraper.py # Enhanced news scraper
│ ├── news_api.py # Flask API server
│ ├── requirements.txt # Python dependencies
│ └── setup.py # Setup script
└── README.md # This file
- Fork this repository
- Go to Settings > Pages
- Select source: Deploy from a branch
- Choose
mainbranch and/(root) folder - Your site will be available at
https://yourusername.github.io/CybeReach/
For full functionality including news scraping:
- Frontend: Deploy to GitHub Pages, Netlify, or Vercel
- Backend: Deploy to Heroku, Railway, or any cloud provider
- Update API URL: Modify
window.CYBER_NEWS_API_URLinindex.html
# Clone the repository
git clone https://github.com/CybeReach/CybeReach.git
cd CybeReach
# Set up backend
cd backend
pip install -r requirements.txt
python news_api.py
# Serve frontend (in another terminal)
cd ..
python -m http.server 8000- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes
- Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow existing code style
- Test your changes thoroughly
- Update documentation as needed
- Add comments for complex functionality
This project is open source and available under the MIT License.
- Hugging Face for open-source NLP models
- Economic Times for cybersecurity news content
- Flask and BeautifulSoup communities
- Open source contributors who made this possible
Built with ❤️ for the cybersecurity community