portfolio-multi-design Svelte Themes

Portfolio Multi Design

Modern multi-design portfolio with 8 unique themes, built with Svelte, TypeScript, and Tailwind CSS. Features dynamic resume integration and easy theme switching.

Download

Portfolio Website

A modern, responsive portfolio website built with Svelte, TypeScript, and Tailwind CSS. This website features a centralized theme system, JSON-based data structure, and is designed to be easily customizable for multiple users.

Features

  • šŸŽØ Multi-Design System - 8 distinct portfolio designs to choose from
  • šŸŒˆ Centralized Theme System - 3 themes that work with all designs (24 combinations!)
  • šŸ“± Fully Responsive - Optimized for all devices (mobile, tablet, desktop)
  • šŸš€ Modern Design - Glassmorphism effects, gradients, and smooth animations
  • šŸ”§ TypeScript - Full type safety throughout the application
  • šŸ“¦ JSON Data Structure - Easy to update content without touching code
  • šŸŽÆ Supabase Ready - Prepared for easy migration to Supabase backend
  • āš” Fast & Optimized - Built with Vite for lightning-fast development

Project Structure

/src
  /config
    theme.config.ts      # šŸŒˆ Centralized theme configuration
    design.config.ts     # šŸŽØ Centralized design configuration (NEW!)
  /lib
    /designs             # šŸŽØ Design-specific components - 8 unique designs!
      /modern-minimalist # Clean professional layout
      /split-screen      # Sidebar navigation layout
      /bento-grid        # Dashboard-style grid layout
      /terminal          # CLI/terminal aesthetic
      /horizontal-scroll # Side-scrolling sections
      /fullscreen-slider # Slideshow-style sections
      /magazine-grid     # Editorial asymmetric layout
      /parallax-layers   # Depth with parallax scrolling
    /components          # Shared base components
    /data               # JSON data files
      portfolio.json
    /services           # Data service layer
      dataService.ts
    /types              # TypeScript interfaces
      portfolio.types.ts
      design.types.ts    # Design system types (NEW!)
  /styles
    components.css      # Reusable component styles
  App.svelte           # Main application component
  main.ts              # Application entry point

Getting Started

Prerequisites

  • Node.js (v20 or higher recommended)
  • npm or yarn

Installation

  1. Clone this repository or download the files
  2. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser and navigate to http://localhost:5173

Build for Production

npm run build

The built files will be in the dist folder, ready to deploy.

Customization Guide

1. Choosing Your Design

Select from 8 distinct portfolio designs:

Edit src/config/design.config.ts and change the export line:

export const ACTIVE_DESIGN = terminal;  // Change this!

Available Designs:

  1. Modern Minimalist - Clean, spacious, professional
  2. Split Screen - Magazine-style with fixed sidebar navigation
  3. Bento Grid - Dashboard-style grid layout with cards
  4. Terminal - Retro CLI/terminal aesthetic with typing effects
  5. Horizontal Scroll - Side-scrolling sections for unique navigation
  6. Fullscreen Slider - Slideshow-style with fullscreen sections
  7. Magazine Grid - Editorial layout with asymmetric grids
  8. Parallax Layers - Depth and motion with parallax scrolling

See DESIGN_GUIDE.md and 8-DESIGNS-COMPLETE.md for detailed design descriptions!

2. Updating Your Information

Edit the file: src/lib/data/portfolio.json

This JSON file contains all your portfolio data:

  • Personal Information: Name, title, bio, email, city, hobbies, resume link
  • Work Experience: Companies, roles, durations, descriptions, technologies
  • Skills: Categories, items, proficiency levels
  • Projects: Titles, descriptions, technologies, roles, links
  • Contact: Email, preferred contact method, availability

Example:

{
  "personalInfo": {
    "name": "Your Name",
    "title": "Full Stack Developer",
    "email": "[email protected]",
    "resumeUrl": "https://docs.google.com/document/d/YOUR_RESUME_ID/edit"
  }
}

3. Changing Themes

This is the easiest way to completely change the look of your website!

Edit the file: src/config/theme.config.ts

At the bottom of the file, find this line:

export const ACTIVE_THEME = darkDeveloperTheme;

Change it to one of the available themes:

  • darkDeveloperTheme - Modern, professional dark theme (default)
  • vibrantPurpleTheme - Creative, bold purple theme
  • minimalGreenTheme - Clean, professional green theme

Example:

// Switch to purple theme
export const ACTIVE_THEME = vibrantPurpleTheme;

