radualexandrub/Old-Portfolio

Responsive single-page portfolio built on a Startbootstrap template, using Bootstrap and vanilla JavaScript

radualexandrub.github.io

My first Portfolio!

About:

At first I thought it's easy to make a personal portfolio (just grab a template and edit with your info), but it is more than that. Even if this is a static website, I still had to edit some of the CSS and JS files in order to make this site as responsive and fluent as possible (especially on mobile devices). Sometimes it's not that easy to just copy-paste elements from the Internet - it's also important to find the best ways to integrate those elements into the project.

The best way to learn something is by doing it yourself! However, you can use this whole website as your portfolio, if you want (without changing anything but your name and projects), but I don't recommend doing this for your learning experience! :D

I also provided a full step-by-step guide bellow (from my experience) to make this web portfolio visible/searchable on Google.

Credits / Links I've used:

• Start Bootstrap - Bootstrap themes, Templates and more
• Font Awesome icons (free version)
• Devicon - Icons for programming languages & development tools
• w3schools - Images with transparent text
• JQuery LightSlider - Responsive Content slider with carousel thumbnails navigation
• MockUPhone - Screenshots device mockups generator
• Pexels and Unsplash - Best Free Stock Photos with No Licenses Required
• Add background image to the first section (Hero Image)
• Easiest/Best way to Create a Dark/Light Mode Switch with CSS Variables

My steps / My journey for improving Google SEO (Search Engine Optimization):

• Add these meta tags in your index.html:

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="description" content="YOUR NAME/DESCRIPTION | PORTFOLIO/BLOG/etc" />
  <meta name="author" content="YOUR NAME" />
  
  <meta property="og:title" content="YOUR NAME/DESCRIPTION | PORTFOLIO/BLOG/etc">
  <meta property='og:image' content='//media.example.com/ 1234567.jpg'/>
  <meta property='og:description' content='Description that will show in the preview'/>
  <meta property='og:url' content='//www.example.com/URL of the article'/>
  
  <title>YourWebsiteTitle in Tab | Portfolio/Blog/etc</title>
  <link rel="icon" type="image/x-icon" href="img/YourFavIcon.ico" />

• Add alt attribute to <img> tag. Explain what the picture is

• Use Optimizilla - Online image optimizer to shrink images to the minimum possible size while keeping the quality

• Check Site performance with PageSpeed Insights from Google

• Generate sitemap.xml and robots.txt

  • In robots.txt, add Sitemap: https://[your-website-name].github.io/sitemap.xml

• Add Google Tag Manager (+ Paste snippets to index.html)

• Add website to Google Analytics (+ Paste snippet to index.html)

• Add website to Google Search Console (click on +Add property) using "URL prefix" method

  • In Google Search Console app, add "[your-website-name].github.io/sitemap.xml" in sitemap tab.
  • Wait 3-4 days until "Overview", "Performance" and "Coverage" tabs are fully functional in your Google Search Console
  • (In "Coverage" tab) If your main page appears to be "Excluded", click on it on an then in "Coverage > Discovered – currently not indexed > Examples" click on "Inspect URL" icon. Here you can also perform a "Live Test" to see if your page is loaded successfully
  • Wait 10 to 30 minutes
  • Now your page should appear on Google Search. You can check it by searching on Google: site:[your-website-name].github.io

My Social Networks Links:

My portfolio: radubulai.com
My blog: CodingTranquillity