♻️ refactor(styles): adding scss and folder structure

myanmar-software-engineers · Oct 23, 2023 · 4b8a200 · 4b8a200
1 parent 3224f2c
commit 4b8a200
Show file tree

Hide file tree

Showing 19 changed files with 303 additions and 207 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/content/profile/Vince.mdx b/content/profile/Vince.mdx
@@ -10,4 +10,6 @@ tags:
 
 import Vince from "@/components/Contributors/Vince/Vince";
 
-<Vince />
+<div className="vince">
+  <Vince />
+</div>
diff --git a/content/profile/lwinmoepaing.mdx b/content/profile/lwinmoepaing.mdx
@@ -14,38 +14,40 @@ import Counter from "@/components/Contributors/Counter/Counter";
 import ContriSquareBox from "@/components/Contributors/ContriSquareBox/ContriSquareBox";
 import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider";
 
-<div className="flex flex-col md:flex-row">
-  <div className="md:w-6/12 mb-5 flex flex-col justify-center items-center">
-    <div className="h-28 w-28 rounded-3xl overflow-hidden mx-auto">
-      <img src="https://avatars.githubusercontent.com/u/49163775?v=4" />
+<div className="lwinmoepaing">
+  <div className="flex flex-col md:flex-row">
+    <div className="md:w-6/12 mb-5 flex flex-col justify-center items-center">
+      <div className="h-28 w-28 rounded-3xl overflow-hidden mx-auto">
+        <img src="https://avatars.githubusercontent.com/u/49163775?v=4" />
+      </div>
+      <SpacingDivider size="sm"/>
+      <h3 className="flex flex-row max-w-[240px] mx-auto">
+        <img
+          src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/gitto.gif"
+          className="h-[20px] object-contain mr-2"
+        />
+        <span> Hi, I'm Lwin Moe Paing </span>
+      </h3>
+      <SpacingDivider size="sm"/>
+      <Counter />
+      <SpacingDivider size="sm"/>
+      <ContriSquareBox>
+        <p className="text-center text-sm mb-2"><img className="h-5 inline-block mr-1 relative -top-1" src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"/>I’m looking for help with Javascript Language to build Many Free Softwares to help people who can't afford to pay!!</p>
+        <p className="text-center text-sm mb-2"><img className="h-5 inline-block mr-1 relative -top-1" src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"/>How to reach me **[email protected] (or) [facebook](https://www.facebook.com/lwin.im/)**</p>
+      </ContriSquareBox>
     </div>
-    <SpacingDivider size="sm"/>
-    <h3 className="flex flex-row max-w-[240px] mx-auto">
-      <img
-        src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/gitto.gif"
-        className="h-[20px] object-contain mr-2"
-      />
-      <span> Hi, I'm Lwin Moe Paing </span>
-    </h3>
-    <SpacingDivider size="sm"/>
-    <Counter />
-    <SpacingDivider size="sm"/>
-    <ContriSquareBox>
-      <p className="text-center text-sm mb-2"><img className="h-5 inline-block mr-1 relative -top-1" src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"/>I’m looking for help with Javascript Language to build Many Free Softwares to help people who can't afford to pay!!</p>
-      <p className="text-center text-sm mb-2"><img className="h-5 inline-block mr-1 relative -top-1" src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"/>How to reach me **[email protected] (or) [facebook](https://www.facebook.com/lwin.im/)**</p>
-    </ContriSquareBox>
-  </div>
-  <div className="flex flex-1 flex-row justify-center items-center">
-    <div className="ph-container">
-      <div className="phone">
-        <div className="notch-container">
-          <div className="notch"></div>
+    <div className="flex flex-1 flex-row justify-center items-center">
+      <div className="ph-container">
+        <div className="phone">
+          <div className="notch-container">
+            <div className="notch"></div>
+          </div>
+          <iframe
+            src="https://lwinmoepaing.github.io/"
+            className="h-full relative"
+          />
         </div>
-        <iframe
-          src="https://lwinmoepaing.github.io/"
-          className="h-full relative"
-        />
       </div>
     </div>
   </div>
-</div>
+</div> 
diff --git a/next.config.js b/next.config.js
@@ -1,10 +1,13 @@
 const { withContentlayer } = require("next-contentlayer");
-
+const path = require("path");
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
   output: "export",
