feat: new version

.prettierignore

@@ -0,0 +1,41 @@
+# Dependencies
+node_modules
+
+# Build output
+dist
+
+# Documentation
+*.md
+
+# Configuration files
+*.json
+*.lock
+*.yml
+*.yaml
+
+# Web assets
+*.html
+*.css
+*.scss
+*.map
+
+# Logs
+*.log
+
+# Specific files
+data/emails/types.ts
+
+# Version control
+.git
+.gitignore
+
+# Editor files
+.vscode
+.idea
+
+# Operating system files
+.DS_Store
+Thumbs.db
+
+# Next.js
+.next

.prettierrc.json

@@ -0,0 +1,22 @@
+{
+	"arrowParens": "always",
+	"bracketSameLine": false,
+	"bracketSpacing": true,
+	"semi": false,
+	"experimentalTernaries": true,
+	"singleQuote": true,
+	"jsxSingleQuote": false,
+	"quoteProps": "as-needed",
+	"trailingComma": "all",
+	"singleAttributePerLine": false,
+	"htmlWhitespaceSensitivity": "css",
+	"vueIndentScriptAndStyle": false,
+	"proseWrap": "preserve",
+	"insertPragma": false,
+	"printWidth": 80,
+	"requirePragma": false,
+	"tabWidth": 2,
+	"useTabs": true,
+	"embeddedLanguageFormatting": "auto",
+	"plugins": ["prettier-plugin-tailwindcss"]
+}

README.md

@@ -5,7 +5,7 @@ This is my personal website. It is built using [NextJS](https://nextjs.org?ref=g
 ## Features
 
 - **Customizable**: You can easily customize the website by editing the [`config.ts`](./config.ts) file.
-- **Cute Design**: The website has a cute design, with a pastel color palette and a cute font.
+- **Dark Design**: The website is designed after Satanism, with a dark theme.
 
 ## Development
 
@@ -33,7 +33,6 @@ The website will be available at `http://localhost:3000/`.
 - ~~Add a blog section~~
 - Add a projects section
 - Add a contact form
-- ~~Add a image intergration~~ [(Done)](https://github.com/stellaOnEstrogen/image-uploader)
 
 ## Uploading Images
 

app/about/page.tsx

@@ -1,75 +1,28 @@
-import { CircleUser as UserIcon } from "lucide-react";
-import Header from "@/components/header";
-import Footer from "@/components/footer";
-import { config } from "@/config";
-import { Metadata } from "next";
-import markdownStyles from "./markdown-styles.module.css";
-import 'highlight.js/styles/default.css';
-import hljs from 'highlight.js';
-import { getMarkdownContent } from "@/lib/md";
-import { remark } from "remark";
-import html from "remark-html";
-
-async function markdownToHtml(markdown: string) {
-  const result = await remark()
-    .use(html)
-    .process(markdown);
-
-  const htmlContent = result.toString();
-
-
-  const highlightedContent = htmlContent.replace(
-    /<pre><code class="language-(\w+)">([\s\S]*?)<\/code><\/pre>/g,
-    (match, language, code) => {
-      const highlightedCode = hljs.highlight(code, { language }).value;
-      return `<pre><code class="hljs language-${language}">${highlightedCode}</code></pre>`;
-    }
-  );
-
-  return highlightedContent;
-}
-
-
-export default async function About() {
-  const md = getMarkdownContent('pages', 'about');
-
-    if (!md) {
-    return (
-      <div className="min-h-screen bg-pink-50 text-pink-900 flex flex-col">
-        <Header />
-        <main className="flex-grow p-8 max-w-4xl mx-auto">
-          <p>This file has either been moved or deleted. Please check back later!</p>
-        </main>
-        <Footer />
-      </div>
-    );
-  }
-
-  const content = await markdownToHtml(md.content);
-
-  return (
-    <div className="min-h-screen bg-pink-50 text-pink-900 flex flex-col">
-      <Header />
-      <main className="flex-grow p-8">
-        <h2 className="text-3xl font-semibold mb-6 flex items-center justify-center">
-          <UserIcon className="h-8 w-8 mr-2 text-pink-400" />
-          Learn about me
-        </h2>
-          <div className={`prose prose-pink max-w-none mb-6 ${markdownStyles["markdown"]}`} dangerouslySetInnerHTML={{ __html: content }}>
-        </div>
-      </main>
-      <Footer />
-    </div>
-  );
-}
-
-export function generateMetadata(): Metadata {
-
-  return {
-    title: `${config.name} | About Me`,
-    openGraph: {
-      title: `${config.name} | About me`,
-      description: "Learn more about me and who I am as a person.",
-    },
-  };
+'use client'
+
+import Footer from '@/components/footer'
+import Header from '@/components/header'
+import { useContent } from '@/hooks/useContent'
+import { Content } from '@/components/ui/content'
+import markdownStyles from '@/app/styles/markdown.module.css'
+import { useNightMode } from '@/hooks/useNightMode'
+
+export default function About() {
+	const { isNightMode, toggleNightMode } = useNightMode()
+
+	const { content, loading, error } = useContent('pages/about.md')
+
+	return (
+		<div
+			className={`min-h-screen ${isNightMode ? 'bg-black text-red-500' : 'bg-gray-200 text-gray-900'} flex flex-col transition-colors duration-500`}
+		>
+			<Header isNightMode={isNightMode} toggleNightMode={toggleNightMode} />
+			<main
+				className={`container mx-auto flex-grow px-4 py-8 ${markdownStyles.markdown}`}
+			>
+				<Content content={content} loading={loading} error={error} />
+			</main>
+			<Footer isNightMode={isNightMode} />
+		</div>
+	)
 }