Fix the view in mobile and remove some extra scrolling bar

Author: yimingpeng

src/styles/global.css

@@ -6,12 +6,25 @@
 	box-sizing: border-box;
 }
 
+*,
+*::before,
+*::after {
+	max-width: 100%;
+}
+
+html {
+	overflow-x: hidden;
+	width: 100%;
+}
+
 body {
 	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
 	line-height: 1.6;
 	color: #cdd6f4;
 	background: #1e1e2e;
 	overflow-x: hidden;
+	width: 100%;
+	min-height: 100vh;
 }
 
 /* Simple blink animation */
@@ -31,11 +44,14 @@ body {
 	max-width: 1200px;
 	margin: 0 auto;
 	padding: 0 2rem;
+	width: 100%;
 }
 
 /* Section Styles */
 .section {
 	padding: 4rem 0;
+	width: 100%;
+	overflow-x: hidden;
 }
 
 .section-title {
@@ -121,6 +137,8 @@ body {
 @media (max-width: 768px) {
 	.container {
 		padding: 0 1rem;
+		width: 100%;
+		max-width: 100%;
 	}
 
 	.section {
@@ -146,6 +164,8 @@ body {
 @media (max-width: 480px) {
 	.container {
 		padding: 0 0.75rem;
+		width: 100%;
+		max-width: 100%;
 	}
 
 	.section {

src/styles/header.css

@@ -10,6 +10,8 @@
 	right: 0;
 	z-index: 1000;
 	backdrop-filter: blur(10px);
+	width: 100%;
+	overflow-x: hidden;
 }
 
 .nav {

src/styles/hero.css

@@ -6,20 +6,25 @@
 	padding: 8rem 0 4rem;
 	margin-top: 80px;
 	position: relative;
+	width: 100%;
 }
 
 .hero-content {
 	display: grid;
 	grid-template-columns: 1fr 300px;
 	gap: 4rem;
 	align-items: center;
+	width: 100%;
+	max-width: 100%;
 }
 
 .hero-text h1 {
 	font-size: 3.5rem;
 	font-weight: 700;
 	margin-bottom: 1rem;
 	line-height: 1.2;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
 }
 
 /* Terminal command styling */
@@ -73,6 +78,8 @@
 	line-height: 1.8;
 	margin-bottom: 2rem;
 	opacity: 0.9;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
 }
 
 .hero-image {
@@ -130,22 +137,32 @@
 		grid-template-columns: 1fr;
 		text-align: center;
 		gap: 2rem;
+		width: 100%;
+		max-width: 100%;
 	}
 
 	.hero-text h1 {
 		font-size: 2.5rem;
+		width: 100%;
+		max-width: 100%;
 	}
 
 	.hero-text .subtitle {
 		font-size: 1.2rem;
+		width: 100%;
+		max-width: 100%;
 	}
 
 	.hero-text .company {
 		font-size: 1.1rem;
+		width: 100%;
+		max-width: 100%;
 	}
 
 	.hero-text .bio {
 		font-size: 1rem;
+		width: 100%;
+		max-width: 100%;
 	}
 
 	.profile-img {