-
- 
+
+
+
+
-
-
-
-
-
+
+
+
+
-
+
+
+
+
+ 
+ Hi, I'm Lwin Moe Paing
+
+ 
I’m looking for help with Javascript Language to build Many Free Softwares to help people who can't afford to pay!!
How to reach me **lwinmoepaing.dev@gmail.com (or) [facebook](https://www.facebook.com/lwin.im/)**
-
- Hi, I'm Lwin Moe Paing
-
- I’m looking for help with Javascript Language to build Many Free Softwares to help people who can't afford to pay!!
How to reach me **lwinmoepaing.dev@gmail.com (or) [facebook](https://www.facebook.com/lwin.im/)**
-
-
- Welcome to the Blogs Page...
- Exciting blogs are on the horizon, stay tuned!
-
-
+
+
+
+ Welcome to the Blogs Page...
+ Exciting blogs are on the horizon, stay tuned!
+
+
+
);
};
diff --git a/src/app/globals.css b/src/app/globals.css
deleted file mode 100644
index 98b71d2..0000000
--- a/src/app/globals.css
+++ /dev/null
@@ -1,142 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.mse-gradient {
- background: linear-gradient(
- 145deg,
- rgb(0, 32, 95) 2.8%,
- rgb(132, 53, 142) 80.8%
- );
-}
-
-.trn-4 {
- transition: all .4s ease;
-}
-
-.bg-blur {
- background-color: #1111112d;
- backdrop-filter: blur(8px);
-}
-
-.loader-bg {
- background-color: #1111112d;
- backdrop-filter: blur(8px) grayscale(80%) saturate(0) ;
-}
-
-.bg-top {
- background-color: #1111112d;
-}
-
-.pf-shadow {
- box-shadow: inset 0 0 4px 1px #111;
-}
-
-.pf-shadow img {
- box-shadow: inset 0 0 8px 1px #111;
-}
-
-.name h1 {
- cursor: pointer;
- font-size: 4rem;
- font-weight: bold;
- transition: all .4s ease;
- margin-top: -10px;
-}
-
-.name h1:hover {
- color: aqua;
- margin-top: -40px;
-}
-
-.loaderText {
- font-size: 5rem;
- margin-bottom: -100px;
- z-index: 99;
- animation: bounce 1.2s infinite;
- top: 0;
- left: 48%;
-}
-
-@keyframes bounce {
- 0% { top: 0 }
- 50% { top: -50% }
- 100% { top: 0 }
-}
-
-.loader {
- position: relative;
- margin: auto;
- box-sizing: border-box;
- width: 120px;
- height: 120px;
- border-radius: 50%;
- border: 4px solid rgba(255, 255, 255, 0.1);
- transform-origin: 50% 50%;
- transform: perspective(200px) rotateX(66deg);
- animation: spinner-wiggle 1.2s infinite;
-}
-
-.loader:before,
-.loader:after {
- content: "";
- position: absolute;
- inset: -4px;
- border-radius: 50%;
- box-sizing: border-box;
- border: 4px solid #0000;
- animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite,
- spinner-fade 1.2s linear infinite;
-}
-.loader:before {
- border-top-color: #fff;
-}
-.loader:after {
- border-top-color: #ff3d00;
- animation-delay: 0.4s;
-}
-
-@keyframes spinner-spin {
- 100% { transform: rotate(360deg)}
-}
-@keyframes spinner-fade {
- 25%, 75% { opacity: 0.1}
- 50% { opacity: 1 }
-}
-
-
-.ph-container {
- max-height: 700px;
- height: 80vh;
- width: auto;
-}
-
-.phone , .phone img {
- height: 100%;
-}
-
-.phone {
- position: relative;
-}
-
-.phone .notch-container {
- position: absolute;
- top: 0;
- width: 100%;
- height: 100px;
-}
-
-.phone .notch-container .notch {
- width: 20vh;
- height: 4.25vh;
- margin: 0 auto;
- background-color: #111;
- border-bottom-left-radius: 2.334vh;
- border-bottom-right-radius: 2.334vh;
-}
-
-.phone img, .phone iframe {
- display: block;
- border: 1.334vh solid #111;
- border-radius: 4.5vh;
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2743a93..1687a6b 100644
--- 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
index 42b2208..ba508bd 100644
--- 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 = async ({
const profile = await getProfileFromParam(slug);
return (
-
-
+
+
+
+
);
};
export default PProfileDetailPage;
diff --git a/src/app/profile/loading.tsx b/src/app/profile/loading.tsx
new file mode 100644
index 0000000..bb947f9
--- /dev/null
+++ 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 (
+
-
+
+
+
+
);
};
export default ProfileListPage;
diff --git a/src/components/Animate/MseTypo/MseTypo.tsx b/src/components/Animate/MseTypo/MseTypo.tsx
index d5b2e0f..018d018 100644
--- 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(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 (
{
);
};
-export default MsoTypo;
+export default MseTypo;
diff --git a/src/components/Animate/PageTransitionWrapper/PageTransitionWrapper.tsx b/src/components/Animate/PageTransitionWrapper/PageTransitionWrapper.tsx
new file mode 100644
index 0000000..94c7ab3
--- /dev/null
+++ b/src/components/Animate/PageTransitionWrapper/PageTransitionWrapper.tsx
@@ -0,0 +1,23 @@
+"use client";
+import { PropsWithChildren } from "react";
+import { motion } from "framer-motion";
+import { cn } from "@/utils";
+
+type TPageTransitionWrapper = PropsWithChildren<{}>;
+
+const PageTransitionWrapper: React.FC = ({
+ children,
+}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default PageTransitionWrapper;
diff --git a/src/components/Common/Navbar/Navbar.tsx b/src/components/Common/Navbar/Navbar.tsx
index bbe9ed1..4a35b5e 100644
--- a/src/components/Common/Navbar/Navbar.tsx
+++ b/src/components/Common/Navbar/Navbar.tsx
@@ -1,10 +1,20 @@
+"use client";
import MseLink from "@/components/Ui/MseLink/MseLink";
import MseLogo from "@/components/Ui/MseLogo/MseLogo";
import { cn } from "@/utils";
-import Container from "../Container/Container";
-import SpacingDivider from "../SpacingDivider/SpacingDivider";
+import Container from "@/components/Common/Container/Container";
+import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider";
+import { motion } from "framer-motion";
+import { usePathname } from "next/navigation";
+
+const linkList = [
+ { label: "Home", href: "/" },
+ { label: "Profiles", href: "/profile" },
+ { label: "BLog", href: "/blog" },
+];
const Navbar = () => {
+ const path = usePathname();
return (
-
diff --git a/next.config.js b/next.config.js
index 4a2dc4c..96470b5 100644
--- 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
index df3a564..1ebe558 100644
--- 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
index ae2ca2d..9850a60 100644
--- 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 (
-
-
+
-
+
-
+
+
+
-
+
+
+
+
+ );
+};
+export default loading;
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 610b6e7..5f94ecf 100644
--- 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 (
-
+
+