Skip to content

Commit ed9fbe2

Browse files
fezcodefezcode
committed
refactor: footer
1 parent 558be4d commit ed9fbe2

File tree

3 files changed

+106
-154
lines changed

3 files changed

+106
-154
lines changed

‎public/timeline/timeline.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
[
2+
{
3+
"date": "2025-11-27",
4+
"title": "Pinned Apps Hall of Fame",
5+
"description": "Introduced a dedicated, techno-styled page for my most used and favorite tools.",
6+
"type": "feature",
7+
"icon": "PushPin",
8+
"link": "/#/apps/pinned"
9+
},
210
{
311
"date": "2025-11-27",
412
"title": "New Blogpost Page",

‎src/components/Footer.js‎

Lines changed: 91 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,103 @@
11
import React from 'react';
2-
import { Link } from 'react-router-dom';
3-
import { version } from '../version';
2+
import {Link} from 'react-router-dom';
3+
import {version} from '../version';
4+
import {TwitterLogo, GithubLogo, LinkedinLogo, PaperPlaneRight, Command} from '@phosphor-icons/react';
5+
import Fez from './Fez';
46

57
const Footer = () => {
68
return (
7-
<footer className="mt-1 sm:mt-1">
8-
<div className="mx-auto max-w-7xl px-6 lg:px-8">
9-
<div className="border-t border-gray-700/50 py-12">
10-
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
11-
<div>
12-
<h3 className="text-lg font-semibold text-white">Newsletter</h3>
13-
<p className="mt-4 text-sm text-gray-400">
14-
Our newsletter is currently under construction. We are working
15-
hard (not really) to bring it to you soon!
9+
<footer className="mt-auto bg-gray-950 border-t border-gray-800/50 relative overflow-hidden">
10+
{/* Subtle Glow */}
11+
<div
12+
className="absolute bottom-0 left-1/4 w-96 h-96 bg-primary-500/5 rounded-full blur-[128px] pointer-events-none"></div>
13+
14+
<div className="mx-auto max-w-7xl px-6 lg:px-8 py-12 relative z-10">
15+
<div className="grid grid-cols-1 md:grid-cols-3 gap-12 lg:gap-16">
16+
17+
{/* Column 1: Brand & Tech Info */}
18+
<div className="space-y-4">
19+
<Link to="/" className="flex items-center gap-2 group"
20+
onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>
21+
<Fez className="w-8 h-8 text-primary-500 transition-transform group-hover:rotate-12"/>
22+
<span className="text-xl font-bold tracking-tight text-white font-arvo">
23+
fez<span className="text-primary-400">codex</span>
24+
</span>
25+
</Link>
26+
<p className="text-sm text-gray-400 leading-relaxed">
27+
A digital garden of code, thoughts, and interactive experiments.
28+
</p>
29+
<div className="pt-4 flex flex-col gap-2 text-xs text-gray-500 font-mono">
30+
<p className="flex items-center gap-2">
31+
<Command size={16} className="text-primary-500"/>
32+
<span>Press <kbd
33+
className="px-1.5 py-0.5 bg-gray-800 rounded border border-gray-700 text-gray-300">Alt</kbd> + <kbd
34+
className="px-1.5 py-0.5 bg-gray-800 rounded border border-gray-700 text-gray-300">K</kbd> for commands</span>
35+
</p>
36+
<p>
37+
v{version} // {new Date().getFullYear()}
1638
</p>
17-
<form className="mt-4 flex gap-2">
18-
<input
19-
type="email"
20-
placeholder="Coming soon, maybe..."
21-
className="bg-gray-800 text-white px-4 py-2 rounded-md w-full"
22-
disabled
23-
/>
24-
<button
25-
type="submit"
26-
className="bg-primary-500 text-white font-bold py-2 px-4 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
27-
disabled
28-
>
29-
Subscribe
30-
</button>
31-
</form>
32-
</div>
33-
<div className="md:text-right">
34-
<h3 className="text-lg font-semibold text-white">Socials</h3>
35-
<div className="mt-4 flex md:justify-end gap-4">
36-
<a
37-
href="https://x.com/fezcoddy"
38-
className="text-gray-400 hover:text-white transition-colors"
39-
>
40-
Twitter
41-
</a>
42-
<a
43-
href="https://github.com/fezcode"
44-
className="text-gray-400 hover:text-white transition-colors"
45-
>
46-
GitHub
47-
</a>
48-
<a
49-
href="https://www.linkedin.com/in/ahmed-samil-bulbul/?locale=en_US"
50-
className="text-gray-400 hover:text-white transition-colors"
51-
>
52-
LinkedIn
53-
</a>
54-
</div>
5539
</div>
5640
</div>
57-
<div className="mt-8 border-t border-gray-700/50 pt-8 flex flex-wrap items-center justify-between gap-4">
58-
<div className="flex flex-wrap items-center gap-6 text-sm font-medium text-gray-400">
59-
<Link
60-
to="/"
61-
className="hover:text-white transition-colors"
62-
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
63-
>
64-
Home
65-
</Link>
66-
<Link
67-
to="/about"
68-
className="hover:text-white transition-colors"
69-
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
70-
>
71-
About
72-
</Link>
73-
<Link
74-
to="/blog"
75-
className="hover:text-white transition-colors"
76-
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
77-
>
78-
Blog
79-
</Link>
80-
<Link
81-
to="/projects"
82-
className="hover:text-white transition-colors"
83-
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
84-
>
85-
Projects
86-
</Link>
87-
<Link
88-
to="/logs"
89-
className="text-primary-400 hover:text-white transition-colors"
90-
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
91-
>
92-
Logs
93-
</Link>
41+
42+
{/* Column 2: Navigation */}
43+
<div>
44+
<h3 className="text-sm font-semibold text-white tracking-wider uppercase font-mono mb-4">Navigation</h3>
45+
<ul className="grid grid-cols-2 gap-3 text-sm text-gray-400">
46+
<li><Link to="/" className="hover:text-primary-400 transition-colors"
47+
onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>Home</Link></li>
48+
<li><Link to="/about" className="hover:text-primary-400 transition-colors"
49+
onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>About</Link></li>
50+
<li><Link to="/blog" className="hover:text-primary-400 transition-colors"
51+
onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>Blog</Link></li>
52+
<li><Link to="/projects" className="hover:text-primary-400 transition-colors"
53+
onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>Projects</Link></li>
54+
<li><Link to="/logs" className="hover:text-primary-400 transition-colors"
55+
onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>Logs</Link></li>
56+
<li><Link to="/apps" className="hover:text-primary-400 transition-colors"
57+
onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>Apps</Link></li>
58+
<li><Link to="/timeline" className="hover:text-primary-400 transition-colors"
59+
onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>Timeline</Link></li>
60+
<li><Link to="/rss.xml" target="_blank" className="hover:text-primary-400 transition-colors">RSS</Link>
61+
</li>
62+
</ul>
63+
</div>
64+
65+
{/* Column 3: Connect */}
66+
<div>
67+
<h3 className="text-sm font-semibold text-white tracking-wider uppercase font-mono mb-4">Connect</h3>
68+
<div className="flex gap-4 mb-6">
69+
<a href="https://x.com/fezcoddy" target="_blank" rel="noreferrer"
70+
className="text-gray-400 hover:text-white transition-colors hover:bg-gray-800 p-2 rounded-lg">
71+
<TwitterLogo size={24} weight="fill"/>
72+
</a>
73+
<a href="https://github.com/fezcode" target="_blank" rel="noreferrer"
74+
className="text-gray-400 hover:text-white transition-colors hover:bg-gray-800 p-2 rounded-lg">
75+
<GithubLogo size={24} weight="fill"/>
76+
</a>
77+
<a href="https://www.linkedin.com/in/ahmed-samil-bulbul/?locale=en_US" target="_blank" rel="noreferrer"
78+
className="text-gray-400 hover:text-white transition-colors hover:bg-gray-800 p-2 rounded-lg">
79+
<LinkedinLogo size={24} weight="fill"/>
80+
</a>
81+
</div>
82+
83+
{/* Fake Newsletter */}
84+
<div className="relative">
85+
<input
86+
type="text"
87+
disabled
88+
placeholder="Newsletter coming soon..."
89+
className="w-full bg-gray-900/50 border border-gray-800 rounded-lg py-2.5 pl-4 pr-10 text-sm text-gray-500 cursor-not-allowed"
90+
/>
91+
<PaperPlaneRight size={16} className="absolute right-3 top-3 text-gray-600"/>
9492
</div>
95-
<p className="text-sm text-gray-500">
96-
&copy; {new Date().getFullYear()} fezcode. All rights reserved.{' '}
97-
<code> v{version} </code>
98-
</p>
99-
<p className="text-xs text-gray-500 mt-1">
100-
Hint: Press <kbd className="kbd kbd-sm">Alt</kbd>+<kbd className="kbd kbd-sm">K</kbd> for commands
101-
</p>
10293
</div>
94+
95+
</div>
96+
97+
<div className="mt-12 pt-8 border-t border-gray-800/50 text-center md:text-left">
98+
<p className="text-xs text-gray-600">
99+
&copy; {new Date().getFullYear()} fezcode. Built with React, Tailwind, and caffeine.
100+
</p>
103101
</div>
104102
</div>
105103
</footer>

‎src/pages/PinnedAppPage.js‎

Lines changed: 7 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -19,81 +19,52 @@ const PinnedAppCard = ({app, index}) => {
1919
{/* Animated Glow Border */}
2020
<div
2121
className={`absolute -inset-[1px] bg-gradient-to-br ${accentGradient} rounded-2xl opacity-30 group-hover:opacity-100 blur-sm transition-opacity duration-500`}></div>
22-
2322
{/* Main Card Container */}
24-
2523
<div
2624
className="relative flex flex-col h-full bg-gray-900/80 backdrop-blur-xl border border-gray-800 rounded-2xl p-5 overflow-hidden group-hover:border-gray-700 transition-all duration-300 shadow-xl">
27-
2825
{/* Subtle Grid Background */}
2926
<div className="absolute inset-0 opacity-[0.03] pointer-events-none z-0"
3027
style={{
3128
backgroundImage: 'linear-gradient(to right, #ffffff 1px, transparent 1px), linear-gradient(to bottom, #ffffff 1px, transparent 1px)',
3229
backgroundSize: '20px 20px'
3330
}}>
3431
</div>
35-
3632
{/* Watermark Icon - Restored */}
3733
<div
3834
className="absolute -bottom-8 -right-8 text-gray-700 opacity-20 group-hover:opacity-30 group-hover:scale-110 transition-all duration-500 rotate-12 pointer-events-none z-0">
3935
<Icon size={180} weight="fill"/>
4036
</div>
41-
4237
{/* Header: ID and Rank */}
43-
4438
<div className="flex justify-between items-start mb-4 relative z-10 border-b border-white/10 pb-3">
45-
4639
<div className="flex flex-col">
47-
4840
<span className="text-[10px] uppercase tracking-[0.2em] text-gray-500 font-mono">System.App</span>
49-
5041
<span
5142
className="text-xs font-mono text-primary-400/80">ID :: {String(app.pinned_order).padStart(3, '0')}</span>
52-
5343
</div>
54-
5544
<div
5645
className={`flex items-center justify-center w-8 h-8 rounded font-mono font-bold text-sm border ${index < 3 ? 'bg-white/10 text-white border-white/20' : 'bg-gray-900 text-gray-500 border-gray-800'}`}>
57-
5846
{app.pinned_order}
59-
6047
</div>
61-
6248
</div>
6349
{/* Icon & Title */}
64-
6550
<div className="relative z-10 flex-grow">
66-
6751
<div className="mb-4 flex items-center justify-between">
68-
6952
<div
7053
className={`p-2 rounded-lg bg-gray-900 border border-gray-800 text-gray-300 group-hover:text-white group-hover:scale-110 transition-all duration-300 group-hover:border-gray-600`}>
71-
7254
<Icon size={32} weight="duotone"/>
73-
7455
</div>
75-
7656
<Cpu size={24} className="text-gray-800 group-hover:text-gray-600 transition-colors"/>
77-
7857
</div>
79-
8058
<h3
8159
className="text-xl font-bold font-mono text-white mb-2 tracking-tight group-hover:text-primary-400 transition-colors">
82-
8360
{app.title}
84-
8561
</h3>
8662
<p className="text-gray-500 font-mono text-sm leading-relaxed line-clamp-3">
87-
8863
<span className="text-gray-700 select-none mr-2">{'>'}</span>
89-
9064
{app.description}
91-
9265
</p>
93-
9466
</div>
9567
{/* Footer: Status */}
96-
9768
<div className="relative z-10 mt-6 pt-3 border-t border-white/10 flex justify-between items-center">
9869
<div className="flex items-center gap-2">
9970
<span className="relative flex h-2 w-2">
@@ -104,8 +75,7 @@ const PinnedAppCard = ({app, index}) => {
10475
<span
10576
className="text-[10px] font-mono uppercase tracking-wider text-gray-500 group-hover:text-green-400 transition-colors">Online</span>
10677
</div>
107-
<ArrowRight size={14}
108-
className="text-gray-600 group-hover:text-white transform group-hover:translate-x-1 transition-all"/>
78+
<ArrowRight size={14} className="text-gray-600 group-hover:text-white transform group-hover:translate-x-1 transition-all"/>
10979
</div>
11080
</div>
11181
</Link>
@@ -153,59 +123,35 @@ const PinnedAppPage = () => {
153123
</div>
154124

155125
{/* Glows */}
156-
<div
157-
className="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 h-[500px] bg-primary-500/10 blur-[120px] rounded-full mix-blend-screen"/>
158-
<div
159-
className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-blue-600/10 blur-[120px] rounded-full mix-blend-screen"/>
160-
161-
{/* Scanline Animation */}
162-
163-
<div className="absolute inset-x-0 h-24 bg-gradient-to-b from-transparent via-primary-400/20 to-transparent opacity-40 animate-scanline"></div>
164-
165-
</div>
166-
126+
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 h-[500px] bg-primary-500/10 blur-[120px] rounded-full mix-blend-screen"/>
127+
<div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-blue-600/10 blur-[120px] rounded-full mix-blend-screen"/>
128+
{/* Scanline Animation */}
129+
<div className="absolute inset-x-0 h-24 bg-gradient-to-b from-transparent via-primary-400/20 to-transparent opacity-40 animate-scanline"></div>
130+
</div>
167131
<div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10">
168132
<div className="relative mb-16 text-center">
169133
<div className="absolute left-0 top-1/2 -translate-y-1/2 hidden md:block">
170-
<Link
171-
to="/"
172-
className="group text-primary-400 hover:text-primary-300 hover:underline flex items-center gap-2 text-sm transition-colors"
173-
>
134+
<Link to="/" className="group text-primary-400 hover:text-primary-300 hover:underline flex items-center gap-2 text-sm transition-colors">
174135
<ArrowLeftIcon size={18} className="transition-transform group-hover:-translate-x-1"/> Home
175136
</Link>
176137
</div>
177-
178138
<motion.div
179-
180139
initial={{opacity: 0, y: 20}}
181-
182140
animate={{opacity: 1, y: 0}}
183-
184141
transition={{duration: 0.5}}
185-
186142
className="text-center"
187-
188143
>
189144

190145
<div
191146
className="inline-flex items-center justify-center p-3 mb-4 rounded-full bg-gray-900/50 border border-gray-800 backdrop-blur-sm">
192-
193147
<TerminalWindow size={32} className="text-primary-500"/>
194-
195148
</div>
196-
197149
<h1 className="text-4xl md:text-5xl font-bold tracking-tighter text-white font-mono mb-4">
198-
199150
SYSTEM_CORE <span className="text-gray-600">//</span> PINNED
200-
201151
</h1>
202-
203152
<p className="text-sm md:text-base text-gray-400 max-w-2xl mx-auto font-mono tracking-wide">
204-
205153
[ ACCESSING ESSENTIAL MODULES AND TOOLS ]
206-
207154
</p>
208-
209155
</motion.div>
210156
</div>
211157

0 commit comments

Comments
 (0)