<commit_before><?php
// Error settings
// error_reporting(E_ALL);
error_reporting(0);
ini_set('display_errors', 'off');

include_once('language.php');
$l = isset($_REQUEST['l']) ? strtolower($_REQUEST['l']) : false;

if (!$l || ($l !== 'hr' && $l !== 'en')) {
    // language not set via param

    // first check for cookies
    if ($_COOKIE['language'] === 'hr' || $_COOKIE['language'] === 'en') {
        // set l = cookie value if the cookie is found
        $l = $_COOKIE['language'];
    }
    else {
        // user did not provide a language nor did he/she previously set it
        // let's see if we can locate the user and set the according language
        include_once('ip2c/ip2country.php');
        $ip2c = new ip2country();
        $ip2c->mysql_host='localhost';
        $ip2c->db_user='vanja_website';
        $ip2c->db_pass='<PASSWORD>';
        $ip2c->db_name='vanja_vg_www';
        $ip2c->table_name='ip2c';
        $countryCode = $ip2c->get_country_code();

        if (($countryCode === 'HR') || ($countryCode === 'BA') || ($countryCode === 'RS')) {
            // if the visitor is from Croatia, Bosnia or Serbia - load Croatian language
            $l = 'hr';
        }
        else {
            // otherwise load English
            $l = 'en';
        }
    }
}

