Skip to content


Repository files navigation

Pozyzniewski Portfolio




Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist

Development Server

Start the development server on http://localhost:3000

npm run dev


Build the application for production:

npm run build

Locally preview production build:

npm run preview

Checkout the deployment documentation for more information.


My Notes

Decap CMS

This project uses Decap CMS (old Netlify CMS).

To run it locally

  1. Run the project npm run dev
  2. In a separate terminal run this command npx netlify-cms-proxy-server. This will create a local server, so changes won't be deployed to the PROD when clicking Publish button
  3. Open this page localhost:3000/admin





  • This boilerplate comes with the nuxt-icon packaged - github
  • All icons that are available when using nuxt-icon package -

Usage 👌


  • name (required): icon name, emoji or global component name
  • size: icon size (default: 1em)

Iconify dataset

You can use any name from the collection:

<Icon name="uil:github" />


<Icon name="🚀" />

Vue component

<Icon name="NuxtIcon" />

Note that NuxtIcon needs to be inside components/global/ folder (see example).



  • This boilerplate uses Pinia as a state management solution
  • It auto-imports the defineStore(). This means you no longer have to manually import these from pinia whenever your defining your stores
  • Also, it auto-imports every file that's inside @/stores/
// stores/counter.ts
export const useCounterStore = defineStore('counter', {
  //         ^^^^^^^^^^^^^^^
  // ...
// someComponent.vue
import { useCounterStore } from '@/stores/counter' // this line can be omitted thanks to auto-import!
const countStore = useCounterStore()


About Me Gallery Images

  1. Follow this sizes: (For image templates follow this link)

    Primary Image		-	h: 290px; w: 250px
    Secondary Image	    -	h: 380px; w: 380px
  2. All files must be places inside:

    • /public/assets/img/jpg/
  3. While passing the file name via props use only the name without the extension:

    • for example if your file is portrait.jpg use:
<TheAboutMeGallery :gallery-details="galleryDetails" />
data() {
	return {
		galleryDetails:  {
			primaryImg:  "portrait",
			primaryOverlayColor:  "rgba(0, 0, 255, 0.25)",
			secondaryImg:  "theAboutMeGallerySecondary",
			secondaryOverlayColor:  "rgba(155, 0, 0, 0.75)"


Portfolio Projects Background Images

To save visitors' bandwith (especially on mobile devices) it's important to follow these few rules.

  1. Each image must be provided in four specific size variations & follow the naming convention: (For image templates follow this link)

    IMAGE_NAME.jpg		-	h: 400px; w: 480px
    IMAGE_NAME--md.jpg	-	h: 400px; w: 1025px
    IMAGE_NAME--md.jpg	-	h: 290px; w: 1281px
    IMAGE_NAME--md.jpg	-	h: 290px; w: 1920px
  2. They must be placed inside:

    • public/assets/img/jpg/projects-bgs/
  3. While passing the file name via props use only the name without the extension:

    • for example if your file is design.jpg use:
  v-for="(project, index) in  portfolioProjects"
data() {
	return {
		portfolioProjects: [
				bgImage:  "design"


My personal portfolio website






No releases published


No packages published