🖥️ Windows 95 Portfolio

A nostalgic portfolio website built with React and TypeScript, featuring a Windows 95-style interface with draggable windows and authentic UI elements.

✨ Features

• 🖼️ Authentic Windows 95 UI - Complete with title bars, buttons, and styling
• 🖱️ Draggable Windows - Click and drag windows around the desktop
• 📱 Responsive Design - Works on desktop, tablet, and mobile
• ⚡ Static Site - No backend required, fast loading
• 🎨 Custom Components - About, Projects, Blog, Resume, Socials, and Contact windows
• 📝 TypeScript - Full type safety and better development experience

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/yourusername/windows95-portfolio.git
   cd windows95-portfolio

2. Install dependencies

   cd client
   npm install

3. Start development server

   npm start

4. Open your browser Navigate to http://localhost:3000

🛠️ Development

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Type checking
npm run type-check

Project Structure

windows95-portfolio/
├── client/                    # React application
│   ├── public/               # Static assets
│   ├── src/
│   │   ├── components/       # React components
│   │   │   ├── portfolio/   # Portfolio windows
│   │   │   └── ...
│   │   ├── data/            # Static JSON data
│   │   │   ├── about.json
│   │   │   ├── blog.json
│   │   │   ├── projects.json
│   │   │   ├── resume.json
│   │   │   └── socials.json
│   │   └── types/           # TypeScript definitions
│   └── package.json
├── vercel.json              # Vercel deployment config
├── netlify.toml             # Netlify deployment config
└── README.md

🎨 Customization

Personal Information

Edit the JSON files in client/src/data/ to customize your portfolio:

• about.json - Personal information and skills
• resume.json - Work experience, education, certifications
• projects.json - Your projects and portfolio items
• blog.json - Blog posts and articles
• socials.json - Social media links and contact information

Styling

The Windows 95 styling is defined in:

• client/src/App.css - Main desktop and window styles
• client/src/components/Window.css - Window-specific styles
• client/src/components/portfolio/PortfolioWindow.css - Portfolio window styles

🚀 Deployment

Live Site: https://super-banoffee-66f0cb.netlify.app

Netlify (Current Setup)

✅ Automatically Deployed - Connected to GitHub with CI/CD

1. Automatic Deployments

   • Every push to main branch triggers a new deployment
   • Pull requests get preview deployments
   • Build logs and deployment status in Netlify dashboard

2. Manual Deployment

   npm run build
   netlify deploy --prod --dir=client/build

Alternative: Vercel

1. Connect to Netlify

   • Go to netlify.com
   • Connect your GitHub repository
   • Netlify will use the netlify.toml configuration

2. Deploy

   • Click "Deploy site"
   • Your portfolio will be live!

GitHub Pages

1. Install gh-pages

   cd client
   npm install --save-dev gh-pages

2. Add deploy script to package.json

   "scripts": {
     "deploy": "gh-pages -d build"
   }

3. Deploy

   npm run build
   npm run deploy

Manual Deployment

1. Build the project

   cd client
   npm run build

2. Upload the build folder to any static hosting service:

   • AWS S3 + CloudFront
   • Firebase Hosting
   • DigitalOcean Spaces
   • Any web server

🎮 How to Use

1. Desktop Icons - Double-click to open windows
2. Window Controls - Use the title bar buttons to minimize, maximize, or close
3. Dragging - Click and drag the title bar to move windows
4. Start Menu - Click the Start button to access all windows
5. Taskbar - See open windows and switch between them

🛠️ Technologies Used

• React 19.1.1 - Modern React with latest features
• TypeScript 4.9.5 - Type safety and better development experience
• CSS3 - Custom Windows 95 styling and animations
• JSON - Static data storage (no database needed)

📝 License

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

🤝 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

📞 Support

If you have any questions or need help, feel free to:

• Open an issue on GitHub
• Contact me through the social links in the portfolio
• Check the documentation

🙏 Acknowledgments

• Inspired by the classic Windows 95 operating system
• Built with modern web technologies for the best of both worlds
• Thanks to the React and TypeScript communities

---

Made with ❤️ and nostalgia for the golden age of computing