https://github.com/amaansyed27/osfolio
OSFOLIO is an interactive operating system-themed portfolio website for me.
https://github.com/amaansyed27/osfolio
css modern-ui modern-web opera portfolio portfolio-site portfolio-website postcss react react-components react-hooks react-query react-router react-router-dom reactjs shad tai taiwindcss verce web-development
Last synced: 3 months ago
JSON representation
OSFOLIO is an interactive operating system-themed portfolio website for me.
- Host: GitHub
- URL: https://github.com/amaansyed27/osfolio
- Owner: amaansyed27
- Created: 2025-05-14T20:06:11.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-05-15T19:20:20.000Z (5 months ago)
- Last Synced: 2025-05-15T20:27:33.105Z (5 months ago)
- Topics: css, modern-ui, modern-web, opera, portfolio, portfolio-site, portfolio-website, postcss, react, react-components, react-hooks, react-query, react-router, react-router-dom, reactjs, shad, tai, taiwindcss, verce, web-development
- Language: TypeScript
- Homepage: https://amaansyed27.tech
- Size: 2.57 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-SEO.md
Awesome Lists containing this project
README
# OSFOLIO - OS-themed Portfolio with Advanced SEO
OSFOLIO is an interactive operating system-themed portfolio website built with React, TypeScript, and Tailwind CSS. It simulates a desktop environment with apps representing different sections of a personal portfolio, complete with windows, taskbar, and desktop icons.
## Features
- 🖥️ Complete OS-style interface with desktop icons, taskbar, and window management
- 🪟 Draggable, resizable, and minimizable windows with macOS-inspired controls
- 📱 Responsive design with dedicated mobile UI for smaller devices
- 🚀 Smooth animations and transitions using Framer Motion
- 🎨 Beautiful UI components built with shadcn/ui and Radix UI
- 💬 Interactive chat application with multi-user support
- 🤖 AI assistant (OSCAR) for answering questions about the portfolio owner
- 🌙 Dark mode support with custom theming
- 💻 Boot screen simulation for an immersive experience
- 🎯 Taskbar with active app tracking and quick launch capabilities
- 🔍 Comprehensive SEO optimization for better search engine visibility
## Applications
OSFOLIO includes several "applications" that showcase different aspects of the portfolio:
- **About** - Terminal-style interface with personal information presented as command outputs
- **Experience** - Professional work history at Android Club, makemycards.com, and more
- **Education** - Academic background at VIT and certifications from various institutions
- **Skills** - Technical skills with visual level indicators for Android, Kotlin, Figma, and more
- **Projects** - Showcase of work including Dataweave, Hola, Sentinel, and Joto with details
- **Achievements** - Awards and recognitions including Android Club Winter of Code win
- **Contact** - Form to get in touch with links to social profiles and contact information
- **Chat** - Interactive multi-user chat application with real-time messaging
- **Oscar** - AI assistant that answers questions about Amaan's background and skills
## Technical Architecture
### Core Technologies
- **React 18** - Modern UI library with hooks for state management
- **TypeScript** - Type-safe JavaScript for improved developer experience
- **Tailwind CSS** - Utility-first CSS framework for rapid styling
- **Framer Motion** - Animation library for fluid transitions
- **shadcn/ui** - Reusable component collection based on Radix UI
- **React Router** - Navigation and routing between pages
- **Vite** - Fast build tool and dev server
### UI Components
- **Radix UI Primitives** - Accessible components including toast, dialog, and menu
- **Custom Window Component** - Draggable and resizable windows with animations
- **Taskbar** - Dynamic app management with open app tracking
- **Desktop Icons** - Interactive launch icons for applications
- **Terminal Emulator** - Command-line style interface for About section
- **Responsive Layout System** - Adapts between desktop and mobile views
## SEO Optimization
OSFOLIO includes comprehensive SEO optimizations to achieve high search engine rankings:
### Basic SEO
- ✅ Optimized meta tags (title, description, keywords)
- ✅ Custom Open Graph and Twitter card metadata
- ✅ Responsive design for all devices
- ✅ Canonical URL implementation
- ✅ Sitemap.xml for better indexing
### Advanced SEO
- ✅ Structured data with JSON-LD for rich snippets
- ✅ PWA support with offline capabilities
- ✅ Performance optimization with code splitting
- ✅ Asset preloading for critical resources
- ✅ Custom SEO component for individual pages
- ✅ robots.txt with crawler-specific directives
- ✅ Search engine crawler detection
### Technical SEO
- ✅ Optimized HTTP headers for security and caching
- ✅ URL canonicalization via redirects
- ✅ Custom 404 page with SEO best practices
- ✅ Optimized build with tree shaking and minification
- ✅ Humans.txt with attribution information
## Domain Setup
- Primary domain: https://amaansyed27.tech/
- Redirects from:
- https://amaansyed27.vercel.app/
- https://osfolio.vercel.app/
- https://www.amaansyed27.tech/
## Development
### Prerequisites
- Node.js 16+
- npm or yarn
### Getting Started
```bash
# Clone the repository
git clone https://github.com/amaansyed27/osfolio.git
# Navigate to project directory
cd osfolio
# Install dependencies
npm install
# Start development server
npm run dev
```
### Building for Production
```bash
# Generate production build with SEO optimizations
npm run build
```
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Author
**Amaan Syed**
- GitHub: [@amaansyed27](https://github.com/amaansyed27)
- Website: [amaansyed27.tech](https://amaansyed27.tech)