add Posts section and update Profile with education; enhance Skills styling

src/App.tsx

@@ -6,6 +6,7 @@ import ProjectsContent from './components/ProjectsContent';
 import TerminalShell from './components/TerminalShell';
 import SkillsContent from './components/SkillsContent';
 import ResumeContent from './components/ResumeContent';
+import PostsContent from './components/PostsContent';
 
 function App() {
   const [activeSection, setActiveSection] = React.useState('about');
@@ -50,6 +51,12 @@ function App() {
                   >
                     SKILLS
                   </TerminalButton>
+                  <TerminalButton
+                    onClick={() => setActiveSection('posts')}
+                    isSelected={activeSection === 'posts'}
+                  >
+                    POSTS
+                  </TerminalButton>
                   <TerminalButton
                     onClick={() => setActiveSection('resume')}
                     isSelected={activeSection === 'resume'}
@@ -74,6 +81,7 @@ function App() {
                     <ProjectsContent markdownPath="/content/projects.md" />
                   )}
                   {activeSection === 'skills' && <SkillsContent />}
+                  {activeSection === 'posts' && <PostsContent />}
                   {activeSection === 'resume' && <ResumeContent />}
                   {activeSection === 'shell' && <TerminalShell />}
                 </div>

src/components/PostsContent.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import TerminalButton from './TerminalButton';
+
+const PostsContent: React.FC = () => {
+  const postsUrl = "https://blog.ivanch.me";
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex flex-col justify-center items-center h-full">
+        <p className="text-lg mb-4">You can check my (blog) posts by clicking the button below:</p>
+
+        <TerminalButton
+          onClick={() => window.open(postsUrl, '_blank')}
+          isSelected={false}
+        >
+          blog.ivanch.me
+        </TerminalButton>
+      </div>
+    </div>
+  );
+};
+
+export default PostsContent;

src/components/ProfileContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Mail, Github, Linkedin, User, Code, BookOpen, Building, MapPin } from 'lucide-react';
+import { Mail, Github, Linkedin, User, Code, BookOpen, Building, MapPin, GraduationCap } from 'lucide-react';
 import GlitchyLink from './GlitchyLink';
 
 const ProfileContent: React.FC = () => {
@@ -21,6 +21,11 @@ const ProfileContent: React.FC = () => {
           <p className="text-lg">EposNow</p>
         </div>
 
+        <div className="flex items-center gap-2">
+          <GraduationCap className="w-6 h-6" />
+          <p className="text-lg">UTFPR</p><small>(Federal University of Technology of Paraná)</small>
+        </div>
+
         <div className="flex items-center gap-2">
           <MapPin className="w-6 h-6" />
           <p className="text-lg">Curitiba, PR - Brazil</p>

src/components/ResumeContent.tsx

@@ -3,22 +3,14 @@ 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">
+      <div className="flex flex-col justify-center items-center h-full">
+        <p className="text-lg mb-4">You can check my resume by clicking the button below:</p>
+
         <TerminalButton
-          onClick={() => window.open(downloadUrl, '_blank')}
+          onClick={() => window.open(resumeUrl, '_blank')}
           isSelected={false}
         >
           OPEN IN NEW TAB

src/components/SkillsContent.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import '../styles/skills.css';
 
 const SkillsContent: React.FC = () => {
   return (
     <div className="flex flex-col items-center justify-center h-full">
-      <pre className="font-mono text-[#00FF00] whitespace-pre">
+      <pre className="font-mono whitespace-pre skills-text">
 {`
    _____  __   _   _ _  _____
   / ____|/ /_ (_) | | |/ ____|
@@ -11,7 +12,9 @@ const SkillsContent: React.FC = () => {
   \\___ \\| | | | | | | |\\____ \\
   ____) | | | | | | | | ____) |
  |_____/|_| |_|_|_| |_||_____/
-
+`}</pre>
+      <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++

src/styles/skills.css

@@ -0,0 +1,33 @@
+@keyframes rainbow-text {
+    0% { color: #ff0000; }
+    16% { color: #ffa500; }
+    32% { color: #ffff00; }
+    48% { color: #00ff00; }
+    64% { color: #00ffff; }
+    80% { color: #0000ff; }
+    100% { color: #ff00ff; }
+  }
+
+  .skills-text {
+    background: linear-gradient(
+      to right,
+      #ff0000 0%,
+      #ffa500 16%,
+      #ffff00 32%,
+      #00ff00 48%,
+      #00ffff 64%,
+      #0000ff 80%,
+      #ff00ff 100%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    background-size: 200% auto;
+    animation: rainbow-slide 5s linear infinite;
+  }
+
+  @keyframes rainbow-slide {
+    to {
+      background-position: -200% center;
+    }
+  }