modius22/portfolio

Portfolio App

Portfolio Generator

Work in progress, _(*1)

Change Log

Version 1.1

• remove silex

Installation

Required PHP 7, _(*2)

git clone https://github.com/Modius22/portfolio.git MyPortfolio

or, _(*3)

composer create-project modius22/portfolio MyPortfolio

Basic Usage

cd MyPortfolio
composer install
php -S localhost:8090

Now open MyPortfolio in your favorite IDE and create a meta.json-file in the resources-directory. This file contains all information of your portfolio., _(*4)

meta.json

The sections-property contains every section of your portfolio. The key is the section title and the value is the section content (=object). For example a about me and skills-section looks like, _(*5)

{
  "sections": {
    "About me": {
      "description": "Hello my name is ..."
    },
    "Skills": {
      "description": "<ul><li>Coding</li><li>CSS</li></ul>"
    }    
  }
} 

Open your browser and go to localhost:8090, you should see a heading with the text About me and a paragraph with Hello my name is and a heading with Skills and a listing with Coding and CSS, _(*6)

Note: The default template uses the Bootstrap framework, jQuery and chart.js from CDN. The description-property is parsed by Twig, _(*7)

Section Templates

HTML in JSON-files is a bit messy, so you should use templates. \ First, add the template-property to your About me-section and set it to the path to the template:, _(*8)

{
  "sections": {
    "About me": {
      "template": "sections/about_me.html.twig"
    }
  }
}

Next, create in the resources-directory a directory with the name sections and in this create the about_me.html.twig with this content:, _(*9)

<h1>{{ heading }}</h1>
Hello my name is ...

Note: heading is the key of the section-array. It can be overwritten with the heading-property, _(*10)

Variables

You can also add variables in your meta.json sections which you can use in your template. \ For example, add the name-property with your name to the About me section and in your template replace "..." with {{ section.name }}, _(*11)

Note: The section-Variable contains all section-properties, _(*12)

Resources (images, css...)

For additional resources you can add the resources-property in the meta.json and call the resource-twig-function, _(*13)

{
    "resources": {
        "octocat": "https://assets-cdn.github.com/favicon.ico",
        "internal": "@hello.png"
    }
}

In your template:, _(*14)

<img src="{{ resource('octocat') }}">

The resource-function accepts 3 parameters: 1. resource-name (key in resources) 2. embed the resource (loads the file an writes into the html code) 3. encode the embedded source as base64 (useful to embed images), _(*15)

If the resource-path starts with @ the file is loaded from the resources-directory, _(*16)

Custom Template

To override the base template, create a template.custom.html.twig in the resources directory., _(*17)

German Tutorial

Part 1: http://www.modius-techblog.de/programmierung/eigene-online-visitenkarte-richtig-erstellen/ Part 2: http://www.modius-techblog.de/programmierung/online-visitenkarte-die-erste-sektion-mit-twig/ Part 3: http://www.modius-techblog.de/programmierung/online-visitenkarte-aktueller-job-mit-progress-bar-darstellen/, _(*18)

Example Site

The portfolio from Christian Piazzi (Modius22): http://www.christian.piazzi.org, _(*19)

Contribute

Feel free to fork this repository and create pull-requests, _(*20)