add skills and resume sections; update projects list in the portfolio

src/App.tsx

@@ -4,6 +4,8 @@ import TerminalButton from './components/TerminalButton';
 import ProfileContent from './components/ProfileContent';
 import ProjectsContent from './components/ProjectsContent';
 import TerminalShell from './components/TerminalShell';
+import SkillsContent from './components/SkillsContent';
+import ResumeContent from './components/ResumeContent';
 
 function App() {
   const [activeSection, setActiveSection] = React.useState('about');
@@ -71,6 +73,8 @@ function App() {
                   {activeSection === 'projects' && (
                     <ProjectsContent markdownPath="/content/projects.md" />
                   )}
+                  {activeSection === 'skills' && <SkillsContent />}
+                  {activeSection === 'resume' && <ResumeContent />}
                   {activeSection === 'shell' && <TerminalShell />}
                 </div>
               </div>

src/components/ResumeContent.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import TerminalButton from './TerminalButton';
+
+const ResumeContent: React.FC = () => {
+  const resumeUrl = "https://drive.google.com/file/d/1oYf68qKXUnBz7d4qjHX-hTw_-f5EKgeF/view?usp=sharing";
+  const downloadUrl = "https://drive.google.com/file/d/1oYf68qKXUnBz7d4qjHX-hTw_-f5EKgeF/view?usp=sharing";
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 mb-4">
+        <iframe
+          src={resumeUrl}
+          className="w-full h-full rounded-lg"
+          frameBorder="0"
+          allowFullScreen
+          allow="autoplay"
+        />
+      </div>
+      <div className="flex justify-center">
+        <TerminalButton
+          onClick={() => window.open(downloadUrl, '_blank')}
+          isSelected={false}
+        >
+          OPEN IN NEW TAB
+        </TerminalButton>
+      </div>
+    </div>
+  );
+};
+
+export default ResumeContent;

src/components/SkillsContent.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const SkillsContent: React.FC = () => {
+  return (
+    <div className="flex flex-col items-center justify-center h-full">
+      <pre className="font-mono text-[#00FF00] whitespace-pre">
+{`
+   _____  __   _   _ _  _____
+  / ____|/ /_ (_) | | |/ ____|
+ | (___ | '_ \\| | | | | (___
+  \\___ \\| | | | | | | |\\____ \\
+  ____) | | | | | | | | ____) |
+ |_____/|_| |_|_|_| |_||_____/
+
+ Programming:
+ ├── Languages: C# (.NET Core, .NET Framework, ASP.NET Core)
+ ├── Languages: TypeScript, JavaScript, Python, Golang, Java, C/C++
+ └── Frontend: React
+
+ Infrastructure:
+ ├── Cloud: AWS
+ ├── CI/CD: GitHub Actions, GitLab CI, Helm/Terraform, Shell Scripting
+ └── Containers: Docker, Kubernetes
+
+ Databases:
+ ├── SQL: PostgreSQL, MySQL
+ ├── NoSQL: MongoDB
+ └── Caching: Redis
+`}</pre>
+    </div>
+  );
+};
+
+export default SkillsContent;