Psyc101 is a personal blog built with the Astro framework, designed to deliver high performance, clean typography, and seamless user experience.
The project emphasizes accessibility, fast static generation, and maintainable architecture for long-term scalability.
Psyc101 serves as a digital space to explore and publish essays, reflections, and insights in psychology and human behavior.
The platform integrates modern frontend technologies to provide an optimal reading experience and smooth transitions between posts.
- Built with Astro 5 for fast, static-first delivery
- TailwindCSS integration for responsive and consistent styling
- Svelte components for dynamic and interactive UI elements
- Markdown-based content system for simple post creation
- Expressive Code support for enhanced syntax highlighting, line numbers, and collapsible code sections
- KaTeX for mathematical expressions
- Pagefind full-text search integration
- Automatic RSS feed and sitemap generation
- Swup-based transitions for SPA-like navigation without sacrificing SEO
- One-command new post generator for streamlined publishing workflow
| Layer | Technology |
|---|---|
| Framework | Astro |
| Styling | TailwindCSS + Typography Plugin |
| Interactivity | Svelte |
| Content | Markdown / MDX |
| Search | Pagefind |
| Code Rendering | Expressive Code |
| Type Checking | TypeScript |
| Linting & Formatting | Biome |
| Icons | Iconify |
- Node.js 18 or higher
- pnpm package manager (required by project setup)
pnpm installDevelopment
pnpm devStarts the local development server (default at http://localhost:4321 ).
Build
pnpm buildBuilds the project for production and generates the Pagefind search index.
Preview
pnpm previewPreviews the production build locally.
Lint and Format
pnpm lint
pnpm formatCreate a New Post
pnpm new-postRuns a script to generate a new Markdown file with pre-filled metadata
This project is licensed under the MIT License.
You are free to use, modify, and distribute this project with proper attribution.