Demo Portfolyo | Web Tasarım ve Yazılım

Demo Hakkında

YÖNETİLEBİLİR
PORTFOLYO SİTESİ.

Demo portfolyo; yönetilebilir içerik, proje vitrini, yorum alanı, footer iletişim öğeleri, SEO ayarları ve 3D giriş animasyonunu örnek olarak gösterir.

WEB

Demo Web Altyapısı

Kurumsal, portfolyo veya ajans siteleri için yönetilebilir demo web altyapısı.

ADM

Demo Admin Panel

Sayfa içerikleri, proje kartları, yorumlar ve footer alanlarını panelden yönetme.

Responsive Arayüz

Masaüstü, tablet ve mobil görünüm için uyumlu demo tasarım düzeni.

3D Giriş Sahnesi

Model-viewer ile çalışan, scroll kontrollü demo giriş animasyonu.

SEO

SEO ve Temiz URL

Meta başlık, açıklama, anahtar kelime, canonical ve temiz URL yapısı.

FORM

İletişim Form Alanları

Zorunlu veya opsiyonel özel alan eklenebilen demo iletişim formu.

Kod Vitrini

KULLANDIĞIM
YAPILAR.

PHP

01<?php

02function guvenliKaydet(array $veri): bool {

03 $temiz = form_verisini_temizle($veri);

04 return tabloya_kaydet('projects', $temiz);

05}

07if (csrf_kontrol() && yetki_var('admin')) {

08 proje_vitrini_guncelle($_POST);

09}

PHP

01<?php

02function guvenliKaydet(array $veri): bool {

03 $temiz = form_verisini_temizle($veri);

04 return tabloya_kaydet('projects', $temiz);

05}

07if (csrf_kontrol() && yetki_var('admin')) {

08 proje_vitrini_guncelle($_POST);

09}

MySQL

01CREATE TABLE projects (

02 id INT PRIMARY KEY AUTO_INCREMENT,

03 title VARCHAR(180) NOT NULL,

04 tags VARCHAR(500),

05 sort_order INT DEFAULT 0

06);

08SELECT title, tags FROM projects

09ORDER BY sort_order ASC;

MySQL

01CREATE TABLE projects (

02 id INT PRIMARY KEY AUTO_INCREMENT,

03 title VARCHAR(180) NOT NULL,

04 tags VARCHAR(500),

05 sort_order INT DEFAULT 0

06);

08SELECT title, tags FROM projects

09ORDER BY sort_order ASC;

HTML

01<section class="portfolio-card">

02 <span class="eyebrow">Proje</span>

03 <h2>Modern Arayüz</h2>

04 <p>Responsive ve temiz bölüm yapısı.</p>

05 <a href="#contact">Teklif Al</a>

06</section>

HTML

01<section class="portfolio-card">

02 <span class="eyebrow">Proje</span>

03 <h2>Modern Arayüz</h2>

04 <p>Responsive ve temiz bölüm yapısı.</p>

05 <a href="#contact">Teklif Al</a>

06</section>

CSS

