|
| 1 | +# WebHub |
| 2 | + |
| 3 | +A modern, minimalist web application built with pure TypeScript and Vite. This project showcases a clean architecture approach without heavy frameworks, focusing on performance and maintainability. |
| 4 | + |
| 5 | +## 🚀 Features |
| 6 | + |
| 7 | +- **Pure TypeScript Architecture** - No React, Vue, or Angular dependencies |
| 8 | +- **Modern CSS** - Custom CSS with CSS Grid, Flexbox, and CSS Custom Properties |
| 9 | +- **Responsive Design** - Mobile-first approach with fluid layouts |
| 10 | +- **Component-Based** - Modular TypeScript components for reusability |
| 11 | +- **Dynamic Routing** - Client-side routing system |
| 12 | +- **Content Management** - Flexible content structure for blog articles |
| 13 | +- **Markdown Support** - Rich text content with markdown-like syntax |
| 14 | +- **Performance Optimized** - Minimal bundle size and fast loading |
| 15 | + |
| 16 | +## 🛠️ Tech Stack |
| 17 | + |
| 18 | +- **Build Tool**: Vite |
| 19 | +- **Language**: TypeScript |
| 20 | +- **Styling**: CSS3 (no preprocessors) |
| 21 | +- **Bundling**: Native ES modules |
| 22 | +- **Development**: Hot Module Replacement (HMR) |
| 23 | + |
| 24 | +## 📁 Project Structure |
| 25 | + |
| 26 | +``` |
| 27 | +src/ |
| 28 | +├── components/ # Reusable UI components |
| 29 | +│ ├── navigation/ # Navigation system |
| 30 | +│ ├── buttons/ # Button components |
| 31 | +│ ├── footer/ # Footer component |
| 32 | +│ └── socials/ # Social media links |
| 33 | +├── content/ # Content management |
| 34 | +│ ├── home/ # Homepage content |
| 35 | +│ ├── about/ # About page content |
| 36 | +│ ├── contact/ # Contact page content |
| 37 | +│ ├── logs/ # Blog articles |
| 38 | +│ └── utils/ # Content utilities |
| 39 | +├── core/ # Core application logic |
| 40 | +│ ├── router.ts # Client-side routing |
| 41 | +│ ├── event-bus.ts # Event management |
| 42 | +│ └── handlers.ts # Event handlers |
| 43 | +├── styles/ # CSS organization |
| 44 | +│ ├── base/ # Reset, variables, typography |
| 45 | +│ ├── components/ # Component styles |
| 46 | +│ ├── layout/ # Layout systems |
| 47 | +│ ├── utilities/ # Helper classes |
| 48 | +│ └── views/ # Page-specific styles |
| 49 | +└── views/ # Page components |
| 50 | + ├── home/ # Homepage views |
| 51 | + ├── about/ # About page views |
| 52 | + ├── contact/ # Contact page views |
| 53 | + └── logs/ # Blog article views |
| 54 | +``` |
| 55 | + |
| 56 | +## 🎨 Architecture Philosophy |
| 57 | + |
| 58 | +This project demonstrates how to build a modern web application using: |
| 59 | + |
| 60 | +- **Vanilla TypeScript** for component logic |
| 61 | +- **CSS Grid & Flexbox** for layouts |
| 62 | +- **CSS Custom Properties** for theming |
| 63 | +- **ES Modules** for dependency management |
| 64 | +- **Event-driven architecture** for component communication |
| 65 | + |
| 66 | +## 🚀 Getting Started |
| 67 | + |
| 68 | +### Prerequisites |
| 69 | + |
| 70 | +- Node.js (v16 or higher) |
| 71 | +- npm or yarn |
| 72 | + |
| 73 | +### Installation |
| 74 | + |
| 75 | +1. Clone the repository |
| 76 | +```bash |
| 77 | +git clone https://github.com/cd-bash/webhub.git |
| 78 | +cd webhub |
| 79 | +``` |
| 80 | + |
| 81 | +2. Install dependencies |
| 82 | +```bash |
| 83 | +npm install |
| 84 | +``` |
| 85 | + |
| 86 | +3. Start development server |
| 87 | +```bash |
| 88 | +npm run dev |
| 89 | +``` |
| 90 | + |
| 91 | +4. Build for production |
| 92 | +```bash |
| 93 | +npm run build |
| 94 | +``` |
| 95 | + |
| 96 | +## 📝 Content Management |
| 97 | + |
| 98 | +The project features a flexible content management system: |
| 99 | + |
| 100 | +- **Type-safe content** - All content is TypeScript-typed |
| 101 | +- **Markdown support** - Rich text with markdown-like syntax |
| 102 | +- **Flexible layouts** - Mix different content types in any order |
| 103 | +- **Asset management** - Optimized image and video handling |
| 104 | + |
| 105 | +### Adding Content |
| 106 | + |
| 107 | +Content is managed through TypeScript files in the `src/content/` directory. Each content type is fully typed for safety and autocomplete support. |
| 108 | + |
| 109 | +## 🎨 Styling Architecture |
| 110 | + |
| 111 | +CSS is organized using a scalable architecture: |
| 112 | + |
| 113 | +- **Base styles** - Reset, variables, and typography |
| 114 | +- **Layout systems** - Reusable layout patterns |
| 115 | +- **Components** - Encapsulated component styles |
| 116 | +- **Utilities** - Helper classes and responsive utilities |
| 117 | +- **Views** - Page-specific styling |
| 118 | + |
| 119 | +## 🌐 Browser Support |
| 120 | + |
| 121 | +- Chrome (latest) |
| 122 | +- Firefox (latest) |
| 123 | +- Safari (latest) |
| 124 | +- Edge (latest) |
| 125 | + |
| 126 | +## 📄 License |
| 127 | + |
| 128 | +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. |
| 129 | + |
| 130 | +## 🎨 Copyright Notice |
| 131 | + |
| 132 | +### Visual Content & Design |
| 133 | + |
| 134 | +All visual content, including but not limited to: |
| 135 | +- Custom graphics and illustrations |
| 136 | +- Photography and image compositions |
| 137 | +- Video content and animations |
| 138 | +- Logo designs and branding elements |
| 139 | +- UI/UX design layouts and visual compositions |
| 140 | +- Color schemes and design systems |
| 141 | + |
| 142 | +**© 2025 CD-Labs. All rights reserved.** |
| 143 | + |
| 144 | +The visual content and design elements of this website are proprietary and protected by copyright law. They may not be reproduced, distributed, or used in any form without explicit written permission from CD-Labs. |
| 145 | + |
| 146 | +### Code License |
| 147 | + |
| 148 | +The source code of this project (HTML, CSS, TypeScript, and configuration files) is licensed under the MIT License and is available for use, modification, and distribution according to the terms of that license. |
| 149 | + |
| 150 | +### Third-Party Assets |
| 151 | + |
| 152 | +Any third-party assets used in this project retain their original licenses and copyright notices. Please refer to individual asset documentation for specific licensing terms. |
| 153 | + |
| 154 | +--- |
| 155 | + |
| 156 | +For licensing inquiries regarding visual content, please contact: [[email protected]] |
| 157 | + |
| 158 | +## 🤝 Contributing |
| 159 | + |
| 160 | +This is a personal portfolio project. While the code is open source under the MIT License, the visual content and design are proprietary to CD-Labs. |
| 161 | + |
| 162 | +## 👨💻 Author |
| 163 | + |
| 164 | +**Charles Doucet** - [CD-Labs](https://github.com/cd-bash) |
| 165 | + |
| 166 | +--- |
| 167 | + |
| 168 | +*Built with ❤️ using pure TypeScript and modern web standards* |
0 commit comments