Portfolio V2

A modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS. Features smooth animations, dark mode, and a fully functional contact form.

✨ Features

• 🎨 Modern, clean UI design with gradient accents
• 🌙 Dark/Light mode toggle
• 📱 Fully responsive (mobile-first design)
• ✉️ Working contact form with EmailJS integration
• 🎭 Smooth animations using Framer Motion
• ⚡ Fast build and hot reload with Vite
• 🎯 TypeScript for type safety
• 📊 Vercel Analytics integration
• 🎨 Tailwind CSS v4 for styling

🛠️ Tech Stack

• Framework: React 19
• Language: TypeScript
• Build Tool: Vite 6
• Styling: Tailwind CSS v4
• Animations: Framer Motion
• Icons: Lucide React
• Email Service: EmailJS
• Analytics: Vercel Analytics

⚙️ Environment Variables

Create a .env file in the root directory:

# EmailJS Configuration
VITE_EMAILJS_PUBLIC_KEY=your_public_key
VITE_EMAILJS_SERVICE_ID=your_service_id
VITE_EMAILJS_TEMPLATE_ID=your_template_id

Note: These variables must start with VITE_ to be accessible in the browser.

🚀 Running Locally

# Development server (http://localhost:5173)
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint code
npm run lint

📁 Project Structure

src/
├── componets/          # React components
│   ├── ui/            # Reusable UI components
│   ├── NavBar.tsx     # Navigation bar
│   ├── Hero.tsx       # Landing section
│   ├── About.tsx      # About section
│   ├── Projects.tsx   # Projects showcase
│   ├── Skills.tsx     # Skills & expertise
│   ├── Experience.tsx # Work experience
│   ├── Education.tsx  # Education & certifications
│   ├── Languages.tsx  # Language proficiency
│   ├── Contact.tsx    # Contact form
│   └── Footer.tsx     # Footer
├── constants/         # Centralized data
├── types/            # TypeScript type definitions
├── assets/           # Images and static files
└── App.tsx           # Main app component

🌐 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import project on Vercel
3. Add environment variables in Settings → Environment Variables
4. Deploy automatically on push

Update Personal Information

Edit src/constants/personal.ts:

export const PERSONAL_INFO = {
  name: "Your Name",
  title: "Your Title",
  // ...
};

Add Projects

Edit src/constants/projects.ts:

export const PROJECTS = [
  {
    title: "Project Name",
    description: "Project description",
    // ...
  },
];

Modify Styles

• Tailwind configuration: tailwind.config.js
• Global styles: src/index.css
• Component styles: inline Tailwind classes

📄 License

This project is open source and available under the MIT License.

👤 Author

Thanapoom Santhong

• GitHub: @Poomsanthong
• LinkedIn: Thanapoom Santhong

🙏 Acknowledgments

• Tailwind CSS
• Framer Motion
• Lucide Icons
• EmailJS
• Vite

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs["recommended-typescript"],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
]);