Dev Portfolio

<div align="center">

dev.portfolio

A polished, full-stack developer portfolio built for showcasing work, credentials, and thoughtful engineering.

About

`dev.portfolio` is Saquib Hazari’s personal full-stack portfolio. It combines a refined dark/light experience with real project management, secure admin controls, public case studies, authenticated comments, certificate previews, and a contact workflow.

It is not a static mockup: project content is persisted in Neon PostgreSQL, files live in Cloudflare R2, authentication is handled by Clerk, and contact messages are delivered through Resend.

Highlights

• Responsive, animated portfolio experience with light and dark themes.
• Featured project cards and dedicated case-study pages.
• Protected Admin Workspace for creating, editing, and deleting projects.
• Cloudflare R2 uploads for thumbnails, galleries, resumes, and certifications.
• Qualification gallery supporting JPG, JPEG, PNG, PDF, DOC, and DOCX files.
• Secure certification removal from both Neon and R2.
• Clerk authentication, profile management, and signed-in comments.
• Neon + Drizzle persistence with server-side authorization and validation.
• Resend-powered contact form with branded email notifications.
• SEO-ready metadata, Open Graph images, JSON-LD, sitemap, and robots rules.

Tech stack

| Area | Tools | | -------------- | ----------------------------------------------------- | | Frontend | React 19, TypeScript, TanStack Start, TanStack Router | | Design | Tailwind CSS, shadcn/ui patterns, Lucide icons | | Motion | GSAP, Three.js | | Authentication | Clerk | | Database | Neon PostgreSQL, Drizzle ORM | | File storage | Cloudflare R2 | | Email | Resend | | Testing | Vitest, integration tests with Neon | | Deployment | Cloudflare Workers, Wrangler |

1. Install dependencies

```bash npm install ```

2. Configure environment variables

Copy the template and add your own credentials:

```bash cp .env.example .env.local ```

Required services:

• Clerk: `VITE_CLERK_PUBLISHABLE_KEY`, `CLERK_SECRET_KEY`, `ADMIN_CLERK_USER_ID`
• Neon: `DATABASE_URL`
• Resend: `RESEND_API_KEY`, `CONTACT_TO_EMAIL`, `CONTACT_FROM_EMAIL`
• Public metadata: `VITE_SITE_URL`, `PUBLIC_ASSETS_URL`

3. Run database migrations

```bash npm run db:migrate ```

4. Start the development server

```bash npm run dev ```

Open [http://localhost:3000](http://localhost:3000).

Quality checks

```bash npm run check npx tsc --noEmit npm test npm run build ```

The test suite includes unit coverage for validation and SEO helpers plus Neon integration coverage for project CRUD, profile data, contacts, comments, and likes.

Deploy to Cloudflare Workers

This project is deployed with Cloudflare Workers and Wrangler.

```bash npx wrangler login npm run db:migrate npm run deploy ```

Before deploying, configure production secrets with Wrangler:

```bash npx wrangler secret put DATABASE_URL npx wrangler secret put CLERK_SECRET_KEY npx wrangler secret put ADMIN_CLERK_USER_ID npx wrangler secret put RESEND_API_KEY npx wrangler secret put CONTACT_TO_EMAIL npx wrangler secret put CONTACT_FROM_EMAIL ```

Set `VITE_SITE_URL` to the final HTTPS Worker URL before deploying so canonical URLs, sitemap entries, and social previews point to the live site.

Project structure

```text src/ ├── routes/ # Homepage, project case studies, and admin workspace ├── lib/ # Server functions, validation, auth, SEO, and storage logic ├── db/ # Drizzle schema, migrations, and integration tests ├── components/ # Reusable visual and interactive components └── integrations/ # Clerk integration ```

Author

**Saquib Hazari** — Full-Stack Developer

If you like this project, consider giving the repository a star.