// setup active classes for language
$langClassHr = '';
$langClassEn = '';
if ($l === 'hr') {
    $langClassHr = ' class="active"';
}
else {
    $langClassEn = ' class="active"';
}
// set cookie value 
setcookie('language', $l, time() + (86400 * 21)); // 86400 = 1 day
?>

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="<?= $l ?>"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="<?= $l ?>"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="<?= $l ?>"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="<?= $l ?>"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title><NAME> | front-end developer | web developer</title>
        <meta name="description" content="<?= $lang[$l]["description"] ?>">
        <meta name="viewport" content="width=device-width">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
        <!--[if IE]>
        <link rel="shortcut icon" href="favicon.ico">
        <![endif]-->
        <link rel="icon" type="image/png" href="favicon.png">
        <link rel="stylesheet" href="assets/css/main.css">
        <script src="assets/js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <script>
        (function(){
            // to avoid implementing document ready or using ugly onLoad=f(), 
            // this loader code is placed inside body (body element won't be undefined)
            var loaderHtml = '<div></div><div></div><div></div><div></div><h1 data-alternative="<?= $lang[$l]["loadingAlt"] ?>"><?= $lang[$l]["loading"] ?>...</h1>',
                loader = document.createElement('div');
            loader.id = 'loader';
            loader.className = 'loader';
            loader.innerHTML = loaderHtml;
            document.getElementsByTagName('body')[0].appendChild(loader);

            Modernizr.load([{
                // The test: does the browser understand Media Queries?
                test : Modernizr.mq('only all'),
                // If not, load the respond.min.js file
                nope : 'assets/js/vendor/respond.min.js'
            }]);
        }());
        </script>
        <!--[if lte IE 8]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <nav id="main-nav" class="main-nav fadeIn animation-1s animationDelay-4s">
            <a href="/" id="logo" class="logo" title="Vanja Gavrić logo. <?= $lang[$l]['logoTitle'] ?>">
                <span class="circle">
                    VG
                </span> 
            </a>
            <ul>
                <li>
                    <a href="#developer" title="Developer.">
                        <i class="icon-code-1"></i>
                    </a>
                </li>
                <li>
                    <a href="#photography" title="<?= $lang[$l]['photography'] ?>.">
                        <i class="icon-camera"></i>
                    </a>
                </li>
                <li>
                    <a href="#writing" title="<?= $lang[$l]['writing'] ?>.">
                        <i class="icon-feather"></i>
                    </a>
                </li>
                <li>
                    <a href="#contact" title="<?= $lang[$l]['contact'] ?>.">
                        <i class="icon-paper-plane"></i>
                    </a>
                </li>
            </ul>
        </nav>
        <div id="top" class="top-anchor"></div>
        <!-- <div id="console"></div>         -->
        <header id="intro" class="intro">
            <nav id="lang-selection" class="lang-selection fadeIn animation-1s animationDelay-4s"
            role="navigation">
                <ul>
                    <li>
                        <a<?= $langClassHr ?> href="/hr">HR</a>
                    </li>
                    <li>
                        <a<?= $langClassEn ?> href="/en">EN</a>
                    </li>
                </ul>
            </nav>
            <div id="intro-centered" class="centered">
                <div class="row">
                    <div class="large-12 columns">
                        <h1>
                            <span class="fadeIn animation-600ms animationDelay-400ms"><?= $lang[$l]['salutation'] ?>.</span> <br> 
                            <span class="fadeIn animation-600ms animationDelay-2s"><?= $lang[$l]['iAm'] ?> Vanja.</span> <br>
                            <img src="assets/images/profile.jpg" class="profile-pic popupOut animation-400ms animationDelay-3s" width="110" height="110" alt="<NAME> profile photo">
                        </h1>
                    </div>
                </div>
            </div>
            <div class="scroll-down fadeIn animation-1s animationDelay-4s">
                <a href="#developer">
                    <span>
                        <?= $lang[$l]['scrollDown'] ?> 
                    </span>
                    <i class="icon-down-circled"></i>
                </a>
            </div>
        </header>
        <main role="main">


        <div id="skrollr-body">
            <section id="content" class="content">
                <article class="developer" id="developer" role="article" aria-labelledby="main-title-dev">
                    <div data-anchor-target="#developer"
                        data-bottom-top="transform:translate3d(0px,40%,0px);opacity:0;" 
                        data-top="transform:translate3d(0px,0%,0px);opacity:1;">
                        
                    
                    <div class="row">
                        <div class="large-12 columns">
                            <h2 class="main-title-dev no-margin-bottom" id="main-title-dev"
                            data-anchor-target="#developer" 
                            data-bottom-top="transform:scale(1.46);opacity:0" 
                            data-top="transform:scale(1);opacity:1">
                                <?= $lang[$l]['iAm'] . ' ' . $lang[$l]['whoAmI'] ?>
                            </h2>
                            <h2 class="subheader no-margin-top"
                            data-anchor-target="#developer" 
                            data-center-top="opacity:0" 
                            data-200-top="opacity:1">
                                <span><?= $lang[$l]['specializing'] ?> <i>front-end</i></span>
                            </h2>
                        </div>
                    </div>

                    <div class="row">
                        <div class="small-12 large-8 large-centered columns">
                            <h3>
                                <?= $lang[$l]['skills'] ?>
                            </h3>
                            <ul class="skills" id="skills">
                                <li>
                                    <div class="progress">
                                        <span class="meter"
                                        style="width:95%"
                                        data-anchor-target="#developer"
                                        data-bottom-top="width:0%;" 
                                        data-160-top="width:95%;">
                                            <span class="category">
                                                HTML5 95%
                                            </span>
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="progress">
                                        <span class="meter"
                                        style="width:95%"
                                        data-anchor-target="#developer"
                                        data-bottom-top="width:0%;" 
                                        data-120-top="width:95%;">
                                            <span class="category">
                                                CSS3 95%
                                            </span>
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="progress">
                                        <span class="meter"
                                        style="width:90%"
                                        data-anchor-target="#developer"
                                        data-bottom-top="width:0%;" 
                                        data-80-top="width:90%;">
                                            <span class="category">
                                                Javascript 90%
                                            </span>
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="progress">
                                        <span class="meter"
                                        style="width:70%"
                                        data-anchor-target="#developer"
                                        data-bottom-top="width:0%;" 
                                        data-60-top="width:70%;">
                                            <span class="category">
                                                PHP 70%
                                            </span>
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="progress">
                                        <span class="meter"
                                        style="width:70%"
                                        data-anchor-target="#developer"
                                        data-bottom-top="width:0%;" 
                                        data-40-top="width:70%;">
                                            <span class="category">
                                                MySQL 70%
                                            </span>
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="progress">
                                        <span class="meter"
                                        style="width:60%"
                                        data-anchor-target="#developer"
                                        data-bottom-top="width:0%;" 
                                        data-20-top="width:50%;">
                                            <span class="category">
                                                <?= $lang[$l]['design'] ?> 50%
                                            </span>
                                        </span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <hr>
                    </div>
