Personal Website

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

• Intuitive navigation and transition between pages:
  • Since this page doesn’t have the conventional layout, it can be hard to navigate for some people. It takes a lot of feedback for me to recognize what works and does not work for someone who’s visiting for the first time.
• Keeping files short and sweet — reusable and maintainable
  • I just don’t want to look at my code and moan
  • But who can guarantee that will never happen
  • I just try to avoid that as much as possible

Screenshot

Links

Live Site URL:

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• React - JS library

What I learned

// JS code that I'm proud of
function Keyboard() {
    function createLetterKey(item) {
        return(<Letter 
                key={item.id}
                letter={item.letter}
                container={
                    (item.link !== "/") 
                    ? "container" 
                    : "container-inactive"
                }
                to={item.link}
                name={item.name}
            />)
    }

    // Generating the keyboard from the key component

    return (
        <div className="keyboard" id={"keyboard"}>
            <div className="letter-row">{firstRow.map(createLetterKey)}</div>
            <div className="letter-row">{secondRow.map(createLetterKey)}</div>
            <div className="letter-row">{lastRow.map(createLetterKey)}</div>
        </div>)
}

export default Keyboard;

Continued development

• Add technical projects
• Add resume + email
• Add personal non-technical projects
• A back-end to store photos

Useful resources

• React documentation - Always a good place to refer to for any React questions
• Some buddies who never code, so they can point out what’s not working without knowing that a feature can takes me half a day to work on

Author

• Website - Thi Le

Acknowledgments

• Again, my buddies
• And React documentation
• And the Internet