Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tim-hub/techtim-astro-bento-portfolio
An Astro template for personal portfolio, including blog, projects, and more.
https://github.com/tim-hub/techtim-astro-bento-portfolio
astro react shadcn tailwindcss typescript
Last synced: 4 months ago
JSON representation
An Astro template for personal portfolio, including blog, projects, and more.
- Host: GitHub
- URL: https://github.com/tim-hub/techtim-astro-bento-portfolio
- Owner: tim-hub
- License: other
- Created: 2024-09-12T09:04:13.000Z (5 months ago)
- Default Branch: template
- Last Pushed: 2024-09-18T10:40:26.000Z (5 months ago)
- Last Synced: 2024-09-30T12:01:19.203Z (4 months ago)
- Topics: astro, react, shadcn, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://techtim42.com
- Size: 2.74 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TechTim's Astro Bento Portfolio
This template helps you build a portfolio using Astro, Typescript, React, Tailwind CSS, and Shadcn UI.
- [Live Demo](https://techtim42.com)
- [Github Repo](https://github.com/tim-hub/techtim-astro-bento-portfolio)
## Technologies Used
This project utilizes the following technologies:
- **Astro**: A modern framework for building fast and efficient websites.
- **Tailwind CSS**: A utility-first CSS framework for rapid and responsive design.
- **Shadcn UI**: A collection of accessible and easy-to-use UI components.
- **React**: For interactive components and advanced functionality.
- **TypeScript**: For static type checking and improved developer experience.
## Requirements
Before starting, make sure you have the following requirements installed:
- Node.js (version 18 or higher)
- pnpm (version 8 or higher)
## Installation
To install and run the project locally, follow these steps:
1. Clone this repository:
```bash
git clone https://github.com/tim-hub/techtim-astro-bento-portfolio
```
2. Navigate to the project directory:
```bash
cd techtim42
```
3. Install the dependencies:
```bash
pnpm install
```
4. Start the development server:
```bash
pnpm run dev
```
5. Open your browser and visit `http://localhost:4312` to see your portfolio in action.
6. Config your site
1. Edit `src/content/profileData.ts` to add your profile data
2. Edit `astro.config.mjs` to change the site information
## Important Considerations
- **Accessibility**: Ensure your portfolio is accessible to all users, including those with disabilities.
- **SEO**: Optimize your portfolio for search engines by adding meta tags and relevant content.
- **Performance**: Use modern web development practices to ensure optimal performance, such as lazy loading images and minimizing CSS/JS.
- **Responsive Design**: Make sure your portfolio looks good on devices of all sizes, from mobile to desktop screens.
## Contributions
Contributions are welcome! If you have ideas or improvements, please open an issue or submit a pull request.
## License
- This source codes are licensed under the [MIT License](LICENSE).
- The content (`src/content/`) of the portfolio is licensed under the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0/).
- The images (`public/`) used in the project are for template demonstration purposes only and should not be reused without permission.
## Inspiration
This project was inspired by several outstanding portfolios. Here are some that served as references:
- [Bento Like Portfolio](https://github.com/Ladvace/astro-bento-portfolio)
- [Minimal and bento Portfolio ](https://github.com/bue221/astro-portfolio)
### Differences / Improvements
- Centralised data management inside one folder
- Use Astro recommended [Content Collection](https://docs.astro.build/en/guides/content-collections/) to manage data
- `src/content` folder for blog posts, project data and profile data
- `src/content/profileData.ts` for general profile data
- Tags system
- Simplified Dark/Light mode toggle