Xu hướng thiết kế website 2026: AI cá nhân hóa và tương tác 3D đỉnh cao

import * as tf from '@tensorflow/tfjs';

// Mô hình đơn giản: lọc cộng tác (collaborative filtering)
class ArticleRecommender {
  constructor() {
    this.userVector = null;
    this.articleMatrix = null;
  }

  // Huấn luyện mô hình từ dữ liệu hành vi người dùng
  async train(userData) {
    // userData: [{ userId, articleId, timeSpent, clicked }]
    const features = userData.map(d => [
      d.timeSpent / 100, // chuẩn hóa
      d.clicked ? 1 : 0,
      d.scrollDepth
    ]);

    const labels = userData.map(d => d.liked ? 1 : 0);
    const xs = tf.tensor2d(features);
    const ys = tf.tensor2d(labels, [labels.length, 1]);

    this.model = tf.sequential({
      layers: [
        tf.layers.dense({ units: 16, activation: 'relu', inputShape: [3] }),
        tf.layers.dense({ units: 8, activation: 'relu' }),
        tf.layers.dense({ units: 1, activation: 'sigmoid' }) // xác suất user thích
      ]
    });

    this.model.compile({
      optimizer: 'adam',
      loss: 'binaryCrossentropy',
      metrics: ['accuracy']
    });

    await this.model.fit(xs, ys, { epochs: 50 });
  }

  // Dự đoán điểm cho bài viết mới
  predict(timeSpent, clicked, scrollDepth) {
    const input = tf.tensor2d([[timeSpent / 100, clicked ? 1 : 0, scrollDepth]]);
    const score = this.model.predict(input);
    return score.dataSync()[0]; // 0-1, càng cao càng nên gợi ý
  }
}

// Sử dụng
const recommender = new ArticleRecommender();
await recommender.train(historicalData);

const articles = [
  { id: 1, title: 'React 19 mới nhất', avgTime: 180, clickRate: 0.6 },
  { id: 2, title: 'Mẹo CSS Grid', avgTime: 120, clickRate: 0.3 }
];

const scored = articles.map(a => ({
  ...a,
  score: recommender.predict(a.avgTime, a.clickRate > 0.5 ? 1 : 0, 0.8)
})).sort((a, b) => b.score - a.score);

console.log('Bài được gợi ý:', scored[0].title);

import { Canvas, useFrame } from '@react-three/fiber'
import { useRef } from 'react'
import { OrbitControls, MeshDistortMaterial } from '@react-three/drei'

// Thành phần quả cầu 3D tự động quay và biến dạng
function AnimatedSphere() {
  const meshRef = useRef()

  useFrame((state) => {
    // Xoay theo thời gian
    meshRef.current.rotation.x = state.clock.elapsedTime * 0.2
    meshRef.current.rotation.y = state.clock.elapsedTime * 0.3
    
    // Hiệu ứng trôi nổi
    meshRef.current.position.y = Math.sin(state.clock.elapsedTime) * 0.5
  })

  return (
    <mesh ref={meshRef}>
      <sphereGeometry args={[2, 64, 64]} /> {/* quả cầu mịn */}
      <MeshDistortMaterial
        color="#06B6D4" // màu cyan
        attach="material"
        distort={0.4} // độ biến dạng
        speed={2}
        roughness={0.2}
        metalness={0.8}
      />
    </mesh>
  )
}

// Thành phần Hero chính
export default function Hero3D() {
  return (
    <div className="relative h-screen w-full bg-slate-950">
      {/* Canvas 3D làm nền */}
      <Canvas camera={{ position: [0, 0, 8], fov: 45 }}>
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} intensity={1} />
        <AnimatedSphere />
        <OrbitControls enableZoom={false} /> {/* người dùng có thể kéo xoay */}
      </Canvas>

      {/* Nội dung phủ lên trên */}
      <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
        <div className="text-center text-white pointer-events-auto">
          <h1 className="text-7xl font-bold mb-4">
            Portfolio 2026
          </h1>
          <p className="text-xl text-cyan-400">
            Thiết kế web tương lai, bắt đầu từ hôm nay
          </p>
          <button className="mt-8 px-8 py-3 bg-cyan-500 rounded-lg hover:bg-cyan-600 transition">
            Khám phá ngay
          </button>
        </div>
      </div>
    </div>
  )
}

import { Detailed } from '@react-three/drei'

<Detailed distances={[0, 10, 20]}>
  <mesh><sphereGeometry args={[1, 64, 64]} /></mesh> {/* gần: mịn */}
  <mesh><sphereGeometry args={[1, 32, 32]} /></mesh> {/* trung bình */}
  <mesh><sphereGeometry args={[1, 8, 8]} /></mesh>   {/* xa: ít chi tiết */}
