RMSN-WEB-MIN

A high-performance, premium personal portfolio and digital catalog built with Astro, TypeScript, and Tailwind CSS v4. See the homepage.

Features

• Modern Split-Pane UI: Fixed-height “App Window” layout with internal scrolling.
• Responsive Mobile Experience: Custom-built, touch-draggable bottom sheet for viewing projects on mobile.
• Advanced Markdown/MDX:
  • Fully styled prose with Tailwind v4.
  • KaTeX support for complex mathematical equations.
  • Shiki syntax highlighting with a custom “Copy Code” button logic.
• Glassmorphic UI: High-end hover effects with background blurs and animated overlays.
• SEO Optimized: Automated sitemap generation and comprehensive Open Graph (OG) meta tags.
• Ultra-wide Support: Content is constrained to a maximum width to prevent layout breaking on high-res monitors.

Tech Stack

• Framework: Astro 5+
• Styling: Tailwind CSS v4
• Language: TypeScript
• Content: MDX & Astro Content Collections
• Math: Remark-Math & Rehype-Katex
• Icons: Lucide & Custom SVGs

Project Structure

src/
├── components/         # Reusable UI (WorkCard, SEO, MarkdownWrapper)
├── content/            # MDX files for projects and intelligence models
├── layouts/            # BaseLayout (Global) & ProseLayout (Markdown)
├── pages/              # Routing (Index, Privacy, etc.)
└── styles/             # Global CSS with Tailwind v4 imports

Getting Started

Clone the repository:

git clone https://github.com/rafifmsn/rmsn-web-min.git
cd rmsn-web

Install dependencies:

npm install

Start the development server:

npm run dev

Build for production:

npm run build

Configuration

To update the site for your own domain, modify the site property in astro.config.mjs:

export default defineConfig({
  site: 'https://rafifmsn.com',
  // ...
});