İçeriğe atla

WEB YAZILIM

Tasarım burada bitmiyor,kodla hayat buluyor.

Bu sayfa işin görsel tarafını değil, tasarımı gerçek bir web sitesine dönüştüren teknik tarafı anlatıyor. Next.js ve React ile modern, hızlı ve bakımı kolay kod tabanları kurarım — her satır, altı ay sonra da anlaşılır kalacak şekilde yazılır.

NE KURUYORUM

Bir sayfa, sabit bir HTML dosyası değil; birbirinin içine geçen, tekrar kullanılabilen bileşenlerden oluşan canlı bir yapı. Aşağıdaki örnek, çalışma prensibimi gösteren basitleştirilmiş bir bileşen — bu sitenin kendisi de aynı mantıkla kuruldu.

service-card.tsx
"use client";
import { motion } from "motion/react";
interface CardProps {
title: string;
href: string;
}
export function ServiceCard({ title, href }: CardProps) {
return (
<motion.a href={href} whileHover={{ y: -4 }}
className="rounded-2xl border border-line bg-surface p-6">
<h3>{title}</h3>
</motion.a>
);
}

TEKNOLOJİ SEÇİMLERİM

Her araç bir moda değil, bir gerekçe için seçilir. Kullandığım yığın şu an bu yüzden bu:

Next.js

Sunucu tarafında render ve otomatik rota yapısı tek pakette gelir; sayfalar hızlı açılır.

React

Arayüzü yeniden kullanılabilir bileşenlere bölerim; her parça tek başına anlaşılır ve bakımı kolay kalır.

TypeScript

Hataları yazarken, derleme anında yakalar; proje büyüdükçe kod kırılmadan büyür.

Tailwind CSS

Tasarım dilini doğrudan bileşenin içinde tutar; stil dosyaları dağılıp tutarsızlaşmaz.

Motion

Sayfa geçişleri ve mikro etkileşimler, performanstan ödün vermeden GPU dostu şekilde çalışır.

Git & Vercel

Her değişiklik izlenir, önizleme ortamında test edilir, onaylandığında güvenle yayına alınır.

TASARIMDAN KODA

Bir tasarım dosyası, bu adımlardan geçerek yayında çalışan bir siteye dönüşür.

  1. 01

    Bileşenlere ayırma

    Tasarımı yeniden kullanılabilir parçalara bölerim; aynı buton, kart ya da form iki kez farklı şekilde yazılmaz.

  2. 02

    Duyarlı kurulum

    Mobil, tablet ve masaüstü tek bir kod tabanından beslenir; kırılma noktaları en küçük ekrandan başlanarak kurulur.

  3. 03

    Performans

    Görseller ve fontlar optimize edilir, gereksiz JavaScript yüklenmez; sayfa mümkün olduğunca hafif kalır.

  4. 04

    Erişilebilirlik & SEO temelleri

    Semantik HTML, anlamlı meta etiketleri ve klavyeyle kullanılabilirlik en baştan düşünülür.

  5. 05

    Yayına alma

    Değişiklikler önizleme ortamında test edilir, onay sonrasında güvenle canlıya alınır.

BAKIM & PERFORMANS

Bir site teslim edilince değil, sorunsuz çalışmaya devam ettikçe başarılı sayılır. Bu yüzden şunlara sadık kalırım:

Performans önceliği

Hız, sonradan eklenen bir adım değil; en baştan kurulan bir alışkanlıktır.

Temiz, okunabilir kod

Her bileşen tek bir işi yapar; altı ay sonra dönüp bakıldığında da anlaşılır kalır.

İzlenebilir geçmiş

Her değişiklik Git ile kayıt altına alınır; geriye dönmek ya da bir kararı geri okumak her zaman mümkündür.

Kolay devir teslim

Kod tabanı sade ve anlaşılır bırakılır; başka bir geliştirici de rahatça devralabilir.

GERÇEK İŞLER

Bu prensiplerin kağıt üzerinde değil, yayında kaldığı birkaç iş:

BİR PROJEN Mİ VAR

Tasarımın hazır, sırada kodu yazmak var.

İster sıfırdan bir web sitesi, ister elindeki tasarımı çalışan bir ürüne dönüştürmek — süreci baştan sona birlikte planlayalım.

Web Yazılım — Eren Kal