Gatsby site not generating slugs as expected

I was following the Gatsby tutorial, but I'm not seeing what they are seeing when it comes to generating slugs for mdx files in a subdirectory of src/pages. For example when I have a file like src/pages/projects/devmarks/index.md, according to the tutorial I would expect the slug to be devmarks and thus be able to reach the page at localhost:8000/projects/devmarks. However, the slug ends up being projects/devmarks and I can only access the fully rendered page at localhost:8000/projects/projects/devmarks. Interestingly, if I go to localhost:8000/projects/devmarks, I do get the body of the mdx file rendered, but nothing else. I know I could probably fix this with a createPages function in a gatsby-node.js file or moving my {mdx.slug}.tsx file up one level, but I don't understand why my code isn't working like the tutorial.

Full Source Code

gatsby-config.ts

import type { GatsbyConfig } from "gatsby";

const config: GatsbyConfig = {
    siteMetadata: {
        title: `Christopher Leggett's Portfolio and Blog`,
        description: `The Portfolio and Blog for the aspiring software developer Christopher Leggett`,
        siteUrl: `https://chrisleggett.me`,
        twitterUsername: `@leggettc18`
    },
    plugins: ["gatsby-plugin-image", "gatsby-plugin-react-helmet", "gatsby-plugin-postcss", {
        resolve: 'gatsby-plugin-manifest',
        options: {
            "icon": "src/images/icon.png"
        }
    }, "gatsby-plugin-mdx", "gatsby-plugin-sharp", "gatsby-transformer-sharp", {
            resolve: 'gatsby-source-filesystem',
            options: {
                "name": "images",
                "path": "./src/images/"
            },
            __key: "images"
        }, {
            resolve: 'gatsby-source-filesystem',
            options: {
                "name": "pages",
                "path": "./src/pages/"
            },
            __key: "pages"
        }]
};

export default config;

folder structure

- src
  - images
  - components
    - layout.tsx
  - css
    - index.css //contains tailwind stuff
  - pages
    - index.tsx
    - about.tsx
    - 404.tsx
    - projects
      - {mdx.slug}.tsx
      - devmarks
        - index.mdx

The tutorial had a config in their gatsby-config.js that point the source-filesystem plugin at a src/blog directory, but unless I missed something it wasn't updated when they moved all the content to src/pages/blog. I had read through the tutorial before attempting to build the site so I skipped straight to having my portfolio projects in src/pages/projects. Could that have something to do with why my slugs generated differently?

Your gatsby-source-filesystem wasn't pointing to a valid path. Just use:

{
   "resolve": "gatsby-source-filesystem",
   "options": {
      "name": "portfolio",
      "path": `${__dirname}/portfolio/`
   }
}

The key part is path: `${__dirname}/portfolio/` since Gatsby's filesystem needs to know where the content source folder is located.