https://github.com/eshanized/eshanized.github.io
eshanized portfolio showcasing web development projects, skills, and experiences. Built with React, Tailwind and TypeScript for a responsive design.
https://github.com/eshanized/eshanized.github.io
Last synced: 10 months ago
JSON representation
eshanized portfolio showcasing web development projects, skills, and experiences. Built with React, Tailwind and TypeScript for a responsive design.
- Host: GitHub
- URL: https://github.com/eshanized/eshanized.github.io
- Owner: eshanized
- License: mit
- Created: 2024-10-26T19:15:22.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-03T16:21:23.000Z (over 1 year ago)
- Last Synced: 2025-02-03T17:25:28.074Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://eshanized.github.io/
- Size: 945 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Eshanized Web Portfolio 🚀
[](https://nextjs.org/)
[](https://www.typescriptlang.org/)
[](https://tailwindcss.com/)
[](https://www.framer.com/motion/)
[](https://eshanized.github.io/)
[](https://opensource.org/licenses/MIT)
> 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:
```bash
git clone https://github.com/eshanized/eshanized_web.git
cd eshanized_web
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
### Production Build
```bash
# 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**
```bash
npm run deploy
```
This will:
- Build the project
- Push to gh-pages branch
- Update the live site
2. **Manual Deployment**
```bash
./deploy.sh
```
### Custom Domain Setup
- Primary domain: [eshanized.github.io](https://eshanized.github.io)
- Custom domain: [eshanized.is-a.dev](https://eshanized.is-a.dev)
## 🔧 Configuration
### Environment Variables
Create a `.env.local` file:
```env
NEXT_PUBLIC_GITHUB_USERNAME=your_username
NEXT_PUBLIC_SITE_URL=your_site_url
```
### Next.js Configuration
```javascript
// next.config.js
module.exports = {
images: {
domains: ['github.com'],
},
// ... other config
}
```
## 🤝 Contributing
1. Fork the repository
2. Create your feature branch
```bash
git checkout -b feature/AmazingFeature
```
3. Commit your changes
```bash
git commit -m 'Add some AmazingFeature'
```
4. Push to the branch
```bash
git push origin feature/AmazingFeature
```
5. Open a Pull Request
## 📝 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- [Next.js Team](https://nextjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Framer Motion](https://www.framer.com/motion/)
- [Shadcn UI](https://ui.shadcn.com/)
- [Lucide Icons](https://lucide.dev/)
## 📞 Contact
Eshan Roy - [@eshanized](https://twitter.com/eshanized)
Project Link: [https://github.com/eshanized/eshanized_web](https://github.com/eshanized/eshanized_web)
---
Made with ❤️ by Eshan Roy