</div>

                    <div class="technologies-wrap" data-anchor-target="#skills"
                    data-bottom-top="transform:translate3d(0px,-10%,0px);opacity:0;" 
                    data-center-bottom="transform:translate3d(0px,0%,0px);opacity:1;">
                        <div class="row experience">
                            <div class="large-12 columns">
                                <h3><?= $lang[$l]['iHaveExperienceWith'] ?></h3>
                                <div id="technologies-legend" class="technologies legend">
                                    <span class="front-end">Front-end frameworks</span>
                                    <span class="mvc">MVC JS frameworks</span>
                                    <span class="api">3rd-party APIs</span>
                                    <span class="test">Test frameworks</span>
                                    <span class="version-control">Version control</span>
                                    <span class="lib-fram">Libraries / frameworks</span>
                                    <span class="various"><?= $lang[$l]['various'] ?></span>
                                </div>
                                <hr>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-12 columns">
                                <ul id="technologies-list" class="technologies">
                                    <li class="label round front-end">Foundation</li>
                                    <li class="label round front-end">Bootstrap</li>
                                    <li class="label round mvc">BackboneJS</li>
                                    <li class="label round api">Facebook API</li>
                                    <li class="label round api">Twitter API</li>
                                    <li class="label round api">Google APIs</li>
                                    <li class="label round api">Flickr API</li>
                                    <li class="label round api">Rdio API</li>
                                    <li class="label round api">SoundCloud API</li>
                                    <li class="label round test">Jasmine</li>
                                    <li class="label round version-control">SVN</li>
                                    <li class="label round version-control">Git</li>
                                    <li class="label round lib-fram">jQuery (Zepto.JS)</li>
                                    <li class="label round lib-fram">Underscore.js (Lo-Dash)</li>
                                    <li class="label round lib-fram">Slim</li>
                                    <li class="label round lib-fram">Handlebars</li>
                                    <li class="label round lib-fram">CodeIgniter</li>
                                    <li class="label round various">SASS (Compass)</li>
                                    <li class="label round various">RequireJS</li>
                                    <li class="label round various">Sphinx</li>
                                    <li class="label round various">Redmine</li>
                                    <li class="label round various">Jira</li>
                                    <li class="label round various">Apache</li>
                                    <li class="label round various"><?= $lang[$l]['commandLine'] ?></li>
                                    <li class="label round various">Agile</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-12 columns">
                            <p class="tc">
                                <?= $lang[$l]['skillsExplanation'] ?>
                            </p>
                            <?= $lang[$l]['developerText'] ?>
                        </div>
                    </div>
                </article> <!-- end #developer -->

                <article class="photography" id="photography" role="article" aria-labelledby="main-title-photo">
                    <div class="row">
                        <div class="large-12 columns">
                            <h2 id="main-title-photo">
                                <?= $lang[$l]['likePhotos'] ?>
                            </h2>

                            <h2 class="subheader"
                            data-anchor-target="#photography" <commit_msg>Changed SASS (Compass) to + Compass<commit_after><?php
// Error settings
// error_reporting(E_ALL);
error_reporting(0);
ini_set('display_errors', 'off');

include_once('language.php');
$l = isset($_REQUEST['l']) ? strtolower($_REQUEST['l']) : false;

if (!$l || ($l !== 'hr' && $l !== 'en')) {
    // language not set via param

    // first check for cookies
    if ($_COOKIE['language'] === 'hr' || $_COOKIE['language'] === 'en') {
        // set l = cookie value if the cookie is found
        $l = $_COOKIE['language'];
    }
    else {
        // user did not provide a language nor did he/she previously set it
        // let's see if we can locate the user and set the according language
        include_once('ip2c/ip2country.php');
        $ip2c = new ip2country();
        $ip2c->mysql_host='localhost';
        $ip2c->db_user='vanja_website';
        $ip2c->db_pass='<PASSWORD>';
        $ip2c->db_name='vanja_vg_www';
        $ip2c->table_name='ip2c';
        $countryCode = $ip2c->get_country_code();

        if (($countryCode === 'HR') || ($countryCode === 'BA') || ($countryCode === 'RS')) {
            // if the visitor is from Croatia, Bosnia or Serbia - load Croatian language
            $l = 'hr';
        }
        else {
            // otherwise load English
            $l = 'en';
        }
    }
}

