Skip to content

Commit 6c6fc74

Browse files
behitekbehitek
committed
feat: add light/dark theme support and LLM agent instructions
- Add AGENTS.md with comprehensive LLM instructions for project context - Enable theme switcher in Docusaurus config (light/dark mode toggle) - Update CSS custom properties and styles for improved theme support - Enhance Tailwind configuration with extended color palette - Refactor page styling for better responsive design Breaking change: Default theme changed from dark-only to light mode
1 parent 66b3c71 commit 6c6fc74

6 files changed

Lines changed: 410 additions & 54 deletions

File tree

‎AGENTS.md‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
# AGENTS.md - LLM Instructions for Behitek.com Project
2+
3+
## Project Overview
4+
5+
This is **Behitek.com** - a personal website and blog for Hieu Nguyen (behitek), an AI Engineer from Vietnam. The site is built using **Docusaurus 3.7.0**, a modern static site generator, and serves as a platform for sharing AI/ML knowledge, technical documentation, and personal projects.
6+
7+
### Site Purpose
8+
- **Personal Portfolio**: Showcases Hieu's background as an AI Engineer with focus on NLP, RAG, LLMs, and information retrieval
9+
- **Technical Blog**: AI/ML articles, tutorials, and insights
10+
- **Documentation Hub**: Computer science fundamentals (data structures, algorithms)
11+
- **Project Showcase**: Personal and professional projects
12+
- **Interactive Games**: Mini-games like Minesweeper, Clash of Clans integration
13+
14+
## Architecture & Technology Stack
15+
16+
### Core Framework
17+
- **Docusaurus 3.7.0** - React-based static site generator
18+
- **React 18.2.0** - Frontend framework
19+
- **Node.js ≥18.0** - Runtime requirement
20+
21+
### Styling & UI
22+
- **TailwindCSS 3.4.1** - Utility-first CSS framework
23+
- **Custom CSS** - Located in `src/css/custom.css`
24+
- **Dark Mode**: Default theme (forced dark mode, no toggle)
25+
- **FontAwesome Icons** - For social links and UI elements
26+
27+
### Content & Features
28+
- **MDX Support** - Enhanced Markdown with React components
29+
- **Math Rendering** - KaTeX for mathematical expressions
30+
- **Search** - Algolia DocSearch integration
31+
- **Analytics** - Google Tag Manager (GTM)
32+
- **Comments** - Disqus integration for blog posts
33+
34+
## Project Structure
35+
36+
```
37+
behitek.github.io/
38+
├── blog/ # Blog posts (Markdown files)
39+
│ ├── authors.yml # Author information
40+
│ └── *.md # Blog posts with YYYY-MM-DD-title.md format
41+
├── docs/ # Documentation pages
42+
│ ├── algorithms/ # Algorithm explanations
43+
│ ├── data-structures/ # Data structure guides
44+
│ └── *.md # Other documentation
45+
├── src/
46+
│ ├── css/ # Custom styles
47+
│ ├── data/ # Site data (projects, social links)
48+
│ ├── pages/ # Custom React pages
49+
│ │ ├── index.js # Homepage
50+
│ │ ├── projects/ # Projects showcase
51+
│ │ ├── minesweeper/ # Game page
52+
│ │ └── bank/ # Banking game
53+
│ └── theme/ # Docusaurus theme customizations
54+
├── static/ # Static assets
55+
│ ├── img/ # Images and media
56+
│ ├── pdf/ # Documents (resume, etc.)
57+
│ └── CNAME # Custom domain configuration
58+
├── docusaurus.config.js # Main configuration
59+
├── sidebars.js # Documentation sidebar structure
60+
└── package.json # Dependencies and scripts
61+
```
62+
63+
## Key Configuration Files
64+
65+
### docusaurus.config.js
66+
- **Site metadata**: Title, tagline, URL configuration
67+
- **Theme settings**: Dark mode, navbar, footer
68+
- **Plugin configuration**: Algolia search, Google Tag Manager
69+
- **Content settings**: Blog and docs configuration
70+
- **Math support**: KaTeX integration
71+
72+
### sidebars.js
73+
- Defines documentation sidebar structure
74+
- Categories: Data Structures, Algorithms
75+
- Individual docs: Git, Python conventions
76+
77+
## Content Guidelines
78+
79+
### Blog Posts
80+
- **Location**: `blog/` directory
81+
- **Naming**: `YYYY-MM-DD-title.md` format
82+
- **Frontmatter**: Required metadata (title, authors, tags, etc.)
83+
- **Author**: Use `hieunv` as defined in `authors.yml`
84+
- **Topics**: AI/ML, programming, tutorials, technical insights
85+
86+
### Documentation
87+
- **Location**: `docs/` directory
88+
- **Structure**: Organized by categories (algorithms, data structures)
89+
- **Style**: Educational, with examples and explanations
90+
- **Images**: Store in `static/img/docs/`
91+
92+
### Projects
93+
- **Configuration**: `src/data/_Projects.js`
94+
- **Format**: Array of project objects with metadata
95+
- **Required fields**: category, title, subtitle, description, tech, links
96+
97+
## Development Workflow
98+
99+
### Local Development
100+
```bash
101+
# Install dependencies
102+
npm install
103+
104+
# Start development server
105+
npm start
106+
107+
# Build for production
108+
npm run build
109+
110+
# Serve built site
111+
npm run serve
112+
```
113+
114+
### Content Creation
115+
1. **Blog posts**: Create in `blog/` with proper frontmatter
116+
2. **Documentation**: Add to `docs/` and update `sidebars.js` if needed
117+
3. **Images**: Place in appropriate `static/img/` subdirectory
118+
4. **Projects**: Update `src/data/_Projects.js`
119+
120+
### Deployment
121+
- **Platform**: GitHub Pages
122+
- **Domain**: behitek.com (configured via CNAME)
123+
- **Branch**: `gh-pages` for deployment
124+
- **Command**: `npm run deploy`
125+
126+
## Important Notes for LLMs
127+
128+
### When Working with This Project:
129+
130+
1. **Content Focus**: This is an AI Engineer's personal site - content should be technical, educational, and professional
131+
132+
2. **File Naming**:
133+
- Blog posts: `YYYY-MM-DD-title.md`
134+
- Use kebab-case for URLs and file names
135+
- Images: descriptive names in appropriate subdirectories
136+
137+
3. **Markdown Features**:
138+
- Supports MDX (React components in Markdown)
139+
- Math expressions with KaTeX
140+
- Code syntax highlighting with Prism
141+
- Frontmatter metadata is required for blog posts
142+
143+
4. **Styling**:
144+
- Uses TailwindCSS classes
145+
- Custom CSS variables defined in `src/css/custom.css`
146+
- Dark mode is default and forced (no light mode toggle)
147+
148+
5. **Navigation**:
149+
- Main nav: Docs, Blog, Games, Resume
150+
- Footer: Connect, Discover, Products sections
151+
- Social links: LinkedIn, GitHub, Twitter, Email
152+
153+
6. **SEO & Analytics**:
154+
- Google Tag Manager configured
155+
- Algolia search integration
156+
- Meta descriptions and titles important
157+
158+
### Common Tasks:
159+
- **Adding blog posts**: Create markdown file in `blog/` with proper frontmatter
160+
- **Updating projects**: Modify `src/data/_Projects.js`
161+
- **Adding documentation**: Create in `docs/` and update `sidebars.js`
162+
- **Styling changes**: Edit `src/css/custom.css` or use Tailwind classes
163+
- **Configuration changes**: Modify `docusaurus.config.js`
164+
165+
### Best Practices:
166+
- Always include proper frontmatter in blog posts
167+
- Use descriptive alt text for images
168+
- Maintain consistent formatting and style
169+
- Test locally before deployment
170+
- Keep content professional and educational
171+
- Use proper heading hierarchy (H1 → H2 → H3)
172+
173+
## Contact Information
174+
- **Site Owner**: Hieu Nguyen (behitek)
175+
- **Email**: hello@behitek.com
176+
- **GitHub**: https://github.com/behitek
177+
- **LinkedIn**: https://www.linkedin.com/in/behitek/
178+
- **Twitter**: https://twitter.com/behitek_

