MarkSDev Portfolio

A modern, dark-themed portfolio website built with Astro and Tailwind CSS.

🚀 Quick Start

Local Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

📦 Deploying to Netlify (Free)

Option 1: Deploy via GitHub (Recommended)

1. Push this code to a GitHub repository
2. Go to netlify.com and sign up/login
3. Click "Add new site" → "Import an existing project"
4. Connect your GitHub and select the repository
5. Build settings will be auto-detected:
   • Build command: npm run build
   • Publish directory: dist
6. Click "Deploy site"

Your site will be live at https://your-site-name.netlify.app

Option 2: Drag & Drop Deploy

1. Run npm run build locally
2. Go to app.netlify.com/drop
3. Drag the dist folder to deploy instantly

🎨 Customization

Update Your Info

• Projects: Edit src/components/Projects.astro
• Services: Edit src/components/Services.astro
• About: Edit src/components/About.astro
• Contact: Edit src/components/Contact.astro

Colors

Edit tailwind.config.mjs to change the color scheme:

colors: {
  accent: {
    primary: '#00d4aa',    // Main accent color
    secondary: '#00b894',  // Secondary accent
  }
}

Contact Form

The contact form is pre-configured for Netlify Forms. It will automatically work when deployed to Netlify - no backend required!

📁 Project Structure

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   ├── Nav.astro
│   │   ├── Hero.astro
│   │   ├── Projects.astro
│   │   ├── Services.astro
│   │   ├── About.astro
│   │   ├── Contact.astro
│   │   └── Footer.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
├── astro.config.mjs
├── tailwind.config.mjs
└── package.json

🔧 Tech Stack

• Astro - Static site generator
• Tailwind CSS - Styling
• Netlify - Hosting & Forms

📝 Adding Custom Domain (Optional)

1. In Netlify, go to Site settings → Domain management
2. Click "Add custom domain"
3. Follow the DNS configuration instructions

---

Built by MarkSDev 🚀