Eddie Rishty - Premium Portfolio Website

A stunning, modern portfolio website built with cutting-edge technologies to showcase world-class work.

🚀 Features

• Modern Tech Stack: Built with Astro for exceptional performance
• Responsive Design: Mobile-first approach with perfect responsiveness
• Dark/Light Mode: Seamless theme switching with persistent preferences
• Premium Design: Million-dollar aesthetic with attention to every detail
• Fast Performance: Zero JavaScript by default, lightning-fast load times
• SEO Optimized: Fully optimized for search engines
• Contact Form: Functional contact form with validation
• Smooth Animations: Subtle, elegant transitions and animations

🛠 Tech Stack

• Framework: Astro 4
• Styling: Tailwind CSS
• Type Safety: TypeScript
• Deployment: Ready for Netlify, Vercel, or any static host

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── Header.astro
│   ├── Footer.astro
│   └── ContactForm.astro
├── layouts/
│   ├── BaseLayout.astro # Main layout wrapper
│   └── ProjectLayout.astro
├── pages/              # File-based routing
│   ├── index.astro     # Home page
│   ├── about.astro     # About page
│   ├── projects.astro  # Projects showcase
│   └── contact.astro   # Contact page
├── styles/
│   └── globals.css     # Global styles and animations
├── data/
│   └── projects.json   # Portfolio data
└── images/             # Image assets

🎨 Design Highlights

• Typography: Premium font stack with Sohne and Clash Display
• Color System: Sophisticated, refined color palette
• Spacing: Generous whitespace and perfect alignment
• Components: Polished buttons, cards, and forms
• Animations: Smooth, subtle transitions
• Shadows: Professional gradient shadows
• Dark Mode: Full dark mode support with CSS variables

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Visit http://localhost:3000 to see your site.

📝 Customization

Update Portfolio Content

Edit src/data/projects.json to add your own projects:

{
  "title": "Your Project",
  "description": "Project description",
  "category": "Design/Development",
  "tags": ["tag1", "tag2"],
  "link": "https://your-project.com"
}

Change Colors

Edit tailwind.config.cjs to customize the color palette:

colors: {
  primary: {
    // Your custom colors
  }
}

Update Social Links

Edit src/components/Footer.astro and src/pages/contact.astro with your social profiles.

🔧 Configuration

Site Metadata

Update astro.config.mjs:

export default defineConfig({
  site: 'https://yourdomain.com',
  // ...
});

Contact Form

The contact form uses Formspree by default. To set it up:

1. Go to formspree.io
2. Create a new form and get your form ID
3. Update the form endpoint in src/components/ContactForm.astro

📱 Responsive Design

The website is fully responsive and works beautifully on:

• 📱 Mobile (320px and up)
• 💻 Tablet (768px and up)
• 🖥 Desktop (1024px and up)

⚡ Performance

• Lighthouse Score: 95+
• Page Load: < 2 seconds
• Mobile Friendly: Fully optimized
• Zero JS: Ships zero JavaScript by default

🌙 Dark Mode

Dark mode is automatically enabled based on system preferences and can be toggled manually. Preferences are saved to localStorage.

🚢 Deployment

Netlify

npm run build
# Then drag the `dist` folder to Netlify

Vercel

npm install -g vercel
vercel

GitHub Pages

Configure astro.config.mjs with your repository settings.

📄 License

MIT License - feel free to use this template for your projects!

💬 Support

For questions or issues, check the Astro documentation.

---

Made with 💜 by Eddie Rishty