# Skills & Projects Tracker

This is a simple web app built with Python and Flask. It lets you list the **skills** you're learning and the **projects** you've worked on. When you click on a skill, it filters the projects to show only the ones that use that skill. You can run it on your own computer or publish it online for free using a service called [Render](https://render.com).

---

## Tech Stack

- Python 3
- Flask
- Jinja2 (HTML templating)

---

## Features

- Lists your **skills** as clickable filters
- Displays your **projects**, with tech used and a "View" link
- Lets you filter projects by one or more selected skills
- Fully static data — just edit one Python file to make it your own
- Free to host, simple to edit, no databases or logins required

---

## How to Add Your Own Skills & Projects

### 1. Open `app.py`
    At the top, you'll see a dictionary named `tracker`. It has two parts:
    - `skills`: a list of strings
    - `projects`: a list of dictionaries, each describing one project

### 2. To add a skill:
    Just add the skill name to the skills list

### 3. To add a project:
    Each project needs:
    - A title
    - The technologies used (comma-separated)
    - A link to your code or live site
    - Example: 
        {
            "title": "My Portfolio",
            "tech": "HTML, CSS, JavaScript",
            "link": "https://your-portfolio.com"
        }

---

## How to Run the App

1. Clone this repository:
        git clone https://github.com/yourusername/skills-tracker.git
        cd skills-tracker

2. Uncomment this line in app.py:
        app.run(debug=True)

3. Comment the following section:
        port = int(os.environ.get('PORT', 5000))
        app.run(host='0.0.0.0', port=port)

4. (Optional) Create and activate a virtual environment:
        python -m venv venv

5. Install Flask:
        pip install Flask

6. Run the Flask app:
        python app.py

7. Open your browser and go to:
        http://127.0.0.1:5000

---

## How to Publish This App Online
    Here’s how to host your project on Render so anyone can view it online — for free!

### Step-by-Step
1. If you haven't already, fork this repo. 

2. If you haven't already pushed your changes to Github, do that as well. 
    - Be sure that the following section in app.py is commented:
        app.run(debug=True)
    
    - Be sure the following section is uncommented:
        port = int(os.environ.get('PORT', 5000))
        app.run(host='0.0.0.0', port=port)

3. Create a free Render account. Go to https://render.com and sign up using your GitHub account.

4. On Render, connect your GitHub repo:
    - Click "New" > "Web Service"
    - Authorize Render to access your GitHub repositories
    - Select your skills-tracker repo
    - Configure the service:
    - Name: skills-tracker
    - Runtime: Python
    - Build Command: (leave the default selection in there)
    - Start Command: python tracker_app/app.py
    - Environment: Python 3
    - Region: Choose one near you
    - Click "Create Web Service"

5. Render will now build your project and give you a live URL where your app will be public

### How to Update Your App Later
1. Make changes, push to Github:
        git add -A
        git commit -m "insert summary of changes here"
        git push 

2. Navigate back to the link that Render gave you - Render will automatically rebuild and redeploy your app