An open API service indexing awesome lists of open source software.

https://github.com/siraajul/portfolio_tsx

🚀 Full Stack Developer passionate about crafting scalable web apps with React, TypeScript & Node.js | Open to collaborate on innovative projects 💻
https://github.com/siraajul/portfolio_tsx

nextjs react reactr tailwindcss vite

Last synced: about 2 months ago
JSON representation

🚀 Full Stack Developer passionate about crafting scalable web apps with React, TypeScript & Node.js | Open to collaborate on innovative projects 💻

Awesome Lists containing this project

README

        

# Portfolio Website 🚀

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)

## 📌 Overview

Welcome to my portfolio website! This modern, responsive web application showcases my work, skills, and professional journey. Built with React, TypeScript, and Tailwind CSS, it demonstrates my commitment to using current web technologies and best practices.

## ✨ Features

### 🎨 Modern UI/UX
- Clean, minimalist design
- Smooth animations and transitions
- Fully responsive layout for all devices
- Dark/Light mode toggle

### 💼 Project Showcase
- Featured projects with live demos
- Project descriptions and tech stacks
- GitHub repository links
- Project screenshots and previews

### 📱 Interactive Components
- Dynamic navigation menu
- Contact form with validation
- Skill progress indicators
- Social media integration

## 🛠 Tech Stack

### Frontend
- React 18
- TypeScript
- Tailwind CSS
- React Router v6

### Development Tools
- Vite
- ESLint
- Prettier
- Husky
- PostCSS

## 🚀 Getting Started

### Prerequisites
- Node.js (v14 or higher)
- npm or yarn

### Installation

1. Clone the repository
```bash
git clone https://github.com/siraajul/portfolio.git
```

2. Navigate to project directory
```bash
cd portfolio
```

3. Install dependencies
```bash
npm install
# or
yarn install
```

4. Start development server
```bash
npm run dev
# or
yarn dev
```

5. Open [http://localhost:3000](http://localhost:3000) in your browser

## 📦 Build & Deploy

### Build for production
```bash
npm run build
# or
yarn build
```

### Preview production build
```bash
npm run preview
# or
yarn preview
```

## 📁 Project Structure

```
portfolio/
├── public/
│ ├── assets/
│ └── ...
├── src/
│ ├── components/
│ ├── App.tsx
│ └── main.tsx
├── .eslintrc.js
├── .prettierrc
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts
```

## 🔧 Configuration

### Environment Variables
Create a `.env` file in the root directory:

```env
VITE_API_URL=your_api_url
[email protected]
```

### Tailwind Configuration
Customize your Tailwind setup in `tailwind.config.js`:

```javascript
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
// Your custom configuration
},
},
plugins: [],
};
```

## 📝 Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run lint` - Run ESLint
- `npm run format` - Format code with Prettier
- `npm run type-check` - Run TypeScript type checking

## 🤝 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](LICENSE) file for details.

## 📧 Contact

Your Name - [@siraajul](https://twitter.com/siraaajul) - [email protected]

Project Link: [https://github.com/yourusername/portfolio](https://github.com/siraajul/portfolio)

---

⭐️ Star this repo if you find it helpful!