MA NI — Developer Portfolio

A modern, responsive single-page portfolio website for David Mani Ibrahim showcasing my work as a Web & Mobile Developer / Tech Enthusiast. Built with React, TypeScript, Tailwind CSS, and a Convex backend that powers the contact form.

---

Features

• Animated hero with a dynamic typing effect that cycles through Web Developer → Mobile Developer → Tech Enthusiast.
• Sticky, scroll-aware navigation with smooth-scrolling links and a mobile hamburger menu.
• About section with bio, profile image, and three pillar cards (Clean Code, Creative Design, Performance).
• Skills section with scroll-triggered, animated progress bars and a tools/platforms grid.
• Projects showcase featuring a carousel for highlighted projects and a responsive tile grid for the rest.
• Contact form whose submissions persist to a Convex database (searchable by email, indexed by creation time).
• Fully responsive, mobile-first design with gradient accents, glassmorphism touches, and subtle background animations.
• Lightning-fast Vite build with TypeScript strict mode and ESLint enforced.

---

Tech Stack

Frontend

• React 18
• TypeScript
• Vite 5
• Tailwind CSS 3
• Lucide React — icons

Backend

• Convex — serverless database & functions for the contact-form mutation

Tooling

• ESLint 9 + typescript-eslint + eslint-plugin-react-hooks + eslint-plugin-react-refresh
• PostCSS + Autoprefixer

---

Project Structure

webDev-portfolio/
├── convex/                  # Convex backend
│   ├── messages.ts          # sendMessage mutation (writes to the messages table)
│   └── schema.ts            # messages table definition + indexes
├── public/                  # Static assets (profile image, project screenshots, resume)
├── src/
│   ├── components/
│   │   ├── Header.tsx       # Sticky nav + mobile menu
│   │   ├── Hero.tsx         # Landing section with typing animation
│   │   ├── About.tsx        # Bio + feature cards
│   │   ├── Skills.tsx       # Progress bars + tools grid
│   │   ├── Projects.tsx     # Featured carousel + project grid
│   │   ├── Contact.tsx      # Form wired to Convex mutation
│   │   └── Footer.tsx
│   ├── App.tsx              # Section composition
│   ├── main.tsx             # ConvexProvider + React entry point
│   └── index.css            # Tailwind base + global styles
├── index.html
├── tailwind.config.js
├── vite.config.ts
└── tsconfig*.json

---

Getting Started

Prerequisites

• Node.js 18+ and npm (or pnpm / yarn).
• A free Convex account.

1. Install dependencies

npm install

2. Configure environment variables

Create a .env.local at the project root:

VITE_CONVEX_URL=https://your-deployment.convex.cloud

3. Set up the Convex backend

npx convex dev

Follow the prompts to log in and link/create a project, then copy the generated VITE_CONVEX_URL into .env.local.

This deploys:

• the messages table (name, email, subject, message, createdAt) with a search index on email and a regular index on createdAt,
• the sendMessage mutation used by the contact form.

4. Run the dev server

npm run dev

Open http://localhost:5173 to view the portfolio.

---

Available Scripts

Script	Description
npm run dev	Start the Vite dev server with HMR.
npm run build	Type-check and produce a production build.
npm run preview	Preview the production build locally.
npm run lint	Run ESLint across the project.

---

Deployment

The app is a static SPA once built (npm run build → dist/), so any static host works:

1. Run npx convex deploy to push your backend to production and grab the production deployment URL.
2. Update VITE_CONVEX_URL in your hosting provider's environment to that production URL.
3. Deploy dist/ to Vercel, Netlify, Render, GitHub Pages, etc.

---

Contact

Built and maintained by David Mani Ibrahim.

• Email — ibrahimmanidavid@gmail.com
• Phone — +234 803 0488 805
• Location — Adamawa State, Nigeria
• GitHub — @DavidManiIbrahim
• LinkedIn — linkedin.com

---

screenshot