satnaing / satnaing.dev

My portfolio & blog website developed with NextJS, TypeScript, and TailwindCSS. Markdown is used for contents. Contents are managed via Forestry headless CMS.

Sat Naing Portfolio & Blog

My portfolio & blog website developed with Next.JS(SSG) and TypeScript. Tailwind CSS and GSAP is used for styling and animations. Blog contents are written in Markdown format. Light & Dark themes supported.

Features

• Responsive Design 📱💻
• Light & Dark themes ☀️🌙
• Fully Accessible ♿️
• Categories, Tags 🏷
• Search Box 👀
• SEO Friendly 🔎
• Markdown Content 📰

Tech Stack

Frontend - NextJS, React, TypeScript
Styling - Tailwind CSS
Animations - GSAP
Design & Prototype - Figma
State Management - ContextAPI
Backend - Forestry Headless CMS
Deployment - Vercel

Lighthouse Score

Running Locally

Clone the project

git clone https://github.com/satnaing/satnaing.dev.git

Go to the project directory

cd satnaing.dev

Remove remote origin

git remote remove origin

Install dependencies

npm install

Start the server

npm run dev

Inspiration and Credits

Here are some inspiration and credits for the design of my portfolio. However I can guarantee that I wrote 100% of the code. These credits are just for ideas and design for my portfolio and blog website.

• Lee Robinson Website
• Papermod Hugo Theme
• Brittany Chiang Website
• Max Böck Website

The digital art in the hero section was illustrated by a friend of mine (Swann Fevian Kyaw @ToonHa)

Author

• @satnaing

satnaing.dev's Issues

Typo on main page

Should be "portfolio"

help,

Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.

Back to our site

If this is your site, and you weren't expecting a 404 for this path, please visit Netlify's "page not found" support guide for troubleshooting tips.

help
I find this one when i deploy in netlify

Appreciate

I think your website is very good-looking, I even have the urge to imitate this style and write a hugo blog theme.

Transitions and animations are harsh

Prob: sliding animation in the start SatNaing.dev -
sol: opacity in and opacity out is best (see https://www.apple.com/apple-card/)

Prob: Animation on the intro of the blog is excessive
sol: one animation for the entire section/ container and slow change of opacity

Prob: mouse indicator replaced with the circle is too much distracting
Sol: remove it- or change it to scale to the large arrow (when the speed of mouse movement is fast) and then scale it back

prob: on https://satnaing.dev/ - animations are too speedy and the blog I can't click through the image or headline/ title
sol: make the page anchor the whole blog & reduce the animation speed

Besides these above points, I am loving your website (plus the eCommerce website you are developing).

Error for page /sitemap.xml: pages with getServerSideProps

Hi, first of all, thank you for your fantastic website.

I want to deploy your project via GitHub-actions but it throws an error:

 Error occurred prerendering page "/sitemap.xml". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Error for page /sitemap.xml: pages with `getServerSideProps` can not be exported. See more info here: https://nextjs.org/docs/messages/gssp-export
    at /home/runner/work/mohammadne.github.io/mohammadne.github.io/node_modules/next/dist/export/worker.js:254:23
    at async Span.traceAsyncFn (/home/runner/work/mohammadne.github.io/mohammadne.github.io/node_modules/next/dist/trace/trace.js:79:20)
info  - Exporting (7/7)
Error: Export encountered errors on following paths:
	/sitemap.xml
    at /home/runner/work/mohammadne.github.io/mohammadne.github.io/node_modules/next/dist/export/index.js:415:19
    at async Span.traceAsyncFn (/home/runner/work/mohammadne.github.io/mohammadne.github.io/node_modules/next/dist/trace/trace.js:79:20)
Error: Process completed with exit code 1.

it says that we should use getStaticProps instead of getServerSideProps, as I'm a backend developer and I'm not very deep in nextjs, I wonder to know that is it possible to do that.

blog/posts/hola

This is just a testing - Sat Naing

This is just an OG description

https://satnaing.dev/blog/posts/hola