// setup active classes for language
$langClassHr = '';
$langClassEn = '';
if ($l === 'hr') {
    $langClassHr = ' class="active"';
}
else {
    $langClassEn = ' class="active"';
}
// set cookie value 
setcookie('language', $l, time() + (86400 * 21)); // 86400 = 1 day
?>

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="<?= $l ?>"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="<?= $l ?>"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="<?= $l ?>"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="<?= $l ?>"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title><NAME> | front-end developer | web developer</title>
        <meta name="description" content="<?= $lang[$l]["description"] ?>">
        <meta name="viewport" content="width=device-width">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
        <!--[if IE]>
        <link rel="shortcut icon" href="favicon.ico">
        <![endif]-->
        <link rel="icon" type="image/png" href="favicon.png">
        <link rel="stylesheet" href="assets/css/main.css">
        <script src="assets/js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <script>
        (function(){
            // to avoid implementing document ready or using ugly onLoad=f(), 
            // this loader code is placed inside body (body element won't be undefined)
            var loaderHtml = '<div></div><div></div><div></div><div></div><h1 data-alternative="<?= $lang[$l]["loadingAlt"] ?>"><?= $lang[$l]["loading"] ?>...</h1>',
                loader = document.createElement('div');
            loader.id = 'loader';
            loader.className = 'loader';
            loader.innerHTML = loaderHtml;
            document.getElementsByTagName('body')[0].appendChild(loader);

            Modernizr.load([{
                // The test: does the browser understand Media Queries?
                test : Modernizr.mq('only all'),
                // If not, load the respond.min.js file
                nope : 'assets/js/vendor/respond.min.js'
            }]);
        }());
        </script>
        <!--[if lte IE 8]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <nav id="main-nav" class="main-nav fadeIn animation-1s animationDelay-4s">
            <a href="/" id="logo" class="logo" title="Vanja Gavrić logo. <?= $lang[$l]['logoTitle'] ?>">
                <span class="circle">
                    VG
                </span> 
            </a>
            <ul>
                <li>
                    <a href="#developer" title="Developer.">
                        <i class="icon-code-1"></i>
                    </a>
                </li>
                <li>
                    <a href="#photography" title="<?= $lang[$l]['photography'] ?>.">
                        <i class="icon-camera"></i>
                    </a>
                </li>
                <li>
                    <a href="#writing" title="<?= $lang[$l]['writing'] ?>.">
                        <i class="icon-feather"></i>
                    </a>
                </li>
                <li>
                    <a href="#contact" title="<?= $lang[$l]['contact'] ?>.">
                        <i class="icon-paper-plane"></i>
                    </a>
                </li>
            </ul>
        </nav>
        <div id="top" class="top-anchor"></div>
        <!-- <div id="console"></div>         -->
        <header id="intro" class="intro">
            <nav id="lang-selection" class="lang-selection fadeIn animation-1s animationDelay-4s"
            role="navigation">
                <ul>
                    <li>
                        <a<?= $langClassHr ?> href="/hr">HR</a>
                    </li>
                    <li>
                        <a<?= $langClassEn ?> href="/en">EN</a>
                    </li>
                </ul>
            </nav>
            <div id="intro-centered" class="centered">
                <div class="row">
                    <div class="large-12 columns">
                        <h1>
                            <span class="fadeIn animation-600ms animationDelay-400ms"><?= $lang[$l]['salutation'] ?>.</span> <br> 
                            <span class="fadeIn animation-600ms animationDelay-2s"><?= $lang[$l]['iAm'] ?> Vanja.</span> <br>
                            <img src="assets/images/profile.jpg" class="profile-pic popupOut animation-400ms animationDelay-3s" width="110" height="110" alt="<NAME> profile photo">
                        </h1>
                    </div>
                </div>
            </div>
            <div class="scroll-down fadeIn animation-1s animationDelay-4s">
                <a href="#developer">
                    <span>
                        <?= $lang[$l]['scrollDown'] ?> 
                    </span>
                    <i class="icon-down-circled"></i>
                </a>
            </div>
        </header>
        <main role="main">


        <div id="skrollr-body">
            <section id="content" class="content">
                <article class="developer" id="developer" role="article" aria-labelledby="main-title-dev">
                    <div data-anchor-target="#developer"
                        data-bottom-top="transform:translate3d(0px,40%,0px);opacity:0;" 
                        data-top="transform:translate3d(0px,0%,0px);opacity:1;">
                        
                    
                    <div class="row">
                        <div class="large-12 columns">
                            <h2 class="main-title-dev no-margin-bottom" id="main-title-dev"
                            data-anchor-target="#developer" 
                            data-bottom-top="transform:scale(1.46);opacity:0" 
                            data-top="transform:scale(1);opacity:1">
                                <?= $lang[$l]['iAm'] . ' ' . $lang[$l]['whoAmI'] ?>
                            </h2>
                            <h2 class="subheader no-margin-top"
                            data-anchor-target="#developer" 
                            data-center-top="opacity:0" 
                            data-200-top="opacity:1">
                                <span><?= $lang[$l]['specializing'] ?> <i>front-end</i></span>
                            </h2>
                        </div>
                    </div>

                    <div class="row">
                        <div class="small-12 large-8 large-centered columns">
                            <h3>
                                <?= $lang[$l]['skills'] ?>
                            </h3>
                            <ul class="skills" id="skills">
                                <li>
                                    <div class="progress">
                                        <span class="meter"
                                        style="width:95%"
                                        data-anchor-target="#developer"
                                        data-bottom-top="width:0%;" 
                                        data-160-top="width:95%;">
                                            <span class="category">
                                                HTML5 95%
                                            </span>
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="progress">
                                        <span class="meter"
                                        style="width:95%"
                                        data-anchor-target="#developer"
                                        data-bottom-top="width:0%;" 
                                        data-120-top="width:95%;">
                                            <span class="category">
                                                CSS3 95%
                                            </span>
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="progress">
                                        <span class="meter"
                                        style="width:90%"
                                        data-anchor-target="#developer"
                                        data-bottom-top="width:0%;" 
                                        data-80-top="width:90%;">
                                            <span class="category">
                                                Javascript 90%
                                            </span>
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="progress">
                                        <span class="meter"
                                        style="width:70%"
                                        data-anchor-target="#developer"
                                        data-bottom-top="width:0%;" 
                                        data-60-top="width:70%;">
                                            <span class="category">
                                                PHP 70%
                                            </span>
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="progress">
                                        <span class="meter"
                                        style="width:70%"
                                        data-anchor-target="#developer"
                                        data-bottom-top="width:0%;" 
                                        data-40-top="width:70%;">
                                            <span class="category">
                                                MySQL 70%
                                            </span>
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <div class="progress">
                                        <span class="meter"
                                        style="width:60%"
                                        data-anchor-target="#developer"
                                        data-bottom-top="width:0%;" 
                                        data-20-top="width:50%;">
                                            <span class="category">
                                                <?= $lang[$l]['design'] ?> 50%
                                            </span>
                                        </span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <hr>
                    </div>
