Lucca Wang

How I Built This Website

While developing this website, I employed my software development, problem-solving, and communication skills. Through technical writing and documentation of my development process, I'm able to provide insight into the website's construction. I appreciate your curiosity of it. (You can find more documentation I've written on my other projects on GitHub here and here.) In this documentation, I alternate between past and present tense, because I built this in the past but maintain it in the present.

1. Authorship: First off, I hand coded every character of this site. I didn't use a template - I built it all. (I'm not opposed to templates, and I have experience building sites on hosting platforms; but this was a fun challenge to showcase my skills.) Although I respect AI tools (and am exploring GenAI, AI, and ML), the code came from me, Lucca Wang (and not the ever popular ChatGPT or any other source).
2. Planning: I engaged in strategic planning and thorough research, asking myself, "What information do I need to include on this portfolio website?" Maintaining a modern web design while presenting key details in a way that reflects who I am is important to me.

3. Technologies: For launch speed, simplicity, and cost effectiveness, I decided to use GitHub Pages to host and deploy this website. GitHub Pages supports HTML, JavaScript, and CSS, so I used VSCode as my text editor to develop this site with those technologies as my development environment.

   I enjoy using Git for version control with commits written in the format of short, descriptive, and starting with a past tense verb: "Updated CSS to ensure contrast on active button click."

   I integrated Google Fonts API to enhance the type. I implemented Meta's Open Graph protocol to ensure the portfolio displays rich previews that are engaging and polished when the website is shared on social media platforms.

4. Domain: I selected a domain provider and registered a domain name, then configured it by updating the CNAME file.

5. Asset Organization and Management: I began by gathering and organizing the various assets required for the website, ensuring they were well-structured and optimized for web use.

   File Types and Formats: The majority of the assets I worked with were images, with a focus on PNG files. PNG is ideal for web use due to its lossless compression, maintaining high quality while keeping file sizes relatively small. I used the online tool Icons8 to customized the site's icons, including the favicon, the social media icons, and the contact icons - learn more in Styling.

   Additionally, I used GIF images for animations, as they are widely supported and provide an easy way to implement motion graphics without needing complex video files. For audio, I leveraged the HTML5 update (since 2014), which allows for direct embedding of audio files in the site. This update significally simplifies the process of adding sound without relying on third-party plugins.

   Naming Conventions and Directory Structure: To ensure the website would be easy to maintain in the future, I paid special attention to naming conventions for all assets. I followed a consistent pattern to ensure that every file is easily identifiable and logically organized. The directory structure was also carefully planned, with all assets organized into folders by type (audio, images, etc.), making navigation intuitive and minimizing the risk of broken links or misplaced files as the project evolves.

6. Webpages: I built out index (the homepage) with HTML. Then, I added more webpages, like this one. I prioritize a thoughtful coding style that emphasizes readability and maintainability. I use alt and title attributes, along with section tags, to enchance accessibility.

7. Styling: I adhered to the Americans with Disabilities Act (ADA) Guidelines for font size and applied strong design principles, such as hierarchy. (ADA Guidelines also closely aligns with the Web Content Accessibility Guidelines (WCAG).)

   Responsiveness: I ensured the website is consistent and accessible across both computer monitors and mobile screens by implementing responsive design with CSS media queries. I enjoyed working with CSS selectors, especially leveraging powerful classes and as-is DOM elements. The animations add a dynamic touch. I utilized CSS variables (custom properties) for the colors in the stylesheet (instead of hex color codes) for reusability and theming. The variables are great for maintenance and readability.

   Navigation Features: The navigation bar mimics conditional rendering, enhancing the user experience (UX) as users move between pages. This method allows for seamless navigation within the static structure, adhering to GitHub Pages' requirements and conserving space on the always-visible navigation bar. This ensures direct access to all site content while prioritizing user interface (UI) design. (Currently, I designed the navigation bar to display in a single line on larger screens, and to wrap into two lines on mobile devices. I've been considering the implications of non-conditional rendering.) I also added a fixed up arrow in the bottom right of the website, so the user can "fast scroll" up to the top of whatever webpage they're browsing.

   Custom Icons and Branding: I set a color palette for theming in the CSS. I matched the theming colors of the site's branding exactly with the colors of the icons. This approach allowed me to create cohesive, high-quality icons that fit seamlessly with the overall design and aesthetic of the site.

8. Learning: I implemented a new-to-me technology, Facebook/Meta's Open Graph. I also learned more about GitHub Actions and utilized GitHub Pages for the first time with this site. I enjoyed diving into advanced CSS as well. Overall, I also deepened my understanding of the website's construction, especially after employing documentation of it's creation.
9. Gratitude: Thank you for visiting! I'm grateful for opportunity to show you my work and skills.