🌐 CyberTrend Bulletin

CyberTrend Bulletin is a cybersecurity-focused bulletin platform delivering the latest intelligence, research, and insights into digital security.
It features a 3D rotating cyber globe background, real-time style bulletin ticker, and a modern UI tailored for cybersecurity professionals.

---

🚀 Features

• 🌍 3D Cyber Globe (Three.js) as a live animated background
• 📰 Cybersecurity Bulletin Feed with live ticker simulation
• 🎨 Modern UI powered by TailwindCSS + shadcn/ui
• 🛡️ Cybersecurity Branding (electric blue, cyber green, holographic effects)
• 📱 Responsive Design across desktop & mobile
• ⚡ Bun.js Runtime for blazing fast development and builds

---

🛠️ Tech Stack

• React + React Router – Frontend & routing
• Vite – Next-gen bundler
• TypeScript – Static typing
• Tailwind CSS – Utility-first styling
• shadcn/ui – Accessible UI components
• Three.js – 3D globe & animations
• Bun – Fast runtime, package manager & task runner

---

⚙️ Setup & Installation

• Clone the repo and install dependencies using Bun:

git clone https://github.com/dev-sire/Security-Bulletin.git
cd cybertrend-bulletin
bun install

• Run development server:

bun run dev

The Server should start running at http://localhost:8080/

• Build For Production:

bun run build
bun run start

---

📂 Project Structure

📦 Security-Bulletin
├─ .gitignore
├─ README.md
├─ bun.lockb
├─ components.json
├─ eslint.config.js
├─ index.html
├─ package-lock.json
├─ package.json
├─ postcss.config.js
├─ public
│  ├─ favicon.ico
│  ├─ placeholder.svg
│  └─ robots.txt
├─ src
│  ├─ App.css
│  ├─ App.tsx
│  ├─ assets
│  │  ├─ acm_sigsac.png
│  │  ├─ maventech-logo.png
│  │  └─ nano_techx_logo.png
│  ├─ components
│  │  ├─ AuthorsShowcase.tsx
│  │  ├─ CyberFooter.tsx
│  │  ├─ CyberHero.tsx
│  │  ├─ CyberNavigation.tsx
│  │  ├─ LatestNews.tsx
│  │  ├─ PartnersShowcase.tsx
│  │  └─ ui
│  │     ├─ accordion.tsx
│  │     ├─ alert-dialog.tsx
│  │     ├─ alert.tsx
│  │     ├─ aspect-ratio.tsx
│  │     ├─ avatar.tsx
│  │     ├─ badge.tsx
│  │     ├─ breadcrumb.tsx
│  │     ├─ button.tsx
│  │     ├─ calendar.tsx
│  │     ├─ card.tsx
│  │     ├─ carousel.tsx
│  │     ├─ chart.tsx
│  │     ├─ checkbox.tsx
│  │     ├─ collapsible.tsx
│  │     ├─ command.tsx
│  │     ├─ context-menu.tsx
│  │     ├─ dialog.tsx
│  │     ├─ drawer.tsx
│  │     ├─ dropdown-menu.tsx
│  │     ├─ form.tsx
│  │     ├─ hover-card.tsx
│  │     ├─ input-otp.tsx
│  │     ├─ input.tsx
│  │     ├─ label.tsx
│  │     ├─ menubar.tsx
│  │     ├─ navigation-menu.tsx
│  │     ├─ pagination.tsx
│  │     ├─ popover.tsx
│  │     ├─ progress.tsx
│  │     ├─ radio-group.tsx
│  │     ├─ resizable.tsx
│  │     ├─ scroll-area.tsx
│  │     ├─ select.tsx
│  │     ├─ separator.tsx
│  │     ├─ sheet.tsx
│  │     ├─ sidebar.tsx
│  │     ├─ skeleton.tsx
│  │     ├─ slider.tsx
│  │     ├─ sonner.tsx
│  │     ├─ switch.tsx
│  │     ├─ table.tsx
│  │     ├─ tabs.tsx
│  │     ├─ textarea.tsx
│  │     ├─ toast.tsx
│  │     ├─ toaster.tsx
│  │     ├─ toggle-group.tsx
│  │     ├─ toggle.tsx
│  │     ├─ tooltip.tsx
│  │     └─ use-toast.ts
│  ├─ hooks
│  │  ├─ use-mobile.tsx
│  │  └─ use-toast.ts
│  ├─ index.css
│  ├─ lib
│  │  └─ utils.ts
│  ├─ main.tsx
│  ├─ pages
│  │  ├─ Archive.tsx
│  │  ├─ Index.tsx
│  │  └─ NotFound.tsx
│  └─ vite-env.d.ts
├─ tailwind.config.ts
├─ tsconfig.app.json
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts

---

🎨 Customization

• 🌍 Update globe visuals inside Three.js scene (in CyberHero.tsx or dedicated component).

• 📰 Modify bulletin ticker items in the hero section.

• 🎨 Adjust theme colors in tailwind.config.js (electric-blue, cyber-green, holographic gradients).

🤝 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request with improvements.

📜 License

This project is licensed under the MIT License – you’re free to use and adapt it.

🔗 Stay Connected

Join the elite community of cybersecurity professionals, researchers, and innovators. Together, we are #savingdigitallives 💙