nexus Svelte Themes

Nexus

A personal portfolio website built with Astro, Svelte, and TypeScript.

dhguzman-portfolio

A modern, fast, and minimal personal portfolio built with Astro, Svelte, and Bun.

✨ Features

  • Lightning-fast static site generation with Astro
  • Interactive UI powered by Svelte components
  • SPA navigation using svelte-spa-router
  • Custom theming with light/dark mode (WIP)

šŸ“ Project Structure

/
ā”œā”€ā”€ public/                # Static assets (images, icons, styles)
│   ā”œā”€ā”€ style.css
│   ā”œā”€ā”€ extra/             # Custom images and SVGs
│   ā”œā”€ā”€ icons/             # Technology icons
│   ā”œā”€ā”€ socials/           # Social media icons
│   └── term/              # Terminal UI assets
ā”œā”€ā”€ src/
│   ā”œā”€ā”€ components/        # Svelte UI components (Icon, Tab, Theme)
│   ā”œā”€ā”€ islands/           # Svelte components for partial hydration (Footer, Header, Term)
│   ā”œā”€ā”€ layouts/           # Astro layout wrappers (Layout.astro)
│   ā”œā”€ā”€ lib/               # Shared stores and utilities (ThemeStore.ts)
│   ā”œā”€ā”€ pages/             # Astro entrypoints (index.astro)
│   └── routes/            # Svelte SPA route components (About, App, Contact, Home, Projects)
ā”œā”€ā”€ astro.config.mjs
ā”œā”€ā”€ svelte.config.js
ā”œā”€ā”€ tsconfig.json
ā”œā”€ā”€ package.json
ā”œā”€ā”€ bun.lock
└── LICENSE

šŸš€ Getting Started

  1. Install dependencies

    bun install
    
  2. Start the development server

    bun dev
    

    Visit localhost:4321 in your browser.

  3. Build for production

    bun build
    
  4. Preview the production build

    bun preview
    

šŸ› ļø Customization

  • Update your info and content in the Svelte route files under src/routes/ (Home.svelte, About.svelte, Projects.svelte, Contact.svelte).
  • Add or update components in src/components/.
  • Change global styles in public/style.css.
  • Add images or SVGs to public/extra/ or public/icons/.
  • Update social links in the relevant Svelte components.

šŸŒ— Theming

  • Theme switching is handled by src/components/Theme.svelte and src/lib/ThemeStore.ts.
  • Light and dark icons are in public/extra/.

šŸ“¦ Tech Stack

  • Astro — Static site generator
  • Svelte — UI framework
  • Bun — Fast JavaScript runtime & package manager

šŸ“„ License

MIT. Feel free to use, modify, and share.

Top categories

Loading Svelte Themes