[
    {
        "id": "busy-bat",
        "description": "sveltekit",
        "img": {
            "src": "https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/busybatleopard.webp",
            "srcset": "https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/busybatleopard-400w.webp 400w, https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/busybatleopard-800w.webp 800w, https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/busybatleopard.webp 470w",
            "sizes": "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 403px"
        },
        "index": 0,
        "summary": "A custom website for a local business that sells unique handmade items. The site features a product page, a contact form, and I even created the brand. To reach a wider audience, I made the site responsive for mobile devices.",
        "title": "busy little bat sewing",
        "url": "https://busybat.vercel.app"
    },
    {
        "id": "pixipalette",
        "description": "sveltekit",
        "img": {
            "src": "https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/pixipalette.webp",
            "srcset": "https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/pixipalette-400w.webp 400w, https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/pixipalette-800w.webp 800w, https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/pixipalette.webp 470w",
            "sizes": "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 403px"
        },
        "index": 1,
        "summary": "A color palette generator that tells users the hex, rgb, and hsl colors of images.. so if you want to know the colors an image is using, use this tool! I tried making the app as user-friendly as possible.",
        "title": "pixipalette",
        "url": "https://pixipalette.vercel.app"
    },
    {
        "id": "grocery-list",
        "description": "react",
        "img": {
            "src": "https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/groceries.webp",
            "srcset": "https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/groceries-400w.webp 400w, https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/groceries-800w.webp 800w, https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/groceries.webp 470w",
            "sizes": "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 403px"
        },
        "index": 2,
        "summary": "A grocery list app that allows users to add, remove, and edit items. I used react to build this and it features a simple and intuitive interface.",
        "title": "grocery list",
        "url": "https://legit-shopping-list.vercel.app/"
    },
    {
        "id": "go-chat",
        "description": "go",
        "img": {
            "src": "https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/chat.webp"
        },
        "index": 3,
        "summary": "This is a chat app I built with Go and with websockets. I added a manifest.json and turned it into a progressive web app.",
        "title": "chatski",
        "url": "https://chatski.duckdns.org"
    },
    {
        "id": "passcraft",
        "description": "sveltekit",
        "img": {
            "src": "https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/passcraft.webp",
            "srcset": "https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/passcraft-400w.webp 400w, https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/passcraft-800w.webp 800w, https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/passcraft.webp 470w",
            "sizes": "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 403px"
        },
        "index": 4,
        "summary": "If you're like me and have a hard time creating passwords, PassCraft is for you! It generates random passwords based on user input.",
        "title": "passcraft",
        "url": "https://make-a-password.vercel.app/"
    },
    {
        "id": "ecommerce",
        "description": "vanilla html/css/js",
        "img": {
            "src": "https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/ecommerce.webp",
            "srcset": "https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/ecommerce-400w.webp 400w, https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/ecommerce-800w.webp 800w, https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/ecommerce.webp 667w",
            "sizes": "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 455px"
        },
        "index": 5,
        "summary": "My version of an e-commerce product page that features a product image, title, price, and description. I used the fake store API to populate the product data.",
        "title": "e-commerce product page",
        "url": "https://fake-store-products.vercel.app"
    }
]