http://mk7kf.github.io is the third iteration of my own GitHub website. I coded my website once again from scratch instead of relying on a template, but this time I focused on applying more minimal computing principles. This iteration is much simpler than V2. It is a responsive website that relies only on HTML/CSS, no Javascript. Again, you can download all the code directly from this repository so that you can see how the website was built—no shortcuts or other hidden packages / other apps. You can use my site as a template or starting point for your own website if you wish.
The design is a simple, single-column grid so that it can be read comfortably on a mobile as well as a desktop or laptop screen. There are as few images as possible on the website so that it can be loaded easily regardless of the quality of Wi-Fi. I've also removed a lot of the other resources and features from the previous version in order to cut down on the website's bulk, and to keep some things private. While I still support the collaborative and open ethos that shaped the last version of my website, the internet is becoming an increasingly sketchy place so I am trying to be more conscious about what I upload here.
The most "complicated" dimension of the website is perhaps the Twitter timeline embedding on the "Contact" page—but even then this was a straightforward addition. Again, all HTML and CSS.
One thing I really like about the new design is the addition of my Chinese name alongside my English one as the header. I was also able to center the picture of my grandmother and myself as the main image. I also like the new font better—Arsenal, from Google Fonts. It's still sans-serif, but just a little heavier than the font in V2 so that the text is easier to read.
- The following notes are a record of my thoughts for the second version of my website.
http://mk7kf.github.io is the second iteration of my own GitHub website. This time, instead of relying on a premade template, I coded and designed the entire website by hand for the first time -- but I had a lot of help. This ReadMe lists all of the inspirations and resources that I used and/or found useful when building it.
You can also download the HTML, CSS, and Javascript files directly from this repository so that you can see how the website was built -- no shortcuts or other hidden packages / other apps. You can use my site as a template or starting point for your own code if you wish.
- May Helena Plumb's website (https://www.mayhplumb.com/), especially for modelling what solidarity in the academy looks like through sharing grant and fellowship documents, and providing land acknowledgement statements.
- The Minimal Computing approach (https://go-dh.github.io/mincomp/thoughts/). At the most general level, minimal computing emphasizes designing websites and other digital projects around the question of "What do we need?" (Alex Gil). Some of the principles that shape this HTML/CSS-only website are minimal obsolescence, maximum access, maximum justice, and minimal automation, and you can find out more about these principles on this page: https://go-dh.github.io/mincomp/thoughts/2016/10/03/tldr/.
- Ensure that the website conforms to Accessibility principles
- Flesh out and improve the Google MyMap of my dissertation
- Optimize the site for phones as well as desktops
- Add a blog component to the website so that I can write about books that I'm reading
- Create French and Mandarin versions of the website
- Add a "What is Decadence?" page in the Resources tab
- I created the typing effect in the ". . . And Why I Do it" by adapting some HTML and javascript code in JC Lee's "Simple Typing Effect pure JS (beginner)": https://dev.to/ljcdev/simple-typing-effect-pure-js-4p5m.
- I built the two column layout by adapting some of the code from the "CSS Multiple Columns" lesson at W3 Schools: https://www.w3schools.com/css/css3_multiple_columns.asp.
- I found the header image on http://www.unsplash.com, a great site that contains freely-usable high-quality images.
- I found the font on https://fonts.google.com/, which provides freely-usable, high-quality fonts and handy tools for easily importing those fonts into your website.
- I created the different tabs by adapting the code from the "Collapsibles/Accordian" lesson at W3 Schools: https://www.w3schools.com/howto/howto_js_accordion.asp
- I created the map of my dissertation by using Google MyMaps: https://mymaps.google.com/. I know that there are several mapping platforms out there but in my experience this is still definitely one of most user-friendly yet also effective platforms for mapping anything you want and customizing the design.
- I created the download buttons by adapting the code from the "Download Button" lesson at W3 Schools: https://www.w3schools.com/howto/howto_css_download_button.asp.
- I created the randomized quote generator by adapting the code from Sophanarith Sok's "Build a random quote generator with Javascript and HTML for absolute beginners": https://www.freecodecamp.org/news/creating-a-bare-bones-quote-generator-with-javascript-and-html-for-absolute-beginners-5264e1725f08/.