For the 2018's version of my website I wanted to build something simpler with clear info and that was easy to read. I also wanted to build it in React, so I came up with this, a template for a personal website.
To build the website, I used Gatsby.js, a tool that eases up the process of extracting the static files of a React application and let them ready to be deployed to Github. As well as react, es6, webpack, html5 and styled-components.
I wanted to build something that could easily be reused by someone else, developers or even people with no coding skills at all, so I've created a config file that gives you full control over the site's content. By changing this file, you can adapt the template to your own experiences and whithin some minutes, build your own personal website.
"personalInfo": {
"name": {
"firstName": "Thiago",
"lastName": "Loschi"
},
"jobTitle": "Senior Front End Engineer",
"location": "Ottawa, Canada",
"contacts": [
{
"name": "linkedin",
"url": "https://linkedin.com/in/thiagoloschi"
},
{
"name": "github",
"url": "https://github.com/thiagoloschi"
}
]
},
"education": [
{
"period": {
"beginDate": "2015",
"endDate": "2016"
},
"school": "California State University East Bay",
"major": "Computer Science",
"type": "Non-degree continuing education",
"place": "Hayward, United States",
"badge": "https://media.licdn.com/dms/image/C510BAQGtl_-oVAWDfA/company-logo_400_400/0?e=1551916800&v=beta&t=NLbSN7SCrikdQJ_Vf1IL2HwGUYoWSdubFYrL7qe-NYg",
"url": "https://www.csueastbay.edu"
}
]
},
"experiences": [
{
"period": {
"beginDate": "August 2018",
"endDate": "current"
},
"jobTitle": "Senior Front End Engineer",
"company": "Farfecth",
"location": "Sao Paulo, Brazil",
"description": "Working in a multidisciplinary global team, I'm currently helping to build what we consider to be the store of the future. My team is responsible for creating world class connected devices that will boost shoppers experience from the moment they walk in the store until they're ready to leave, making it also possible for them to continue shopping from home.\n\n There are two main React applications we're building and they're mostly being built using Redux, Nextjs, Electron, Webpack, Jest and Enzyme. The main one will be used on our fitting room's smart mirrors.\n\n I'm currently working on two product lines, the Store of The Future and the Black and White platform. Our core clients are huge and well known fashion brands like Chanel, Thom Browne and Browns and we always keep in mind the idea of having our products ready to be used for new clients in the future.",
"url": "https://farfetch.com",
"image": "https://i.amz.mshcdn.com/VWqhqdBXySHLqXPwYFLJOa3aJ54=/950x534/filters:quality(90)/https%3A%2F%2Fblueprint-api-production.s3.amazonaws.com%2Fuploads%2Fcard%2Fimage%2F446429%2Fa86e424d-51cc-447c-831b-a4b076a9a955.jpg",
"color": "#fafafa",
"text": "#333"
}
],
"theme": {
"color": "#fff",
"fontUrl": "https://fonts.googleapis.com/css?family=Montserrat",
"fontName": "'Montserrat', sans-serif",
"fontColor": "#000"
}
}To develop your own website, clone the project and follow these instructions to set up your own github pages, then read gatsby docs on starting the project. Note that if you're cloning an existing project, you can jump to starting the development server, after installing the dependencies. Once you're done with editting the config file, follow this article on how to easily deploy your website to github pages. You should then be ready to go!
This time I decided not to open pull requests as I usually do. Instead, the code was written to the develop branch and deployed to the master branch. New features and issues resolution will come in a form of PRs. Collaboration is welcome!
A demo can be seen live at my own personal website: thiagoloschi.com
And there's also Monique's fork at monimoledo.github.io, which is an example of the template being used for the first time. :)
I'll edit this document with more use cases when there are any.
Desktop: Scroll down for experience cards
Mobile:
Tablet:
You can also set a different theme and style it the way you want:
"theme": {
"color": "#333",
"fontUrl": "https://fonts.googleapis.com/css?family=Roboto",
"fontName": "'Roboto', sans-serif",
"fontColor": "#fff"
}