Skip to content

Commit 630f721

Browse files
fezcodefezcode
committed
refactor: major ui update
1 parent 8113642 commit 630f721

File tree

6 files changed

+223
-210
lines changed

6 files changed

+223
-210
lines changed

‎src/components/PostTile.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
import { ArrowRight } from '@phosphor-icons/react';
4+
import { motion } from 'framer-motion';
5+
import GenerativeArt from './GenerativeArt';
6+
7+
const PostTile = ({ post }) => {
8+
const dateStr = new Date(post.updated || post.date).toLocaleDateString('en-GB', {
9+
year: 'numeric',
10+
month: 'short',
11+
day: '2-digit',
12+
});
13+
14+
return (
15+
<motion.div
16+
whileHover={{ y: -5 }}
17+
className="group relative flex flex-col overflow-hidden rounded-sm bg-zinc-900 border border-white/10 h-full"
18+
>
19+
<Link to={post.isSeries ? `/blog/series/${post.slug}` : `/blog/${post.slug}`} className="flex flex-col h-full">
20+
{/* Visual Header */}
21+
<div className="relative h-32 w-full overflow-hidden border-b border-white/5">
22+
<GenerativeArt
23+
seed={post.title}
24+
className="w-full h-full opacity-40 transition-transform duration-700 ease-out group-hover:scale-110"
25+
/>
26+
<div className="absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent" />
27+
28+
<div className="absolute bottom-3 left-4 flex items-center gap-2">
29+
<span className="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 rounded-sm">
30+
{post.category || 'Post'}
31+
</span>
32+
{post.isSeries && (
33+
<span className="px-2 py-0.5 text-[9px] font-mono font-bold uppercase tracking-widest text-amber-400 bg-amber-500/10 border border-amber-500/20 rounded-sm">
34+
Series
35+
</span>
36+
)}
37+
</div>
38+
</div>
39+
40+
{/* Content */}
41+
<div className="flex flex-col flex-grow p-5">
42+
<span className="font-mono text-[10px] text-gray-500 uppercase tracking-widest mb-2">
43+
{dateStr}
44+
</span>
45+
46+
<h3 className="text-lg font-medium font-sans uppercase text-white mb-3 group-hover:text-emerald-400 transition-colors line-clamp-2 leading-tight">
47+
{post.title}
48+
</h3>
49+
50+
<div className="mt-auto pt-4 flex items-center justify-between border-t border-white/5">
51+
<span className="text-[10px] font-mono font-bold uppercase tracking-widest text-gray-500 group-hover:text-white transition-colors">
52+
Read Intel
53+
</span>
54+
<ArrowRight weight="bold" size={14} className="text-emerald-500 transform -translate-x-2 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100" />
55+
</div>
56+
</div>
57+
</Link>
58+
</motion.div>
59+
);
60+
};
61+
62+
export default PostTile;

‎src/components/ProjectCard.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const ProjectCard = ({ project, index, isActive, onHover = () => {} }) => {
1818
>
1919
{/* Active Indicator Line */}
2020
<div
21-
className={`absolute left-0 top-0 h-full w-1 bg-cyan-400 transition-all duration-300 ${
21+
className={`absolute left-0 top-0 h-full w-1 bg-emerald-400 transition-all duration-300 ${
2222
isActive ? 'opacity-100' : 'opacity-0'
2323
}`}
2424
/>
@@ -27,7 +27,7 @@ const ProjectCard = ({ project, index, isActive, onHover = () => {} }) => {
2727
{/* Index / Year */}
2828
<span
2929
className={`font-mono text-sm transition-colors duration-300 ${
30-
isActive ? 'text-cyan-400' : 'text-gray-600'
30+
isActive ? 'text-emerald-400' : 'text-gray-600'
3131
}`}
3232
>
3333
{String(index + 1).padStart(2, '0')}
@@ -49,7 +49,7 @@ const ProjectCard = ({ project, index, isActive, onHover = () => {} }) => {
4949
<div
5050
className={`transform transition-all duration-300 ${
5151
isActive
52-
? 'translate-x-0 opacity-100 text-cyan-400'
52+
? 'translate-x-0 opacity-100 text-emerald-400'
5353
: '-translate-x-4 opacity-0 text-gray-500'
5454
}`}
5555
>

‎src/components/ProjectTile.js‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,22 +34,33 @@ const ProjectTile = ({project}) => {
3434
</div>
3535
</div>
3636

37-
{/* Content */}
38-
<div className="flex flex-col flex-grow p-5">
39-
<h3
40-
className="text-xl font-medium font-sans uppercase text-white mb-2 group-hover:text-cyan-400 transition-colors line-clamp-1">
41-
{project.title}
42-
</h3>
37+
{/* Content */}
38+
39+
<div className="flex flex-col flex-grow p-5">
40+
41+
<h3 className="text-xl font-medium font-sans uppercase text-white mb-2 group-hover:text-emerald-400 transition-colors line-clamp-1">
42+
43+
{project.title}
44+
45+
</h3>
4346
<p className="text-sm text-gray-400 line-clamp-2 leading-relaxed mb-4 flex-grow"> {project.shortDescription}
4447
</p>
4548

46-
{/* Tech Stack */}
47-
<div className="flex flex-wrap gap-2 mt-auto">
48-
{project.technologies && project.technologies.slice(0, 3).map((tech) => (<span key={tech}
49-
className="text-[10px] font-mono text-gray-500 uppercase tracking-wider border border-white/10 px-1.5 py-0.5 rounded">
50-
{tech}
51-
</span>))}
52-
</div>
49+
{/* Tech Stack */}
50+
51+
<div className="flex flex-wrap gap-2 mt-auto">
52+
53+
{project.technologies && project.technologies.slice(0, 3).map((tech) => (
54+
55+
<span key={tech} className="text-[10px] font-mono text-gray-500 uppercase tracking-wider border border-white/10 px-1.5 py-0.5 rounded group-hover:text-emerald-500 group-hover:border-emerald-500/30 transition-colors">
56+
57+
{tech}
58+
59+
</span>
60+
61+
))}
62+
63+
</div>
5364
</div>
5465
</Link>
5566
</motion.div>);

0 commit comments

Comments
 (0)