Kwame Portfolio Website

Kwame-Homepage

Stack

• Astro - The web framework for content-driven websites.
• JSX - Javascript framework, im still not an expert, but there are sprinkles of it in this project.
• Chakra UI - A simple, modular and accessible component library for React.
• Animate css - Simple Css Library for creating quick and seamless animations.
• MDX - Markdown for the component era, used in my blog section and posts.

🧑‍🚀 Before diving into coding the website, I created a simple design in Excalidraw to better visualize the end goal.

🚀 Project Structure

Basic structure of astro website:

/
├── public/
|   └── assets/
|          └── images
│   └── favicon.svg
|   └── K.svg
├── src/
│   ├── components/
│   │   └── astro files and jsx files
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
|       └── projects.astro
|       └── uses.astro              
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

To run it locally on your machine

Clone the repo, cd into it and then:

npm install astro
npm run dev

Here is a link if you want to learn more about Astro?

Documentation

License

MIT License.

You can create your own homepage for free without notifying me by forking this project under the following conditions:

• Add a link to Homepage Example:

<footer>
    <p>&copy; 2024 My Website. All rights reserved.</p>
    <p>This site was designed by <a href="https://www.kwameowusu.dev/ target="_blank">Example</a>.</p>
</footer>