Welcome to My Learning Notes

A clear, organized space to consolidate knowledge and document the learning process.

Welcome to My Learning Journey#

What is written, analyzed, and reviewed is retained longer. This is where I gather ideas, document knowledge, and sharpen my thinking through writing.

I don't write because I understand — I write to understand.

Core Principles#

Intentional learning
Think through writing
Keep knowledge organized

Intentional learning means revisiting key points at the right time. ¹

What You’ll Find Here#

Knowledge Streams#

Memorable concepts
Practical & technical notes
Tools and mental models

Topics#

Programming
Systems thinking
Productivity & habits
Personal growth & clarity

Markdown Demo & Style Playground#

This section ensures that Markdown/MDX components work smoothly and maintain a clean design.

Desk with notes and coffee — Local assets respect the theme preference if desired.
Source: Custom desk illustration

Sidenotes#

Sidenotes add context without interrupting the reading flow. ¹

Text Styles#

Bold for emphasis
Italics for attention
~~Things I no longer believe~~
inline code

Writing makes knowledge more durable.

Tabs#

console.log("Hello, World!");
 
function sum(a, b) {
  return a + b;
}
 
console.log("Sum =", sum(5, 7));

#include <iostream>
 
int main() {
    std::cout << "Hello, World!" << std::endl;
    int a = 5;
    int b = 7;
    std::cout << "Sum = " << a + b << std::endl;
    return 0;
}

print("Hello, World!")
 
a = 5
b = 7
print("Sum =", a + b)

Steps / Stepper#

01
Step 1: Initialize the Project
Run the create-next-app command to scaffold the workspace and install the initial dependencies so you have a clean environment.
02
Step 2: Install Tailwind CSS
Configure tailwind.config.js, add the @tailwind directives to globals.css, and double-check that any custom fonts or long-form prose styles are defined. This description is intentionally wordy to stress-test the line connector and prove that wrapped content does not break the layout even when it spans several sentences across multiple lines.
03
Step 3: Deploy
Push the code to Git, set up a Vercel project, and monitor the first deployment. Include follow-up tasks like enabling branch previews, inviting reviewers, and writing a release note so the vertical guide still looks great when steps have extra action items.

Tree View#

WORKSPACE

Button.tsx

Header.tsx

package.json

README.md

Tasks & Planning#

Initialize this space
Write and publish regularly
Review, revise, and iterate

Links & Resources#

Visit My GitHub

Table Example#

Topic	Learning Objectives			Current Status
	Plan	Timeline		Level	Progress
	Plan	Start	End	Level	Progress (%)	Completed Items
Technical Skills
Programming (Algorithms)	Reach Intermediate level	01/10	15/12	Intermediate	85%	Completed Algorithms section
System Design	Understand basic architecture	20/11	—	Beginner	30%	Learning High-level Design
Mindset & Modeling
Systems Thinking	Master foundational models	05/10	—	Beginner $\rightarrow$ Intermediate	60%	Wrote about Complexity
Systems Thinking	Apply models to practice	15/11	31/12	Intermediate	20%	Wrote about Complexity
Productivity	Apply Atomic Habits		No fixed deadline	Advanced	95%	Established stable habits
Personal Growth
Personal Growth	Write 5 analytical articles	01/11	15/12	New $\rightarrow$ Beginner	40%	Wrote 2 articles
Personal Growth	Review after 1 month	$x^2 + y^2 = x^2$		Developing	—	N/A
Average Progress			Around 60–70%
Remarks			On the right track and maintaining stability

Math#

Some inline formulas like $F = ma$ , $\vec{p} = \gamma m \vec{v}$ , $E^2 = (pc)^2 + (m_0 c^2)^2$ .

The Standard Model Lagrangian

