Portfolio Uno

A modern, responsive portfolio website showcasing the work of Sengphachanh Chanthavong (tyecode), a passionate Front-end Developer. Built with Next.js 14 and featuring a unique Matrix-style animated background, dark theme, and smooth section transitions.

✨ Features

• Matrix Background Animation: Custom Canvas-based Matrix rain effect
• Responsive Design: Optimized for all device sizes with mobile-first approach
• Dark Theme: Sleek dark interface with custom color scheme
• Section Navigation: Smooth transitions between About, Experience, and Projects sections
• Social Media Integration: Direct links to GitHub, LinkedIn, Facebook, and email
• SEO Optimized: Complete meta tags, Open Graph, and sitemap
• Testing: Unit tests with Jest and React Testing Library
• Code Quality: ESLint and Prettier for consistent code formatting

🛠️ Tech Stack

Core Framework

• Next.js 14 - React framework with App Router
• TypeScript - Type safety and developer experience
• React 18 - UI library with latest features

Styling & UI

• Tailwind CSS - Utility-first CSS framework
• NextUI - Modern React UI library
• shadcn/ui - Re-usable component library
• Framer Motion - Animation library
• FontAwesome - Icon library
• Radix UI - Unstyled, accessible UI primitives

State Management & Utilities

• Zustand - Lightweight state management
• clsx & tailwind-merge - Conditional className utilities
• class-variance-authority - Component variant API

Development Tools

• ESLint - Code linting
• Prettier - Code formatting
• Jest & React Testing Library - Testing framework

📁 Project Structure

portfolio-uno/
├── app/                          # Next.js App Router
│   ├── (root)/                   # Route group
│   │   ├── layout.tsx           # Root layout
│   │   └── page.tsx             # Home page
│   ├── globals.css              # Global styles
│   ├── layout.tsx               # App layout
│   └── providers.tsx            # NextUI provider
├── components/                   # React components
│   ├── cards/                   # Card components
│   ├── sections/                # Page sections
│   ├── ui/                      # UI components
│   ├── header.tsx               # Main header
│   ├── footer.tsx               # Footer component
│   ├── matrix-background.tsx    # Matrix animation
│   └── navigation-bar.tsx       # Navigation
├── constants/                    # Configuration & data
│   ├── config.ts                # Site configuration
│   ├── experience.ts            # Work experience data
│   ├── nav-links.ts             # Navigation links
│   └── projects.ts              # Projects data
├── lib/                         # Utilities
│   └── utils.ts                 # Helper functions
├── stores/                      # Zustand stores
│   └── use-section-store.ts     # Section state management
└── __tests__/                   # Test files
    └── header.test.tsx          # Component tests

🚀 Getting Started

Prerequisites

• Node.js 18+ and pnpm (recommended) or npm

Installation

1. Clone the repository

git clone https://github.com/tyecode/portfolio-uno.git
cd portfolio-uno

2. Install dependencies

# Using pnpm (recommended)
pnpm install

# Using npm
npm install

3. Run the development server

# Using pnpm
pnpm dev

# Using npm
npm run dev

4. Open your browser

Navigate to http://localhost:3000 to see the application.

📜 Available Scripts

• dev - Start development server
• build - Build for production
• start - Start production server
• lint - Run ESLint and Prettier checks
• lint:eslint - Run ESLint only
• lint:prettier - Run Prettier check only
• fix - Auto-fix ESLint and Prettier issues
• fix:eslint - Auto-fix ESLint issues only
• fix:prettier - Auto-fix Prettier formatting

🎨 Customization

Site Configuration

Update personal information in constants/config.ts:

export const CONFIG = {
  url: 'https://your-domain.com/',
  name: 'Your Name',
  skill: 'Your Title',
  description: 'Your description...',
}

Theme Colors

Modify colors in tailwind.config.ts under the NextUI theme configuration.

Content Updates

• About Section: Update components/sections/about-section.tsx
• Projects: Modify constants/projects.ts
• Experience: Update constants/experience.ts
• Social Links: Edit the SocialMedia array in components/header.tsx

🚀 Deployment

This project is optimized for deployment on Vercel:

Other Platforms

The application can be deployed on any platform that supports Next.js:

• Netlify
• Railway
• DigitalOcean App Platform
• AWS Amplify

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

Licensed under the MIT License.

👨‍💻 Author

Sengphachanh Chanthavong (tyecode)

• Website: tyecode.dev
• GitHub: @tyecode
• LinkedIn: tyecode
• Email: [email protected]