DEV Community

Cover image for Portfolio - Building the website
Christopher Daniel
Christopher Daniel

Posted on

Portfolio - Building the website

Website

I started building the website from the template Yew webpack template. Using this template reduced my development effort thanks to hot reloading. To speed up I have used bulma css framework

Key takes

  • I need to ensure the app is responsive
  • It should have a good light house score
  • SPA should have multiple routes

Routing

Yew has a router library named yew-router which we are using to setup routing. When SPA is deployed as static site it, routers need extra configuration. We have to configure index.html as fallback url so any site would first reach index.html. Now the routes simply append the href in url bar because of relative url. To avoid this I have used added base tag in head.

 <base href="https://yew-portfolio-iwfte.ondigitalocean.app/">
Enter fullscreen mode Exit fullscreen mode

Layout

Even though I used bulma css to speed up, there are some complex layouts, where we need to use css grid.

Bundle size

Unlike mature frontend frameworks like Next js, Gatsby, Yew didn't have code splitting. This costs the website performance. The wasm file size is around 450kb. This is one of the main downsides of writing a whole website in yew.

Light house scores

More Info

Cover Image from Unsplash

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay