Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lyrklif/pet-projects-timeline

Pet Projects Timeline is a personal project to showcase and track the progress of various pet projects. The app presents a timeline of projects with their descriptions, repositories, and key details, allowing users to filter based on topics
https://github.com/lyrklif/pet-projects-timeline

frontend pet-project pet-projects portfolio portfolio-website svelte svelte-ts sveltekit timeline typescript

Last synced: 2 days ago
JSON representation

Pet Projects Timeline is a personal project to showcase and track the progress of various pet projects. The app presents a timeline of projects with their descriptions, repositories, and key details, allowing users to filter based on topics

Awesome Lists containing this project

README

        

# Pet Projects Timeline

**Pet Projects Timeline** is a web application that helps you track and showcase your pet projects over time. It displays a timeline of your personal projects, allowing you to filter and view details of each project. The app is built with SvelteKit and hosted on GitHub Pages.

![Project Screenshot](https://github.com/user-attachments/assets/6a5a3a67-828a-419c-9565-663ec4225545)
![Project Screenshot](https://github.com/user-attachments/assets/f3063f52-e58e-45b1-b5bd-0ece55092e24)

## Features

- **Timeline of Projects:** View a chronological list of your pet projects.
- **Filters:** Filter projects by topic.
- **GitHub Integration:** Projects are fetched directly from GitHub repositories.
- **Responsive Design:** Works well on both desktop and mobile devices.
- **Static Hosting:** Deployed using GitHub Pages.

## Demo

Check out the live demo: [Pet Projects Timeline](https://lyrklif.github.io/pet-projects-timeline/)

## Installation

To run the project locally, follow these steps:

1. Clone the repository:
```bash
git clone https://github.com/lyrklif/pet-projects-timeline.git
```

2. Install dependencies:

```bash
npm install
```

3. Create a `.env` file in the root directory based on the `.env.example` file:

```bash
cp .env.example .env
```

Fill in the following values in the `.env` file:

```bash
VITE_USER_NAME=
VITE_GITHUB_LINK=
VITE_API=
VITE_EXCLUDED_REPOSITORIES=
```

4. Run the development server:

```bash
npm run dev
```

5. Open your browser and go to `http://localhost:5173`.

## Deployment

This project is set up for deployment to GitHub Pages using the `@sveltejs/adapter-static`. To deploy it, simply run:

```bash
npm run deploy
```

Make sure that the base path is set correctly in the `svelte.config.js` file:

```js
paths: {
base: ''
}
```

And `static/404.html`

```js
window.location.href = '//#' + pathname;
```

## Tech Stack

- **Framework:** SvelteKit
- **Hosting:** GitHub Pages
- **CSS Framework:** Flowbite-Svelte
- **Data Fetching:** Svelte Query
- **Markdown Parsing:** Marked.js

## Environment Variables

The project requires the following environment variables to be set in a `.env` file:

- `VITE_USER_NAME` - Your GitHub username.
- `VITE_GITHUB_LINK` - The link to your GitHub profile.
- `VITE_API` - The GitHub API URL, e.g., `https://api.github.com`.
- `VITE_EXCLUDED_REPOSITORIES` - A comma-separated string of repository names that should be excluded from the timeline (e.g., `repo1,repo2,repo3`).

An example of these variables can be found in the `.env.example` file.

## Contributions

Contributions are welcome! If you have suggestions for improving the project or want to report an issue, feel free to open an issue or submit a pull request.