add mobile device detection and redirect to external site

add Posts section and update Profile with education; enhance Skills styling
2025-01-24 22:16:42 -03:00 · 2025-01-24 22:12:02 -03:00
10 changed files with 113 additions and 22 deletions
--- a/index.html
+++ b/index.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>demo</title>
+    <title>ivanczn</title>
  </head>
  <body>
    <div id="root"></div>
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/src/App.tsx
+++ b/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>
--- a/src/components/PostsContent.tsx
+++ b/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;
--- a/src/components/ProfileContent.tsx
+++ b/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>
--- a/src/components/ResumeContent.tsx
+++ b/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
--- a/src/components/SkillsContent.tsx
+++ b/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++
--- a/src/main.tsx
+++ b/src/main.tsx
@ -2,9 +2,15 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
+import { isMobileDevice } from './utils/deviceDetection';

-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);
+// Check for mobile device and redirect if necessary
+if (isMobileDevice()) {
+  window.location.href = 'https://blog.ivanch.me';
+} else {
+  createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+}
--- a/src/styles/skills.css
+++ b/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;
+    }
+  }
--- a/src/utils/deviceDetection.ts
+++ b/src/utils/deviceDetection.ts
@ -0,0 +1,21 @@
+function isPortraitAndNarrow(): boolean {
+  return window.innerWidth < window.innerHeight && window.innerWidth < 768;
+}
+
+export function isMobileDevice(): boolean {
+  const toMatch = [
+    /Android/i,
+    /webOS/i,
+    /iPhone/i,
+    /iPad/i,
+    /iPod/i,
+    /BlackBerry/i,
+    /Windows Phone/i
+  ];
+
+  const isMobileUserAgent = toMatch.some((toMatchItem) => {
+    return navigator.userAgent.match(toMatchItem);
+  });
+
+  return isMobileUserAgent || isPortraitAndNarrow();
+}
Author	SHA1	Message	Date
José Henrique	37ac35e3f4	add mobile device detection and redirect to external site All checks were successful Master Build / Build and Push Docker Image (amd64) (push) Successful in 53s Details Master Build / Update running container (push) Successful in 10s Details	2025-01-24 22:16:42 -03:00
José Henrique	8117a4870b	add Posts section and update Profile with education; enhance Skills styling	2025-01-24 22:12:02 -03:00