svelte-app

Svelte app for a portfolio

This is a first draft portfolio app using magical disappearing UI framework, Svelte.

View example: https://eesur.github.io/svelte-app/public/

The idea is to have a simple, clean solution to display projects/portfolio

You click a thumbnail and view a larger image(s) and some descriptive text. And that’s it. It’s all data driven from the /src/data.js file, so no need for lots of flat files etc. It’s an array of objects, one for each item:

    [
        {
          thumbnail: '/assets/img/...png',
          thumbCaption: 'Ref for thumb',
          title: 'Title of item',
          subtitle: 'a subtitle',
          images: [ // array of images
            {
              img: '/assets/img/ch-01.jpg',
              caption: 'image caption'
            }
          ],
          copy: 'Any description text'
        },
        ...
    ]

It only has a CSS dependency of Basscss

TODO:

• Add a footer
• Create a data file for settings (email, twitter etc)
• Create a Basscss Theme for it
• Be able to highlight (fade out?) the active thumbnail
• Add some logic to not show feature item on initial load (including containing div)

Dev notes

npm run dev

Navigate to localhost:5000.Edit a component file in src, save it, and reload the page to see your changes.

The below is from the original Svelte template readme:

svelte app

This is a project template for Svelte apps. It lives at https://github.com/sveltejs/template.

To create a new project based on this template using degit:

npm install -g degit # you only need to do this once

degit sveltejs/template svelte-app
cd svelte-app

Note that you will need to have Node.js installed.

Get started

Install the dependencies…

cd svelte-app
npm install

…then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

Deploying to the web

With now

Install now if you haven’t already:

npm install -g now

Then, from within your project folder:

now

As an alternative, use the Now desktop client and simply drag the unzipped project folder to the taskbar icon.

With surge

Install surge if you haven’t already:

npm install -g surge

Then, from within your project folder:

npm run build
surge public