Skip to main content

Portfolio

Portfolio section is a special section which assists you to write, talk about your projects, products... aka portfolio. Each portfolio would have metadata and portfolio body which is a .mdx file. Each portfolio can be connected by categories, tags.

All portfolios are stored at app\routes\__layout\portfolio\__mdx\ and metaData are declared in app\data\portfolio.server.ts

portfolio location
my-website
├── app
│   └── routes
│       └── __layout
│           └── portfolio
│               └── __mdx
│                   ├── product-1.mdx
│                   ├── project-a.mdx
│                   ├── ...
│                   └── project-x.mdx
│

Process to create a new portfolio​

To add a new portfolio, you need to process 2 steps

  1. For example, create a file at app\routes\__layout\portfolio\__mdx\your-portfolio-filename.mdx

    the file name your-portfolio-filename.mdx file will be the slug of the portfolio

    my-website
    ├── app
    │   └── routes
    │       └── __layout
    │           └── portfolio
    │               └── __mdx
    │                   ├── your-portfolio-filename.mdx
    │                   └── ...
    https://your-domain.com/portfolio/your-portfolio-filename

    your portfolio page

  2. Declare your new portfolio at app\data\portfolio.server.ts

    app\data\portfolio.server.ts
    ...
    //import your portfolio files
    import * as P0001 from "~/routes/__layout/portfolio/__mdx/your-portfolio-filename.mdx"
    ...
    //extract meta data
    const data = [
      getMdxPortfolioMeta(P0001),
      ...
    ]

Format of a portfolio .mdx​

You would need to use Markdown format to compose your portfolio. Markdown format is simple and easy. Trust me. You would love Markdown. It helps you to concentrate to your writing, not to be distracting from anything.

note

Metadata structure: There are a lot of properties and explain seems complicated but they are really simple. Please take a look at some portfolio files and you would understand easier.

/**
 * Header structure kind of PORTFOLIO in `.mdx` format
 */
type PortfolioMeta = {
  attributes: {
    meta: {
      title: string
      description: string
    },
    properties: {
      id: string
      /**
       * the day that your portfolio started
       */
      startedDate: string
      /**
       * the day that your portfolio is finished
       */
      accomplishedDate: string
      /**
       * helps to organize your blog posts in great flexible way
       */
      tags: string[]
      images: ImgSrcSet[]
      categories: string[]
      /**
       * language of the blog post
       * it would be consider as default language is not provided
       * UPDATE: i use array here for some users are too lazy to do the translation,
       * then, at very first time, they will let the article available
       * to more than 1 language! They will update this later!
       */
      language?: Language[]
      /**
       * decorate the header of the portfolio
       */
      pageHeaderMeta?: PageHeaderMeta
    }
  }
  filename: string
}

type ImgSrcSet = {
  mobile: string
  desktop?: string
  description?: string
}

type PageHeaderMeta = {
  /**
   * array of images
   * if it has 2 images, 1st is for mobile, 2nd is for pc
   */
  featuredImage?: ImgSrcSet
  backgroundColor?: string
  height?: string
  /**
   * allow user to define image position
   * https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
   * the default position is `center-center` aka `50% 50%`
   */
  objectPosition?: string
  /**
   * allow user to define image hovering position
   * https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
   * the default position is `center-center` aka `50% 50%`
   */
  objectOrigin?: string
}
info

  • Root folder of PortfolioMeta.attributes.properties.images, when you say /placeholder.svg. It means the file placeholder.svg is in /img/portfolio/ folder (or URL.PORTFOLIO_FOLDER).

  • Root folder of PortfolioMeta.attributes.properties.pageHeaderMeta.featuredImage, when you say /placeholder.svg. It means the file placeholder.svg is in /img/portfolio/ folder (or URL.PORTFOLIO_FOLDER).

Video tutorial​