diff --git a/.htaccess b/.htaccess new file mode 100644 index 0000000..2127a4c --- /dev/null +++ b/.htaccess @@ -0,0 +1,70 @@ +# Security Headers + + # Content Security Policy + Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com; img-src 'self' data: https:; connect-src 'self' https://api.quotable.io; media-src 'self'" + + # Prevent clickjacking + Header always set X-Frame-Options DENY + + # Prevent MIME type sniffing + Header always set X-Content-Type-Options nosniff + + # Referrer Policy + Header always set Referrer-Policy "strict-origin-when-cross-origin" + + # HSTS (HTTP Strict Transport Security) - Only enable if you have SSL + # Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" + + +# Prevent access to sensitive files + + Order Allow,Deny + Deny from all + + + + Order Allow,Deny + Deny from all + + + + Order Allow,Deny + Deny from all + + +# Enable compression + + AddOutputFilterByType DEFLATE text/plain + AddOutputFilterByType DEFLATE text/html + AddOutputFilterByType DEFLATE text/xml + AddOutputFilterByType DEFLATE text/css + AddOutputFilterByType DEFLATE application/xml + AddOutputFilterByType DEFLATE application/xhtml+xml + AddOutputFilterByType DEFLATE application/rss+xml + AddOutputFilterByType DEFLATE application/javascript + AddOutputFilterByType DEFLATE application/x-javascript + + +# Enable browser caching + + ExpiresActive On + ExpiresByType text/css "access plus 1 month" + ExpiresByType application/javascript "access plus 1 month" + ExpiresByType image/png "access plus 1 month" + ExpiresByType image/jpg "access plus 1 month" + ExpiresByType image/jpeg "access plus 1 month" + ExpiresByType image/gif "access plus 1 month" + ExpiresByType image/svg+xml "access plus 1 month" + + +# Redirect HTTP to HTTPS (uncomment if you have SSL) +# RewriteEngine On +# RewriteCond %{HTTPS} off +# RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] + +# Prevent directory listing +Options -Indexes + +# Error pages +ErrorDocument 404 /404.html +ErrorDocument 500 /500.html \ No newline at end of file diff --git a/README.md b/README.md index 3da5a21..2d6caf8 100644 --- a/README.md +++ b/README.md @@ -1,112 +1,211 @@ -# ๐ŸŒธ The Cawnpore Magazine Website +# The Cawnpore Magazine + +[![GitHub Pages](https://img.shields.io/badge/GitHub%20Pages-Deployed-success)](https://thecawnporemag.github.io/) +[![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE) +[![HTML5](https://img.shields.io/badge/HTML5-E34F26?logo=html5&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/HTML) +[![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css3&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS) +[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript) + +A modern, responsive literary magazine website celebrating literature, art, and cultural diversity from Kanpur (Cawnpore) and beyond. Built with cutting-edge web technologies and expert-level development practices. + +## ๐ŸŒŸ Features + +### ๐ŸŽจ Design & User Experience +- **Modern UI/UX**: Sleek design with gradient backgrounds and smooth animations +- **Dark Mode**: Toggle between light and dark themes with smooth transitions +- **Responsive Design**: Optimized for all devices (mobile, tablet, desktop) +- **Accessibility**: WCAG 2.1 compliant with ARIA labels, keyboard navigation, and screen reader support +- **Performance**: Optimized loading with lazy loading, debounced events, and efficient animations + +### ๐Ÿ“– Content Management +- **Issue Archives**: Complete archive of published issues with search and filtering +- **Gallery**: Interactive image gallery with lightbox and categorization +- **Contributors**: Dedicated page showcasing magazine contributors +- **Dynamic Content**: Real-time quote widget and interactive elements + +### ๐ŸŽต Interactive Features +- **Background Music**: Toggle ambient music with fade effects +- **Particle System**: Animated cursor-following particles +- **Scroll Animations**: Smooth reveal animations triggered by scroll +- **Form Validation**: Real-time email validation with visual feedback +- **Notifications**: Toast notifications for user actions + +### ๐Ÿ”ง Technical Excellence +- **Modern JavaScript**: ES6+ features with error handling and performance optimization +- **CSS Grid & Flexbox**: Advanced layout techniques for responsive design +- **SEO Optimized**: Meta tags, structured data, sitemap, and robots.txt +- **Security**: Content Security Policy, secure headers, and input validation +- **Performance**: Code splitting, lazy loading, and optimized assets + +## ๐Ÿš€ Quick Start + +### Prerequisites +- Modern web browser with JavaScript enabled +- Local development server (optional, for development) + +### Installation + +1. **Clone the repository** + ```bash + git clone https://github.com/thecawnporemag/thecawnporemag.github.io.git + cd thecawnporemag.github.io + ``` + +2. **Start development server** + ```bash + # Using Python (recommended for simple testing) + python3 -m http.server 8000 + + # Or using Node.js + npx serve . + + # Or using PHP + php -S localhost:8000 + ``` + +3. **Open in browser** + ``` + http://localhost:8000 + ``` + +## ๐Ÿ“ Project Structure -Welcome to the official open-source repository of [**The Cawnpore Magazine**](https://www.thecawnporemag.co.in/) โ€” a student-led, non-profit literary and arts magazine dedicated to celebrating **creativity, girlhood, and youth culture**. +``` +thecawnporemag.github.io/ +โ”œโ”€โ”€ index.html # Homepage +โ”œโ”€โ”€ about.html # About page +โ”œโ”€โ”€ gallery.html # Image gallery +โ”œโ”€โ”€ archives.html # Issue archives +โ”œโ”€โ”€ contributors.html # Contributors page +โ”œโ”€โ”€ styles/ +โ”‚ โ”œโ”€โ”€ style.css # Main stylesheet +โ”‚ โ”œโ”€โ”€ gallery.css # Gallery styles +โ”‚ โ”œโ”€โ”€ archives.css # Archives styles +โ”‚ โ””โ”€โ”€ contributors.css # Contributors styles +โ”œโ”€โ”€ scripts/ +โ”‚ โ”œโ”€โ”€ script.js # Main JavaScript +โ”‚ โ”œโ”€โ”€ archives.js # Archives functionality +โ”‚ โ””โ”€โ”€ contributors.js # Contributors functionality +โ”œโ”€โ”€ gallary/ # Image assets +โ”œโ”€โ”€ docs/ # Documentation +โ”œโ”€โ”€ .htaccess # Apache configuration +โ”œโ”€โ”€ robots.txt # Search engine crawling rules +โ”œโ”€โ”€ sitemap.xml # Site structure for search engines +โ”œโ”€โ”€ LICENSE # MIT License +โ””โ”€โ”€ README.md # This file +``` -This repository hosts our published issues, exclusive content, and multimedia experiments. Weโ€™re inviting **developers, designers, and creatives** to collaborate in making this space more **accessible, interactive, and beautiful**. +## ๐ŸŽฏ Key Components ---- +### Navigation System +- Responsive hamburger menu for mobile +- Smooth scroll navigation +- Keyboard accessible +- ARIA labels for screen readers -## ๐Ÿช„ About the Magazine +### Interactive Elements +- **Theme Toggle**: Switches between light/dark modes +- **Music Player**: Background audio with volume control +- **Particle Animation**: Cursor-following visual effects +- **Scroll Progress**: Visual progress indicator -Founded by students, *The Cawnpore Magazine* is a **global platform** for teen and university creatives. -We publish: +### Content Features +- **Search & Filter**: Advanced filtering in archives and gallery +- **Lightbox Gallery**: Full-screen image viewing +- **Newsletter Signup**: Email validation and subscription +- **Quote Widget**: Dynamic inspirational quotes -- โœ๏ธ Poetry & Prose -- ๐Ÿ“– Essays & Criticism -- ๐Ÿ‘— Fashion Editorials -- ๐ŸŽจ Visual Art -- ๐ŸŽฎ Games & Multimedia +## ๐Ÿ› ๏ธ Technologies Used -With each issue, we aim to tell stories that live in the **in-betweenness** โ€” of *place, identity, memory, and imagination*. +### Frontend +- **HTML5**: Semantic markup with accessibility features +- **CSS3**: Modern styling with CSS Grid, Flexbox, and animations +- **JavaScript (ES6+)**: Interactive functionality with performance optimization -๐Ÿ“Œ **Quick Links:** -- ๐ŸŒ Website: [thecawnporemag.co.in](https://www.thecawnporemag.co.in/) -- ๐Ÿ“ธ Instagram: [@thecawnporemagazine](https://www.instagram.com/thecawnporemagazine) -- ๐Ÿ“ง Contact: **thecawnporemagofficial@gmail.com** +### Libraries & Frameworks +- **Font Awesome**: Icons and visual elements +- **Google Fonts**: Typography (Crimson Text) +- **Intersection Observer**: Performance-optimized scroll animations ---- +### Development Tools +- **Git**: Version control +- **GitHub Pages**: Hosting and deployment +- **VS Code**: Development environment -## ๐ŸŽจ Tech & Design +## ๐Ÿ“ฑ Browser Support -- **Theme Colors** โ†’ `#780000` (Primary), `#fdf0d5` (Background/Accent) -- **Built With** โ†’ HTML, CSS, JS (Static Site) -- **Goals** โ†’ Accessibility, responsiveness, aesthetics, and storytelling +- Chrome 80+ +- Firefox 75+ +- Safari 13+ +- Edge 80+ +- Mobile browsers (iOS Safari, Chrome Mobile) ---- +## ๐Ÿ”’ Security Features -## ๐Ÿ’ก How to Contribute +- Content Security Policy (CSP) headers +- XSS protection through input sanitization +- Secure external resource loading +- HTTPS enforcement (when available) -We welcome **everyone** โ€” beginners, students, and professionals! -You can help us by: +## ๐Ÿš€ Performance Optimizations -- ๐ŸŽจ Improving layout, colors, or responsiveness -- ๐Ÿ” Enhancing accessibility (ARIA labels, contrast, alt text) -- ๐Ÿ–‹๏ธ Adding issue archives and contributor pages -- ๐Ÿ’Œ Building interactive features (forms, animations, etc.) -- ๐Ÿ› ๏ธ Fixing bugs & improving performance -- โœจ Suggesting features via [Issues](../../issues) +- **Lazy Loading**: Images load as needed +- **Debounced Events**: Optimized scroll and resize handlers +- **Code Splitting**: Modular JavaScript architecture +- **Asset Optimization**: Compressed CSS and JavaScript +- **Caching**: Browser caching for static assets -๐Ÿ‘‰ For contribution guidelines, see [CONTRIBUTING.md](CONTRIBUTING.md) and [LEARN.md](LEARN.md). +## ๐Ÿ“ˆ SEO & Analytics ---- +- Comprehensive meta tags +- Open Graph integration for social sharing +- Structured data markup +- XML sitemap for search engines +- Robots.txt for crawler guidance -## ๐Ÿ”ง Contribution Steps -Follow these steps to contribute: +## ๐Ÿค Contributing -### 1๏ธโƒฃ Fork the Repository -Click the **Fork** button in the top-right corner of this repo. +We welcome contributions! Please see our [Contributing Guidelines](docs/CONTRIBUTING.md) for details. -### 2๏ธโƒฃ Clone Your Fork -```bash -git clone https://github.com/Kritika75/TheCawnporeMag.github.io.git -cd Occasio -``` +### Development Workflow -### 3๏ธโƒฃ Create a Branch -```bash -git checkout -b feature/your-feature-name -``` +1. Fork the repository +2. Create a feature branch (`git checkout -b feature/amazing-feature`) +3. Commit your changes (`git commit -m 'Add amazing feature'`) +4. Push to the branch (`git push origin feature/amazing-feature`) +5. Open a Pull Request -### 4๏ธโƒฃ Make Your Changes -Edit styles, fix bugs, or update content. +## ๐Ÿ“„ License -### 5๏ธโƒฃ Commit Your Work -```bash -git add . -git commit -m "โœจ Add: Your clear commit message" -``` - -### 6๏ธโƒฃ Push to GitHub -```bash -git push origin feature/your-feature-name -``` - -### 7๏ธโƒฃ Create a Pull Request -- Go to your fork on GitHub -- Click **Compare & pull request** -- Add a clear title and description -- Click **Create Pull Request** +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. +## ๐Ÿ™ Acknowledgments +- **Abdul Sammed**: Lead Developer & Designer +- **Kritika Singh**: Content Contributor & Designer +- **Open Source Community**: For inspiration and tools +- **Kanpur Community**: For cultural inspiration and support -### ๐Ÿงš Maintainers +## ๐Ÿ“ž Contact -- This site is lovingly maintained by: +- **Email**: thecawnporemagofficial@gmail.com +- **Instagram**: [@thecawnporemagazine](https://www.instagram.com/thecawnporemagazine/) +- **LinkedIn**: [The Cawnpore Magazine](https://www.linkedin.com/company/the-cawnpore-magazine/) +- **Twitter**: [@TheCawnporeMag](https://x.com/TheCawnporeMag) -- Kritika โ€“ Founder & Editor-in-Chief +## ๐ŸŽ‰ Future Enhancements -- Weโ€™re grateful to all our contributors who help keep this project whimsical & alive. ๐ŸŒท +- [ ] User authentication system +- [ ] Content management system (CMS) +- [ ] Multi-language support +- [ ] Progressive Web App (PWA) features +- [ ] Advanced analytics integration +- [ ] Print-ready PDF generation +- [ ] Social media integration +- [ ] Comment system for articles -### ๐Ÿ“œ License - -This project is licensed under the MIT License. -See LICENSE - for more details. - -### ๐Ÿ’Œ A Note from Us +--- -This site is a home for creativity. -Our main goal is to make it look aesthetically pleasing, interactive, and accessible โ€” while celebrating youth culture, girlhood, and imagination. +**Made with โค๏ธ by the Cawnpore Magazine Team** -Your suggestions and contributions help keep this project whimsical, meaningful, and alive. -Thank you for being here ๐ŸŒธโœจ +*"Kanpur-born, read everywhere"* ๐Ÿ›๏ธโœ๏ธ \ No newline at end of file diff --git a/about.html b/about.html index f7e8c84..bac31ee 100644 --- a/about.html +++ b/about.html @@ -19,7 +19,7 @@ - + @@ -155,7 +155,7 @@