Win Yan Naing Htut - Portfolio Website

This is the personal portfolio website of Win Yan Naing Htut, designed with an Ubuntu 20.04 desktop simulation theme. Built using Next.js and Tailwind CSS, it showcases skills, certifications, and professional information in an interactive desktop environment.

🚀 Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn

Installation

1. Clone this repository:

   git clone <repository-url>
   cd winyan

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up environment variables (optional):

   • Copy .env.local to create your environment file
   • Add your Google Analytics and EmailJS credentials

4. Run the development server:

   npm run dev
   # or
   yarn dev

5. Open http://localhost:3000 in your browser

Building for Production

npm run build
# or
yarn build

NEXT_PUBLIC_USER_ID=your_emailjs_user_id
NEXT_PUBLIC_TEMPLATE_ID=template_fqqqb9g
NEXT_PUBLIC_SERVICE_ID=your_emailjs_service_id
NEXT_PUBLIC_GA_TRACKING_ID=your_google_analytics_id (optional)

Replace the placeholder values with your actual EmailJS credentials.

🛠️ Tech Stack

• Framework: Next.js
• Styling: Tailwind CSS
• Contact Form: EmailJS
• Analytics: Google Analytics (optional)
• Theme: Ubuntu 20.04 Desktop Simulation

📁 Project Structure

components/
├── apps/           # Desktop applications (About, VS Code, etc.)
├── base/           # Base UI components
├── context menus/  # Right-click context menus
├── screen/         # Main screen components
└── util components/# Utility components

pages/              # Next.js pages
public/             # Static assets
│   └── blog/       # Blog posts (Markdown files)
│       └── posts/   # Blog post markdown files
styles/             # Global styles
scripts/            # Build scripts (e.g., blog generation)

✨ Features

• Interactive Ubuntu desktop simulation
• Responsive design
• Contact form integration
• Resume download functionality
• Skills and certifications showcase
• Professional work experience display
• Blog system with Markdown support for technical posts

📜 Available Scripts

npm run dev

Runs the development server on http://localhost:3000. The page will reload automatically when you make changes.

npm run build

Builds the application for production. The build is optimized and minified.

npm start

Runs the built application in production mode.

npm run lint

Runs ESLint to check for code quality issues.

Blog Management

Adding New Blog Posts

To create a new blog post, add a markdown file to public/blog/posts/ with the following format:

---
title: Your Post Title
date: YYYY-MM-DD
excerpt: A brief description.
---

# Your Post Title

Your content goes here. You can use standard markdown formatting.

The blog system automatically:

• Parses front matter (title, date, excerpt)
• Generates posts.json during build
• Renders posts in the Blog app with full markdown support
• Sorts posts by date (newest first)

🚀 Deployment

This Next.js application can be deployed on various platforms:

• Vercel (recommended): Deploy directly from GitHub repository
• Netlify: Build command: npm run build, Publish directory: out
• GitHub Pages: Requires static export configuration

For static export, add the following to next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true
  }
}
module.exports = nextConfig

Credits

This portfolio website is based on the amazing Ubuntu desktop simulation template originally created by Vivek Patel. The original project can be found at:

• Original Repository: vivek9patel/vivek9patel.github.io
• Original Portfolio: vivek9patel.github.io

Special thanks to Vivek Patel for creating this innovative Ubuntu desktop simulation concept and making it open source for the community to use and adapt.

📝 License

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

📞 Contact

Win Yan Naing Htut

• LinkedIn: linkedin.com/in/wynh
• GitHub: github.com/WinYanNaingHtut
• Email: winyannainghtut98@gmail.com