Lucca Wang

1. 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.

2. Responsiveness: I ensured the website is consistent and accessible across both computer monitors and mobile screens by implementing responsive design. This way, this website can be easily viewed on desktop and is mobile-friendly.

3. Accessibility: I adhered to the WCAG (Web Content Accessibility Guidelines) and the Americans with Disabilities Act (ADA) Guidelines.
4. Navigation Features: I'm in the process of updating this right now. I'm aiming for seamless navigation within the static structure, adhering to GitHub Pages' requirements on the current intentionally always-visible navigation bar. This ensures direct access to all site content, prioritizing user experience (UX). I designed the navigation bar to display in a single line on larger screens, and to wrap into two lines on mobile devices. I implemented fixed arrows in the bottom right of the window also for improved UX, so website users can "fast scroll" up to the top or bottom of whatever webpage they're browsing.

5. 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.

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

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



6. 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.

   I set a color palette for theming in the CSS. 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. 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 from the icons8 library online that fit seamlessly with the overall design and aesthetic of the site.

   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 that 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, JavaScript, etc.), making navigation intuitive and minimizing the risk of broken links or misplaced files as the project evolves. This structure also enhances the organization and cleanliness of the code repository/project.

7. Learning: I implemented a new-to-me technology, Meta's Open Graph. I also learned more about GitHub Actions and utilized GitHub Pages. I enjoyed diving into advanced CSS. Overall, I also deepened my understanding of the website's construction by flexing my technical writing and communication skills in employing documentation of it's creation.

8. Gratitude: Thank you for visiting! I'm grateful for opportunity to show you my work and skills.

Software Engineer's Author Note

I enjoyed building this website and being challenged to talk/write about highly technical subjects and concepts! I also enjoy maintaining it and continually developing and improving the codebase.

In this documentation, I alternate between past and present tense, because I built this in the past but maintain it in the present.

You can find more documentation I've written on my other projects on GitHub here and here. Learn more about my recent work.