Skip to content

Commit

Permalink
Lint
Browse files Browse the repository at this point in the history
  • Loading branch information
@jarydo
jarydo committed Sep 16, 2024
1 parent acd7e24 commit c184199
Show file tree
Hide file tree
Showing 7 changed files with 403 additions and 270 deletions.
17 changes: 17 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"eslint-plugin-react-refresh": "^0.4.9",
"globals": "^15.9.0",
"postcss": "^8.4.45",
"prettier": "^3.3.3",
"tailwindcss": "^3.4.11",
"typescript": "^5.5.3",
"typescript-eslint": "^8.0.1",
Expand Down
145 changes: 75 additions & 70 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
import { useState, useEffect, useRef } from 'react';
import { useState, useEffect, useRef } from "react";
import { Button } from "@/components/ui/button";
// import { Label } from './components/ui/label';
// import { Switch } from './components/ui/switch';
import Home from './components/sections/Home';
import Experience from './components/sections/Experience';
import Contact from './components/sections/Contact';
import Projects from './components/sections/Projects';
import Home from "./components/sections/Home";
import Experience from "./components/sections/Experience";
import Contact from "./components/sections/Contact";
import Projects from "./components/sections/Projects";

function App() {
const [index, setIndex] = useState(0);
const [title, setTitle] = useState('');
const fullTitle = 'Jaryd.';
const [title, setTitle] = useState("");
const fullTitle = "Jaryd.";

const [activeTab, setActiveTab] = useState('home');
const [activeTab, setActiveTab] = useState("home");
const [isScrolling, setIsScrolling] = useState(false);
const navItems = [
{ id: 'home', label: 'Home' },
{ id: 'experience', label: 'Experience' },
{ id: 'projects', label: 'Projects' },
{ id: 'contact', label: 'Contact' },
]
{ id: "home", label: "Home" },
{ id: "experience", label: "Experience" },
{ id: "projects", label: "Projects" },
{ id: "contact", label: "Contact" },
];
const sectionRefs = useRef<{
home: HTMLElement | null;
experience: HTMLElement | null;
Expand All @@ -38,71 +38,76 @@ function App() {
// TODO: change this to CSS animation
useEffect(() => {
if (index < fullTitle.length) {
const timeout = setTimeout(() => {
setTitle((prevTitle) => prevTitle + fullTitle[index])
setIndex((prevIndex) => prevIndex + 1)
}, 300) // Adjust this value to change the typing speed
const timeout = setTimeout(() => {
setTitle((prevTitle) => prevTitle + fullTitle[index]);
setIndex((prevIndex) => prevIndex + 1);
}, 300); // Adjust this value to change the typing speed

return () => clearTimeout(timeout)
return () => clearTimeout(timeout);
}
}, [index])
}, [index]);

useEffect(() => {
const handleScroll = () => {
if (isScrolling) return;

const scrollPosition = window.scrollY + window.innerHeight / 2;

for (const [id, ref] of Object.entries(sectionRefs.current)) {
if (ref && ref.offsetTop <= scrollPosition && ref.offsetTop + ref.offsetHeight > scrollPosition) {
setActiveTab(id);
break;
useEffect(() => {
const handleScroll = () => {
if (isScrolling) return;

const scrollPosition = window.scrollY + window.innerHeight / 2;

for (const [id, ref] of Object.entries(sectionRefs.current)) {
if (
ref &&
ref.offsetTop <= scrollPosition &&
ref.offsetTop + ref.offsetHeight > scrollPosition
) {
setActiveTab(id);
break;
}
}
}
};
};

window.addEventListener('scroll', handleScroll);
handleScroll(); // Call once to set initial active tab
window.addEventListener("scroll", handleScroll);
handleScroll(); // Call once to set initial active tab

return () => window.removeEventListener('scroll', handleScroll);
}, [isScrolling]);
return () => window.removeEventListener("scroll", handleScroll);
}, [isScrolling]);

const handleNavClick = (id: string) => {
setIsScrolling(true);
setActiveTab(id)
setActiveTab(id);
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
element.scrollIntoView({ behavior: "smooth" });
setTimeout(() => {
setIsScrolling(false);
}, 1500);
}
}
};

