Personal Website

A modern, responsive personal portfolio website showcasing mobile and web development work. Built with React, TypeScript, and Vite, featuring internationalization support and optimized for GitHub Pages deployment.

What It Is

A single-page application (SPA) portfolio website that includes:

• Home Page: Hero banner, about section, services showcase, and contact information
• Privacy Policies Page: Collection of privacy policy documents for various projects
• Responsive Design: Mobile-first approach with separate mobile and desktop navigation
• Internationalization: Full support for English and Turkish languages

Technologies Used

Core Stack

• React 18.2.0: UI library with hooks and functional components
• TypeScript 5.2.2: Type-safe JavaScript
• Vite 7.3.1: Build tool and development server
• React Router DOM 6.26.1: Client-side routing

Styling

• SCSS/Sass 1.77.8: CSS preprocessor with modular architecture
• Tailwind CSS 3.4.10: Utility-first CSS framework
• PostCSS 8.4.41: CSS processing with Autoprefixer

Internationalization

• i18next 25.8.0: Internationalization framework
• react-i18next 16.5.4: React bindings for i18next
• i18next-browser-languagedetector 8.2.0: Automatic language detection

UI Components

• Font Awesome: Icon library (@fortawesome/react-fontawesome, @fortawesome/free-solid-svg-icons)
• hamburger-react 2.5.2: Animated hamburger menu component

Development Tools

• ESLint: Code linting with TypeScript support
• gh-pages 6.1.1: GitHub Pages deployment automation

Architecture & Patterns

Project Structure

src/
├── components/          # Reusable UI components
├── pages/              # Page-level components
├── layouts/            # Layout wrappers
├── hooks/              # Custom React hooks
├── i18n/               # Internationalization configuration
├── locales/            # Translation files (en.json, tr.json)
├── styles/             # SCSS modules organized by feature
│   ├── base/           # Base styles (colors, fonts, typography)
│   ├── components/     # Component-specific styles
│   ├── layout/         # Layout styles
│   └── pages/          # Page-specific styles
├── utils/              # Utility functions and workers
└── data/               # Static data files

Design Patterns

Component Architecture

• Functional Components: All components use React hooks
• Component Composition: Reusable components with clear separation of concerns
• Lazy Loading: Code splitting with React.lazy() and Suspense for route-based chunks

Styling Patterns

• BEM Naming Convention: Block-Element-Modifier methodology for CSS classes
• SCSS Modularity: Separate SCSS files per component/page
• Utility-First: Tailwind CSS for rapid styling alongside SCSS modules

State Management

• Local State: React hooks (useState, useEffect) for component-level state
• Custom Hooks: Reusable logic extraction (useLanguage, useScrollToSection)
• Unidirectional Data Flow: Props down, events up pattern

Code Organization

• Feature-Based Structure: Components, styles, and related code grouped by feature
• Separation of Concerns: Clear boundaries between UI, business logic, and data
• Type Safety: TypeScript interfaces and types throughout

Routing

• Client-Side Routing: React Router with BrowserRouter
• Route-Based Code Splitting: Lazy-loaded routes for optimal performance
• Suspense Boundaries: Loading states for async route components

Internationalization Pattern

• JSON-Based Translations: Separate locale files for each language
• Browser Language Detection: Automatic language selection based on user preferences
• Hook-Based Access: useLanguage custom hook for translation access

Performance Optimizations

• Font Preloading: Critical fonts preloaded in HTML
• Worker Threads: Background processing for code flow animations (codeFlowWorker.ts)
• Optimized Assets: Fonts and images organized in public directory

Key Libraries & Dependencies

Production Dependencies

• react & react-dom: Core React library
• react-router-dom: Routing solution
• i18next & react-i18next: Internationalization
• hamburger-react: Mobile menu component
• @fortawesome/react-fontawesome: Icon components

Development Dependencies

• @vitejs/plugin-react: Vite React plugin
• typescript: TypeScript compiler
• @typescript-eslint/*: TypeScript ESLint rules
• eslint: Code linting
• sass: SCSS compiler
• tailwindcss: Utility CSS framework
• postcss & autoprefixer: CSS processing
• gh-pages: Deployment automation

Code Quality

• TypeScript: Full type coverage
• ESLint: Strict linting rules with TypeScript support
• BEM Convention: Consistent CSS class naming
• Component Reusability: Modular, reusable component design