‎docusaurus.config.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,9 @@ module.exports = {
5454
projectName: "behitek.github.io",
5555
themeConfig: {
5656
colorMode: {
57-
defaultMode: "dark",
58-
disableSwitch: true,
59-
respectPrefersColorScheme: false,
57+
defaultMode: "light",
58+
disableSwitch: false,
59+
respectPrefersColorScheme: true,
6060
},
6161
navbar: {
6262
hideOnScroll: true,
@@ -135,6 +135,8 @@ module.exports = {
135135
},
136136
blog: {
137137
showReadingTime: true,
138+
blogSidebarCount: 10, // Show up to 10 recent posts in sidebar
139+
blogSidebarTitle: 'Recent posts',
138140
remarkPlugins: [math],
139141
rehypePlugins: [katex],
140142
// Please change this to your repo.

‎src/css/custom.css‎

Lines changed: 111 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,65 @@
88
@tailwind components;
99
@tailwind utilities;
1010

11-
/* You can override the default Infima variables here. */
11+
/* Modern green theme color palette */
1212
:root {
13-
--ifm-color-primary: #0f9d58;
14-
--ifm-color-primary-dark: #0d8d4f;
15-
--ifm-color-primary-darker: #0d854b;
16-
--ifm-color-primary-darkest: #0a6e3e;
17-
--ifm-color-primary-light: #10ad61;
18-
--ifm-color-primary-lighter: #11b565;
19-
--ifm-color-primary-lightest: #13cc72;
20-
--ifm-color-secondary: #878787;
21-
--ifm-color-secondary-dark: #616161;
22-
--ifm-color-secondary-darker: #141414;
23-
--ifm-color-secondary-darkest: #0d0d0d;
24-
--ifm-color-secondary-light: #adadad;
25-
--ifm-color-secondary-lighter: #d4d4d4;
26-
--ifm-color-secondary-lightest: #ededed;
27-
--ifm-navbar-background-color: #141414;
28-
--ifm-background-color: #141414;
29-
--ifm-color-success: #0f9d58;
30-
--ifm-color-warning: #f4b400;
31-
--ifm-color-danger: #db4437;
32-
--ifm-link-color: #0f9d58;
13+
/* Primary colors - Modern emerald/teal green */
14+
--ifm-color-primary: #10B981;
15+
--ifm-color-primary-dark: #059669;
16+
--ifm-color-primary-darker: #047857;
17+
--ifm-color-primary-darkest: #065F46;
18+
--ifm-color-primary-light: #34D399;
19+
--ifm-color-primary-lighter: #6EE7B7;
20+
--ifm-color-primary-lightest: #D1FAE5;
21+
22+
/* Secondary colors - Warm earth tones */
23+
--ifm-color-secondary: #78716C;
24+
--ifm-color-secondary-dark: #57534E;
25+
--ifm-color-secondary-darker: #44403C;
26+
--ifm-color-secondary-darkest: #1C1917;
27+
--ifm-color-secondary-light: #A8A29E;
28+
--ifm-color-secondary-lighter: #E7E5E4;
29+
--ifm-color-secondary-lightest: #FAFAF9;
30+
31+
/* Background colors */
32+
--ifm-background-color: #FFFFFF;
33+
--ifm-navbar-background-color: #FFFFFF;
34+
--ifm-footer-background-color: #F9FAFB;
35+
36+
/* Accent colors */
37+
--ifm-color-success: #10B981;
38+
--ifm-color-warning: #F59E0B;
39+
--ifm-color-danger: #EF4444;
40+
--ifm-link-color: #10B981;
41+
42+
/* Typography */
3343
--ifm-code-font-size: 95%;
44+
--ifm-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
45+
46+
/* Spacing and borders */
47+
--ifm-global-radius: 0.5rem;
48+
--ifm-button-border-radius: 0.5rem;
49+
--ifm-card-border-radius: 0.75rem;
50+
51+
/* Shadows */
52+
--ifm-global-shadow-lw: 0 1px 2px 0 rgb(0 0 0 / 0.05);
53+
--ifm-global-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
54+
--ifm-global-shadow-tl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
55+
}
56+
57+
/* Dark theme overrides */
58+
[data-theme='dark'] {
59+
--ifm-color-primary: #34D399;
60+
--ifm-color-primary-dark: #10B981;
61+
--ifm-color-primary-darker: #059669;
62+
--ifm-color-primary-darkest: #047857;
63+
--ifm-color-primary-light: #6EE7B7;
64+
--ifm-color-primary-lighter: #A7F3D0;
65+
--ifm-color-primary-lightest: #D1FAE5;
66+
67+
--ifm-background-color: #0F1419;
68+
--ifm-navbar-background-color: #1C2128;
69+
--ifm-footer-background-color: #1C2128;
3470
}
3571

3672
.docusaurus-highlight-code-line {
@@ -93,6 +129,60 @@ p {
93129
color: var(--ifm-button-color);
94130
}
95131

132+
/* Modern component styles */
133+
.navbar {
134+
box-shadow: var(--ifm-global-shadow-lw);
135+
border-bottom: 1px solid var(--ifm-color-secondary-lightest);
136+
}
137+
138+
.card {
139+
border-radius: var(--ifm-card-border-radius);
140+
box-shadow: var(--ifm-global-shadow-md);
141+
border: 1px solid var(--ifm-color-secondary-lightest);
142+
transition: all 0.2s ease-in-out;
143+
}
144+
145+
.card:hover {
146+
box-shadow: var(--ifm-global-shadow-tl);
147+
transform: translateY(-2px);
148+
}
149+
150+
.button--primary {
151+
background: linear-gradient(135deg, var(--ifm-color-primary) 0%, var(--ifm-color-primary-dark) 100%);
152+
border: none;
153+
transition: all 0.2s ease-in-out;
154+
}
155+
156+
.button--primary:hover {
157+
background: linear-gradient(135deg, var(--ifm-color-primary-dark) 0%, var(--ifm-color-primary-darker) 100%);
158+
transform: translateY(-1px);
159+
box-shadow: var(--ifm-global-shadow-md);
160+
}
161+
162+
/* Modern typography */
163+
h1, h2, h3, h4, h5, h6 {
164+
font-weight: 600;
165+
line-height: 1.2;
166+
}
167+
168+
/* Improved code blocks */
169+
.prism-code {
170+
border-radius: var(--ifm-global-radius);
171+
box-shadow: var(--ifm-global-shadow-lw);
172+
}
173+
174+
/* Modern pagination */
175+
.pagination-nav__link {
176+
border-radius: var(--ifm-global-radius);
177+
border: 1px solid var(--ifm-color-secondary-lighter);
178+
transition: all 0.2s ease-in-out;
179+
}
180+
181+
.pagination-nav__link:hover {
182+
box-shadow: var(--ifm-global-shadow-md);
183+
transform: translateY(-1px);
184+
}
185+
96186
@media screen and (max-width: 966px) {
97187
h1 {
98188
font-size: 2.4rem;

‎src/pages/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ function Home() {
4040
<SocialLinks />
4141
<p>
4242
<a href="#main">
43-
<button className="border-0 rounded p-2 pl-4 pr-0 bg-primary-900 hover:bg-primary-800 transition text-white text-lg cursor-pointer">
43+
<button className="border-0 rounded-lg px-6 py-3 bg-primary-600 hover:bg-primary-700 transition-all duration-200 text-white text-lg cursor-pointer font-medium shadow-medium hover:shadow-large hover:-translate-y-0.5">
4444
whoami<span className="pl-1 animate-pulse">▎</span>
4545
</button>
4646
</a>

0 commit comments

Comments
 (0)