This is my personal portfolio site, built with Next.js 15, styled with Tailwind CSS and shadcn/ui, and enhanced with animations via Framer Motion. It features blog content powered by Wisp CMS, a contact form integrated with Formspree, and modern developer tooling throughout.
- Framework: Next.js 15 (React 18, App Router)
- Styling: Tailwind CSS, shadcn/ui, SCSS modules
- Animations: Framer Motion
- CMS: Wisp via
@wisp-cms/client - Forms: Formspree with React Hook Form + Zod validation
- Icons: Lucide React
- Utilities:
clsx,class-variance-authority,tailwind-merge,date-fns,sanitize-html - Analytics: Vercel Analytics
- Portfolio Showcase – Highlight recent projects with case studies.
- Blog – Powered by Wisp CMS, with filtering and search support.
- Contact Form – Built with Formspree + React Hook Form.
- Responsive UI – Designed with Tailwind and Radix primitives for accessibility.
- Animations – Subtle motion effects via Framer Motion.
- SEO & RSS – Auto-generated RSS feed, metadata, and schema.org setup.
- Node.js 18+
- pnpm / npm / yarn (your choice)
Clone the repo and install dependencies:
git clone https://github.com/YOUR-USERNAME/sarabaqladev.git
cd sarabaqladev
npm installTo fetch blog posts from Wisp, you’ll need a Wisp account. Once you’ve created a blog, get your Blog ID from the Wisp dashboard and add it to a .env.local file:
NEXT_PUBLIC_BLOG_ID=your-wisp-blog-id
Run the dev server
npm run dev
MIT License © 2025 Sara Baqla