https://github.com/dijith-481/foss-web
source code for the landing page of Foss Mec, built with Angular and styled with Tailwind CSS.
https://github.com/dijith-481/foss-web
angular landing-page tailwindcss typescript
Last synced: about 2 months ago
JSON representation
source code for the landing page of Foss Mec, built with Angular and styled with Tailwind CSS.
- Host: GitHub
- URL: https://github.com/dijith-481/foss-web
- Owner: dijith-481
- License: mit
- Created: 2025-04-09T19:54:05.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-10T17:50:31.000Z (about 1 year ago)
- Last Synced: 2025-04-11T00:18:11.556Z (about 1 year ago)
- Topics: angular, landing-page, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://foss-mec.onrender.com/
- Size: 10.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Foss Mec Landing Page
[](https://angular.io/)
[](https://tailwindcss.com/)
[](https://www.typescriptlang.org/)
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](https://angular.io/) (^19.2.0)
* **Styling:** [Tailwind CSS](https://tailwindcss.com/) (^4.1.3)
* **Language:** [TypeScript](https://www.typescriptlang.org/)
* **Package Manager:** [npm](https://www.npmjs.com/)
---
## Running Locally
**Prerequisites:**
* [Node.js](https://nodejs.org/) installed on your system.
* Verify installation: `node -v` and `npm -v`
**Installation & Setup:**
1. **Clone and Navigate to the repository:**
```bash
git clone https://github.com/dijith-481/foss-web.git && cd foss-web
```
2. **Install dependencies:**
```bash
npm install
```
3. **Run the development server:**
```bash
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](https://render.com/)
```bash
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:**
```json
[
{
"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:**
```json
[
{
"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:**
```json
[
{
"id": number,
"imageTitle": string,
"imageUrl": string
}
]
```
### Core Members Data (`coreteam.json`)
Details about the core team members.
**Format:**
```json
[
{
"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](LICENSE) file for details.