Portfolio - Leo Giesen

This project is deployed at leogiesen.de. The original version of my portfolio can be inspected here, which I created with HTMl5 CSS3 and JavaScript when I was 18.

Project Setup

1. VS Code is the recommended code editor
2. Node.js
3. Vue.js: npm install -g @vue/cli #Install Command Line Interface

Check your versions:

   node --version              # v16.14.2
   npm --version               # 8.5.0
   vue --version               # @vue/cli 5.0.8

Serve/Start Front-end - Compiles and hot-reloads for development

npm run serve
#or start via User Interface with: vue ui

Build for Production

npm run build #Compiles and minifies for production

To publish the changes, the "dist" directory contents are to be copied and pushed to the portfolio-v2-dist repository because the hosting is based on it. This must be performed because the hosting plan is unable to build from production by itself.

General Advice for Web Projects

SEO (Search Engine Optimization)

• Keep visitors on your website (dwell time) by providing excellent content (!) (define important keywords, which people search to get to your website)

• Improve loading speed (see Improve Performance)

• Optimize your HTML

  • Use alt attributes in images so that the search engine knows what you display
  • Use aria tags for more complicated displayed content, e.g., sliders
  • Use article tags for Bots to know what main content the site presents

• Increase your Click-Through-Rate (CTR)

• Make use of metadata (located in head), e.g. description tag displayed in google search results

• Responsive Web Design (Mobile Friendly Test)

• Linked by other sources, e.g. social media and other websites

• Tools & Guidelines:

  • Google Starter Guide
  

  (see Moz)

Improve Performance

• Reduce the image size with a compressor
• Avoid CDNs
• Tools & Guidelines:
  • Check Page Speed