01.project-card {

02 border-radius: 28px;

03 background: linear-gradient(145deg,#101725,#070a10);

04 transform: translate3d(0,0,0);

05 transition: transform .35s ease;

06}

07.project-card:hover { transform: translateY(-6px); }

CSS

01.project-card {

02 border-radius: 28px;

03 background: linear-gradient(145deg,#101725,#070a10);

04 transform: translate3d(0,0,0);

05 transition: transform .35s ease;

06}

07.project-card:hover { transform: translateY(-6px); }

JavaScript

01const progress = clamp(scrollY / introHeight, 0, 1);

02const eased = 1 - Math.pow(1 - progress, 3);

03brand.style.transform = `translate3d(${x}px,0,0)`;

04modelViewer.cameraOrbit = `${orbit}deg 72deg 138%`;

05requestAnimationFrame(renderIntro);

JavaScript

01const progress = clamp(scrollY / introHeight, 0, 1);

02const eased = 1 - Math.pow(1 - progress, 3);

03brand.style.transform = `translate3d(${x}px,0,0)`;

04modelViewer.cameraOrbit = `${orbit}deg 72deg 138%`;

05requestAnimationFrame(renderIntro);

React

01export default function ProjectCard({ project }) {

02 return (

03 <article className="rounded-3xl p-6">

04 <h3>{project.title}</h3>

05 <p>{project.summary}</p>

06 </article>

07 );

08}

React

01export default function ProjectCard({ project }) {

02 return (

03 <article className="rounded-3xl p-6">

04 <h3>{project.title}</h3>

05 <p>{project.summary}</p>

06 </article>

07 );

08}

Tailwind CSS

01<div class="grid gap-6 md:grid-cols-3">

02 <article class="rounded-3xl bg-slate-950 p-6 shadow-xl">

03 <h3 class="text-2xl font-black">Proje Kartı</h3>

04 <p class="text-slate-300">Temiz ve responsive yapı.</p>

05 </article>

06</div>

Tailwind CSS

01<div class="grid gap-6 md:grid-cols-3">

02 <article class="rounded-3xl bg-slate-950 p-6 shadow-xl">

03 <h3 class="text-2xl font-black">Proje Kartı</h3>

04 <p class="text-slate-300">Temiz ve responsive yapı.</p>

05 </article>

06</div>

Node.js

01import express from 'express';

02const app = express();

04app.get('/api/projects', async (req, res) => {

05 const projects = await db.projects.findMany();

06 res.json(projects);

07});

09app.listen(3000);

Node.js

01import express from 'express';

02const app = express();

04app.get('/api/projects', async (req, res) => {

05 const projects = await db.projects.findMany();

06 res.json(projects);

07});

09app.listen(3000);

Java

01public class ServerStatus {

02 private final String name;

03 public ServerStatus(String name) { this.name = name; }

04 public String message() {

05 return name + " aktif durumda";

06 }

07}

Java

01public class ServerStatus {

02 private final String name;

03 public ServerStatus(String name) { this.name = name; }

04 public String message() {

05 return name + " aktif durumda";

06 }

07}

TypeScript

01type Project = {

02 title: string;

03 stack: string[];

04 active: boolean;

05};

07const filterActive = (items: Project[]) =>

08 items.filter((item) => item.active);

TypeScript

01type Project = {

02 title: string;

03 stack: string[];

04 active: boolean;

05};

07const filterActive = (items: Project[]) =>

08 items.filter((item) => item.active);

WHMCS / Smarty

01{foreach $products as $product}

02 <article class="hosting-card">

03 <h3>{$product.name}</h3>

04 <span>{$product.pricing.minprice.price}</span>

05 <a href="cart.php?a=add&pid={$product.pid}">Satın Al</a>

06 </article>

07{/foreach}

WHMCS / Smarty

01{foreach $products as $product}

02 <article class="hosting-card">

03 <h3>{$product.name}</h3>

04 <span>{$product.pricing.minprice.price}</span>

05 <a href="cart.php?a=add&pid={$product.pid}">Satın Al</a>

06 </article>

07{/foreach}

WordPress / WooCommerce

01add_action('woocommerce_before_add_to_cart_button', function () {

02 echo '<div class="extra-options">';

03 woocommerce_form_field('paket_notu', ['type' => 'text']);

04 echo '</div>';

05});

WordPress / WooCommerce

01add_action('woocommerce_before_add_to_cart_button', function () {

02 echo '<div class="extra-options">';

03 woocommerce_form_field('paket_notu', ['type' => 'text']);

04 echo '</div>';

05});

API / JSON

01{

02 "project": "WarextMarket",

03 "stack": ["PHP", "MySQL", "JavaScript"],

04 "modules": ["ilan", "kupon", "rol", "kozmetik"],

05 "status": "development"

06}

API / JSON

01{

02 "project": "WarextMarket",

03 "stack": ["PHP", "MySQL", "JavaScript"],

04 "modules": ["ilan", "kupon", "rol", "kozmetik"],

05 "status": "development"

06}

YAML / Minecraft

01menu:

02 title: "Sunucu Menüsü"

03 rows: 3

04 items:

05 market:

06 slot: 13

07 material: EMERALD

08 name: "&aMarket"

YAML / Minecraft

01menu:

02 title: "Sunucu Menüsü"

03 rows: 3

04 items:

05 market:

06 slot: 13

07 material: EMERALD

08 name: "&aMarket"

Git / Bash

01git checkout -b feature/portfolio-update

02git add assets/css/style.css assets/js/app.js

03git commit -m "Optimize portfolio sections"

04git status

05npm run build

Git / Bash

01git checkout -b feature/portfolio-update

02git add assets/css/style.css assets/js/app.js

03git commit -m "Optimize portfolio sections"

04git status

05npm run build

cPanel / Apache

01RewriteEngine On

02RewriteCond %{THE_REQUEST} /index.php [NC]

03RewriteRule ^index.php$ / [R=301,L]

05AddType model/gltf+json .gltf

06AddType model/gltf-binary .glb

cPanel / Apache

01RewriteEngine On

02RewriteCond %{THE_REQUEST} /index\.php [NC]

03RewriteRule ^index\.php$ / [R=301,L]

05AddType model/gltf+json .gltf

06AddType model/gltf-binary .glb

Model Viewer / 3D

01const model = document.querySelector('model-viewer');

02model.addEventListener('load', () => {

03 model.cameraOrbit = '0deg 72deg 138%';

04});

06function setOrbit(deg) {

07 model.cameraOrbit = `${deg}deg 72deg 138%`;

08}

Model Viewer / 3D

01const model = document.querySelector('model-viewer');

02model.addEventListener('load', () => {

03 model.cameraOrbit = '0deg 72deg 138%';

04});

06function setOrbit(deg) {

07 model.cameraOrbit = `${deg}deg 72deg 138%`;

08}

Güvenlik

01$token = $_POST['_csrf'] ?? '';

02if (!hash_equals($_SESSION['_csrf'], $token)) {

03 http_response_code(419);

04 exit('Geçersiz istek');

05}

07$mesaj = htmlspecialchars($mesaj, ENT_QUOTES, 'UTF-8');

Güvenlik

01$token = $_POST['_csrf'] ?? '';

02if (!hash_equals($_SESSION['_csrf'], $token)) {

03 http_response_code(419);

04 exit('Geçersiz istek');

05}

07$mesaj = htmlspecialchars($mesaj, ENT_QUOTES, 'UTF-8');

Demo Zaman Çizelgesi

DENEYİM.

Örnek zaman çizelgesi; farklı yıllara göre demo çalışma alanlarını sıralı ve okunabilir şekilde gösterir.

2021 / Fikir

Demo Başlangıç

İlk demo proje fikri, portfolyo yapısı ve içerik planı oluşturuldu.

2022 / UI

Arayüz Tasarımı

Kart yapıları, koyu tema, renk geçişleri ve responsive bölüm düzenleri hazırlandı.

2023 / Panel

Yönetim Paneli

İçeriklerin admin panelden eklenip düzenlenebildiği yönetim sistemi geliştirildi.

2024 / Portfolyo

Proje Vitrini

2x3 proje gösterimi, otomatik sayfa geçişi ve etiket sistemi eklendi.

2025 / 3D

3D Giriş Sahnesi

3D model, scroll bağlantılı geçiş ve yükleme ekranı demo akışa dahil edildi.

2026 / Optimizasyon

SEO ve Performans

Temiz URL, SEO meta alanları ve daha akıcı animasyon düzenlemeleri tamamlandı.

Demo Projeler

PROJELER.

Web Tasarım / Demo

Demo Kurumsal Web Sitesi

Kurumsal tanıtım, hizmet alanları ve iletişim formu bulunan yönetilebilir demo site.

PHP, MySQL, HTML, CSS, JavaScript

kurumsal webdemo siteresponsiveadmin panel

Portfolyo / Demo

Demo Portfolyo Sistemi

3D giriş alanı, proje vitrini, yorum kartları ve footer yönetimi bulunan demo portfolyo.

PHP, MySQL, model-viewer, CSS

portfolyo3D modelproje vitriniSEO

E-ticaret / Demo

Demo E-ticaret Arayüzü

Ürün kartları, kampanya alanları ve modern vitrin tasarımı için örnek arayüz.

HTML, CSS, JavaScript

e-ticaretürün kartıvitrin tasarımı

Hosting Tema / Demo

Demo WHMCS Tema

Hosting paketleri, müşteri alanı ve servis tanıtımları için demo tema çalışması.

WHMCS, Smarty, CSS, JavaScript

WHMCShostingtemapaket kartları

Eğitim / Demo

Demo Eğitim Sayfası

Ders, makale veya sunum içerikleri için modern ve sade demo eğitim sayfası.

HTML, CSS, İçerik Yönetimi

eğitim sitesimakalesunum

Otomasyon / Demo

Demo Otomasyon Paneli

Veri yönetimi, durum takibi ve raporlama ekranları için demo yönetim paneli.

PHP, API, MySQL, JavaScript

otomasyonAPIyönetim paneli

SEO / Performans / Demo

Demo SEO ve Hız Paketi

Temiz URL, meta alanları ve akıcı animasyon ayarları için demo çalışma.

SEO, CSS, JavaScript, Apache

SEOtemiz URLperformans

Form Sistemi / Demo

Demo İletişim Formu

Zorunlu/opsiyonel özel alanların yönetilebildiği demo iletişim formu.

PHP, MySQL, Form, Güvenlik

iletişim formuözel alanvalidasyon

Demo Yorumlar

YORUMLAR

Demo Kullanıcı 1 Kurucu

Site Yorumu

“Demo site hızlı açılıyor, kart düzeni ve koyu tema profesyonel duruyor.”

Demo Kullanıcı 4 Geliştirici

Site Yorumu

“SEO ayarları, temiz URL yapısı ve form alanları demo için yeterli görünüyor.”

Demo Kullanıcı 1 Kurucu

Site Yorumu

“Demo site hızlı açılıyor, kart düzeni ve koyu tema profesyonel duruyor.”

Demo Kullanıcı 4 Geliştirici

Site Yorumu

“SEO ayarları, temiz URL yapısı ve form alanları demo için yeterli görünüyor.”

Demo Kullanıcı 1 Kurucu

Site Yorumu

“Demo site hızlı açılıyor, kart düzeni ve koyu tema profesyonel duruyor.”

Demo Kullanıcı 2 Tasarımcı

Site Yorumu

“Proje vitrini ve yorum kartlarının hareketi genel tasarımla uyumlu.”

Demo Kullanıcı 5 Ajans Partneri

Site Yorumu

“3D giriş sahnesi ve yükleme ekranı siteye farklı bir karakter katıyor.”

Demo Kullanıcı 2 Tasarımcı

Site Yorumu

“Proje vitrini ve yorum kartlarının hareketi genel tasarımla uyumlu.”

Demo Kullanıcı 5 Ajans Partneri

Site Yorumu

“3D giriş sahnesi ve yükleme ekranı siteye farklı bir karakter katıyor.”

Demo Kullanıcı 2 Tasarımcı

Site Yorumu

“Proje vitrini ve yorum kartlarının hareketi genel tasarımla uyumlu.”

Demo Kullanıcı 3 Ürün Yöneticisi

Site Yorumu

“Admin panelden içerik düzenleyebilmek siteyi yönetmeyi kolaylaştırıyor.”

Demo Kullanıcı 6 Müşteri

Site Yorumu

“Kısa sürede düzenlenebilir bir portfolyo için başarılı bir demo paket.”

Demo Kullanıcı 3 Ürün Yöneticisi

Site Yorumu

“Admin panelden içerik düzenleyebilmek siteyi yönetmeyi kolaylaştırıyor.”

Demo Kullanıcı 6 Müşteri

Site Yorumu

“Kısa sürede düzenlenebilir bir portfolyo için başarılı bir demo paket.”

Demo Kullanıcı 3 Ürün Yöneticisi

Site Yorumu

“Admin panelden içerik düzenleyebilmek siteyi yönetmeyi kolaylaştırıyor.”

Demo İletişim

YENİ BİR
PROJE BAŞLATALIM.

Portfolyo, WHMCS tema, pazaryeri scripti, Minecraft sunucu çalışması veya özel web arayüzü için proje detaylarını iletebilirsiniz.

demo@example.com Türkiye / Uzaktan

DİJİTAL DENEYİMLER TASARLIYORUZ.

YÖNETİLEBİLİR PORTFOLYO SİTESİ.

Demo Web Altyapısı

Demo Admin Panel

Responsive Arayüz

3D Giriş Sahnesi

SEO ve Temiz URL

İletişim Form Alanları

KULLANDIĞIMYAPILAR.

DENEYİM.

Demo Başlangıç

Arayüz Tasarımı

Yönetim Paneli

Proje Vitrini

3D Giriş Sahnesi

SEO ve Performans

PROJELER.

Demo Kurumsal Web Sitesi

Demo Portfolyo Sistemi

Demo E-ticaret Arayüzü

Demo WHMCS Tema

Demo Eğitim Sayfası

Demo Otomasyon Paneli

YORUMLAR

YENİ BİR PROJE BAŞLATALIM.

DİJİTAL
DENEYİMLER
TASARLIYORUZ.

YÖNETİLEBİLİR
PORTFOLYO SİTESİ.

KULLANDIĞIM
YAPILAR.

YENİ BİR
PROJE BAŞLATALIM.