about me basics

fezcode · fezcode · commit 8ce0dc2f8bb5 · 2025-10-15T01:34:28.000+03:00
diff --git a/src/App.js b/src/App.js
@@ -6,6 +6,7 @@ import BlogPage from './pages/BlogPage';
 import BlogPostPage from './pages/BlogPostPage';
 import ProjectsPage from './pages/ProjectsPage';
 import ProjectPage from './pages/ProjectPage';
+import AboutPage from './pages/AboutPage';
 import NotFoundPage from './pages/NotFoundPage';
 
 function App() {
@@ -18,6 +19,7 @@ function App() {
           <Route path="/blog/:slug" element={<BlogPostPage />} />
           <Route path="/projects" element={<ProjectsPage />} />
           <Route path="/projects/:slug" element={<ProjectPage />} />
+          <Route path="/about" element={<AboutPage />} />
           <Route path="*" element={<NotFoundPage />} />
         </Routes>
       </Layout>
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -26,6 +26,7 @@ const Navbar = () => {
           <Link to="/" className="text-sm font-medium hover:text-gray-300 transition-colors">Home</Link>
           <Link to="/blog" className="text-sm font-medium hover:text-gray-300 transition-colors">Blog</Link>
           <Link to="/projects" className="text-sm font-medium hover:text-gray-300 transition-colors">Projects</Link>
+          <Link to="/about" className="text-sm font-medium hover:text-gray-300 transition-colors">About</Link>
           <a href="https://www.nytimes.com/games/wordle/index.html" target="_blank" rel="noopener noreferrer" className="bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-full transition-colors">
             Play Wordle
           </a>
diff --git a/src/pages/AboutPage.js b/src/pages/AboutPage.js
@@ -0,0 +1,56 @@
+import React from 'react';
+
+const AboutPage = () => {
+  return (
+    <div className="py-16 sm:py-24">
+      <div className="mx-auto max-w-3xl px-6 lg:px-8 text-gray-300">
+        <h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl mb-8">About Me</h1>
+
+        <p className="mb-6 text-lg leading-8">
+          Hello! I'm a passionate software engineer with a keen interest in web development, open-source projects, and creating engaging user experiences. I love exploring new technologies and continuously learning to build robust and scalable applications.
+        </p>
+
+        <h2 className="text-3xl font-semibold tracking-tight text-white mb-4">My Skills</h2>
+        <ul className="list-disc list-inside mb-6 ml-4">
+          <li>React, JavaScript, TypeScript</li>
+          <li>Node.js, Express.js</li>
+          <li>Python, Django, Flask</li>
+          <li>HTML, CSS, Tailwind CSS</li>
+          <li>Database Management (SQL, NoSQL)</li>
+          <li>Cloud Platforms (AWS, GCP)</li>
+        </ul>
+
+        <h2 className="text-3xl font-semibold tracking-tight text-white mb-4">Useful Links</h2>
+        <ul className="list-disc list-inside mb-6 ml-4">
+          <li>
+            <a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer" className="text-primary-400 hover:text-primary-500 transition-colors">
+              GitHub Profile
+            </a>
+          </li>
+          <li>
+            <a href="https://linkedin.com/in/yourusername" target="_blank" rel="noopener noreferrer" className="text-primary-400 hover:text-primary-500 transition-colors">
+              LinkedIn Profile
+            </a>
+          </li>
+          <li>
+            <a href="https://twitter.com/yourusername" target="_blank" rel="noopener noreferrer" className="text-primary-400 hover:text-primary-500 transition-colors">
+              Twitter
+            </a>
+          </li>
+          <li>
+            <a href="/blog" className="text-primary-400 hover:text-primary-500 transition-colors">
+              My Blog Posts
+            </a>
+          </li>
+        </ul>
+
+        <h2 className="text-3xl font-semibold tracking-tight text-white mb-4">Contact</h2>
+        <p>
+          Feel free to reach out to me at <a href="mailto:your.email@example.com" className="text-primary-400 hover:text-primary-500 transition-colors">your.email@example.com</a>.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default AboutPage;