\begin{aligned} \mathcal{L}_{SM} = &-\frac{1}{4} \color{#34d399}{F_{\mu\nu} F^{\mu\nu}} \\ & + i \bar{\psi} \not D \psi + h.c. \\ & + \psi_i y_{ij} \psi_j \phi + h.c. \\ & + |D_\mu \phi|^2 - V(\phi) \\ & - \frac{1}{4} \color{#34d399}{B_{\mu\nu} B^{\mu\nu}} - \frac{1}{8} tr(\mathbf{W}_{\mu\nu}\mathbf{W}^{\mu\nu}) - \frac{1}{2} tr(\mathbf{G}_{\mu\nu}\mathbf{G}^{\mu\nu}) \end{aligned}

Nested Calculus & Matrices: This combination is used to check if radicals, nested fractions, and matrices break the layout.

\color{#34d399}{J_{\alpha}(x)} = \sum_{n=0}^{\infty} \frac{(-1)^n}{n! \Gamma(n + \alpha + 1)} \left( \frac{x}{2} \right)^{2n+\alpha} \quad \text{and} \quad \mathbf{H} = \begin{pmatrix} \frac{\partial^2 f}{\partial x^2} & \frac{\partial^2 f}{\partial x \partial y} \\ \frac{\partial^2 f}{\partial y \partial x} & \sqrt[3]{ \frac{\int_{-\infty}^{\infty} e^{-t^2} dt}{\zeta(s)} } \end{pmatrix}

Einstein Field Equations: Used to test the rendering of superscripts/subscripts (indices).

\color{#34d399}{R_{\mu \nu}} - \frac{1}{2}R g_{\mu \nu} + \Lambda g_{\mu \nu} = \frac{8 \pi G}{c^4} T_{\mu \nu} \implies \int \left( \frac{c^4}{16 \pi G} (R - 2\Lambda) + \mathcal{L}_M \right) \sqrt{-g} \, d^4x

Code Blocks#

Test highlights key-value strings, nested arrays, and null/boolean values.

{
  "app_name": "MDX_Renderer",
  "version": 1.0,
  "features": ["syntax-highlighter", "math-jax"],
  "config": {
    "dark_mode": true,
    "deprecated_field": null,
    "max_retries": 5
  }
}

Test indentation and list visibility without brackets.

server:
  host: "0.0.0.0"
  port: 8080
routes:
  - path: /api/v1
    handler: main_handler
  - path: /health
    check: true

Test the color of keywords (SELECT, WHERE) against table names and strings.

SELECT u.id, u.username, o.total
FROM users u
JOIN orders o ON u.id = o.user_id
WHERE o.status = 'completed'
  AND o.created_at > '2023-01-01'
ORDER BY o.total DESC;

Test special characters like ::, &, 'a (lifetime) and macro println!.

struct User<'a> {
    username: &'a str,
    active: bool,
}
 
fn main() {
    let user = User { username: "Dev", active: true };
    println!("User: {}", user.username);
}

Test background/text color of added line (+) and deleted line (-).

function calculateTotal(price, tax) {
-   return price + price * tax;
+   return price * (1 + tax);
  }

Test hex color code #0f172a

.button-primary {
  background-color: #0f172a;
  color: rgba(255, 255, 255, 0.9);
}
.button-primary:hover {
  transform: translateY(-2px);
}

Custom Components#

Modern MDX allows embedding interactive elements directly in posts — very useful for data visualization.

Chart Demo#

Learning Experiments#

Sometimes the best way to learn is through practical experience. Below is a training log from a model experiment — a reminder that progress always comes from small steps.

Small, consistent growth compounds over time.

Epoch 1/5
166/166 ━━━━━━━━━━━━━━━━━━━━ 84s 415ms/step - loss: 0.1110 - val_loss: 0.0959
Epoch 2/5
166/166 ━━━━━━━━━━━━━━━━━━━━ 79s 472ms/step - loss: 0.0874 - val_loss: 0.0802
Epoch 3/5
166/166 ━━━━━━━━━━━━━━━━━━━━ 78s 463ms/step - loss: 0.0789 - val_loss: 0.0765
Epoch 4/5
166/166 ━━━━━━━━━━━━━━━━━━━━ 78s 467ms/step - loss: 0.0769 - val_loss: 0.0731
Epoch 5/5
166/166 ━━━━━━━━━━━━━━━━━━━━ 77s 464ms/step - loss: 0.0753 - val_loss: 0.0712

Callouts#

Performance Notes

Rendering too many components on the client can reduce FCP (First Contentful Paint).

Consider using Server Components when possible.

Deprecated

The getStaticProps function will be deprecated in v15. Switch to the fetch API.

Never commit .env files to GitHub.

$x^2+y^2=z^2$

Closing Thought#

Thanks for visiting.

This space will continue to evolve, change, and improve — along with its builder.

views

— views

Nguyen Xuan Hoa

nguyenxuanhoakhtn@gmail.com