Skip to content

Commit 54de9dc

Browse files
fezcodefezcode
committed
feat: project pages, better fonts
1 parent 1cc79be commit 54de9dc

File tree

7 files changed

+42
-36
lines changed

7 files changed

+42
-36
lines changed

‎public/images/projects/doku-header.webp‎

138 KB
Loading

‎public/projects/doku.txt‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
![Doku.js Image](../images/projects/doku-image.png)
1+
![Doku.js Header](/images/projects/doku-header.webp)
22

33
Doku.js is a terminal UI text/document viewer that supports a custom documentation syntax called `doky`.
44

@@ -16,6 +16,8 @@ Doku.js is a terminal UI text/document viewer that supports a custom documentati
1616

1717
Install globally via npm: `npm install -g doku.js`. Can also be used locally with `npx doku` or integrated as a dependency in Node.js projects.
1818

19+
![Doku.js Image](../images/projects/doku-image.png)
20+
1921
## Doky - Custom Documentation Syntax:
2022

2123
`doky` allows for custom commands to control terminal display, including:

‎public/projects/projects.piml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@
123123
> npm
124124
(shortDescription) Doku.js is a terminal UI text/document viewer that supports a custom documentation syntax called `doky`.
125125
(date) 2024-01-01
126-
(image) /images/defaults/esma-melike-sezer-YpUj3dD0YzU-unsplash.jpg
126+
(image) /images/projects/doku-header.webp
127127

128128
> (project)
129129
(slug) stroque

‎src/components/ImageModal.jsx‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import React, { useEffect } from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import { X, Scan } from '@phosphor-icons/react';
33
import { motion, AnimatePresence } from 'framer-motion';
44

