Dev

README.md

@@ -9,7 +9,9 @@
 ## 🧭 Table of Contents
 
 - [✨ Features Added](#-features-added)
+- [⚡ Run Locally](#-run-locally)
 - [📝 Add a New Article](#-add-a-new-article)
+- [🏞️ Add a New Album](#-add-a-new-album)
 - [🤝 Contributing](#-contributing)
 
 ---
@@ -24,6 +26,15 @@
 
 
 
+---
+
+## ⚡ Run Locally
+
+```bash
+npm install
+npm run start
+```
+
 ---
 
 ## 📝 Add a New Article
@@ -36,7 +47,7 @@ To add a new article:
 
 ---
 
-## 📝 Add a New Album
+## 🏞️ Add a New Album
 
 To add a new album:
 
@@ -52,6 +63,6 @@ To add a new album:
 ## 🤝 Contributing
 
 Have cool ideas or spotted something to improve?  
-Feel free to [open an issue](https://github.com/truethari/reactfolio/issues) or fork the project and make it your own!
+Feel free to [open an issue](https://github.com/stanleyshen2003/me/issues) or fork the project and make it your own!
 
 > Let’s build something awesome together 💡

src/components/common/footer.jsx

@@ -22,7 +22,7 @@ const Footer = () => {
 							<Link to="/articles">Articles</Link>
 						</li>
 						<li className="footer-nav-link-item">
-							<Link to="/albums">Album</Link>
+							<Link to="/albums">Albums</Link>
 						</li>
 					</ul>
 				</div>

src/data/articles.js

@@ -1,9 +1,9 @@
 import computerAssembly from "./myArticles/computerAssembly";
+import ASML from "./myArticles/asml";
 
 
 
 
-
-const myArticles = [computerAssembly];
+const myArticles = [computerAssembly, ASML];
 
 export default myArticles;

src/data/myArticles/computerAssembly.js

@@ -26,16 +26,16 @@ function computerAssembly() {
 						<h1>Table of contents</h1>
 						<p/>
 						<nav id="217b7849-9a0a-80f9-af34-f4000f0f3718" class="block-color-gray table_of_contents">
-							<div class="table_of_contents-item table_of_contents-indent-0"><a class="table_of_contents-link" href="#216b7849-9a0a-8016-a324-d925ad6ea358"><strong>Components</strong></a></div>
-							<div class="table_of_contents-item table_of_contents-indent-1"><a class="table_of_contents-link" href="#216b7849-9a0a-80b8-ae7e-f264539a5891"><strong>CPU</strong></a></div>
-							<div class="table_of_contents-item table_of_contents-indent-1"><a class="table_of_contents-link" href="#216b7849-9a0a-8054-a046-e90f3a5d58e0"><strong>Motherboard</strong></a></div>
-							<div class="table_of_contents-item table_of_contents-indent-1"><a class="table_of_contents-link" href="#216b7849-9a0a-8010-a63e-e070553c3ed6"><strong>Memory</strong></a></div>
-							<div class="table_of_contents-item table_of_contents-indent-1"><a class="table_of_contents-link" href="#216b7849-9a0a-80a8-aa0c-eeaf1ed6c1ac"><strong>Disk</strong></a></div>
-							<div class="table_of_contents-item table_of_contents-indent-1"><a class="table_of_contents-link" href="#216b7849-9a0a-80cc-8dc0-f216e6f87796"><strong>Cooler</strong></a></div>
-							<div class="table_of_contents-item table_of_contents-indent-1"><a class="table_of_contents-link" href="#216b7849-9a0a-8066-bc0d-e97ccab3be64"><strong>Case &amp; Power</strong></a></div>
-							<div class="table_of_contents-item table_of_contents-indent-0"><a class="table_of_contents-link" href="#216b7849-9a0a-80e7-9422-dfdf5139909e">成品</a></div>
-							<div class="table_of_contents-item table_of_contents-indent-0"><a class="table_of_contents-link" href="#216b7849-9a0a-800c-bdfb-ce33f8f2597b">心得</a></div>
-							<div class="table_of_contents-item table_of_contents-indent-0"><a class="table_of_contents-link" href="#216b7849-9a0a-8008-a8c5-e9300962f592">後記</a></div>
+							<div class="table_of_contents-item table_of_contents-indent-0"><a class="table_of_contents-link" href={`${basedir}/article/1#216b7849-9a0a-8016-a324-d925ad6ea358`}><strong>Components</strong></a></div>
+							<div class="table_of_contents-item table_of_contents-indent-1"><a class="table_of_contents-link" href={`${basedir}/article/1#216b7849-9a0a-80b8-ae7e-f264539a5891`}><strong>CPU</strong></a></div>
+							<div class="table_of_contents-item table_of_contents-indent-1"><a class="table_of_contents-link" href={`${basedir}/article/1#216b7849-9a0a-8054-a046-e90f3a5d58e0`}><strong>Motherboard</strong></a></div>
+							<div class="table_of_contents-item table_of_contents-indent-1"><a class="table_of_contents-link" href={`${basedir}/article/1#216b7849-9a0a-8010-a63e-e070553c3ed6`}><strong>Memory</strong></a></div>
+							<div class="table_of_contents-item table_of_contents-indent-1"><a class="table_of_contents-link" href={`${basedir}/article/1#216b7849-9a0a-80a8-aa0c-eeaf1ed6c1ac`}><strong>Disk</strong></a></div>
+							<div class="table_of_contents-item table_of_contents-indent-1"><a class="table_of_contents-link" href={`${basedir}/article/1#216b7849-9a0a-80cc-8dc0-f216e6f87796`}><strong>Cooler</strong></a></div>
+							<div class="table_of_contents-item table_of_contents-indent-1"><a class="table_of_contents-link" href={`${basedir}/article/1#216b7849-9a0a-8066-bc0d-e97ccab3be64`}><strong>Case &amp; Power</strong></a></div>
+							<div class="table_of_contents-item table_of_contents-indent-0"><a class="table_of_contents-link" href={`${basedir}/article/1#216b7849-9a0a-80e7-9422-dfdf5139909e`}>成品</a></div>
+							<div class="table_of_contents-item table_of_contents-indent-0"><a class="table_of_contents-link" href={`${basedir}/article/1#216b7849-9a0a-800c-bdfb-ce33f8f2597b`}>心得</a></div>
+							<div class="table_of_contents-item table_of_contents-indent-0"><a class="table_of_contents-link" href={`${basedir}/article/1#216b7849-9a0a-8008-a8c5-e9300962f592`}>後記</a></div>
 						</nav>
 						<h2 id="216b7849-9a0a-8016-a324-d925ad6ea358" class=""><strong>Components</strong></h2>
 						<p id="216b7849-9a0a-80a6-80f9-f59f28bc64b3" class="">以下是我買的元件，總計 $33210</p>

src/data/notion.js

@@ -387,7 +387,29 @@ const notion_styles = {
     fontSize: '0.75em',
     marginTop: '0.25em',
   },
-  '.sans': { fontFamily: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"' },
+  '.img60-100': {
+    width: '60%',
+  },
+  '.img70-100': {
+    width: '70%',
+  },
+  '.img80-100': {
+    width: '80%',
+  },
+  // media queries
+  '@media (max-width: 1200px)': {
+    '.img60-100': {
+      width: '100%',
+    },
+    '.img70-100': {
+      width: '100%',
+    },
+    '.img80-100': {
+      width: '100%',
+    },
+  },
+  '.p': {marginTop: '1em', marginBottom: '1em'},
+  '.sans': { fontFamily: '"Lato", "Noto Sans TC", "PingFang TC", "Helvetica Neue", "SF Pro TC", "Helvetica", "arial", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;' },
   '.serif': { fontFamily: 'Lyon-Text, Georgia, ui-serif, serif' },
   '.mono': { fontFamily: 'iawriter-mono, Nitti, Menlo, Courier, monospace' },
   '.pdf .sans': { fontFamily: 'Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", "Twemoji", "Noto Color Emoji", "Noto Sans CJK JP"' },