+  sassOptions: {
+    includePaths: [path.join(__dirname, "styles")],
+  },
   images: {
     loader: "custom",
     loaderFile: "./my-loader.ts",

diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "rehype-pretty-code": "^0.10.1",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.0",
+    "sass": "^1.69.4",
     "shiki": "^0.14.5",
     "tailwind-merge": "^1.14.0",
     "typed.js": "^2.0.16"

diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
@@ -1,3 +1,4 @@
+import PageTransitionWrapper from "@/components/Animate/PageTransitionWrapper/PageTransitionWrapper";
 import BodyText from "@/components/Common/BodyText/BodyText";
 import Container from "@/components/Common/Container/Container";
 import TitleText from "@/components/Common/TitleText/TitleText";
@@ -12,12 +13,14 @@ export const metadata: Metadata = {
 
 const BlogListPage = () => {
   return (
-    <Container>
-      <SquareBox>
-        <TitleText className="mb-2"> Welcome to the Blogs Page... </TitleText>
-        <BodyText> Exciting blogs are on the horizon, stay tuned! </BodyText>
-      </SquareBox>
-    </Container>
+    <PageTransitionWrapper>
+      <Container>
+        <SquareBox>
+          <TitleText className="mb-2"> Welcome to the Blogs Page... </TitleText>
+          <BodyText> Exciting blogs are on the horizon, stay tuned! </BodyText>
+        </SquareBox>
+      </Container>
+    </PageTransitionWrapper>
   );
 };
 

diff --git a/src/app/globals.css b/src/app/globals.css
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,7 +6,7 @@ import type { Metadata } from "next";
 import APP_CONFIG from "@/config/config";
 import Favicons from "@/components/Favicons/Favicons";
 // Styles
-import "./globals.css";
+import "@/styles/globals.scss";
 import Footer from "@/components/Common/Footer/Footer";
 
 export const metadata: Metadata = {

diff --git a/src/app/profile/[slug]/page.tsx b/src/app/profile/[slug]/page.tsx
@@ -1,3 +1,4 @@
+import PageTransitionWrapper from "@/components/Animate/PageTransitionWrapper/PageTransitionWrapper";
 import Container from "@/components/Common/Container/Container";
 import { Mdx } from "@/components/Common/Mdx/Mdx";
 import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider";
@@ -51,14 +52,16 @@ const PProfileDetailPage: FC<TPProfileDetailPageProps> = async ({
   const profile = await getProfileFromParam(slug);
 
   return (
-    <Container>
-      <Mdx
-        code={profile.body.code}
-        extraText={`${profile.name} | ${profile.description}`}
-      />
+    <PageTransitionWrapper>
+      <Container>
+        <Mdx
+          code={profile.body.code}
+          extraText={`${profile.name} | ${profile.description}`}
+        />
 
-      <SpacingDivider size="lg" />
-    </Container>
+        <SpacingDivider size="lg" />
+      </Container>
+    </PageTransitionWrapper>
   );
 };
 export default PProfileDetailPage;
diff --git a/src/app/profile/loading.tsx b/src/app/profile/loading.tsx
@@ -0,0 +1,13 @@
+import MseTypo from "@/components/Animate/MseTypo/MseTypo";
+import TitleText from "@/components/Common/TitleText/TitleText";
+
+const loading = () => {
+  return (
+    <div className="text-center">
+      <div className="max-w-[380px] mx-auto">
+        <MseTypo isWhite bgColor="bg-rose-500" />
+      </div>
+    </div>
+  );
+};
+export default loading;
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -1,11 +1,11 @@
 import Container from "@/components/Common/Container/Container";
 import APP_CONFIG from "@/config/config";
+import { allProfiles } from "contentlayer/generated";
 import { Metadata } from "next";
 
-import ProfileCardList from "@/components/Profile/ProfileCardList/ProfileCardList";
-import { allProfiles } from "contentlayer/generated";
+import PageTransitionWrapper from "@/components/Animate/PageTransitionWrapper/PageTransitionWrapper";
 import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider";
-import { profileHelperService } from "@/utils/profileHelper";
+import ProfileCardList from "@/components/Profile/ProfileCardList/ProfileCardList";
 
 export const metadata: Metadata = {
   title: `Profile List | ${APP_CONFIG.title}`,
@@ -25,10 +25,12 @@ const ProfileListPage = async () => {
   const profiles = await getAllProfileList();
 
   return (
-    <Container>
-      <ProfileCardList profiles={profiles} />
-      <SpacingDivider size="lg" />
-    </Container>
+    <PageTransitionWrapper>
+      <Container>
+        <ProfileCardList profiles={profiles} />
+        <SpacingDivider size="lg" />
+      </Container>
+    </PageTransitionWrapper>
   );
 };
 export default ProfileListPage;
diff --git a/src/components/Animate/MseTypo/MseTypo.tsx b/src/components/Animate/MseTypo/MseTypo.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useRef } from "react";
 import { motion, useInView } from "framer-motion";
 import { cn } from "@/utils";
@@ -15,7 +16,7 @@ export const strokeAnimation = {
   },
 } as const;
 
-const MsoTypo = ({ bgColor = "bg-indigo-500" }: { bgColor?: string }) => {
+const MseTypo = ({ bgColor = "bg-indigo-500", isWhite = false }: { bgColor?: string, isWhite?: boolean }) => {
   const containerRef = useRef<SVGSVGElement>(null);
   const isInView = useInView(containerRef, { amount: 0.5 });
   const textColor = `${bgColor
@@ -24,7 +25,7 @@ const MsoTypo = ({ bgColor = "bg-indigo-500" }: { bgColor?: string }) => {
 
   const fillColor = `fill-white`;
 
-  const strokeColor = `${bgColor.replace(/bg/, "stroke")} opacity-80`;
+  const strokeColor = isWhite ? "stroke-white" : `${bgColor.replace(/bg/, "stroke")} opacity-80`;
 
   return (
     <motion.svg
@@ -83,4 +84,4 @@ const MsoTypo = ({ bgColor = "bg-indigo-500" }: { bgColor?: string }) => {
     </motion.svg>
   );
 };
-export default MsoTypo;
+export default MseTypo;