Portfolio - My personal website

https://manuel.gal

WARNING: This repo was splited into two branches in order to provide a STATIC version of the project (front-end only), and a "FULL" version (web aplication with back-end). Front-end ready-to-go version is available at MASTER branch. Full web app, using PHP in order to provide a multi-language site, is available at back-end branch. Check the corresponding Readme to learn how to launch the project.

#portfolio #website #bulma #bulmaio #html #css #php #js #javascript #multilanguage

My own website. Basically, it is an online portfolio where to write about my projects and proffesional path. Designed and developed by myself using Bulma.io among others technologies. Some features considered at the developing of this projects were:

• Multilanguage support: The site is available in Portuguese (AGAL Galician), English, Spanish and French. Check the back-end branch if you want to know more about this.
• Geolocalization stuff: OpenStreet maps with a non-state layout.
• Easily understandibility code thanks to Bulma.io.
• Mobile friendly: The site gets adaptated to mobile screens, so it presents a confortable GUI from both, desktop and mobile.

Feel free to fork this repo and create your own portfolio from here.

---

Deployment

This is the static version of the project. Just open the index.html file with your favourite browser and you are ready to go! Anything else. Simple.

Enjoy!

---

Index

• Home
• Portfolio
• CV
• About me
• Credits

---

Home

Some credits:

• Typing carousel from Gregory Schier: https://codepen.io/gschier/pen/jkivt
• Animations created with Vivus: https://maxwellito.github.io/vivus-instant/

Easter egg: animations change everytime you enter the site thanks to a simple Javascript function I've made:

<script type="text/javascript">  
	var svgs = new Array(6);  
	svgs[0] = "images/faro.svg";
	svgs[1] = "images/gaita.svg";  
	svgs[2] = "images/portatil.svg";
	svgs[3] = "images/triskele.svg";
	svgs[4] = "images/vieira.svg";
	svgs[5] = "images/chuva.svg";
	
	var random = Math.floor(Math.random() * svgs.length);
	document.getElementById("my-svg").data = svgs[random];
</script> 

---

Portfolio

A simple and confortable page were to check some of the projects I've done.

---

CV

Some credits:

• Maps thanks to: Leaflet JS (https://leafletjs.com/) and Open Street Map (https://www.openstreetmap.org/)

This section is structured in 2 clearly differenced parts:

Map

Geovisualization made easy at HTML thanks to Leaflet JS. Simply write this HTML tag and a map will be displayed depending on your own configurations (basically give a height at the style, so the map can be shown):

<div id="map" class="map" style="z-index: 1"></div>

#map {
    height: 70vh;
}

Map info and display settings wrote at a JS file available at: js/leaflet-map.js

var map = L.map('map', {
			center: [48, -3],
			zoom: 5,
			zoomControl: true
		});

var defaultLayer = L.tileLayer.provider('Hydda.Base').addTo(map);

L.marker([42.8755536, -8.5532895]).addTo(map)
		.bindPopup('<p class="heading">qwert</p> <p class="heading">asdf</p> <b> <p>Content</p>');
.
.
.

Chronology

Made with the Bulma timeline extension (https://github.com/Wikiki/bulma-timeline) and Bulma modals.

WARNING: As bulma does NOT include any Javascript content, it was necessary to write a simple JS function to get Bulma modals working.

Bulma modal javascript code (also available at js/modal.js):

var refs = {
    open: function(a) { document.getElementById(a).classList.add('is-active');  },
    close:  function(a) { document.getElementById(a).classList.remove('is-active');   }
};

Some important indications at HTML files too:

• Calling modals at HTML:

<div class="timeline-content" onclick="refs.open('modalID')">
    .
    .
    .
</div>

• Modifications at modal, to be able to close it and some style changes:

<div class="modal" id="modalID">
    <div onclick="refs.close('name')" class="modal-background"></div>
    <div class="modal-content" style="width: 85%">
        <section class="hero has-background-white-bis is-fullheight-with-navbar">
            <div class="hero-body">
                .
                .
                .
            </div>
        </section>
    </div>
    <button class="modal-close is-large" aria-label="close" onclick="refs.close('modalID')"></button>
</div>

---

About me

A simple page where to write a little bio and add some contact info.

---

Credits

Without the technologies named in this section, this project could not exist as it is. Many of them are free.

---

License