55
const ImageModal = ({ src, alt, onClose }) => {
6+
const [dimensions, setDimensions] = useState(null);
7+
68
useEffect(() => {
79
if (src) {
810
document.body.style.overflow = 'hidden';
@@ -26,11 +28,20 @@ const ImageModal = ({ src, alt, onClose }) => {
2628
};
2729
}, [src, onClose]);
2830

31+
const handleImageLoad = (e) => {
32+
setDimensions({
33+
width: e.target.naturalWidth,
34+
height: e.target.naturalHeight
35+
});
36+
};
37+
38+
const showAlt = alt && !['Project Detail', 'Enlarged Content', 'Intel Imagery', 'Full size image'].includes(alt);
39+
2940
return (
3041
<AnimatePresence>
3142
{src && (
3243
<motion.div
33-
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 backdrop-blur-xl p-4 md:p-8"
44+
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 backdrop-blur-xl p-2 md:p-4"
3445
onClick={onClose}
3546
initial={{ opacity: 0 }}
3647
animate={{ opacity: 1 }}
@@ -43,7 +54,7 @@ const ImageModal = ({ src, alt, onClose }) => {
4354
/>
4455

4556
<motion.div
46-
className="relative max-w-7xl w-full h-full max-h-[90vh] flex flex-col"
57+
className="relative w-full h-full max-w-[85vw] max-h-[85vh] flex flex-col"
4758
onClick={(e) => e.stopPropagation()}
4859
initial={{ scale: 0.98, opacity: 0 }}
4960
animate={{ scale: 1, opacity: 1 }}
@@ -70,7 +81,7 @@ const ImageModal = ({ src, alt, onClose }) => {
7081
</div>
7182

7283
{/* Image Container */}
73-
<div className="relative flex-1 border border-white/10 bg-black/40 backdrop-blur-sm rounded-b-sm overflow-hidden flex items-center justify-center">
84+
<div className="relative flex-1 min-h-0 bg-black/40 backdrop-blur-sm rounded-b-sm overflow-hidden flex items-center justify-center">
7485
{/* Corner Accents */}
7586
<div className="absolute top-0 left-0 w-6 h-6 border-l-2 border-t-2 border-emerald-500/30 z-10" />
7687
<div className="absolute top-0 right-0 w-6 h-6 border-r-2 border-t-2 border-emerald-500/30 z-10" />
@@ -80,28 +91,21 @@ const ImageModal = ({ src, alt, onClose }) => {
8091
<img
8192
src={src}
8293
alt={alt}
83-
className="max-w-full max-h-full object-contain shadow-[0_0_50px_rgba(0,0,0,0.5)] select-none"
94+
onLoad={handleImageLoad}
95+
style={{ maxWidth: '100%', maxHeight: '100%' }}
96+
className="w-auto h-auto object-contain block shadow-[0_0_50px_rgba(0,0,0,0.5)] select-none"
8497
/>
85-
86-
{/* Caption */}
87-
{alt && alt !== 'Project Detail' && (
88-
<div className="absolute bottom-6 left-0 right-0 mx-auto w-max max-w-[80%] bg-black/90 backdrop-blur-xl border border-white/10 px-6 py-2.5 rounded-sm text-center shadow-2xl">
89-
<p className="font-mono text-xs text-emerald-400 uppercase tracking-[0.2em] font-medium">
90-
{alt}
91-
</p>
92-
</div>
93-
)}
9498
</div>
9599

96100
{/* Footer Metadata */}
97-
<div className="mt-2 flex justify-between items-center opacity-40 px-2">
101+
<div className="mt-3 flex justify-between items-center px-2">
98102
<div className="flex gap-4">
99-
<span className="font-mono text-[9px] uppercase tracking-widest text-gray-500">
100-
RAW_STREAM: ACTIVE
103+
<span className="font-mono text-sm uppercase tracking-widest text-white font-bold truncate max-w-[50vw]">
104+
{showAlt ? alt : 'RAW_STREAM'}
101105
</span>
102106
</div>
103-
<span className="font-mono text-[9px] uppercase tracking-widest text-gray-500 text-right">
104-
DECRYPTED_AT: {new Date().toLocaleTimeString()}
107+
<span className="font-mono text-sm uppercase tracking-widest text-white font-bold text-right">
108+
{dimensions ? `${dimensions.width} x ${dimensions.height} PX` : 'CALCULATING...'}
105109
</span>
106110
</div>
107111

@@ -112,4 +116,4 @@ const ImageModal = ({ src, alt, onClose }) => {
112116
);
113117
};
114118

115-
export default ImageModal;
119+
export default ImageModal;

‎src/components/MarkdownContent.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@ import { ImagesIcon } from '@phosphor-icons/react';
66
import ImageModal from './ImageModal';
77

88
const MarkdownContent = ({ content, components = {}, className = '' }) => {
9-
const [modalImage, setModalImage] = useState(null);
9+
const [modalData, setModalData] = useState(null);
1010

1111
const CustomImage = ({ src, alt, ...props }) => {
1212
return (
13-
<figure className="my-8 group relative overflow-hidden rounded-lg border border-white/10 bg-white/5">
13+
<figure className="my-8 group relative overflow-hidden rounded-lg">
1414
<img
1515
src={src}
1616
alt={alt}
1717
className="w-full h-auto transition-transform duration-500 group-hover:scale-105 cursor-pointer"
18-
onClick={() => setModalImage(src)}
18+
onClick={() => setModalData({ src, alt })}
1919
{...props}
2020
/>
2121
{alt && (
@@ -48,11 +48,11 @@ const MarkdownContent = ({ content, components = {}, className = '' }) => {
4848
</div>
4949

5050
<ImageModal
51-
src={modalImage}
52-
alt="Enlarged Content"
53-
onClose={() => setModalImage(null)}
51+
src={modalData?.src}
52+
alt={modalData?.alt}
53+
onClose={() => setModalData(null)}
5454
/>
5555
</>
5656
);
5757
};
58-
export default MarkdownContent;
58+
export default MarkdownContent;

‎src/index.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ code {
3535
display: block;
3636
margin-left: auto;
3737
margin-right: auto;
38-
border: 5px solid #4b5563; /* subtle gray border */
38+
/*border: 5px solid #4b5563; !* subtle gray border *!*/
3939
border-radius: 0.25rem; /* rounded corners */
4040
}
4141

@@ -47,7 +47,7 @@ code {
4747
display: block;
4848
margin-left: auto;
4949
margin-right: auto;
50-
border: 5px solid #4b5563; /* subtle gray border, same as images */
50+
border: 1px solid #4b5563; /* subtle gray border, same as images */
5151
border-radius: 0.25rem; /* rounded corners, same as images */
5252
}
5353

‎src/pages/ProjectPage.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ const ProjectPage = () => {
129129
</span>
130130
</div>
131131

132-
<h1 className="text-5xl md:text-8xl lg:text-9xl font-black uppercase tracking-tighter text-white leading-[0.9] mb-8 max-w-5xl">
132+
<h1 className="text-5xl md:text-8xl lg:text-9xl font-light uppercase tracking-tighter text-white leading-[0.9] mb-8 max-w-5xl font-playfairDisplay">
133133
{fullProject.title}
134134
</h1>
135135

@@ -159,7 +159,7 @@ const ProjectPage = () => {
159159
viewport={{ once: true }}
160160
className="mb-16 border-l-2 border-emerald-500 pl-8 py-2"
161161
>
162-
<p className="text-xl md:text-2xl lg:text-3xl text-gray-200 font-light leading-relaxed font-sans">
162+
<p className="text-xl md:text-2xl lg:text-3xl text-gray-200 font-light leading-relaxed font-arvo">
163163
{fullProject.shortDescription}
164164
</p>
165165
</motion.div>
@@ -169,11 +169,11 @@ const ProjectPage = () => {
169169
whileInView={{ opacity: 1 }}
170170
viewport={{ once: true }}
171171
transition={{ delay: 0.2 }}
172-
className="prose prose-invert prose-lg max-w-none
173-
prose-headings:font-sans prose-headings:uppercase prose-headings:tracking-tight prose-headings:font-bold prose-headings:text-white
172+
className="prose prose-invert prose-lg max-w-none font-arvo
173+
prose-headings:font-playfairDisplay prose-headings:uppercase prose-headings:tracking-tight prose-headings:font-normal prose-headings:text-white
174174
prose-h2:text-3xl prose-h2:mt-16 prose-h2:mb-8 prose-h2:border-b prose-h2:border-white/10 prose-h2:pb-4
175175
prose-h3:text-xl prose-h3:mt-8 prose-h3:text-emerald-400
176-
prose-p:text-gray-400 prose-p:font-sans prose-p:leading-relaxed
176+
prose-p:text-gray-400 prose-p:leading-relaxed
177177
prose-a:text-emerald-400 prose-a:no-underline prose-a:border-b prose-a:border-emerald-400/30 hover:prose-a:border-emerald-400 hover:prose-a:text-emerald-300 prose-a:transition-all
178178
prose-code:text-emerald-200 prose-code:font-mono prose-code:bg-emerald-900/20 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:border prose-code:border-emerald-900/30
179179
prose-pre:bg-[#0A0A0A] prose-pre:border prose-pre:border-white/10 prose-pre:shadow-2xl

0 commit comments

Comments
 (0)