const Background = ({ children } : { children: React.ReactNode }) => {
const Background = ({ children }: { children: React.ReactNode }) => {
return (
<div className="relative min-h-screen overflow-hidden flex flex-col items-center">
{/* Base gradient */}
<div className="absolute inset-0 bg-gradient-to-br from-blue-500 via-blue-600 to-blue-700"></div>

{/* Metallic overlay */}
<div className="absolute inset-0 opacity-50">
<div className="absolute inset-0 bg-gradient-to-t from-transparent via-white to-transparent opacity-20"></div>
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-white to-transparent opacity-20"></div>
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-20"></div>
<div className="absolute inset-0 bg-gradient-to-l from-transparent via-white to-transparent opacity-20"></div>
</div>

{/* Shine effect */}
<div className="absolute inset-0 bg-gradient-to-br from-transparent via-white to-transparent opacity-10"></div>

<div className="fixed inset-0 bg-gray-900 text-white p-6 flex flex-col items-center justify-center md:hidden">
<h1 className="text-2xl font-bold mb-4">Desktop Only</h1>
<p className="text-center mb-4">
We're sorry, but this portfolio is optimized for desktop use only.
</p>
<p className="text-center">
Please visit us on a desktop or laptop computer for the best experience.
Please visit us on a desktop or laptop computer for the best
experience.
</p>
</div>

Expand All @@ -111,27 +116,27 @@ useEffect(() => {
{children}
</div>
</div>
)
}
);
};

const NavBar = () => {
return (
<nav className="fixed top-10 left-60 right-60 z-50 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-full p-1 flex justify-between items-center">
{navItems.map((item) => (
<Button
key={item.id}
variant="ghost"
className={`text-lg px-6 py-6 rounded-full transition-colors duration-200 ${
activeTab === item.id
? 'text-blue-500 bg-white hover:text-blue-500'
: 'text-white hover:bg-white hover:bg-opacity-20 hover:text-white'
}`}
onClick={() => handleNavClick(item.id)}
>
{item.label}
</Button>
))}
{/* <div className="flex items-center space-x-2 mx-4">
{navItems.map((item) => (
<Button
key={item.id}
variant="ghost"
className={`text-lg px-6 py-6 rounded-full transition-colors duration-200 ${
activeTab === item.id
? "text-blue-500 bg-white hover:text-blue-500"
: "text-white hover:bg-white hover:bg-opacity-20 hover:text-white"
}`}
onClick={() => handleNavClick(item.id)}
>
{item.label}
</Button>
))}
{/* <div className="flex items-center space-x-2 mx-4">
<Switch
id="recruiter-mode"
checked={recruiterMode}
Expand All @@ -142,19 +147,19 @@ useEffect(() => {
Recruiter Mode
</Label>
</div> */}
</nav>
)
}
</nav>
);
};

return (
<Background>
<NavBar />
<Home title={title} ref={(el) => (sectionRefs.current.home = el)}/>
<Experience ref={(el) => (sectionRefs.current.experience = el)}/>
<Projects ref={(el) => (sectionRefs.current.projects = el)}/>
<Contact ref={(el) => (sectionRefs.current.contact = el)}/>
</Background>
)
<Home title={title} ref={(el) => (sectionRefs.current.home = el)} />
<Experience ref={(el) => (sectionRefs.current.experience = el)} />
<Projects ref={(el) => (sectionRefs.current.projects = el)} />
<Contact ref={(el) => (sectionRefs.current.contact = el)} />
</Background>
);
}

export default App
export default App;
72 changes: 49 additions & 23 deletions src/components/sections/Contact.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,52 @@
import * as resume from '../../resume.json';
import { forwardRef } from 'react';
import * as resume from "../../resume.json";
import { forwardRef } from "react";

const Contact = forwardRef<HTMLElement>((props, ref) => {
return (
<section id="contact" ref={ref} className="min-h-screen flex flex-col items-center justify-center">
<h2 className="text-6xl font-bold text-center text-white mb-20">Get in Touch</h2>
<div className="flex gap-10">
<a href={resume.contact.linkedin} target="_blank" rel="noopener noreferrer" className="flex items-center text-gray-600 hover:text-blue-500 transition-colors">
<img src="/linkedin.svg" alt="LinkedIn" className="w-20 h-20" />
</a>
<a href={resume.contact.github} target="_blank" rel="noopener noreferrer" className="flex items-center text-gray-600 hover:text-blue-500 transition-colors">
<img src="/github.svg" alt="Github" className="w-20 h-20" />
</a>
<a href={resume.contact.twitter} target="_blank" rel="noopener noreferrer" className="flex items-center text-gray-600 hover:text-blue-500 transition-colors">
<img src="/x.svg" alt="X" className="w-20 h-20" />
</a>
<a href="/Jaryd_Diamond_Resume.pdf" target="_blank" rel="noopener noreferrer" className="flex items-center text-gray-600 hover:text-blue-500 transition-colors">
<img src="/resume.svg" alt="Resume" className="w-20 h-20" />
</a>
</div>
</section>
)
const Contact = forwardRef<HTMLElement>((_, ref) => {
return (
<section
id="contact"
ref={ref}
className="min-h-screen flex flex-col items-center justify-center"
>
<h2 className="text-6xl font-bold text-center text-white mb-20">
Get in Touch
</h2>
<div className="flex gap-10">
<a
href={resume.contact.linkedin}
target="_blank"
rel="noopener noreferrer"
className="flex items-center text-gray-600 hover:text-blue-500 transition-colors"
>
<img src="/linkedin.svg" alt="LinkedIn" className="w-20 h-20" />
</a>
<a
href={resume.contact.github}
target="_blank"
rel="noopener noreferrer"
className="flex items-center text-gray-600 hover:text-blue-500 transition-colors"
>
<img src="/github.svg" alt="Github" className="w-20 h-20" />
</a>
<a
href={resume.contact.twitter}
target="_blank"
rel="noopener noreferrer"
className="flex items-center text-gray-600 hover:text-blue-500 transition-colors"
>
<img src="/x.svg" alt="X" className="w-20 h-20" />
</a>
<a
href="/Jaryd_Diamond_Resume.pdf"
target="_blank"
rel="noopener noreferrer"
className="flex items-center text-gray-600 hover:text-blue-500 transition-colors"
>
<img src="/resume.svg" alt="Resume" className="w-20 h-20" />
</a>
</div>
</section>
);
});

export default Contact;
export default Contact;
Loading

0 comments on commit c184199

Please sign in to comment.