AshMartian.com Portfolio

A modern, interactive portfolio website built with React, Three.js, and TypeScript. Features a 3D Mars visualization, dynamic work history timeline, and responsive design.

🚀 Features

• Interactive 3D Mars visualization with custom shaders
• Parallax scrolling effects
• Responsive timeline for work history
• Project showcase with hover effects
• Social media integration
• Mobile-friendly design

🛠️ Technologies

• React 18
• TypeScript
• Three.js / React Three Fiber
• Tailwind CSS
• Vite

📦 Installation

# Clone the repository
git clone https://github.com/AshMartian/ashmartian.com.git

# Install dependencies
npm install

# Start development server
npm run dev

🏗️ Project Structure

src/
├── components/         # React components
│   ├── Mars.tsx       # 3D Mars visualization
│   ├── WorkHistory.tsx # Interactive timeline
│   ├── Projects.tsx   # Project showcase
│   └── ...
├── hooks/             # Custom React hooks
├── pages/             # Page components
└── assets/            # Static assets

🎨 Key Components

Mars Visualization

Custom Three.js implementation with:

• Displacement mapping
• Normal mapping
• Atmospheric effects
• Interactive mouse controls

Work History Timeline

Dynamic timeline featuring:

• Scroll-based animations
• Company logos
• Responsive layout
• Interactive elements

Project Showcase

Grid layout of projects with:

• Hover effects
• Image previews
• External links

📱 Responsive Design

The site is fully responsive and optimized for:

• Desktop (1200px+)
• Tablet (768px - 1199px)
• Mobile (320px - 767px)

🚀 Deployment

# Build for production
npm run build

# Preview production build
npm run preview

📄 License

MIT License - Feel free to use this code as inspiration for your own portfolio!

👩‍🚀 Author

Ash Martian - GitHub

A modern, interactive portfolio website built with React, Three.js, and TypeScript. Features a 3D Mar globe background with dynamic lighting, responsive timeline, and various interactive components.

🌟 Features

• Interactive 3D Mars globe with custom shaders and atmospheric effects
• Parallax scrolling effects with stars
• Responsive work history timeline with scroll animations
• Project showcase with hover effects
• Social media integration
• Mobile-friendly design

🚀 Technologies

• React 18
• TypeScript
• Three.js / React Three Fiber
• Tailwind CSS
• Vite

🛠 Installation

1. Clone the repository:

git clone https://github.com/AshMartian/ashmartian.com.git

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

📦 Building for Production

npm run build

🌍 Project Structure

src/
├── components/         # React components
│   ├── Mars.tsx       # 3D Mars globe
│   ├── Hero.tsx       # Hero section
│   ├── Projects.tsx   # Projects grid
│   ├── WorkHistory.tsx # Timeline component
│   └── ...
├── hooks/             # Custom React hooks
├── pages/             # Page components
└── App.tsx           # Main app component

🎨 Key Components

Mars Globe (Mars.tsx)

• Custom shader implementation for realistic Mars surface
• Dynamic lighting based on scroll and mouse position
• Atmospheric glow effect

Work History Timeline

• Interactive timeline with scroll-based animations
• Company logos and descriptions
• Responsive design for all screen sizes

Project Showcase

• Grid layout of personal projects
• Hover effects and animations
• Links to live demos and repositories

📱 Responsive Design

The site is fully responsive and optimized for:

• Desktop (1024px)
• Tablet (768px - 1023px)
• Mobile (< 768px)

🤝 Contributing

Feel free to submit issues and enhancement requests!

📄 License

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