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

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

Browse Source
This commit is contained in:
José Henrique 2025-01-24 22:12:02 -03:00
parent 4b264c8389
commit 8117a4870b
8 changed files with 81 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -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>

BIN
public/favicon.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 672 B

8
src/App.tsx
View File

@ -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>

23
src/components/PostsContent.tsx Normal file
View File

@ -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;

7
src/components/ProfileContent.tsx
View File

@ -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>

16
src/components/ResumeContent.tsx
View File

@ -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

7
src/components/SkillsContent.tsx
View File

@ -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++

33
src/styles/skills.css Normal file
View File

@ -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;
}
}