ivanch/new-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ivanch:37ac35e3f496d41663b03a0c28f8b876b4d9f124
Branches Tags
ivanch:main
..
compare: ivanch:4b264c8389d7e3102216c71688071c6decc3fb8d
Branches Tags
ivanch:main

No commits in common. "37ac35e3f496d41663b03a0c28f8b876b4d9f124" and "4b264c8389d7e3102216c71688071c6decc3fb8d" have entirely different histories.
37ac35e3f4 ... 4b264c8389

10 changed files with 22 additions and 113 deletions
Show Stats Expand all files Collapse all files

4
index.html
View File

@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ivanczn</title> <title>demo</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

BIN
public/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 672 B

8
src/App.tsx
View File

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

23
src/components/PostsContent.tsx
View File

@ -1,23 +0,0 @@
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;

7
src/components/ProfileContent.tsx
View File

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

16
src/components/ResumeContent.tsx
View File

@ -3,14 +3,22 @@ import TerminalButton from './TerminalButton';
const ResumeContent: React.FC = () => { const ResumeContent: React.FC = () => {
const resumeUrl = "https://drive.google.com/file/d/1oYf68qKXUnBz7d4qjHX-hTw_-f5EKgeF/view?usp=sharing"; 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 ( return (
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<div className="flex flex-col justify-center items-center h-full"> <div className="flex-1 mb-4">
<p className="text-lg mb-4">You can check my resume by clicking the button below:</p> <iframe
src={resumeUrl}
className="w-full h-full rounded-lg"
frameBorder="0"
allowFullScreen
allow="autoplay"
/>
</div>
<div className="flex justify-center">
<TerminalButton <TerminalButton
onClick={() => window.open(resumeUrl, '_blank')} onClick={() => window.open(downloadUrl, '_blank')}
isSelected={false} isSelected={false}
> >
OPEN IN NEW TAB OPEN IN NEW TAB

7
src/components/SkillsContent.tsx
View File

@ -1,10 +1,9 @@
import React from 'react'; import React from 'react';
import '../styles/skills.css';
const SkillsContent: React.FC = () => { const SkillsContent: React.FC = () => {
return ( return (
<div className="flex flex-col items-center justify-center h-full"> <div className="flex flex-col items-center justify-center h-full">
<pre className="font-mono whitespace-pre skills-text"> <pre className="font-mono text-[#00FF00] whitespace-pre">
{` {`
_____ __ _ _ _ _____ _____ __ _ _ _ _____
/ ____|/ /_ (_) | | |/ ____| / ____|/ /_ (_) | | |/ ____|
@ -12,9 +11,7 @@ const SkillsContent: React.FC = () => {
\\___ \\| | | | | | | |\\____ \\ \\___ \\| | | | | | | |\\____ \\
____) | | | | | | | | ____) | ____) | | | | | | | | ____) |
|_____/|_| |_|_|_| |_||_____/ |_____/|_| |_|_|_| |_||_____/
`}</pre>
<pre className="font-mono text-[#00FF00] whitespace-pre">
{`
Programming: Programming:
├── Languages: C# (.NET Core, .NET Framework, ASP.NET Core) ├── Languages: C# (.NET Core, .NET Framework, ASP.NET Core)
├── Languages: TypeScript, JavaScript, Python, Golang, Java, C/C++ ├── Languages: TypeScript, JavaScript, Python, Golang, Java, C/C++

6
src/main.tsx
View File

@ -2,15 +2,9 @@ import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import App from './App.tsx'; import App from './App.tsx';
import './index.css'; import './index.css';
import { isMobileDevice } from './utils/deviceDetection';
// Check for mobile device and redirect if necessary
if (isMobileDevice()) {
window.location.href = 'https://blog.ivanch.me';
} else {
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<StrictMode> <StrictMode>
<App /> <App />
</StrictMode> </StrictMode>
); );
}

33
src/styles/skills.css
View File

@ -1,33 +0,0 @@
@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;
}
}

21
src/utils/deviceDetection.ts
View File

@ -1,21 +0,0 @@
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();
}