Adding languages to my website

Hello,

For my portfolio I plan on adding the option of viewing everything in my second language. Is the best way to go about this just having something like having a link on my index.html that leads to a secondLanguage.html, which would just be the same page translated? Or is there a better way to do this?

Thank you for your help.

what framework are you using for your project?

I’m still very new to the front end scene. Right now I’m not using any, just building everything from scratch. I haven’t done a lot of work in things like Bootstrap to be super familiar with it. Would it be to my benefit to get familiar with a framework before building a portfolio website?

You can find some good advice on the principles of multilingual websites here and here.

One thing you could do is to pick a reputable site (maybe a government one) that is available in your first and second language and look at their source code.

For example, in Ireland the revenue site is available in both English and Irish

http://www.revenue.ie/en/Home.aspx

http://www.revenue.ie/ga/Home.aspx

Note the /en and /ga subdomains to direct to the two different home pages.

Definitely yes. I would not recommend building portfolio just to have a portfolio. It’s your face as a developer, face of your personal brand. Invest time in contemporary frameworks exploration while sharpening your general dev skills. Carefully choose framework(s) to specialize in. If not sure what to choose, read more reviews with subjective opinions. It’s quite challenging to know everything especially if you want to have life outside of dev career. Jack of all trades is probably not a way to go in context of frameworks and development in general.

PS: more about choosing framework(s) - try to not fall victim to hype and subjective opinions pressure; be logical; when choosing a framework, see who’s behind it, and think carefully if you should invest time in learning it; will it be good for you in the long run or not, etc.

This is good advice, thanks.
What I’ve been doing is working on improving the portfolio I built while working through some of the exercises at free code camp and figured I’d like to try to have it in my second language as well. I’ve still got a ways to go with Javascript and such, though, so I’m not %100 on jumping into a framework before being able to move around comfortably in vanilla javascript.

Sounds like a plan.
So, if you want to make relatively simple multilingual website, I can offer you the following approach. First of all, don’t make it ugly, don’t make loads of duplicate pages just to have different languages. Try this instead, here’s a brief idea:

  • each page should be unique (no duplicates)
  • each DOM element with text which should be translated must have a unique id
  • store selected language code, array with possible languages, and a map with translations in possible languages in global scope of your js bundle, like
var selectedLang = 'en';
var langOptions = ['en', 'anotherLang'];
var langs = {
  'en': {
    'DOM_id_1': 'translation',
    'DOM_id_2': 'translation',
    ...
  },
  'anotherLang': {
    'DOM_id_1': 'translation',
    'DOM_id_2': 'translation',
    ...
  }
};

make a dropdown menu which avails user to choose current language from langOptions and set value for selectedLang.

on page load, and after user switches language script should iterate over map of selected language, find each DOM element by id, which is map key, and use its value to set inner text. something like

var selectedLangMap = langs.selectedLang;
for (var key in selectedLangMap) {
  var value = selectedLangMap[key];
  document.getElementById(key).innerHTML = value;
}

Thanks! I think I’ve got it, so instead of duplicate pages, each in their own language, just translate the text that needs translating and give it its own unique id. Then once the end user changes the language it’s the same page, but the text would be overwritten by the id where the translation is stored. Is that the gist of it?
This will be fun to work on!

yes, you got it right.