Back to projects
Dec 2023
3 min read

Personal Online Portfolio Website

🌐 Dynamic portfolio showcasing projects, skills and expertise, powered by Astro, Tailwind, shadcn/ui, TypeScript, MDX, RSS, and React for seamless content management.

coverImage


☁️ Deploy your own


✨ Features

  • Interactive Portfolio β€” Showcase your work, projects, and professional accomplishments in an engaging way.
  • Responsive Design β€” Optimized for all devices, from mobile to desktop.
  • Dark/Light Mode β€” Seamless theme switching with user preference persistence.
  • Search Functionality β€” Quickly find projects and work experiences with a built-in search bar.
  • Content Collections β€” Easily manage and update projects and work experiences using Markdown files.
  • Fast Performance β€” Built with Astro for lightning-fast static site generation.
  • Accessible UI β€” Components from Shadcn UI ensure a11y compliance and great UX.
  • Open Source β€” MIT licensed; customize and deploy your own version freely.

🧱 Tech Stack

  • Astro: Modern static site generator for building fast, content-focused websites.
  • Tailwind CSS: Utility-first CSS framework for rapid UI development.
  • Shadcn UI: Re-usable components built using Radix UI and Tailwind CSS.
  • TypeScript: Strongly typed programming language that builds on JavaScript.
  • Biome: Fast linter, formatter, and more for JavaScript, TypeScript, and JSON.
  • Content Collections: Astro’s built-in content management system for type-safe Markdown and MDX.

⚑ Getting Started

Clone the repo, install deps, and boot the dev server:

git clone https://github.com/KurutoDenzeru/astro-portfolio.git
cd astro-portfolio
bun install
bun run dev

Open http://localhost:4321 to view the app.


πŸ“¦ Build for Production

bun run build
bun start

πŸ—ΊοΈ Roadmap

A few features I plan to implement

  • πŸ† Honors and Awards page
  • πŸ” Command component feature
  • ⬜ Article Pages - Share on social media

πŸ—‚οΈ Configuration

The editor is componentized under src/components. Key areas to customize are:

src/                        # Source directory for the Astro project
  layouts/                  # Astro layout components for structuring pages
  pages/                    # Page routes and endpoints
    index.astro             # Homepage
    projects/               # Projects listing and individual project pages
    work/                   # Work experiences listing
  content/                  # Content collections for dynamic content
    config.ts               # Content collection configuration
    projects/               # Markdown files for projects
    work/                   # Markdown files for work experiences
public/                     # Static assets served directly
  icons/                    # Favicon and app icons
  js/                       # Client-side JavaScript files
    theme.js                # Theme switching logic
    drawer.js               # Mobile drawer functionality
    animate.js              # Animation scripts

🀝🏻 Contributing

Contributions are always welcome, whether you’re fixing bugs, improving docs, or shipping new features that make the project better for everyone.

Check out Contributing.md to learn how to get started and follow the recommended workflow.


βš–οΈ License

This project is released under the MIT License, giving you the freedom to use, modify, and distribute the code with minimal restrictions.

For the full legal text, see the MIT file.