Aqsa Saleem - Portfolio Website

A modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS. Features a dark mode theme and showcases projects, skills, and professional information.

🚀 Features

• Responsive Design: Works perfectly on desktop, tablet, and mobile devices
• Dark Mode: Toggle between light and dark themes with preference saving
• Smooth Animations: Scroll-based animations and smooth transitions
• Contact Form: Functional contact form with backend integration
• Modern Stack: Built with React 18, TypeScript, and Tailwind CSS
• Component Library: Uses shadcn/ui for consistent, accessible components

🛠️ Tech Stack

Frontend

• React 18 with TypeScript
• Tailwind CSS for styling
• Wouter for routing
• TanStack Query for state management
• React Hook Form for form handling
• Framer Motion for animations
• Lucide React for icons

Backend

• Express.js with TypeScript
• In-memory storage for development
• Zod for validation
• CORS enabled for cross-origin requests

Build Tools

• Vite for fast development and building
• ESBuild for production bundling
• PostCSS with Autoprefixer

📦 Installation

1. Clone the repository:

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

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and visit http://localhost:5000

🎨 Customization

Personal Information

Update the following files with your information:

• client/src/components/hero-section.tsx - Name, bio, and profile image
• client/src/components/about-section.tsx - About section content
• client/src/components/contact-section.tsx - Contact information
• client/src/components/footer.tsx - Footer details

Projects

Edit client/src/components/portfolio-section.tsx to add your projects:

• Project title and description
• Technologies used
• Project images
• Live demo and GitHub links

Skills

Modify client/src/components/skills-section.tsx to reflect your skillset:

• Add or remove skill categories
• Update technology lists
• Customize colors and icons

Theme Colors

Customize the color scheme in client/src/index.css:

• Update CSS custom properties for light/dark themes
• Modify gradient colors in components

📱 Sections

1. Hero Section: Introduction with profile image and call-to-action buttons
2. About Section: Personal background and experience highlights
3. Skills Section: Technical skills organized by categories
4. Portfolio Section: Featured projects showcase
5. Contact Section: Contact form and social links
6. Footer: Additional links and copyright information

🌐 Deployment

Development

npm run dev

Production Build

npm run build

Preview Production Build

npm run preview

📝 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build locally

🎯 Project Structure

portfolio-website/
├── client/                 # Frontend React application
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   ├── hooks/          # Custom React hooks
│   │   ├── lib/            # Utility functions
│   │   └── pages/          # Page components
├── server/                 # Backend Express server
├── shared/                 # Shared types and schemas
├── public/                 # Static assets
└── docs/                   # Documentation

🤝 Contributing

1. Fork the project
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.

🙋‍♀️ Contact

Aqsa Saleem - aqsa@example.com

Project Link: https://github.com/yourusername/portfolio-website

🙏 Acknowledgments

• Unsplash for beautiful photos
• Lucide for icon set
• Tailwind CSS for styling
• shadcn/ui for component library