Proper way to use links in Hugo for single paged layout?

Currently I have the following code:

<a href="#section">section</a>

How do I utilize Hugo to properly link the sections in my page?

I’m using a single paged layout where I render the content pages into my index.html page.

Although my about section and content section are partials because for some reason I couldn’t get them to render correctly as content views (so they only exist in the layouts folder but not content folder).

In the URL I want it to display /section_name

I’d dig into Content Sections in the docs. On your index page have you tried outputting something like the following:

{{ range .Site.Sections }}
    {{ . }}
{{ end }}

Yeah to better explain my project structure here is a diagram:

├───.vs
│   └───portfolio_website
│       └───v15
├───archetypes
├───content
│   ├───blogs
│   │   ├───blog-1
│   │   └───blog-2
│   ├───projects
│   │   ├───project-1
│   │   ├───project-2
│   │   ├───project-3
│   │   ├───project-4
│   │   ├───project-5
│   │   └───project-6
│   └───skills
│       ├───skill-1
│       ├───skill-2
│       ├───skill-3
│       ├───skill-4
│       ├───skill-5
│       └───skill-6
├───data
├───layouts
│   ├───blogs
│   ├───partials
│   ├───projects
│   ├───skills
│   └───_default
├───resources
│   └───_gen
│       ├───assets
│       └───images
├───static
│   ├───css
│   ├───images
│   └───js
└───themes

And this is how I currently have my code:
image

So how would I correctly link my content so that the URL shows as /section_name at the end?