</div>

                    <div class="technologies-wrap" data-anchor-target="#skills"
                    data-bottom-top="transform:translate3d(0px,-10%,0px);opacity:0;" 
                    data-center-bottom="transform:translate3d(0px,0%,0px);opacity:1;">
                        <div class="row experience">
                            <div class="large-12 columns">
                                <h3><?= $lang[$l]['iHaveExperienceWith'] ?></h3>
                                <div id="technologies-legend" class="technologies legend">
                                    <span class="front-end">Front-end frameworks</span>
                                    <span class="mvc">MVC JS frameworks</span>
                                    <span class="api">3rd-party APIs</span>
                                    <span class="test">Test frameworks</span>
                                    <span class="version-control">Version control</span>
                                    <span class="lib-fram">Libraries / frameworks</span>
                                    <span class="various"><?= $lang[$l]['various'] ?></span>
                                </div>
                                <hr>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-12 columns">
                                <ul id="technologies-list" class="technologies">
                                    <li class="label round front-end">Foundation</li>
                                    <li class="label round front-end">Bootstrap</li>
                                    <li class="label round mvc">BackboneJS</li>
                                    <li class="label round api">Facebook API</li>
                                    <li class="label round api">Twitter API</li>
                                    <li class="label round api">Google APIs</li>
                                    <li class="label round api">Flickr API</li>
                                    <li class="label round api">Rdio API</li>
                                    <li class="label round api">SoundCloud API</li>
                                    <li class="label round test">Jasmine</li>
                                    <li class="label round version-control">SVN</li>
                                    <li class="label round version-control">Git</li>
                                    <li class="label round lib-fram">jQuery (Zepto.JS)</li>
                                    <li class="label round lib-fram">Underscore.js (Lo-Dash)</li>
                                    <li class="label round lib-fram">Slim</li>
                                    <li class="label round lib-fram">Handlebars</li>
                                    <li class="label round lib-fram">CodeIgniter</li>
                                    <li class="label round various">SASS + Compass</li>
                                    <li class="label round various">RequireJS</li>
                                    <li class="label round various">Sphinx</li>
                                    <li class="label round various">Redmine</li>
                                    <li class="label round various">Jira</li>
                                    <li class="label round various">Apache</li>
                                    <li class="label round various"><?= $lang[$l]['commandLine'] ?></li>
                                    <li class="label round various">Agile</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-12 columns">
                            <p class="tc">
                                <?= $lang[$l]['skillsExplanation'] ?>
                            </p>
                            <?= $lang[$l]['developerText'] ?>
                        </div>
                    </div>
                </article> <!-- end #developer -->

                <article class="photography" id="photography" role="article" aria-labelledby="main-title-photo">
                    <div class="row">
                        <div class="large-12 columns">
                            <h2 id="main-title-photo">
                                <?= $lang[$l]['likePhotos'] ?>
                            </h2>

                            <h2 class="subheader"
                            data-anchor-target="#photography" 
{'fraction_non_alphanumeric': 0.13873641760949929, 'fraction_numerical': 0.013106306709980956, 'mean_word_length': 0.9604172385396651, 'pattern_counts': {'":': 0, '<': 665, '<?xml version=': 0, '>': 673, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 258, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3647458', 'n_tokens_mistral': 8866, 'n_tokens_neox': 8161, 'n_words': 1634}