Skip to content
Johnnify Docs

“Paulina Puppers” 🐶 Portfolio

A mostly static website built in SvelteKit, using Svelte 5!

Top features at a glance

Learning Content

Development of this app happens live on Johnny’s YouTube channel

Check out the related playlist!

Concept

Portfolio / marketing site for a photographer specializing in tiny pets!

How to use this repo as your “starter”

Clone this repo into the directory you want your new project to be

For example you may want to run in your terminal:

Terminal window
git clone https://github.com/johnnify/portfolio name-of-your-client

Remove existing Version Control & initialize your own

You probably don’t want a history of everything that’s happened to this repo, and you definitely do not want to push your own changes to it! You are your own person and want to do your own thing 🙌

Easiest way to start fresh is to cd into the root directory of your new project, such as cd name-of-your-client, and run:

Terminal window
rm -rf .git

Then, initialize your own git repo:

Terminal window
git init

You may want an initial commit now, or keep your history a bit cleaner and save it after you’ve done the preliminary changes in the next step. You can have infinite commits, so it doesn’t matter that much 😄

Rename portfolio / project-specific stuff

Search for “portfolio” and replace with names corresponding to your project. This includes things that the user would notice, like meta titles, descriptions and open-graph images, but also internal things such as the package name… which don’t really matter, but it’s nice to keep neat.

Keep a special eye out for links, you’d want to replace the links to your own projects, socials, communities!

Replace favicons & other images with your own

You wouldn’t want the “Paulina Puppers - Ace Photographer” logo for your app, so perhaps use a tool like the Real Favicon Generator to replace those assets with your own, on-brand ones.

Style to taste

It’s likely you won’t want exactly the brand colours and typography of Paulina Puppers, so amend the tailwind.config.js, and the app.css to taste.

This monorepo follows DaisyUI conventions more closely, so you can select different themes from them, customize them fit your brand, change the --font-sans & the --font-fancy…

Commit & start building your own app!

At this point you’ll want an 🚀 initial commit based on @johnnify/portfolio or similar, and then you can start building your own app!

Start the dev server with pnpm dev, and click around localhost:5173!

Feel free to delete routes you won’t need, but I do find that at this point I’m tempted to spend time integrating “the real stuff” for the new project, so I like having that initial commit done first, before I get deeper into the weeds.

After that, you may want to do a copy pass! Feel free to delete the existing translations, and configure your default and additional languages in project.inlang/settings.json. You’ll want to generate a different project.inlang/project_id as well!

Whenever you’re editing copy, it’s a great idea to run pnpm run generate:i18n:watch, which will be updating the runtime translations based on your src/messages.

Have fun! 😄