/nutchak.github.io

Primary LanguageJavaScript

Documentation for nutchak.github.io

Table of Contents

Project Overview

The goal

The goal of this project is to create a personal website where projects can be showed. The website is hosted on GitHub Pages. The website should be simple and easy to navigate. The design should be clean and simple, but should also reflect my personality. However, since this is my first frontend project, the other main goal is to learn as much as I could, and also further develop my other skills.

Site maps

As mentioned above, the layout of the website is simple and easy to navigate, so users can find what they are looking for easily.

  • Home
  • About
  • Projects
    • Data analysis (causal inference of real wage)
    • Machine learning (travelling salesman problem with genetic algorithm)
    • Web development (this one!)
    • Lisp interpreter (not implemented yet)
  • Contact

Wireframe

To be added.

Framework

React is chosen as a framework because it's one of the most popular framework. Since it is popular framework, there are a lot of documents and resources available. The languages used are HTML, CSS and JavaScript. I chose to use TailwindCSS as CSS-framework, since it helped shorthen the time (and it's pretty nice to use!). I also used prettier for a more consistent code when using TailwindCSS. Framer motion is used for animations. The IDE I used is VSCode.

Reflection

  • I spent too much time on the design, i.e., fonts, colors, etc. Since I don't have knowledge in neither UX nor UI design, I struggled a lot with this part.
  • (Very important!) The project structure wasn't set up as planned, as the project grew more complex. This is because of my lack of knowledge in web development and React.
  • The site did not developed with mobile first in mind.
    • Default sm of Tailwind CSS is not small enough (my phone is iphone x, so the screen size is 576px). Changed from 640px to 576px.
  • Since I had so much fun with this project, the design and wireframe kept changing (there were so many things I wanted to try to implement!).
  • The classic centering the div.

Possible further development

  1. Double check the responsiveness.
  2. Hero section.
  3. Remake the navigation.
  4. Better page transitions.
  5. Add more projects.
  6. Redo the design.

Note

I'm currently working on another project which is based on this one where I will improve from the reflections above and better project planning.