Eshanized Web Portfolio 🚀

An elegant and interactive portfolio website featuring OneUI-style design, built with modern web technologies.

🌟 Features

• 📱 OneUI-inspired design and interactions
• 🌓 Dark/Light mode with system preference sync
• 📊 Interactive app-like components
• 🎨 Beautiful animations and transitions
• 📱 Fully responsive design
• ⚡ Optimized performance
• 🔒 TypeScript for type safety
• 🎯 SEO optimized

🛠️ Tech Stack

Core Technologies

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• UI Components: Shadcn UI
• State Management: React Context
• Icons: Lucide Icons
• Deployment: GitHub Pages

Key Features Implementation

• Theme Management: next-themes
• Code Formatting: Prettier
• Linting: ESLint
• Git Hooks: Husky
• Package Management: npm

🚀 Getting Started

Prerequisites

• Node.js (v18.0.0 or higher)
• npm (v8.0.0 or higher)

Installation

1. Clone the repository:

git clone https://github.com/eshanized/eshanized_web.git
cd eshanized_web

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

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

Production Build

# Create optimized production build
npm run build

# Start production server
npm start

📁 Project Structure

eshanized_web/
├── app/                   # Next.js app directory
│   ├── layout.tsx        # Root layout
│   └── page.tsx          # Home page
├── components/           # React components
│   ├── oneui/            # OneUI-style components
│   │   ├── apps/         # Individual app components (Settings, Camera, etc.)
│   │   └── OneUILayout.tsx # Main layout for OneUI
│   ├── macos/           # macOS-style components
│   ├── ui/              # Shared UI components
│   └── providers/       # Context providers
├── lib/                 # Utility functions
├── public/              # Static assets
├── styles/             # Global styles
└── types/              # TypeScript types

🎨 Design System

OneUI Design Implementation

• Custom OneUI-style components
• System-native animations
• Authentic OneUI interactions
• Dark mode support
• Blur effects
• OneUI typography

Component Categories

1. Navigation Components

   • OneUI-style headers
   • Tab bars
   • Navigation bars

2. Interactive Elements

   • Buttons
   • Switches
   • Form inputs
   • Cards

3. Layout Components

   • Grid systems
   • Lists
   • Containers

📱 Apps Implementation

Built-in Applications

1. Settings App

   • Theme management
   • System preferences
   • User profile

2. Social Apps

   • Twitter integration
   • Facebook features
   • Instagram components
   • Dev.to articles

3. Utility Apps

   • Clock with multiple features
   • Calculator
   • Weather information

🔄 State Management

• Context API for global state
• Theme context for appearance
• Navigation state management
• App-specific state handling

🚀 Deployment

GitHub Pages Deployment

1. Automatic Deployment

   npm run deploy

   This will:

   • Build the project
   • Push to gh-pages branch
   • Update the live site

2. Manual Deployment

   ./deploy.sh

Custom Domain Setup

• Primary domain: eshanized.github.io
• Custom domain: eshanized.is-a.dev

🔧 Configuration

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_GITHUB_USERNAME=your_username
NEXT_PUBLIC_SITE_URL=your_site_url

Next.js Configuration

// next.config.js
module.exports = {
  images: {
    domains: ['github.com'],
  },
  // ... other config
}

🤝 Contributing

1. Fork the repository
2. Create your feature branch

   git checkout -b feature/AmazingFeature

3. Commit your changes

   git commit -m 'Add some AmazingFeature'

4. Push to the branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js Team
• Tailwind CSS
• Framer Motion
• Shadcn UI
• Lucide Icons

📞 Contact

Eshan Roy - @eshanized

Project Link: https://github.com/eshanized/eshanized_web

---

Made with ❤️ by Eshan Roy