While trying to get back more into coding and to "shift left" myself, I came across my #100DaysOfCode repository on Github. So, I decided to carry on after more than 3 years. Cause, why not? And what better way to start than with a [Profile README](https://github.com/iamsywid), so I thought. *You'd think a profile page would be a bit easier for me to write after all these years, but not really.* 😂 ## TL;DR 1. A public repository with the same name as your username + README.md = ✨[Github Profile README](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme)✨ 2. Organize texts with reference-style links and collapsible sections in Markdown 3. Add language, framework and social badges through [shields.io](https://github.com/badges/shields) 4. Animate by using SVG + CSS without external hosting 😎 PS: The semi-invisible SVG on Github Dark mode. ## Some backstory [100DaysOfCode](https://www.100daysofcode.com/) is one habit forming activity where the aim is to code for at least 1 hour everyday. And yes, my *nth* attempt and I have not arrived at the 100th day ever. How to manage work, projects, studies and all the random things I'd like to try? 🤔 > "...most of the time, approaches that are incremental and forgiving of error are more likely to pay off in the long run. That way, if there is one part of the approach you forget or fall behind in, **you don't have to abandon all the rest**." - Fallows, James. (2015) Foreword. In Allen, D. *[Getting Things Done The Art of Stress-Free Productivity](https://www.goodreads.com/book/show/1633.Getting_Things_Done)* My former self would have felt the need to start at Day 0 and strive to *perfectly* get to Day 100. 😶 This time, I decided to ~~just~~ keep going, bounce back and pick up where I left off. And as they say, "the best approach is probably what works for you." ## The things I learned 1. The ✨special ✨ repository ![A special repository](https://res.cloudinary.com/inbytes/image/upload/v1636188420/dev/iamsywid/posts/q0mdixndm/ul53zhsdnfdwwmzvtxkh.png) - Name the repository the same as your username. - It has to be Public. - A README.md default template would also be available from Github which can be edited directly. 2. Markdown - [Reference-style Links](https://www.markdownguide.org/basic-syntax/#reference-style-links) - If there are multiple references to the same link, reference-style could improve readabilty. - It reminds me of a constants file. - The references won't display on the rendered output and are usually found at the end of the Markdown. - Format: `[Reference]: URL` ``` [github]: https://github.com/iamsywid [linkedin]: https://www.linkedin.com/in/christinebalanaa/ [twitter]: https://twitter.com/iamsywid ``` - Instead of adding the whole URL every time, it's a nice alternative. - With Reference Link: ``` [![Twitter Follow](https://img.shields.io/twitter/follow/iamsywid?style=social)][twitter] ``` - Without Reference Link: ``` [![Twitter Follow](https://img.shields.io/twitter/follow/iamsywid?logo=twitter&style=social)](https://twitter.com/iamsywid) ``` - Collapsible section - Format: `details` + `summary` tags. ```

More about me

```java class HelloWorld { System.out.println("我特别喜欢学外语。"); } ```

``` - Notes: ❗ Add an empty line after the closing `` tag to render the code blocks correctly. ❗ Tabs and indention may affect the render depending on the platform:

🚀 Here's a preview

class HelloWorld { public static void main(String[] args) { System.out.println("我特别喜欢学外语。"); System.out.println("Ich komme von den Philippinen."); System.out.println("Masaya akong makilala kayo. \uD83D\uDE0A"); } }

3. Language, tools and social badges through [shields.io](https://shields.io/) >![Social** Badges](https://res.cloudinary.com/inbytes/image/upload/v1636289371/dev/iamsywid/posts/q0mdixndm/hpjmotkluco7dry53aps.png) ![Tools Badges](https://res.cloudinary.com/inbytes/image/upload/v1636289480/dev/iamsywid/posts/q0mdixndm/sv7domnzvt1ho2npujha.png) - Getting the twitter badge URL ![Twitter Shields Badge](https://raw.githubusercontent.com/iamsywid/100-days-of-code/master/images/r1-d20-shields-twitter-badge.gif) - Go to https://shields.io/ and search for `twitter`. - Generate the twitter badge and copy the URL - Format: ``` [![alt text](shields.io URL)](URL) ``` - Example: ``` [![Twitter Follow](https://img.shields.io/twitter/follow/iamsywid?style=social)](https://twitter.com/iamsywid) ``` - If the icon is not available via shields search, try [simpleicons](https://simpleicons.org/) - Over 2000 free icons of popular brands are currently available in simpleicons. The brand colors in hex code are also provided. - Format: ``` ![alt text](https://img.shields.io/badge/-?logo=markdown&logoColor=white&style=for-the-badge) ``` - Parameters: - label: user defined text beside the icon - badge background color: hex code or named color - [logo](https://github.com/simple-icons/simple-icons/blob/develop/slugs.md): name of the icon - logoColor: hex code or named color - style: some options are `flat`, `for-the-badge`, `plastic`, `flat-square`, `social` - Example: ``` ![Markdown](https://img.shields.io/badge/Markdown-000000?logo=markdown&logoColor=white&style=for-the-badge) ``` - Parameters: - **label** = Markdown - **badge background color** = #000000 - **logo** = markdown - **logoColor** = white - **style** = for-the-badge - This is a nice reference which helped me understand the URL format: [How to make custom language badges for your profile using shields.io](https://javascript.plainenglish.io/how-to-make-custom-language-badges-for-your-profile-using-shields-io-d2aeaf016b6b) 4. SVG + CSS I thought the [CSS Typewriter Effect]((https://www.sitepoint.com/css-typewriter-effect/)) would be a fun exercise. And while searching for ways to insert this into Markdown, I came across [SVG Foreign Objects](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) which would allow HTML and CSS to be embedded into the SVG. - How to add animated text using SVG `foreignObject` and CSS `@keyframes` ``` ``` - Upload to the repository ![Images Github Repository](https://res.cloudinary.com/inbytes/image/upload/v1636189198/dev/iamsywid/posts/q0mdixndm/tbaepjg3uxeklu4hn1qm.png) - Place into the Markdown ``` ![hello, world](images/hello.svg) ``` 🚀 And there's the typewriter effect: ![Hello, Light](https://raw.githubusercontent.com/iamsywid/100-days-of-code/master/images/r1-d017-hello-light.gif) References: - [CSS Typewriter Effect](https://www.sitepoint.com/css-typewriter-effect/) - [Rich HTML in GitHub README](https://omrilotan.medium.com/rich-html-in-github-readme-bfb3de791441) ## Dark Mode All seems working until... ![Hello, Dark](https://raw.githubusercontent.com/iamsywid/100-days-of-code/master/images/r1-d017-hello-dark.gif) The SVG color doesn't switch automatically when changing themes. I defined the color attribute for now. But maybe leave this as a semi-invisible hello on dark mode (*as a feature*)? 😸 ## Now, what? Let's keep going! Some things remain to be unseen unless we try. 👩‍💻 ![Growing my notes](https://raw.githubusercontent.com/iamsywid/iamsywid/main/images/growing-my-notes-00.gif)

Hello, I'm Christine 👋

Setting up Crisp Chat in Nuxt 3

[Javascript Basics] Day 2: Strings

On Getting Started with Github Profile README