A practice project for honing frontend development skills with modern web technologies.
This portfolio website was created as a practice project to improve and demonstrate proficiency in:
- Modern React development
- Luxury minimalist UI/UX design
- Animation with Framer Motion
- Responsive web design
- Tailwind CSS styling
Inspired by luxury brands like Apple, Porsche, and high-end fashion houses, this portfolio embraces:
- Minimalism: Clean layouts with generous whitespace
- Typography: Refined font weights and letter-spacing
- Monochrome Palette: Black, white, and subtle grays
- Subtle Animations: Smooth, purposeful transitions
- Editorial Style: Magazine-inspired project presentations
- React - UI library
- Vite - Build tool and dev server
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Animation library
- Lucide React - Icon system
chuthamat-portfolio/
├── src/
│ ├── components/
│ │ ├── AppleNavbar.jsx # Minimal navigation bar
│ │ ├── AppleHero.jsx # Hero section with stats
│ │ ├── BentoProjects.jsx # Project showcase grid
│ │ └── AppleSkills.jsx # Skills display
│ ├── App.jsx # Main application
│ └── index.css # Global styles
├── public/
│ └── image/ # Project images
└── package.json
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository
git clone https://github.com/phraewchuthamat/chuthamat-portfolio.git
cd chuthamat-portfolio- Install dependencies
npm install- Run development server
npm run dev- Open browser at
http://localhost:5173
npm run buildThe optimized files will be in the dist/ folder.
- Subtle grid background
- Refined typography with varied font weights
- Minimal badge and stats display
- Clean CTA buttons
- Grayscale images that reveal color on hover
- Editorial-style category and year labels
- Minimal overlay with square arrow icons
- Responsive bento grid layout
- Grid layout with 1px borders
- Categorized technical skills
- Black background soft skills section
- Hover states on skill items
- Sticky navbar with backdrop blur
- Uppercase tracking for luxury feel
- Smooth scroll behavior
- Minimal mobile menu
Through this project, I practiced:
- Component Architecture: Building reusable React components
- Animation Timing: Using Framer Motion with custom easing curves
- Responsive Design: Mobile-first approach with Tailwind
- Design Systems: Creating consistent spacing and typography
- Performance: Optimizing images and animations
- Accessibility: Semantic HTML and keyboard navigation
- Frontend Development: React, JavaScript (ES6+)
- Styling: Tailwind CSS, Custom CSS
- Animation: Framer Motion
- Design: UI/UX principles, Typography, Color theory
- Tools: Git, Vite, npm
This project is created for practice and learning purposes.
Chuthamat Buaban - Frontend Developer
Transitioning from Electrical Engineering to Web Development