Merge pull request #121 from Riley1101/chore/update-14

Chore/update 14
Riley1101 · Nov 16, 2023 · 84bedd0 · 84bedd0
2 parents b04cf13 + 5ebbdab
commit 84bedd0
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -1,52 +1,50 @@
 ![Preview image](https://github.com/Riley1101/portfolia/blob/main/preview/preview_v2.webp)
 
-My personal website is built using the latest version of Next.js 13 and server components. Server components is a new feature in Next.js 13 that allows me to write server-side code using React components. This helps me to create more dynamic server-side rendering and improve the performance of my website. I am always exploring new things and trying to keep my website up to date with the latest technologies and trends in web development.
+My personal website with Next.js 14 and server components.
 
-## Installation
+### Installation
 
-To install the project, follow these steps:
+To get started with the project, follow these steps:
 
 1. Clone the repository: `git clone {repository URL}`
 2. Navigate to the project directory: `cd {project directory}`
-3. Install the dependencies: `pnpm install`
+3. Install dependencies: `pnpm install`
 
-To start the development server, run the following command:
+To launch the development server, execute the following command:
 
-```
+```bash
 pnpm run dev
-
 ```
 
-This will start the server on `http://localhost:3000`.
+This will initiate the server at http://localhost:3000.
 
-To run the tests, you can use the following command:
+For running tests, use the command:
 
-```
+```bash
 npm run test
-
 ```
 
-This will run the tests using Jest and React Testing Library and ensure that the functionality of the blog is working as expected.
+This use React Testing Library to verify that the blog's functionality aligns with expectations.
 
-## Features
+### Features
 
-- This website is built with the latest version of Next.js 13.
-- It uses React components to create a dynamic user interface.
-- The website is fully responsive, so it will look great on any device.
-- It includes a blog section where I can write about my experiences and share my insights.
-- The website is optimized for SEO to help me reach a wider audience.
-- It features a newsletter to keep subscribers up to date on new content.
+- Utilizes the latest Next.js 13 version.
+- Employs React components for a dynamic user interface.
+- Fully responsive design for optimal viewing on any device.
+- Incorporates a blog section for sharing experiences and insights.
+- SEO optimization to broaden audience reach.
+- Includes a newsletter for subscribers to stay updated on new content.
 
-## Contributing
+### Contributing
 
-If you would like to contribute to this project, please follow these steps:
+Interested in contributing? Follow these steps:
 
 1. Fork the repository.
 2. Create a new branch: `git checkout -b {branch name}`
-3. Make your changes and commit them: `git commit -m '{commit message}'`
+3. Implement changes and commit them: `git commit -m '{commit message}'`
 4. Push to the branch: `git push origin {branch name}`
 5. Create a pull request.
 
-## License
+### License
 
-This project is licensed under the MIT License - see the [LICENSE](https://www.notion.so/arkardev/LICENSE) file for details.
+This project is licensed under the MIT License - see the LICENSE file for details.
diff --git a/app/(web)/about/page.tsx b/app/(web)/about/page.tsx
@@ -39,7 +39,7 @@ function AboutPage() {
         <div className="flex flex-col gap-6 mb-4 ">
           <p className="leading-[2.5] text-gray-200 text-lg">
             <Image
-              src="/images/profile.jpg"
+              src="/images/profile.png"
               alt="My profile"
               className="object-cover float-none md:float-left  w-[200px] rounded-full aspect-square m-8"
               width={800}

diff --git a/app/(web)/layout.tsx b/app/(web)/layout.tsx
@@ -25,7 +25,6 @@ export const metadata: Metadata = {
     { name: "Arkar Dev", url: "https://arkar.space" },
     { name: "ArkarDev", url: "https://arkar.space" },
   ],
-  colorScheme: "dark",
   creator: metaData.title,
   publisher: metaData.title,
   formatDetection: {
@@ -72,7 +71,7 @@ export default function RootLayout({
   return (
     <html lang="en" className={inter.className}>
       <head />
-      <body className="overflow-hidden">
+      <body className="overflow-hidden bg-[#121212]">
         <div className="w-full overflow-hidden md:px-[10%] lg:pr-[0%] max-h-screen  bg-[#33161600]">
           <Header />
           <div

diff --git a/components/common/cmdk/index.tsx b/components/common/cmdk/index.tsx
@@ -67,15 +67,15 @@ const CommandMenu = () => {
           ];
         },
       }),
-    []
+    [],
   );
 
   useHotkeys(
     "ctrl+/",
     () => {
       setOpen((prev) => !prev);
     },
-    { preventDefault: true }
+    { preventDefault: true },
   );
 
   useEffect(() => {
@@ -93,7 +93,7 @@ const CommandMenu = () => {
       {open && (
         <div
           onClick={handleClose}
-          className="fixed top-0 left-0 grid w-full h-screen isolate z-[999] text-theme-accent place-items-center backdrop-filter backdrop-blur-lg"
+          className="fixed top-0 left-0 grid w-full h-screen isolate z-[999] text-accent place-items-center backdrop-filter backdrop-blur-lg"
         >
           <div
             onClick={(e) => e.stopPropagation()}
@@ -185,6 +185,7 @@ const CommandMenu = () => {
           </div>
         </div>
       )}
+      {/**
       <input
         onClick={() => {
           setOpen(true);
@@ -193,6 +194,7 @@ const CommandMenu = () => {
         placeholder="Search | Ctrl + /"
         className="w-full px-4 mb-2 py-2 pt-3 bg-transparent border border-theme-accent-opaque rounded-md outline-none placeholder:text-sm placeholder:text-theme-accent"
       />
+    */}
     </>
   );
 };

diff --git a/components/common/link/index.tsx b/components/common/link/index.tsx
@@ -16,14 +16,16 @@ function NavIconLink({ children, icon, href, target }: Props) {
       target={target}
       href={href}
       className={cx(
-        `text-sm flex cursor-pointer items-center hover:text-theme-accent py-3 hover:bg-theme-primary duration-300 hover:border-theme-primary hover:border-opacity-5 hover:bg-opacity-5 transition-all border  border-transparent px-4  rounded-full`,
+        `text-sm flex cursor-pointer items-center hover:text-theme-accent py-3 hover:bg-theme-primary 
+        duration-300 hover:border-theme-primary hover:border-opacity-5 hover:bg-opacity-5 transition-all 
+        border  border-transparent px-4  rounded-full`,
         {
           "bg-theme-primary bg-opacity-5 border-opacity-5 border-theme-primary text-theme-accent":
             `/${selected}` === href || (selected === null && href === "/"),
-        }
+        },
       )}
     >
-      <div className="flex gap-4 text-sm">
+      <div className="flex gap-4 text-sm text-theme-body">
         {icon}
         {children}
       </div>

diff --git a/components/common/portable/components.tsx b/components/common/portable/components.tsx
@@ -14,21 +14,21 @@ const components: PortableTextComponents = {
   marks: {
     latex: (props: any) => {
       return (
-        <span  className="mx-2 text-theme-accent text-[14px]">
-          <InlineMath>
-            {props.text}
-          </InlineMath>
+        <span className="mx-2 text-theme-accent text-[14px]">
+          <InlineMath>{props.text}</InlineMath>
         </span>
       );
     },
     em: ({ children }) => (
       <em className="italic text-theme-accent underline ">{children}</em>
     ),
     strong: ({ children }) => (
-      <strong className="text-theme-accent font-mono text-[14px]">{children}</strong>
+      <strong className="text-theme-accent">
+        {children}
+      </strong>
     ),
     code: ({ children }) => (
-      <code className="bg-theme-primary-opaque p-2 text-[12px] rounded-md">
+      <code className="bg-theme-primary-opaque p-1 text-[14px] rounded-md">
         {children}
       </code>
     ),

diff --git a/components/common/portable/index.tsx b/components/common/portable/index.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client";
 import { PortableText } from "@portabletext/react";
 import { useEffect } from "react";
 import Prism from "prismjs";
@@ -9,6 +9,11 @@ require("prismjs/components/prism-typescript");
 require("prismjs/components/prism-css");
 require("prismjs/components/prism-jsx");
 require("prismjs/components/prism-python");
+require("prismjs/components/prism-bash");
+require("prismjs/components/prism-lua");
+require("prismjs/components/prism-rust");
+require("prismjs/components/prism-git");
+require("prismjs/components/prism-git");
 
 type Props = {
   value: any;
@@ -18,7 +23,5 @@ export default function PortableBody({ value }: Props) {
   useEffect(() => {
     Prism.highlightAll();
   }, []);
-  return (
-    <PortableText value={value} components={components} />
-  );
+  return <PortableText value={value} components={components} />;
 }
diff --git a/components/pages/home/intro/index.tsx b/components/pages/home/intro/index.tsx
@@ -2,14 +2,14 @@ export function Intro() {
   return (
     <div className="flex flex-col gap-4 mt-8">
       <h1 className="text-2xl font-bold text-white">
-        Hello, I&apos;m <span className="text-theme-primary">Arkar Dev </span> 👋
+        Hello, I&apos;m <span className="text-theme-primary">Arkar</span>{" "}
+        👋
       </h1>
       <p className="text-gray-300 leading-relaxed ">
         An inspiring software engineer, Coding with a strong passion for design
         and computer science, I enjoy creating amazing things and building
         blazingly-fast websites.
       </p>
-
     </div>
   );
 }
diff --git a/public/images/profile.jpeg b/public/images/profile.jpeg
diff --git a/public/images/profile.jpg b/public/images/profile.jpg
diff --git a/public/images/profile.png b/public/images/profile.png