Architecting sabiyotech.com: A Guide to Personal Website Development

In today's digital landscape, your online presence often creates the first impression long before a résumé, LinkedIn profile, or business card. Whether you're a software developer, cybersecurity analyst, AI enthusiast, researcher, or technology leader, a personal website can serve as your digital headquarters-a place where your work, ideas, and professional identity come together. Recently, I built sabiyotech.com, a personal website focused on Artificial Intelligence, Cybersecurity, Election Technology, and Digital Transformation. The project was more than just creating web pages; it was an opportunity to apply modern software engineering practices, explore deployment automation, and establish a professional online brand. In this article, I'll walk through the complete journey-from planning and technology selection to deployment and domain configuration-so that anyone interested in building their own website can follow a proven roadmap.

Many professionals rely solely on LinkedIn or social media platforms. While these platforms are useful, they come with limitations. A personal website gives you complete ownership over your content, design, and professional narrative. A well-designed personal website can help you:

• Showcase projects and technical achievements
• Publish research papers and technical articles
• Demonstrate practical skills to employers and clients
• Build a personal brand within your industry
• Create a central hub for networking and collaboration

Think of it as your permanent digital portfolio that remains under your control.

One of the first decisions in any web project is selecting technologies that balance performance, scalability, and ease of development.

For SabiyoTech, I selected a modern and widely adopted stack.

Next.js and React

The website was built using React and Next.js, one of the most popular frameworks for modern web development. Why Next.js?

• Excellent performance
• SEO-friendly architecture
• Server-Side Rendering (SSR)
• Static Site Generation (SSG)
• Simplified routing system
• Strong developer ecosystem

These capabilities make Next.js ideal for portfolio websites, blogs, and professional platforms.

Tailwind CSS

For styling, I chose Tailwind CSS, a utility-first framework that significantly speeds up frontend development. Benefits include:

• Rapid UI creation
• Responsive design out of the box
• Consistent styling system
• Reduced custom CSS

For example:

<div class="flex flex-col md:flex-row">

This single line automatically changes layout behavior between mobile and desktop screens. Instead of writing lengthy CSS files, developers can focus on building features.

Git and GitHub

No professional project should exist without version control. Using Git and GitHub provided:

• Source code backup
• Change tracking
• Collaboration support
• Integration with deployment platforms

Every update made during development was safely tracked and recoverable.

Vercel

To host the website, I selected Vercel, a platform designed specifically for modern frontend frameworks. Key advantages include:

• One-click deployment
• Automatic HTTPS
• Global CDN
• CI/CD integration
• Seamless GitHub connectivity

For personal projects, Vercel's free tier is often more than sufficient.

Before writing code, it is important to ensure the development environment is correctly configured. The essential tools include:

• Node.js
• npm
• Git
• Visual Studio Code

Verify installations using:

node -v
npm -v
git --version

Once everything is installed, create a project workspace:

mkdir ~/sabiyotech
cd ~/sabiyotech

Then start the development server:

npm run dev

The application becomes accessible at: http://localhost:3000

One of the most satisfying aspects of modern development is seeing code changes instantly reflected in the browser.

Technology alone does not create a great website. User experience plays an equally important role.

Dark Theme Design

For sabiyotech.com, I adopted a dark theme because it:

• Reduces eye strain
• Looks modern and professional
• Enhances readability for technical content
• Matches the aesthetics of developer-focused platforms

Responsive Design

Users visit websites from phones, tablets, laptops, and large desktop monitors. A responsive design ensures the experience remains consistent across all devices. Tailwind makes this remarkably simple:

grid-cols-1
md:grid-cols-2
lg:grid-cols-3

The layout automatically adapts based on screen size.

Structuring the Homepage

A professional homepage should answer a visitor's primary question: "Who are you and why should I care?" My homepage includes:

• Introduction: Professional title and specialization.
• About Section: A concise summary of experience and interests.
• Skills: Key technologies and competencies.
• Projects: Highlighted work and case studies.
• Contact Information: Methods for collaboration and networking.

This structure allows visitors to quickly understand expertise and areas of interest.

One of the most valuable lessons from this project was learning how modern deployment pipelines work. In the past, developers manually uploaded files to servers.Today, the process is largely automated. The workflow looks like this:

Every code change follows this path automatically. This approach is known as Continuous Integration and Continuous Deployment (CI/CD).

Integrating GitHub

Once development begins, source code should immediately be placed under version control.

git init
git add .
git commit -m "Initial SabiyoTech website"
git remote add origin REPOSITORY_URL
git branch -M main
git push -u origin main

A common issue many beginners encounter is GitHub authentication. Since password authentication is no longer supported, developers should use:

• Personal Access Tokens (PAT)
• SSH Keys

Both methods provide improved security and reliability.

Deploying to Vercel

With the code hosted on GitHub, deployment becomes surprisingly simple.

Vercel automatically detects:

• Framework type
• Build commands
• Output configuration

Within minutes, the application is live.

The Magic of Automatic Deployments

Perhaps the most rewarding part of the workflow is deployment automation. Every time I execute:

git push

Vercel automatically:

1. 1. Pulls the latest source code
2. 2. Installs dependencies
3. 3. Builds the application
4. 4. Deploys the new version

No manual uploads.

No FTP clients.

No server management headaches.

This is how modern software teams operate today.

A custom domain dramatically improves professionalism. Let's Compare: sabiyotech.vercel.app with sabiyotech.com

The difference in credibility is immediately noticeable. Within Vercel, adding a domain is straightforward:

1. 1. Open Project Settings
2. 2. Navigate to Domains
3. 3. Add the custom domain
4. 4. Verify ownership

After DNS propagation, the website becomes accessible through the custom address.

Understanding DNS Configuration

DNS is often the least exciting-and most confusing-part of deployment. Think of DNS as the internet's phone book. It translates human-friendly names into server locations. For Vercel deployments, the following records are commonly required:

The A record routes the root domain, while the CNAME routes the www subdomain. Many deployment issues ultimately come down to DNS configuration errors, so understanding these basics is invaluable.

Every project teaches something new. These were my biggest takeaways: