Derfini C T — Portfolio

The existing React + Tailwind portfolio prepared for GitHub Pages at https://derfini-ct.github.io/. This checkout preserves the history of Derfini-CT/Derfini-CT.github.io. The replacement source was prepared on codex/github-pages-portfolio, starting with commit ee65b3c. The navy, off-white, and soft-blue palette is shared by the public site and admin panel. Compact project cards open full descriptions and full-size images; academic values and About text stay readable without counting or dimming effects.

Publish

Follow GITHUB_PAGES_DEPLOYMENT.md to publish the prepared source while preserving repository history. The included .github/workflows/deploy-pages.yml uses Node.js 24.x, installs with npm ci, builds with npm run build, and publishes the generated out/ directory. Use repository Settings → Pages → Source → GitHub Actions.

Both public Supabase values are configured in ignored .env.local and repository Settings → Secrets and variables → Actions → Variables. Keep these names when configuring another checkout or updating the connection:

NEXT_PUBLIC_SUPABASE_URL=https://YOUR-PROJECT-REF.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR-PROJECT-PUBLISHABLE-OR-ANON-KEY

These values are embedded in the exported browser files. Changes require another build/deployment. Never use a service-role/secret key or an admin password.

Run locally

Use Node.js 24.x with its bundled npm. From the folder containing package.json:

npm ci
Copy-Item .env.example .env.local

Edit .env.local with the same two values, then run:

npm run dev

Open http://localhost:3000. Verify the static export with:

npm run build

Run npm start to serve out/ locally at http://localhost:3000 and inspect the production files; do not open them using file://. next start is not the server for an exported site. npm run typecheck and npm run lint are available for source checks.

Static hosting with dynamic content

Next.js exports HTML/CSS/JavaScript using output: "export", trailingSlash: true, and unoptimized images. Routes have directory indexes, including /admin/ and /admin/dashboard/. Node runs during development/building; GitHub Pages serves static files. No Next.js server, middleware/proxy, server cookies, API routes, or server image optimizer runs on Pages. Next.js static exports

Supabase is the backend. The browser loads site text, skill categories, Skills, Projects, Certifications, Experience, and Achievements from Supabase without replacing the public design. Successful empty reads remain empty. Original content is available while the project is not configured or reads fail; seeing original content alone does not prove a live connection.

Administration and security

• /: public portfolio; no login required.
• /admin/: Supabase email/password login.
• /admin/dashboard/: browser verifies authentication and membership in public.admin_users before showing admin content.
• /admin/dashboard/site/: edit the name, profile links, optional photo, hero, About, education and marks, highlights, focus areas, headings, soft skills, contact/footer text, navigation labels, buttons, and form wording.
• /admin/dashboard/categories/: add, rename, describe, reorder, and delete empty skill categories.
• Skills, Projects, Certifications, Experience, and Achievements: add, edit, save, cancel, and confirmed deletion.

Projects support JPEG/PNG/WebP uploads up to 5 MB and confirmed image replacement. In Projects → Edit → Crop & edit image, choose Original, 16:9, 4:3 or Square; adjust zoom and position, rotate, or reset. Apply crop prepares a JPEG locally; Save → Save and replace publishes it. Cancel crop keeps the selected image, and Reset to saved image discards pending edits. Previous files remain in Storage when an image is replaced. Public cards adapt to screen size and may trim image edges.

Browser guards send unauthenticated or unauthorized users to /admin/. Exported dashboard HTML and JavaScript are publicly downloadable; they contain no private portfolio records or passwords. Supabase RLS is the security boundary: only allowlisted administrators can write database content or Storage objects. A successful login alone does not grant administrator rights.

Edit the portfolio without source changes

1. Sign in at /admin/, then open Site content. Edit personal text, education scores, section headings, or links, and choose Save site content. Buttons, navigation & form text contains the remaining public labels and empty-state wording.
2. In Site content → Hero → Name size, choose Compact & balanced for a smaller name or Original large for the previous sizing. Both use the same typeface, colours, and animated lettering.
3. In Site content → Profile, optionally upload a clear portrait in JPEG, PNG, or WebP format, up to 5 MiB, or choose Crop & edit profile photo for the saved photo. The crop editor starts at 4:5 portrait to match the About frame and supports zoom, horizontal/vertical positioning, rotate, reset, Square, and Original proportions. Apply crop prepares a JPEG preview; Save site content uploads and publishes it. Cancel crop keeps the selected photo unchanged, and Reset to saved photo discards only pending image edits. Reopening the crop uses the original selection within that editing session. Apply or cancel a crop before saving or discarding site content. Enable Show profile photo in About, add a short photo description, and save. No photo is supplied or invented by default. You can replace it, hide it with the switch, or confirm Remove displayed photo. Replacing/removing changes the saved reference; previous files remain in Supabase Storage. An uploaded file is also retained if a save cannot be confirmed, so an ambiguous network response cannot delete a photo that was saved.
4. Open Categories → Add category to create a skill group with a name, optional description, and display order. Rename a category without losing its assigned skills. Move its skills to another category before deleting it; the database prevents deleting an in-use category.
5. Open Skills → Add skill. Choose an existing category, or use Add category beside the selector to create one while keeping the skill draft. Set the skill name, optional level, and order, then save. VLSI stays in the existing technical category unless you move it.
6. Use the other sidebar pages to manage projects, certifications, experience, and achievements. Refresh the public portfolio after saving to see the changes; content edits do not require a Git commit or deployment.

Site content → Hero → Availability badge edits or hides the internship availability line; an empty value hides it. Buttons and card labels contains View project, View full image, Close, Featured project and Back to project. The image error message is in Empty states and supporting labels. Existing saved content gains these defaults without a database migration.

The first two public projects, in display order, are featured. All public projects remain visible as summaries with repository/demo links. View project opens the full saved description; selecting an image opens an uncropped full-size view. Escape or Close dismisses the dialog and returns keyboard focus to its launch button. Desktop mouse users see the original glowing probe cursor, eased ring and fading trail. Text fields, keyboard navigation, touch, reduced-motion and forced-colour settings retain native cursors. Hero, hover, section and waveform effects remain.

Supabase setup

See SUPABASE_SETUP.md for the base schema/RLS SQL, seed content including VLSI, administrator provisioning, the project-images bucket, and Auth URLs. For the text/category/photo features, run supabase/portfolio-management.sql in the Supabase SQL Editor as the project owner after schema.sql. It includes the site_content setup from supabase/site-content.sql, adds skill categories, preserves existing content/category edits, and permits admin profile-photo uploads. If you already ran site-content.sql, run portfolio-management.sql next; otherwise the new file alone supplies both updates. Do not rerun the original seed over edited live content. No service-role key, secret key, database password, or admin password is needed in the app or GitHub Actions. No real Supabase values or account passwords are committed in this source. Consult VERIFICATION.md for completed checks and any remaining live verification.

.gitignore excludes .env.local, dependencies, generated out/ and .next output, and local tool state. Keep .git in this existing checkout to retain repository history. The old main commit f746afc is already backed up on remote branch backup-before-nextjs-pages-2026-10-06; never reset or force-push the repository history.

The contact form retains its mailto draft behavior. Missing personal facts retain their placeholders. Confirm a successful Pages deployment and the live-site checks in VERIFICATION.md; source and backend checks alone do not prove a hosted deployment.