|
1 | | -# Fezcode |
2 | | - |
3 | | -## Deployment to GitHub Pages |
4 | | - |
5 | | -To deploy updates to GitHub Pages after each commit, follow these steps: |
6 | | - |
7 | | -1. **Commit your changes**: Ensure all your desired changes are committed to your main branch (e.g., `main` or `master`). |
8 | | -2. **Run the deploy script**: Execute the following command in your terminal: |
9 | | - ```bash |
10 | | - npm run deploy |
11 | | - ``` |
12 | | - This script will: |
13 | | - * Build your React application for production. |
14 | | - * Push the built files to the `gh-pages` branch of your repository. |
15 | | - |
16 | | -After the script completes, your updated application should be live at `https://fezcode.github.io` within a few minutes. |
17 | | - |
18 | | -## About Log Card Fields |
19 | | - |
20 | | -The `About Log` card displays the following fields: |
21 | | - |
22 | | -* `title` |
23 | | -* `category` |
24 | | -* `tags` |
25 | | -* `author` |
26 | | -* `director` |
27 | | -* `platform` |
28 | | -* `source` |
29 | | -* `artist` |
30 | | -* `year` |
31 | | -* `creator` |
32 | | -* `date` |
33 | | -* `rating` |
34 | | -* `link` |
35 | | -* `updated` |
| 1 | +# Fezcodex |
| 2 | + |
| 3 | + |
| 4 | +### What is this? |
| 5 | +Imagine you have a giant digital toy box. Inside, you keep the cool things you've built, the stories you've written, and a diary of all the interesting things you've learned. Fezcodex is that toy box. It is a special website that works like a personal museum on the internet. It is not just a boring page; it has moving parts, secret "Easter eggs," and little mini-apps like a sound mixer and a stopwatch. |
| 6 | + |
| 7 | +--- |
| 8 | + |
| 9 | +## What can it do? |
| 10 | +- Digital Garden: A place where blog posts and "logs" (mini-diaries about books, movies, or games) grow. |
| 11 | +- Project Archives: A showcase of all the coding experiments and software I've built. |
| 12 | +- Mini-Apps: Built-in tools like an Atmosphere Mixer (for focus sounds), a Typing Tester, and a Stopwatch. |
| 13 | +- Visual Magic: You can change how the whole site looks using the "Visual Matrix" in Settings—make it look like an old computer, a blueprint, or even a comic book. |
| 14 | +- Achievements: Just like a video game, you get little trophies for exploring the site and finding hidden things. |
| 15 | + |
| 16 | +--- |
| 17 | + |
| 18 | +## How is it built? (The Lego Bricks) |
| 19 | +- React and Tailwind CSS: These are the main building blocks that make the site work and look professional. |
| 20 | +- Framer Motion: This is the tool that makes everything move smoothly and animate. |
| 21 | +- Markdown and PIML: These are special ways of writing text so the computer knows how to turn them into beautiful pages. |
| 22 | +- Local Storage: The site remembers your settings and trophies right in your own browser, so it does not need a large database. |
| 23 | + |
| 24 | +--- |
| 25 | + |
| 26 | +## Where is everything? |
| 27 | +- src/components/: The small parts (like buttons and cards) used to build pages. |
| 28 | +- src/pages/: The main areas of the house (Home, Blog, Settings, Apps). |
| 29 | +- public/: This is the pantry where all the actual content (text files for posts, images, and sounds) is stored. |
| 30 | +- scripts/: Helper programs that help build the sitemap and RSS feeds. |
| 31 | + |
| 32 | +--- |
| 33 | + |
| 34 | +## For the Grown-ups (Technical Setup) |
| 35 | + |
| 36 | +### Prerequisites |
| 37 | +Make sure you have Node.js installed on your computer. |
| 38 | + |
| 39 | +### 1. Get the code |
| 40 | +```bash |
| 41 | +git clone https://github.com/yourusername/fezcodex.git |
| 42 | +cd fezcodex |
| 43 | +``` |
| 44 | + |
| 45 | +### 2. Install the tools |
| 46 | +```bash |
| 47 | +npm install |
| 48 | +``` |
| 49 | + |
| 50 | +### 3. Start the engine |
| 51 | +```bash |
| 52 | +npm start |
| 53 | +``` |
| 54 | +This will open the site at http://localhost:3000. |
| 55 | + |
| 56 | +### 4. Shipping it to the world |
| 57 | +To put the site online (GitHub Pages): |
| 58 | +```bash |
| 59 | +npm run deploy |
| 60 | +``` |
| 61 | + |
| 62 | +--- |
| 63 | + |
| 64 | +## Rules of the House |
| 65 | +- Styling: We use Tailwind. Keep it Brutalist yet polished. |
| 66 | +- Icons: We use @phosphor-icons/react. Always use the ones ending in Icon (for example, CpuIcon). |
| 67 | +- Logic: Keep it simple. Use Context for global settings like Visual Effects and Animations. |
| 68 | + |
| 69 | +--- |
| 70 | +Created by Ahmed Samil Bulbul. |
0 commit comments