Table of Contents

Project Structure

.
├── .vscode
├── node_modules
├── public/
│   ├── fonts
│   ├── images
│   └── svg
├── src/
│   ├── components/
│   │   └── ...
│   ├── layouts/
│   │   └── ...
│   ├── pages/
│   │   └── ...
│   ├── styles/
│   │   ├── global.css
│   │   ├── palette.png
│   │   └── style-rules.md
│   └── env.d.ts
├── .gitignore
├── astro.config.mjs
├── package.json
├── pnpm-lock.yaml
├── README.md
├── svelte.config.js
└── tsconfig.json

A little reference for how everything will be organize in a typical Astro project. You can of course have a different setup, but this is a good starting point:

1. src/*: All the source code lives here (components, pages, styles, etc.).
2. public/*: Static non-code, unprocessed asses like images, fonts, etc.
3. package.json: Project manifest, very standard.
4. astro.config.mjs: Astro configuration file, use to configure Astro.
5. tsconfig.json: TypeScript configuration file, use to configure TypeScript.

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name. Which is very neat, honestly, makes it very easy to reason about your routes.

There's nothing special about src/components/, it's just a place to put your components, Im going to be organizing them by feature and then by relational components.

Any static assets, like images, fonts, yada yada be placed in the public/* directory.

Run Commands

If you want to run the application locally, you can use the following set of commands for reference:

Getting Started

After you are done with copying the github repository, you can start by installing the dependencies using the following command:

npm install

or

npm i

After the dependencies are successfully installed, you can start the development server using the following command:

npm run dev

or

npm start

And you should be good to go from there, you can start using this site as a reference for your own portfolio site or take some of the components in this site and use them for other projects you might have in mind.

Contributing

This site is a personal project, so it would not be considered for contributions as the nature of the project is to be a personal portfolio site. However, if you have any suggestions or ideas for the site, feel free to open an issue and I will be happy to take a look at it.

Checkout the Contributing Guidelines for more information.

License

This project is licensed under the MIT License - see the LICENSE file for details.

TODOs

• Add a 404.astro page
• Add nav sections to Layout.astro
• Create Hero, Footer, Header, and Block Components
  • Hero Section Must Have
    • Hero Title
    • Hero ThreeJS Animation or Effect
    • Hero Subtitle
    • Here CTA Button
• Block Section Must Have
  • Block Title
  • Block Subtitle (Optional)
  • Cards (Optional)
  • Block CTA Button (Optional)
  • Block ThreeJs Animation or Effect (Optional)
• Configure ThreeJS with astro add
• Configure Tailwind CSS with astro add (Optional)
• Configure TypeScript with astro add (Optional)