A compact, professional portfolio built with Next.js and Tailwind CSS. This repository contains the source for a statically exported portfolio site showcasing projects, case studies, certifications, and contact flows.
- A single-page / multi-route portfolio using the Next.js App Router.
- Projects and case studies are stored in
app/projects.json(single source of truth). - External links are gated through a confirmation modal (
ExternalLinkModal) for safety.
- Static export (pre-rendered pages) for fast delivery.
- Centralized project data in
app/projects.json. - Small, focused UI built with Tailwind CSS and modern React patterns.
- CI: GitHub Actions workflow to build and deploy (uses
npm run deploy).
| Layer | Tool |
|---|---|
| Framework | Next.js (App Router) |
| Language | JavaScript (+ project-level TypeScript support) |
| Styling | Tailwind CSS v4 |
| Hosting / Deploy | Firebase Hosting (via firebase-tools) |
| CI | GitHub Actions |
app/— Next.js app routes and componentsapp/projects.json— projects & case studies data (SSOT)app/components/ExternalLinkModal.js— modal for external link confirmationspublic/— static assets and images.github/workflows/deploy.yml— CI workflow (build + deploy)
Requirements: Node.js (recommended 18+), npm.
- Install dependencies
npm ci- Run the dev server
npm run dev- Build for production (local verification)
npm run build- Preview the production build
npm run startNotes:
npm run deployruns the build and thenfirebase deploy(the workflow requiresFIREBASE_TOKENsecret in GitHub to deploy).- If you're using the GitHub Actions deploy workflow, ensure the repository secret
FIREBASE_TOKENis set (Settings → Secrets → Actions).
All project and case-study data live in app/projects.json. The app reads this file at build time and renders pages from it. This keeps content edits simple — update the JSON and redeploy.
Mermaid diagram (data flow):
flowchart LR
A[app/projects.json] --> B[ProjectsSection]
A --> C[Case Studies Page]
B --> D[Project Card Components]
D --> E[ExternalLinkModal]
C --> E
- Workflow:
.github/workflows/deploy.yml(runs on push tomainby default). - The workflow installs dependencies and installs
firebase-toolsto ensurefirebaseCLI is available in the runner. - Add
FIREBASE_TOKENas a secret for the repo to allowfirebase deployto succeed.
- All external links are opened through
ExternalLinkModalto prevent unexpected navigation and to provide a confirmation step. - External links open in a new tab with
rel="noopener noreferrer"for safety.
- Small edits: update
app/projects.jsonand push tomain. - Suggested follow-ups:
- Add a few frontend tests (Jest/Playwright) for critical pages.
- Add screenshots or a small demo GIF in this README.
- Add a
CONTRIBUTING.mdand a license file if you want others to contribute.
For questions or updates, contact the maintainer:
- Frank Mathew Sajan — (profile in repo)
This README is intentionally concise. If you want a longer version with screenshots, badges (CI, Netlify/Firebase), or an architecture appendix, tell me what to include and I will add it.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.