← Back to the portfolio

HFECloud

HFECloud is the home of the HFE community's portfolios and projects. Members build click-to-edit portfolios in ten templates, publish projects of eight types, and order NFC business cards with a QR code. Admins review changes before they go live.

Featured Website .NET · Full-Stack Platform

7Community Member
8Project types
10Portfolio templates
3Card download formats

A project by Youssef Ehab Alsayed Co-founded with Mohammed Ashraf Hassan

The question

How can a community of different fields, from BI analysts to game developers to pharmacy students, share one site where each member's work still looks like their own, and an admin keeps quality up?

What I built

HFECloud is built with ASP.NET Core MVC on PostgreSQL and ships as a Docker container. Every member gets a public portfolio in ten templates, from Arcade (a playable side-scroller) and Terminal (a working terminal with GitHub activity) to Moon, Mechanical, Pharmacy and Editorial, plus project pages of eight types, all edited by clicking the page itself. One set of portfolio data renders in every template, so changing the look means no retyping. Each member also gets an NFC business card with a QR code, downloadable as PNG, PDF or vCard. Visitors can leave reviews, members recommend each other, and everyone sees visit stats for their pages. Edits to published pages go through an admin review queue, and permission groups decide who sees which tools.

What fought back

  • Moving hosting forced me to rework storage, scheduled jobs and the database in one move.
  • Development runs on SQLite and production on PostgreSQL. Migrations made against the wrong one broke deploys, so I now build them against PostgreSQL first.
  • A page that people share needs its own preview image, so every portfolio and project now gets a generated link card.

Tools

C# ASP.NET Core MVC Razor Entity Framework Core ASP.NET Identity PostgreSQL Docker Render Cloudflare Workers SkiaSharp QRCoder MailKit

Live site

Live site

Screenshots

Homepage: members and featured projects, with filters for field, job title and project type.
Homepage: members and featured projects, with filters for field, job title and project type.
Editorial look: a bold hero and a contents card, shown in the gold color style.
Editorial look: a bold hero and a contents card, shown in the gold color style.
Pharmacy look: a lab-style layout with periodic-table contents tiles.
Pharmacy look: a lab-style layout with periodic-table contents tiles.
Portfolio editor: choose a look and color style (applied at once), then open any section to edit it. Other edits go to admin review.
Portfolio editor: choose a look and color style (applied at once), then open any section to edit it. Other edits go to admin review.
Project editor: pick a project type, fill in the details, and watch a live preview of the page.
Project editor: pick a project type, fill in the details, and watch a live preview of the page.
Profile page: your details, login settings and projects in one place.
Profile page: your details, login settings and projects in one place.
Profile page: social links and an NFC business card with PNG, PDF and vCard downloads.
Profile page: social links and an NFC business card with PNG, PDF and vCard downloads.
Card customizer: set the name, contact details, roles and background.
Card customizer: set the name, contact details, roles and background.
Card layout editor: drag and resize the card items on a grid, with a QR size check.
Card layout editor: drag and resize the card items on a grid, with a QR size check.
Link preview: a generated card shows the member's name and work when a link is shared.
Link preview: a generated card shows the member's name and work when a link is shared.