Your personal website as a developer is your digital business card — the first thing someone sees when they look you up or when someone recommends you for an opportunity. When I started building ziadamr.me, my goal was to create a space that brings together all 14 of my projects, showcases my skills, and includes a bilingual blog where I share my experiences. In this article, I'll explain how I built this website and the lessons I learned at each step.
The first decision was choosing the tech stack. I used Next.js of course — it's the framework I use in all my projects, and I know it well. But a personal website is a bit different — it needs excellent SEO so it appears in Google when someone searches your name, fast loading for a great first impression, and responsiveness across all devices. Next.js with Server-Side Rendering and Static Generation provided all of this. I used the App Router to take advantage of the latest features.
Database design was an important step. I used PostgreSQL with Prisma as usual. The Schema had three core models: BlogPost for the blog, Project for the portfolio, and User for administration. The BlogPost model was the most complex — it has fields for Arabic and English (title_ar, title_en, content_ar, content_en), a unique slug, publish date, and tags. Separating Arabic and English content in different fields rather than a separate translation table made queries simpler and faster.
The bilingual blog system was an enjoyable challenge. Every article needs to be available in Arabic and English with the same slug. Users can switch between languages with a single click. The design itself adapts — when you choose Arabic, everything switches to RTL: menus, text, buttons. I used dir="rtl" and dir="ltr" dynamically based on the selected language. Fonts also change — Cairo for Arabic and Inter for English — so each language is optimally readable.
The project showcase was one of the most fun parts. Each of the 14 projects has a card with: name, brief description, technologies used, live demo link, and GitHub code link. I used filters so visitors can filter by technology — for example, selecting Next.js to see all projects built with it. The cards themselves use responsive CSS Grid that changes the number of columns based on screen size. I also added a subtle animation on card hover — something light that makes the experience feel alive.
Dark Mode was essential. Most developers use dark mode, and a website that represents me needs to have it. I used next-themes to manage themes easily. The challenge was that every color in the design needs two versions — light and dark. I created a complete color system in tailwind.config with primary, secondary, accent, background, surface, and all have a dark variant. The result was a cohesive design in both modes.
SEO was a priority from the start. Every page has custom title and description in both Arabic and English. I used next/metadata to add Open Graph tags — this makes links show a nice card with title, description, and image when shared on social media. I also built automatic sitemap.xml and robots.txt through Next.js. And I added Schema.org markup for articles so Google understands the content better. The result: the site appears in the top search results when someone searches my name.
Having your own domain is a step you shouldn't skip. The ziadamr.me domain was a simple investment with huge value. A personal domain gives a professional impression, makes your website address memorable, and lets your email be professional@ziadamr.me instead of gmail. Vercel hosting was also ideal — free for personal sites, automatic deployment from GitHub, and free SSL. Every time I push to main, the site updates automatically.
What sets a portfolio apart from others is real projects. Nothing makes an impact more than showcasing projects that were actually built and used by real people. Tutorial sites and Todo Apps don't impress. But Esma3 Radio with real users, Tammeny protecting people's privacy, and Battle of Questions that people actually play — those are what make a visitor respect you as a developer. That's why my portfolio connects all 14 projects together, each with a live demo link, not just a screenshot.
My advice for any developer who hasn't built a portfolio yet: start today, not tomorrow. Even if the site is simple at first, having it online is more important than not having it. And keep updating — add every new project, write about everything you learn. A portfolio isn't a project you finish, it's a living thing that grows with you. And most importantly: make it yours — not a copy of someone else's portfolio. Your personality and style are what will set you apart.
Powered by Ziad Amr
Top comments (0)