Portfolio Website Techniques Overview

Introduction

This portfolio website is built using modern web development techniques. Here's a detailed breakdown of each technology and approach used.

1. React + Vite

The frontend is built with React, a popular JavaScript library for building user interfaces. We use Vite as the build tool because it's extremely fast and provides instant server start.

Key Benefits:

2. Tailwind CSS

We use Tailwind CSS for styling - a utility-first CSS framework that allows rapid UI development.

Why Tailwind?

3. Custom Hooks

We created a custom hook called `usePortfolioData` to handle data fetching across the application.

export const usePortfolioData = (fetchFunction) => {

const [data, setData] = useState(null)

const [loading, setLoading] = useState(true)

const [error, setError] = useState(null)

// ... fetch logic

}

This pattern allows reusable data fetching logic across all components.

4. Internationalization (i18n)

The website supports 3 languages: English, Thai, and Chinese. We implemented a custom i18n solution using context and localStorage.

Features:

5. Service Layer Pattern

We separated API calls from components using a service layer:

This makes the code more maintainable and testable.

6. Neo-Brutalism Design

The UI follows Neo-Brutalism style with:

7. Component Architecture

We organized components into:

Conclusion

These techniques combine to create a fast, maintainable, and visually distinctive portfolio website.