That's it! Save the file and your entire website will use the new theme.

4. Creating a New Theme

To create your own custom theme:

  1. Open src/config/theme.config.ts
  2. Copy an existing theme object (e.g., darkDeveloperTheme)
  3. Modify the colors, fonts, and other properties
  4. Give it a unique name
  5. Update the ACTIVE_THEME constant to use your new theme

Example:

const myCustomTheme: Theme = {
  name: 'My Custom Theme',
  colors: {
    primary: '#FF6B6B',
    primaryDark: '#E85A5A',
    // ... customize all colors
  },
  fonts: {
    heading: "'Your Font', sans-serif",
    body: "'Your Font', sans-serif",
    mono: "'Your Mono Font', monospace"
  },
  // ... other properties
};

// Activate your theme
export const ACTIVE_THEME = myCustomTheme;

5. Customizing Component Styles

All reusable component styles are in: src/styles/components.css

Each class is clearly labeled:

  • Buttons: .btn-primary, .btn-secondary, .btn-outline
  • Cards: .card-glass, .card, .card-project
  • Sections: .section, .section-header, .section-subtitle
  • Badges: .badge-skill, .badge-tag, .badge-status
  • And many more...

You can modify these classes to change the styling throughout the entire website.

Your resume link should be a Google Drive document link. To set it up:

  1. Upload your resume to Google Drive
  2. Right-click ā†’ Share ā†’ Get link
  3. Make sure link access is set appropriately (e.g., "Anyone with the link")
  4. Copy the link
  5. Update resumeUrl in src/lib/data/portfolio.json

The resume button appears in:

  • Hero section (main CTA button)
  • Footer (quick links)

Multi-User Deployment

This website is designed to be easily customized for different users. Each user can have:

  1. Different Data: Edit portfolio.json with their information
  2. Different Theme: Change ACTIVE_THEME in theme.config.ts
  3. Same Codebase: All users share the same well-structured code

Workflow for Multiple Users:

  1. Create a branch for each user (optional)
  2. Update portfolio.json with their data
  3. Select or create a theme in theme.config.ts
  4. Build and deploy to their domain

Deployment

Deploy to Hostinger

If you have a domain with Hostinger, see the detailed step-by-step guide:

šŸ“– HOSTINGER-DEPLOYMENT.md - Complete guide for deploying to Hostinger

This guide covers:

  • Building your project for production
  • Uploading via File Manager, FTP, or SSH
  • Configuring .htaccess for SPA routing
  • Enabling SSL (HTTPS)
  • Troubleshooting common issues
  • Performance optimization

Other Deployment Options

You can also deploy this website to:

  • Vercel: npm install -g vercel && vercel
  • Netlify: Drag & drop the dist folder to netlify.com/drop
  • GitHub Pages: See DEPLOYMENT.md
  • Firebase Hosting: firebase init && firebase deploy
  • Any Static Hosting: Just upload the dist folder contents

Network Access (Testing on Multiple Devices)

To test your website on other devices in the same WiFi network:

npm run dev -- --host

Then access the Network URL shown in the terminal from any device on your network.

Migrating to Supabase

When you're ready to use Supabase instead of JSON:

  1. Install Supabase client:
npm install @supabase/supabase-js

  1. Update src/lib/services/dataService.ts:

    • Follow the comments marked with "FUTURE" and "SUPABASE"
    • Replace JSON imports with Supabase queries
    • The TypeScript interfaces remain the same!

  2. Create corresponding tables in Supabase matching your JSON structure

Technologies Used

  • Svelte - Reactive UI framework
  • TypeScript - Type-safe JavaScript
  • Vite - Fast build tool
  • Tailwind CSS - Utility-first CSS framework
  • PostCSS - CSS processing
  • Autoprefixer - CSS vendor prefixing

Browser Support

  • Chrome/Edge (latest)
  • Firefox (latest)
  • Safari (latest)
  • Mobile browsers (iOS Safari, Chrome Mobile)

Performance

  • Optimized bundle size
  • Lazy loading where applicable
  • Smooth animations (60fps)
  • Fast initial load time
  • Responsive images

Contributing

Feel free to fork this project and customize it for your needs. If you find bugs or have suggestions, please open an issue.

License

This project is open source and available for personal and commercial use.

Support

For questions or issues:

  1. Check this README
  2. Review the code comments
  3. Check the TypeScript types for structure guidance

Happy Coding! šŸš€

Built with ā¤ļø using Svelte, TypeScript, and Tailwind CSS

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes