Case study

Portofolio Live — Dynamic Portfolio & Custom CMS

Portofolio is a server-rendered personal portfolio platform designed to present professional experience, technical skills, projects, education, awards, and résumé information through a polished, recruiter-focused experience. Beyond a traditional static portfolio, it includes a custom content management system that allows the owner to update the live website through an authenticated admin editor without redeploying the application.

Category
Portfolios & personal brands
Client
Eng/Thowdan Al-Eryani
Timeline
1 Week
Result
Built a server-rendered portfolio platform with a custom authenticated CMS, persistent content storage, résumé management, and cinematic responsive interactions.
Portofolio Live — Dynamic Portfolio & Custom CMS — screenshot

About the project

Built with Node.js, vanilla JavaScript, HTML, and CSS, the platform uses server-rendered HTML templates to deliver its main content and metadata. Its custom CMS supports editing site information, projects, technology stacks, skills, recruiter-focused content, education, languages, awards, and contact details. The admin interface also supports résumé uploads, external résumé links, account management, and structured editing with save, discard, and unsaved-change protection.

The backend integrates optional Neon PostgreSQL storage for editable content, administrator accounts, and résumé files. Security features include HMAC-SHA256 session cookies, password hashing with Node.js scrypt, authenticated content updates, input validation, and database-backed API rate limiting. The frontend features a cinematic scroll-controlled hero, GSAP animations, Lenis smooth scrolling, dark and light themes, responsive navigation, accessibility support, and reduced-motion fallbacks.

The platform is deployed on Vercel and includes search-engine metadata, canonical URLs, Open Graph and social metadata, Person structured data, and a public sitemap.

Built with

Node.jsJavaScriptHTMLCSSVercelNeon PostgreSQLServer-Side RenderingCustom CMSREST APIsAuthenticationHMAC-SHA256ScryptGSAPScrollTriggerLenisSEOJSON-LDResponsive DesignAccessibility

Links

Planning something similar?

Tell us about your idea and we’ll reply within 24–48 hours.

Get in touch