Simple personal website built by react + koa2

Time:2020-3-17

Browse address: www.xpy.pub

At the end of the year, the iteration of the company’s project was almost over, so I wanted to learn something.

As a programmer, there is no personal website.

I went to Alibaba cloud to buy a server. The reason why the front end chooses react + TS is that I am not familiar with it, so I just take this opportunity to practice. The reason for choosing koa2 on the server side is similar. In the past, flask was generally used for development.
Note: the quality of code writing is not satisfied (it must be refactored slowly later!)

Before writing the code, I referred to many big guy’s personal websites. I found that most of them have many functions and powerful business, so I will not take this route (lazy).


Project start

  1. Personal homepage:Put some basic personal information, do layer input password to see the real information processing, after all, it is also privacy.
  2. introduce oneself to:It’s like introducing yourself in one sentence.
  3. Blog:Put some links, and when you have more blogs, add a complete one.
  4. Message Board:In fact, it’s a bullet curtain, which looks more vivid.

Part of code

  • Code of snowflake on the first page
createSnow() {
    return new Promise((resolve) => {
      let shape =this.random(15, 50) + "px"
      let snowPng = snowPng1
      switch (this.random(0,2)){
        case 0:
          snowPng = snowPng1;
          break;
        case 1:
          snowPng = snowPng2;
          break;
        case 2:
          snowPng = snowPng3;
          break;
        default:
          snowPng = snowPng1;
      }
      this.state.images.push({
        src: snowPng,
        width: shape,
        height: shape,
        top: -50,
        left: this.position()
      })
      resolve(this.state.images)
    })
  }
  snowAction(index: number) {
    this.createSnow().then((item:any):void => {
      let timer = setInterval(_ => {
        if(item[index]){
          item[index].top += 2
          this.setState({
            images: this.state.images
          })
          if(this.state.scrollArea[0]){
            if(item[index].top >= parseInt(this.state.scrollArea[0].offsetHeight)-20){
              this.state.images.splice(index,1,{})
              this.setState({
                images: this.state.images
              })
              clearInterval(timer)
            }
          }
        }
      },10)
    })
  }

Note: running snowaction with a timer will generate snowflakes of different sizes.

  • Personal introduction page letter effect code
getResume().then(res => {
  Let data = res.data // data obtained by the interface
  let that = this
  let i: number = 0;
  let content:string = data.context
  function write ():void {
    if(i <= content.length){
      that.setState({
        displayContent: content.slice(0, i++) + '_',
        timer: setTimeout(write, 50)
      })
    }else{
      that.setState({
        displayContent: content
      })
      clearTimeout(that.state.timer)
    }
  };
  write()
})

Note: getresume is calling interface.

  • Barrage to be optimized, the code first with screenshots instead.
  • Simple personal website built by react + koa2
  • Simple personal website built by react + koa2
  • Simple personal website built by react + koa2

Thank

I wish you all a happy new year ahead of time!

Recommended Today

Opencv uses mouse response to crop image

Given an image, a part of the region of interest is cropped out, which is well implemented in PS, but how to use opencv? So this article mainly introduces opencv using mouse response to crop image: 1、 Code part: #include “stdafx.h” #include “cv.h” #include <highgui.h> #include <stdio.h> IplImage* org = 0; IplImage* img = 0; […]