</Detailed>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        // Thang kích thước phù hợp 2026
        'display-2xl': ['6rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
        'display-xl': ['4.5rem', { lineHeight: '1.15', letterSpacing: '-0.01em' }],
        'heading-lg': ['3rem', { lineHeight: '1.2' }],
        'body-lg': ['1.25rem', { lineHeight: '1.75' }],
      },
      fontFamily: {
        // Bộ font hiện đại
        sans: ['Inter Variable', 'system-ui', 'sans-serif'],
        display: ['Space Grotesk', 'Inter', 'sans-serif'], // cho tiêu đề đặc biệt
      },
      letterSpacing: {
        'tightest': '-0.04em', // cho kích thước cực lớn
        'looser': '0.05em',    // cho nhãn chữ in hoa
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'), // plugin hỗ trợ văn bản
  ],
}

export function ModernHero() {
  return (
    <section className="min-h-screen flex items-center px-8 bg-slate-50">
      <div className="max-w-5xl mx-auto">
        {/* Nhãn nhỏ phía trên */}
        <p className="text-sm uppercase tracking-looser text-cyan-600 font-semibold mb-6">
          Portfolio 2026
        </p>
        
        {/* Tiêu đề cực lớn */}
        <h1 className="font-display text-display-2xl text-slate-950 mb-8">
          Thiết kế web
          <br />
          <span className="text-cyan-600">không thể bỏ qua</span>
        </h1>
        
        {/* Nội dung thoáng */}
        <p className="text-body-lg text-slate-600 max-w-2xl leading-relaxed">
          Mình giúp các thương hiệu xây dựng trải nghiệm số khiến người dùng 
          nhớ mãi. Kết hợp AI, 3D và các nguyên tắc thiết kế vượt thời gian.
        </p>
        
        {/* Nút bấm có khoảng cách rộng */}
        <div className="flex gap-4 mt-12">
          <button className="px-8 py-4 bg-slate-950 text-white rounded-xl text-lg font-semibold hover:bg-slate-800 transition">
            Xem dự án
          </button>
          <button className="px-8 py-4 border-2 border-slate-300 rounded-xl text-lg font-semibold hover:border-slate-950 transition">
            Liên hệ
          </button>
        </div>
      </div>
    </section>
  )
}

/* Tải Inter Variable từ Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');

/* Hoặc tự lưu trữ để tốc độ tốt hơn */
@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900; /* hỗ trợ tất cả độ đậm */
  font-display: swap; /* tránh hiện tượng chữ vô hình khi tải */
}

// tailwind.config.js
module.exports = {
  darkMode: 'class', // bật/tắt bằng class "dark" trên thẻ <html>
  theme: {
    extend: {
      colors: {
        // Màu tùy chỉnh cho giao diện tối
        'dark-bg': '#0F172A',
        'dark-surface': '#1E293B',
        'dark-border': '#334155',
      },
    },
  },
}

// Thành phần hỗ trợ giao diện tối
export function Card({ title, content }) {
  return (
    <div className="
      bg-white dark:bg-dark-surface
      border border-slate-200 dark:border-dark-border
      rounded-xl p-6
      shadow-lg dark:shadow-none dark:ring-1 dark:ring-white/10
      transition-colors duration-200
    ">
      <h3 className="
        text-2xl font-bold 
        text-slate-950 dark:text-slate-100
        mb-4
      ">
        {title}
      </h3>
      <p className="
        text-slate-600 dark:text-slate-300
        leading-relaxed
      ">
        {content}
      </p>
    </div>
  )
}

// hooks/useDarkMode.js
import { useEffect, useState } from 'react'

export function useDarkMode() {
  const [isDark, setIsDark] = useState(false)

  useEffect(() => {
    // Đọc tùy chọn từ bộ nhớ hoặc hệ thống
    const stored = localStorage.getItem('darkMode')
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    
    const shouldBeDark = stored === 'true' || (!stored && prefersDark)
    setIsDark(shouldBeDark)
    document.documentElement.classList.toggle('dark', shouldBeDark)
  }, [])

  const toggle = () => {
    const newValue = !isDark
    setIsDark(newValue)
    localStorage.setItem('darkMode', String(newValue))
    document.documentElement.classList.toggle('dark', newValue)
  }

  return [isDark, toggle]
}

// Sử dụng
function Header() {
  const [isDark, toggleDark] = useDarkMode()

  return (
    <header className="flex justify-between items-center p-4">
      <h1>Portfolio của tôi</h1>
      <button 
        onClick={toggleDark}
        className="p-2 rounded-lg bg-slate-200 dark:bg-slate-700"
        aria-label="Chuyển đổi giao diện tối"
      >
        {isDark ? '☀️' : '🌙'}
      </button>
    </header>
  )
}

<!-- pages/_document.js (Next.js) hoặc index.html (Vite/CRA) -->
<head>
  <script>
    // Chạy đồng bộ, chặn render để tránh nháy
    (function() {
      const stored = localStorage.getItem('darkMode')
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
      if (stored === 'true' || (!stored && prefersDark)) {
        document.documentElement.classList.add('dark')
      }
    })()
  </script>
</head>

/* Hiệu ứng gợn sóng kiểu Material Design */
.ripple-button {
  position: relative;
  overflow: hidden;
  padding: 1rem 2rem;
  background: #06B6D4;
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.ripple-button:hover {
  background: #0891B2;
}

/* Hiệu ứng vòng tròn gợn sóng */
.ripple-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
  opacity: 0;
}

.ripple-button:active::after {
  width: 300px; /* lớn hơn nút */
  height: 300px;
  opacity: 1;
  transition: 0s; /* tức thì khi bấm */
}

/* Tắt hiệu ứng cho người dùng cần */
@media (prefers-reduced-motion: reduce) {
  .ripple-button::after {
    display: none;
  }
}

import { motion } from 'framer-motion'

// Thẻ với hiệu ứng khi di chuột
export function ProjectCard({ title, image, tags }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }} // trạng thái ban đầu
      whileInView={{ opacity: 1, y: 0 }} // khi cuộn vào vùng nhìn thấy
      viewport={{ once: true }} // chỉ chạy hiệu ứng 1 lần
      transition={{ duration: 0.4, ease: 'easeOut' }}
      whileHover={{ y: -8, transition: { duration: 0.2 } }} // nâng lên khi di chuột
      className="bg-white dark:bg-dark-surface rounded-xl overflow-hidden cursor-pointer"
    >
      {/* Ảnh phóng to khi di chuột */}
      <div className="overflow-hidden">
        <motion.img
          src={image}
          alt={title}
          whileHover={{ scale: 1.05 }}
          transition={{ duration: 0.3 }}
          className="w-full h-48 object-cover"
        />
      </div>

      <div className="p-6">
        <h3 className="text-xl font-bold mb-3">{title}</h3>
        <div className="flex gap-2 flex-wrap">
          {tags.map((tag, i) => (
            <motion.span
              key={tag}
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: i * 0.1 }} // hiệu ứng lần lượt
              className="px-3 py-1 bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300 rounded-full text-sm"
            >
              {tag}
            </motion.span>
          ))}
        </div>
      </div>
    </motion.div>
  )
}

// Thành phần khung xương với hiệu ứng lấp lánh
export function ArticleSkeleton() {
  return (
    <div className="animate-pulse"> {/* hiệu ứng nhấp nháy có sẵn của Tailwind */}
      <div className="h-48 bg-slate-200 dark:bg-slate-700 rounded-lg mb-4"></div>
      <div className="h-6 bg-slate-200 dark:bg-slate-700 rounded w-3/4 mb-3"></div>
      <div className="h-4 bg-slate-200 dark:bg-slate-700 rounded w-full mb-2"></div>
      <div className="h-4 bg-slate-200 dark:bg-slate-700 rounded w-5/6"></div>
    </div>
  )
}

// Sử dụng khi lấy dữ liệu
function BlogList() {
  const { data, isLoading } = useQuery('articles', fetchArticles)

  if (isLoading) {
    return (
      <div className="grid grid-cols-3 gap-6">
        {[1, 2, 3].map(i => <ArticleSkeleton key={i} />)}
      </div>
    )
  }

  return (
    <div className="grid grid-cols-3 gap-6">
      {data.map(article => <ArticleCard key={article.id} {...article} />)}
    </div>
  )
}

<!-- JSON-LD schema cho bài blog -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Xu hướng thiết kế website 2026",
  "image": [
    "https://yoursite.com/hero-image-16x9.jpg",
    "https://yoursite.com/hero-image-4x3.jpg"
  ],
  "author": {
    "@type": "Person",
    "name": "Tên của bạn",
    "url": "https://yoursite.com/about"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Tên website",
    "logo": {
      "@type": "ImageObject",
      "url": "https://yoursite.com/logo.png"
    }
  },
  "datePublished": "2026-01-15",
  "dateModified": "2026-01-20"
}
</script>