Foss Mec Landing Page

This repository contains the source code for the landing page of Foss Mec, built with Angular and styled with Tailwind CSS. It providing information about its activities, members, events, and blog posts.

✨ Features

• Single Page Application (SPA): Seamless navigation between sections using Angular Router.
  • /about: Information about Foss Mec.
  • /gallery: Showcases images from past events and activities.
  • /events: Lists upcoming and past events.
  • /blog: Features articles and posts from Foss Mec members.
  • A main landing page with all these components.
• Dynamic Content: Event, Gallery, and Blog sections load their content dynamically from local JSON files, making updates easy without code changes.
• Detailed Views: Clicking on an event or blog post navigates to a dedicated page with more details.
• Responsive Design: Built with Tailwind CSS for optimal viewing on all devices.

🛠️ Tech Stack

• Framework: Angular (^19.2.0)
• Styling: Tailwind CSS (^4.1.3)
• Language: TypeScript
• Package Manager: npm

Running Locally

Prerequisites:

• Node.js installed on your system.
  • Verify installation: node -v and npm -v

Installation & Setup:

1. Clone and Navigate to the repository:

   git clone https://github.com/dijith-481/foss-web.git && cd foss-web
   

2. Install dependencies:

   npm install
   

3. Run the development server:

   ng serve  # use --host 0.0.0.0 for exposing to local network
   

4. Open in browser: Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

📦 Build for Production

To create a production-ready build of the application: This compiles the application with optimizations and outputs the static files to the dist/fossmec-landing/browser directory.These files can then be deployed to any static web hosting service.currently hosted on render.com

ng build

[!WARNING] you should redirect all paths to / since routing is handled internally by angular.

🏗️ Project Structure & Data Formats

The dynamic content for sections is managed through JSON files, located within the Public directory. Images is stored in Public/[section] directory.

Blog Data (blogs.json)

Blog posts are defined in blogs.json. Clicking a blog card navigates to a detailed view.

Format:

[
  {
    "id": number, 
    "blogTitle": string,
    "subtitle": string,
    "author": string,
    "dateTime": string,
    "imageUrl": string,
    "description": string
  }
]

Events Data (events.json)

Event listings are defined in events.json. Clicking an event card navigates to a detailed view. Includes optional fields for a call-to-action button (e.g., registration).

Format:

[
  {
    "id": number,
    "eventTitle": string,
    "imageUrl": string,
    "buttonUrl": string | null,
    "buttonContent": string | null,
    "description": string
  }
]

Gallery Data (gallery.json)

Image gallery items are defined in gallery.json.

Format:

[
  {
    "id": number,
    "imageTitle": string,
    "imageUrl": string
  }
]

Core Members Data (coreteam.json)

Details about the core team members.

Format:

[
  {
    "id": number,
    "name": string
    "position": string,
    "imageUrl": string
  }
]

⚠️ Important Note on Content

Please be aware that the content (text, images, specific event/blog details) currently present in the JSON files and displayed on the page when run locally or potentially on a demo deployment might be placeholder data which have been generated by AI.

This placeholder content should be replaced with actual, accurate information pertaining to Foss Mec before final deployment.

License

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