dynofolio

Easy to implement animated portfolio (for developpers).

The project start with the idea to have a dynamic e-portfolio with some little cool and justified animations.

This project has been developed in 4 mornings to 2 people.

---

Functionality display the Curriculum vitæ

This functionality is to display data file content into the e-portfolio dynamically.

The web site is adapted on mobile but best use is on computer.

The style of me section is inspired by the portfolio of Eliel Dinaully
The style of jobs is inspired by the tutorial on codepen
The style of skills card is inspired by the tutorial on codepen

All animation are from gsap library and plugin used are :

• TweenMax
• TimelineMax
• SplitText
• ScrollMagic
• debug.addIndicators
• animation.gsap

---

Building the page

The page builds itself using the data in data.js.
The index.html then populated with the data where the data-value attribute has been set.
If it references an array, the content of the html tag will be repeated.

example

data.js:

    var mainData = {
        name: "Nicolas Maitre",
        infos:{
            currentJob: "gamer pro"
        },
        skills: [
            "php",
            "ruby",
            "javascript"
        ],
        jobs: [
            {
                title: "McDonald's",
                place: "Lausanne",
                length: "2 ans",
                description: "J'ai fait des frites",
            },
            {
                title: "Éboueur",
                place: "Region de Nyon",
                length: "3 semaines",
                description: "J'ai ramassé les poubelles",
            },
        ],
    }

index.html:

    <h1 data-value="main.name">...</h1>
    <b data-value="main.infos.currentJob">...</b>

    <h2>Skills</h2>
    <ul data-value="main.skills">
        <li data-value="sub">...</li>
    </ul>

    <h2>Jobs</h2>
    <table>
        <thead>
            <th>Title</th>
            <th>Place</th>
            <th>Length</th>
            <th>Description</th>
        </thead>
        <tbody data-value="main.jobs">
            <td data-value="sub.title">...</td>
            <td data-value="sub.place">...</td>
            <td data-value="sub.length">...</td>
            <td data-value="sub.description">...</td>
        </tbody>
    </table>

result:

Nicolas Maitre

gamer pro

Skills

• php
• ruby
• javascript

Jobs

Title	Place	Length	Description
McDonald's	Lausanne	2 ans	J'ai fait des frites
Éboueur	Region de Nyon	3 semaines	J'ai ramassé les poubelles

---

Future improvement

• Split jobs and skill in categories
• Links between jobs skills and skills
• Links between skills proof and projects
• Anchor for section