Pozyzniewski Portfolio

Links

• Repository - GitHub
• Live - paulthedeveloper.com

 

Setup

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

Production

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

 

TypeScript

• types/interfaces for elements used inside https://github.com/harlan-zw/zhead/tree/main/packages/schema/src

• Type checking on Dev is set to true, if you need to turn it off (for performance reasons) go to the .nuxt.config.ts file and set typescript.typeCheck to false

 

Icons

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

Usage 👌

Props:

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

Iconify dataset

You can use any name from the https://icones.js.org collection:

<Icon name="uil:github" />

Emoji

<Icon name="🚀" />

Vue component

<Icon name="NuxtIcon" />

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

 

Pinia

• 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:

<PortfolioProject
  v-for="(project, index) in  portfolioProjects"
  :key="index"
  :project-info="project"
/>

data() {
	return {
		portfolioProjects: [
			{
				....
				bgImage:  "design"
			}
		}
	}
}