epasingha.me

astro tailwindcss typescript react vercel
epasingha.me

Table of Contents

This is a list of all the sections in this post. Click on any of them to jump to that section.

epasingha.me

👋 Hi, I’m Tharindu Epasingha, a Full Stack Developer from Sri Lanka 🇱🇰. Passionate about modern web development with React, Node.js, TypeScript, and cloud technologies.

🚀 Project Overview

epasingha.me is my personal portfolio website, built with Astro.js and styled using Tailwind CSS v4. It serves as a hub for my projects, blog posts about web development, DevOps, and software engineering best practices.

🌟 Features

✅ Blazing fast - Optimized for performance and SEO with Astro’s static site generation.
🎨 Modern & responsive - Tailwind CSS v4 for easy customization and responsive design.
🔒 Secure & reliable - Follows best security practices and modern web standards.
📱 Mobile-friendly - Fully responsive across all devices.
📝 Blog support - MDX-powered blog for sharing tech tutorials and insights.
🌐 Multi-page - Projects showcase, blog listing, and individual post pages.
🎯 SEO optimized - Proper meta tags, structured data, and Open Graph support.

🛠️ Tech Stack

  • Astro.js - Static site generator for optimal performance.
  • React.js - Used for interactive components.
  • Tailwind CSS v4 - Utility-first CSS framework.
  • TypeScript - Typed JavaScript for better developer experience.
  • MDX - Markdown with JSX for blog posts.
  • Vercel - Deployment and hosting platform.
  • astro-icon - Icon system with multiple icon sets.

📚 Setup & Installation

Prerequisites

Ensure you have the following installed:

Installation Steps

  1. Clone the repository:

    git clone https://github.com/TharinduEpaz/epazingha-me-v3.git

  2. Navigate to the project directory:

    cd epazingha-me-v3

  3. Install dependencies:

    npm install

  4. Run the development server:

    npm run dev

🎯 Usage

Development Mode

Run the local development server:

npm run dev

The site will be available at http://localhost:3010

Production Build

Generate a production-ready build:

npm run build

Preview Production Build

Preview the production build locally:

npm run preview

📝 Content Management

Blog Posts

Blog posts are written in MDX format and located in src/content/blog/. Each post includes:

  • Frontmatter with title, description, date, tags, and authors
  • MDX content with support for React components
  • Automatic generation of blog listing and individual post pages

Projects

Projects are defined in src/content/projects/ with frontmatter including name, description, tags, image, and links.

🌐 Deployment

This site is deployed on CloudFlare with automatic deployments from the main branch. The site is available at https://www.epasingha.me.

📄 License

This project is licensed under the MIT License.

💬 Contact

📧 Email: epazingha@gmail.com

🌐 Connect with Me

⭐ Show Your Support

If you like this project, give it a ⭐ on GitHub!

🙏 Acknowledgments

  • Astro.js - For the amazing static site framework
  • Tailwind CSS - For the utility-first CSS framework
  • Vercel - For seamless deployment and hosting