开发者之个人网站,乃数字之名片——人寻汝或荐汝于机缘,首睹者即此。吾初建ziadamr.me时,志在汇聚吾十四项目,展吾技,兼设双语博客,以分吾识。此文将述吾建此站之由,及每步所悟之理。
首议择术。吾必用Next.js——此乃吾诸项目所依之框架,素所谙熟。然此个人之站稍异,需优SEO以显于Google,当求速载以立初印象,且须遍适诸器。Next.js具Server-Side Rendering与Static Generation,皆可应此。吾择App Router以享其新技。
設計數據庫,乃要務也。素習用PostgreSQL與Prisma。其Schema中,有三大模型:BlogPost為博文,Project為項目,User為管理。BlogPost模型尤為繁複——有阿拉伯文與英文之字段(title_ar,title_en,content_ar,content_en),獨特之slug,發表之日期,及標籤。阿拉伯文與英文之內容,分置不同字段,而非另立翻譯之表,使Query更簡易,更迅捷。
此双语博客系统,实属有趣之挑战。每篇文章须兼有阿拉伯文与英文,且Slug名须一致。用户可单指切换语言。设计亦自适应——选用阿拉伯文时,菜单、文本、按钮皆转为从右至左:动态应用dir="rtl"与dir="ltr"以匹配所选语言。字体亦随之变换——阿拉伯文用Cairo,英文用Inter——务求每语皆宜读。
觀察諸項,實為樂事。凡十四項,每項皆備有卡片,內載名、簡述、所用工藝、生動示範之鏈、及GitHub上代碼鏈。吾以分類之法(Filters),使訪客得以依工藝篩選——譬如選Next.js,則可觀其所成諸項。卡片之製,乃用CSS Grid之靈活網格,隨視窗大小變更列數。復添簡易動畫,俾鼠標掠過時生輕微變化,令體驗生動。
暗态(Dark Mode)乃要旨所在。众开发者多采用暗态,吾之站点必具此功能。吾用 next-themes 以便易理主题。其难处在于设计之每色皆需有二版——明暗各一。吾于 tailwind.config 中设一完备色系,含 primary、secondary、accent、background、surface,皆备暗版。终得两态相谐之设计。
SEO 乃首务也。凡页必有专设之标题与描述,兼用阿拉伯语与英语。以 next/metadata 添加 Open Graph 标签,使链接于社交平台散落时,显为美卡,内含标题、描述及图像。复制 sitemap.xml 与 robots.txt 于 Next.js,自动生成之。更添 Schema.org markup 于文章,俾谷歌善解其内容。其效:人若求吾名,吾之网站必现于搜索之首。
域名之事,不可轻忽。昔达沙里(ziadamr.me)之投资虽微,然价值甚巨。汝之专属域名,能显专业之姿,令人思汝网站之名号,且使汝之电邮,得为professional@ziadamr.me,非若gmail。复次,Vercel之托管,亦为至善——免费于个人之站,自GitHub发布,SSL亦无偿。每推main之次,网站自能言说。
بورتفوليو يفرق عن الآخرين بكون مشاريع حقيقية. لا شيء يؤثر أكثر من عرض مشاريع تمت إنشاؤها فعلاً واستخدامها من قبل الناس الحقيقيين. مواقع التدريب والتطبيق البسيط لا يؤثران. لكن اسمع راديو يستخدمه المستخدمون الحقيقيون، واعلم من يحمي خصوصية الناس، ومحاربة الأسئلة التي يلعبها الناس — هؤلاء الذين يقدرون الزائر كمطور. لهذا السبب يربط بورتفوليو الخاص بي كل 14 مشروع مع بعض، وكل واحد لديه رابط عرض حي ليس مجرد صورة.
吾之诲于初涉编程者:当速行,勿迟。纵初时网站简陋,然存于网,其重于无也。且须持续更新——每新项目,皆添之;每有所学,必录之。此简历非一时之工,乃随君而长之生灵也。至要者:须为真我——非他人简历之摹本。其性情与风格,方为君之魂也.
编程如增之业












