A personal knowledge hub for curated tech articles and research notes
Neobrutalist design · Medium RSS integration · Fuzzy search · Responsive
This is my personal digital library — a place to organize articles, research notes, and ideas about technology topics I'm actively exploring: data center infrastructure, AI/ML, cloud architecture, and modern web development.
Articles are written and published on Medium, then automatically pulled into this site via RSS feed integration.
| Feature | How It Works |
|---|---|
| Medium RSS Integration | API route fetches and parses the Medium RSS feed, keeping content in sync automatically |
| Fuzzy Search | Fuse.js-powered search across titles, excerpts, and categories — typo-tolerant |
| Neobrutalist UI | Intentional design system: thick borders, hard shadows, high-contrast colors, hover translate effects |
| Responsive Views | SSR-safe useIsMobile hook serves separate optimized layouts for desktop and mobile |
| Smooth Animations | Framer Motion page transitions and scroll-triggered reveals |
| Skeleton Loading | Content-aware loading states that match the final layout |
| SEO Optimized | Full meta tags, Open Graph, and structured layout metadata |
| Category | Technology |
|---|---|
| Framework | Next.js 15 (App Router + Turbopack) |
| UI | React 19 |
| Styling | Tailwind CSS 4 + DaisyUI 5 |
| Animations | Framer Motion |
| Search | Fuse.js |
| Data Fetching | SWR |
| Icons | Lucide React |
| Language | TypeScript 5 |
| Deployment | Vercel |
The UI follows a strict neobrutalist aesthetic:
Colors Shadows
───────────────── ─────────────────────────────
cream: #FCEEE3 (bg) sm: 3px 3px 0px 0px black
yellow: #facc15 (accent) md: 4px 4px 0px 0px black
black: #000000 (border) lg: 6px 6px 0px 0px black
Rules
─────────────────────────────────────────────────────────────
• Borders: 2px+ solid black on all interactive elements
• Shadows: Hard-edged, no blur, no spread
• Hover: translateX(-2px) translateY(-2px) + shadow grow
• Typography: Bold, high-contrast, no subtlety
Fetches and parses articles from the configured Medium RSS feed.
{
"items": [
{
"title": "Article Title",
"link": "https://medium.com/...",
"date": "2025-01-01T00:00:00.000Z",
"categories": ["technology", "infrastructure"],
"excerpt": "Article excerpt...",
"image": "https://..."
}
]
}git clone https://github.com/Centauryyy25/Mini-Perpus-Centauryy.git
cd Mini-Perpus-Centauryy
npm install
npm run devOpen http://localhost:3000.
src/
├── app/
│ ├── api/medium/ # Medium RSS feed endpoint
│ ├── globals.css # Design system tokens
│ ├── layout.tsx # Root layout + metadata
│ ├── page.tsx # Responsive page router
│ ├── pageDesktop.tsx # Desktop layout
│ └── pageMobile.tsx # Mobile layout
├── components/
│ ├── features/ # ArticleCard, Carousel, SearchModal
│ ├── ui/ # Button, Skeleton, Animations
│ └── layout/ # Navigation, Footer
├── hooks/
│ ├── useIsMobile.ts # SSR-safe responsive detection
│ └── useMediumPosts.ts # SWR-based article fetcher
├── lib/ # Utilities
└── types/ # TypeScript definitions
- Data Center & Cloud Infrastructure
- AI/ML Systems & NVIDIA Ecosystem
- ARM Architecture & CXL Memory
- Modern Web Technologies
- Hardware Innovation
git checkout -b feature/your-feature
git commit -m "feat: add your feature"
git push origin feature/your-featureOpen a Pull Request with a clear description.
All rights reserved.
Built by Ilham Ahsan Saputra
Computer Science Student · Junior Network Engineer · Tech Writer