君之个人网站若为开发者，乃数字名片也——人欲寻君或有人荐君于机缘，首睹者即此。吾初建ziadamr.me时，志在筑一隅之地，汇吾十四项目，彰吾之技，兼设双语之博客以分吾之经验。今文，吾将释此网站之筑法，及每步所悟之训。
首议者，择技术栈也。吾必用 Next.js，盖此乃吾诸项目所通用，熟稔之甚。然个人之网站，异于他者——须SEO精良，俾人搜索吾名时得见；须加载迅捷，以臻首观之善；须应答无碍，遍诸设备。Next.js，兼有服务器端渲染与静态生成，尽备此要。吾用其App Router，以享最新之能。
制表之工，乃要务也。吾素用 PostgreSQL 配 Prisma。其架构有三核之模：BlogPost 为博客，Project 为作品集，User 为管理。BlogPost 之模最繁——有阿拉伯文与英文之字段（title_ar, title_en, content_ar, content_en），一独异之 slug，发表之期，及标签。分阿拉伯文与英文于异字段，非置一别之译表，使询查简而速。
此双语博客系统，诚为乐事也。每文须兼有阿拉伯语与英语，而别名（slug）一也。用户以单指可易其言。其制自适——尔若择阿拉伯语，则凡物皆右至左：菜单、文字、按钮悉然。吾以 dir="rtl" 与 dir="ltr" 依所择之语而动。字亦易之——阿拉伯语用开罗（Cairo），英语用英特（Inter）——使各语皆宜于目。
展项目之乐，乃诸乐之冠。十四项目，各设一卡，列名、简述、所用之技、演示之链、GitHub代码之链。吾设滤器，使访者可按技筛选——如择Next.js，则见诸用此技所建之项目。卡自用响应式CSS Grid，变列数以应屏之大小。复加微动于卡之悬停，轻灵之致，使体验生趣盎然。
暗黑模式实属必要。众开发者多采用此模式，而代表吾之网站，亦当具此。吾以 next-themes 管理主题，甚为便捷。然挑战在于，设计中之每色，皆需二版——明暗各一。吾于 tailwind.config 中创一完备色系，有主色、次色、点缀色、背景色、表面色，皆具暗黑之变。终得两模式皆和谐之设计。
自始即以 SEO 为要。每页皆备阿拉伯文与英文之定制标题及描述。吾以 next/metadata 添加 Open Graph 标签——此使链接于社交媒体分享时，显雅致之卡，具标题、描述及图像。吾亦于 Next.js 中建自动 sitemap.xml 与 robots.txt。复加 Schema.org 标注于文章，俾 Google 更善解其内容。其果：人若以吾名搜索，此站辄现于首列搜索结果。
拥有己域乃不可躐之阶。ziadamr.me此域，乃简易之投，实具巨值。己域能显专业之象，使网址易记，且令电邮可专业@ziadamr.me 乃代 Gmail。Vercel 托管亦佳——个人网站免费，GitHub 自动部署，SSL 亦免费。每推至 main，网站即自动更新。
使作品集超群者，实项目也。无逾于展示真者所建、真者所使用者。教程之站、待办之应用，未足动心。然Esma3 Radio之有真用户，Tammeny之护隐私，Battle of Questions之真者所玩——此乃使访者敬尔为开发者之由。故吾之作品集，合十四项目为一，每项皆附实演链接，非徒 screenshot 而已。
凡未建作品集之开发者，吾之忠告曰：今日始，勿待明日。初虽简陋，然在网者，重于未在也。且须勤更，新项目皆录，所学者皆述。作品集非一时之工，乃与君共生长之灵物也。至要者：须显己之特色，勿效他人之集。君之性情与风格，方为君之标识。