Pretty Ui Update
This commit is contained in:
Space-Banane
39
src/pages/AboutPage.tsx
Normal file
39
src/pages/AboutPage.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { About as AboutSection } from "../sections/About";
|
||||
import { Goals } from "../sections/Goals";
|
||||
|
||||
export function About() {
|
||||
return (
|
||||
<div className="space-y-24 py-12 max-w-4xl mx-auto px-4">
|
||||
<div className="text-center space-y-4">
|
||||
<h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
|
||||
About Me
|
||||
</h1>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||
A little bit about me...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<AboutSection />
|
||||
|
||||
<Goals />
|
||||
|
||||
<section className="bg-white/5 border border-white/10 rounded-3xl p-8 backdrop-blur-sm">
|
||||
<h3 className="text-2xl font-bold mb-4">Interests Outside of Coding</h3>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-300">
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="text-purple-400">✦</span> 3D Printing & Design
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="text-purple-400">✦</span> Graphical Design
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="text-purple-400">✦</span> Gaming & Hardware
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<span className="text-purple-400">✦</span> Open Source Contribution
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/pages/ContactPage.tsx
Normal file
38
src/pages/ContactPage.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { Contact as ContactSection } from "../sections/Contact";
|
||||
|
||||
export function Contact() {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[70vh] px-4 space-y-12 w-full max-w-4xl mx-auto">
|
||||
<div className="text-center space-y-4 w-full">
|
||||
<h1 className="text-5xl md:text-6xl font-extrabold text-white">
|
||||
Let's <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">Connect</span>
|
||||
</h1>
|
||||
<p className="text-gray-400 text-xl max-w-xl mx-auto">
|
||||
Whatever you've got in mind, I'm just a few clicks away.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-3xl">
|
||||
<ContactSection />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 w-full max-w-4xl text-center">
|
||||
<div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-blue-500/30 transition-all duration-300">
|
||||
<div className="text-3xl mb-4 group-hover:scale-110 transition-transform">📧</div>
|
||||
<h3 className="font-bold mb-1">Email</h3>
|
||||
<p className="text-sm text-gray-500">space@reversed.dev</p>
|
||||
</div>
|
||||
<div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-purple-500/30 transition-all duration-300">
|
||||
<div className="text-3xl mb-4 group-hover:scale-110 transition-transform">👾</div>
|
||||
<h3 className="font-bold mb-1">Discord</h3>
|
||||
<p className="text-sm text-gray-500">@getspaced</p>
|
||||
</div>
|
||||
<div className="bg-white/5 border border-white/10 p-6 rounded-3xl backdrop-blur-sm group hover:border-pink-500/30 transition-all duration-300">
|
||||
<div className="text-3xl mb-4 group-hover:scale-110 transition-transform">💻</div>
|
||||
<h3 className="font-bold mb-1">GitHub</h3>
|
||||
<p className="text-sm text-gray-500">github.com/Space-Banane</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
151
src/pages/Home.tsx
Normal file
151
src/pages/Home.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import { Hero } from "../sections/Hero";
|
||||
import type { MiniProject, Experience, Project } from "../types";
|
||||
import { ProjectCard } from "../components/ProjectCard";
|
||||
import { MiniProjectCard } from "../components/MiniProjectCard";
|
||||
import { ExperienceCard } from "../components/ExperienceCard";
|
||||
|
||||
interface HomeProps {
|
||||
glowColor: string;
|
||||
borderStatus: string;
|
||||
displayMessage: string;
|
||||
rotatingMessages: string[];
|
||||
statusMessage: string;
|
||||
showOldNames: boolean;
|
||||
setShowOldNames: (show: boolean) => void;
|
||||
oldUsernames: string[];
|
||||
projects: Project[];
|
||||
miniProjects: MiniProject[];
|
||||
setSelectedMiniProject: (p: MiniProject) => void;
|
||||
experiences: Experience[];
|
||||
setSelectedExperience: (e: Experience) => void;
|
||||
}
|
||||
|
||||
export function Home({
|
||||
glowColor,
|
||||
borderStatus,
|
||||
displayMessage,
|
||||
rotatingMessages,
|
||||
statusMessage,
|
||||
showOldNames,
|
||||
setShowOldNames,
|
||||
oldUsernames,
|
||||
projects,
|
||||
miniProjects,
|
||||
setSelectedMiniProject,
|
||||
experiences,
|
||||
setSelectedExperience,
|
||||
}: HomeProps) {
|
||||
const groupedExperiences = experiences.reduce(
|
||||
(acc, exp) => {
|
||||
if (!acc[exp.type]) {
|
||||
acc[exp.type] = [];
|
||||
}
|
||||
acc[exp.type].push(exp);
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, Experience[]>,
|
||||
);
|
||||
|
||||
const rewriteType = (type: string) => {
|
||||
switch (type) {
|
||||
case "language":
|
||||
return "Languages";
|
||||
case "service":
|
||||
return "Services";
|
||||
case "platform":
|
||||
return "Platforms";
|
||||
case "real life experience":
|
||||
return "Real Life Experience";
|
||||
case "roles":
|
||||
return "Roles";
|
||||
default:
|
||||
return type.charAt(0).toUpperCase() + type.slice(1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-24 pb-20">
|
||||
<Hero
|
||||
glowColor={glowColor}
|
||||
borderStatus={borderStatus}
|
||||
displayMessage={displayMessage}
|
||||
rotatingMessages={rotatingMessages}
|
||||
statusMessage={statusMessage}
|
||||
showOldNames={showOldNames}
|
||||
setShowOldNames={setShowOldNames}
|
||||
oldUsernames={oldUsernames}
|
||||
/>
|
||||
|
||||
<section className="w-full max-w-6xl space-y-12">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
|
||||
Featured Projects
|
||||
</h2>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||
A selection of my personal favorites. Many more on my GitHub.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-4">
|
||||
{projects.map((project, index) => (
|
||||
<ProjectCard key={index} project={project} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-6xl space-y-12">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500">
|
||||
Mini Projects
|
||||
</h2>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||
Small tools, experiments, and fun little things I've built.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 px-4">
|
||||
{miniProjects.map((mini, index) => (
|
||||
<MiniProjectCard
|
||||
key={index}
|
||||
project={mini}
|
||||
onClick={() => setSelectedMiniProject(mini)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="w-full max-w-6xl space-y-16">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500">
|
||||
Experience
|
||||
</h2>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||
My journey through the tech world so far.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12 px-4">
|
||||
{Object.entries(groupedExperiences)
|
||||
.sort(([typeA], [typeB]) => typeA.localeCompare(typeB))
|
||||
.map(([type, items]) => (
|
||||
<div key={type} className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<h3 className="text-xl font-semibold text-gray-200 capitalize whitespace-nowrap">
|
||||
{rewriteType(type)}
|
||||
</h3>
|
||||
<div className="h-px w-full bg-gradient-to-r from-gray-500/20 via-gray-500/10 to-transparent" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{items.map((exp, index) => (
|
||||
<ExperienceCard
|
||||
key={index}
|
||||
experience={exp}
|
||||
onClick={() => setSelectedExperience(exp)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user