feat: redesign to technical reference manual aesthetic with isometric graphics
This commit is contained in:
Antigravity AI
parent
60b2db9381
commit
7376a655c4
13 changed files with 396 additions and 83 deletions
16
package-lock.json
generated
16
package-lock.json
generated
|
|
@ -1,11 +1,11 @@
|
|||
{
|
||||
"name": "port",
|
||||
"name": "vndangkhoa",
|
||||
"version": "0.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "port",
|
||||
"name": "vndangkhoa",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"framer-motion": "^12.23.24",
|
||||
|
|
@ -72,6 +72,7 @@
|
|||
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
"@babel/generator": "^7.28.5",
|
||||
|
|
@ -1391,6 +1392,7 @@
|
|||
"integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.2.2"
|
||||
}
|
||||
|
|
@ -1432,6 +1434,7 @@
|
|||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
|
|
@ -1642,6 +1645,7 @@
|
|||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.8.25",
|
||||
"caniuse-lite": "^1.0.30001754",
|
||||
|
|
@ -1945,6 +1949,7 @@
|
|||
"integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.8.0",
|
||||
"@eslint-community/regexpp": "^4.12.1",
|
||||
|
|
@ -2520,6 +2525,7 @@
|
|||
"integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"jiti": "bin/jiti.js"
|
||||
}
|
||||
|
|
@ -2934,6 +2940,7 @@
|
|||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
|
|
@ -2981,6 +2988,7 @@
|
|||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
|
|
@ -3176,6 +3184,7 @@
|
|||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
|
||||
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -3185,6 +3194,7 @@
|
|||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
|
||||
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"scheduler": "^0.27.0"
|
||||
},
|
||||
|
|
@ -3628,6 +3638,7 @@
|
|||
"integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.21.3",
|
||||
"postcss": "^8.4.43",
|
||||
|
|
@ -3750,6 +3761,7 @@
|
|||
"integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/colinhacks"
|
||||
}
|
||||
|
|
|
|||
24
src/App.jsx
24
src/App.jsx
|
|
@ -6,8 +6,11 @@ import Section from './components/Section';
|
|||
import PortalCard from './components/PortalCard';
|
||||
import { Search } from 'lucide-react';
|
||||
|
||||
// Relative assets (ported from generated artifacts)
|
||||
import featuredPrimary from './assets/illustrations/featured_blueprint_primary_1776568228720.png';
|
||||
// Interactive blueprint components
|
||||
import PrimaryBlueprint from './components/illustrations/PrimaryBlueprint';
|
||||
import MediaBlueprint from './components/illustrations/MediaBlueprint';
|
||||
import MaintenanceBlueprint from './components/illustrations/MaintenanceBlueprint';
|
||||
import DevToolsBlueprint from './components/illustrations/DevToolsBlueprint';
|
||||
|
||||
function App() {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
|
@ -55,8 +58,13 @@ function App() {
|
|||
title={group.title}
|
||||
description={group.description}
|
||||
index={groupIndex}
|
||||
isFeatured={isPrimary && !searchQuery} // Show as featured only if not searching
|
||||
featuredImage={isPrimary ? featuredPrimary : null}
|
||||
isFeatured={isPrimary && !searchQuery}
|
||||
featuredImage={
|
||||
group.id === 'primary' ? <PrimaryBlueprint /> :
|
||||
group.id === 'entertainment' ? <MediaBlueprint /> :
|
||||
group.id === 'rm8pfix-vn' ? <MaintenanceBlueprint /> :
|
||||
<DevToolsBlueprint />
|
||||
}
|
||||
>
|
||||
{groupLinks.map((link, linkIndex) => (
|
||||
<PortalCard
|
||||
|
|
@ -69,8 +77,8 @@ function App() {
|
|||
|
||||
{/* Position Search Bar immediately after the Primary Featured section */}
|
||||
{isPrimary && (
|
||||
<div className="ms-container pt-0 pb-6 md:pb-8">
|
||||
<div className="mb-8"><DotDivider /></div>
|
||||
<div className="ms-container pt-0 pb-1 md:pb-2">
|
||||
<div className="mb-1"><DotDivider /></div>
|
||||
<div className="relative group max-w-md">
|
||||
<div className="absolute -left-4 top-1/2 -translate-y-1/2 font-mono text-[10px] text-blue-600 font-bold vertical-text hidden md:block">
|
||||
SEARCH
|
||||
|
|
@ -89,7 +97,7 @@ function App() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{groupIndex < groups.length - 1 && !isPrimary && <div className="mt-4"><DotDivider /></div>}
|
||||
{groupIndex < groups.length - 1 && !isPrimary && <div className="mt-1"><DotDivider /></div>}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
|
|
@ -101,7 +109,7 @@ function App() {
|
|||
)}
|
||||
</main>
|
||||
|
||||
<footer className="ms-container border-t border-gray-100 mt-8 md:mt-12 pb-12 flex flex-col md:flex-row justify-between items-center md:items-end gap-8">
|
||||
<footer className="ms-container border-t border-gray-100 mt-2 md:mt-4 pb-12 flex flex-col md:flex-row justify-between items-center md:items-end gap-8">
|
||||
<div className="flex items-center gap-2 w-full md:w-auto">
|
||||
<h2 className="font-pixel text-blue-600 text-xs md:text-sm">VNDANGKHOA_PORTAL</h2>
|
||||
</div>
|
||||
|
|
|
|||
BIN
src/assets/illustrations/blueprint_dev.png
Normal file
BIN
src/assets/illustrations/blueprint_dev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 919 KiB |
BIN
src/assets/illustrations/blueprint_ecosystem.png
Normal file
BIN
src/assets/illustrations/blueprint_ecosystem.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 766 KiB |
|
|
@ -2,22 +2,31 @@ import React from 'react';
|
|||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="ms-container pt-8 md:pt-12 pb-4 md:pb-8 flex flex-col md:flex-row justify-between items-start md:items-baseline gap-6 md:gap-4">
|
||||
<div className="flex flex-col w-full md:w-auto">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-6xl text-blue-600 font-pixel tracking-tighter leading-none">
|
||||
VNDANGKHOA<span className="text-gray-200">_</span>PORTAL
|
||||
</h1>
|
||||
</div>
|
||||
<div className="border-b border-gray-100">
|
||||
<header className="ms-container py-6 md:py-10 flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6">
|
||||
<div className="flex flex-col">
|
||||
<h1 className="text-4xl sm:text-5xl md:text-7xl lg:text-[84px] text-blue-600 font-pixel tracking-[-0.05em] leading-[0.85] uppercase">
|
||||
VNDANGKHOA<br />PORTAL
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col text-left lg:text-right max-w-sm lg:mb-2">
|
||||
<p className="font-serif text-[15px] md:text-[17px] leading-snug italic text-gray-900 font-medium">
|
||||
A reference manual for people who design and build software.
|
||||
</p>
|
||||
<p className="font-mono text-[11px] md:text-[12px] font-bold mt-2 text-black uppercase tracking-[0.2em]">
|
||||
Managed and illustrated by Khoa Vo.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex flex-col text-left md:text-right md:max-w-xs transition-opacity hover:opacity-100 opacity-80">
|
||||
<p className="font-serif text-[12px] md:text-[13px] leading-relaxed italic text-gray-800">
|
||||
A reference manual for people who design and build software.
|
||||
</p>
|
||||
<p className="font-serif text-[11px] md:text-[12px] font-bold mt-1 text-black uppercase tracking-wider">
|
||||
Managed by Khoa Vo.
|
||||
</p>
|
||||
{/* Manual Divider Pattern */}
|
||||
<div className="ms-container overflow-hidden whitespace-nowrap opacity-20 select-none pb-4" aria-hidden="true">
|
||||
<div className="text-[10px] font-mono tracking-[0.5em] flex justify-between w-full">
|
||||
{Array(20).fill('❖ ❖ ❖ ❖ ❖').join(' ')}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const PortalCard = ({ item, index }) => {
|
|||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-mono text-[10px] text-gray-300 font-bold uppercase tracking-tight">
|
||||
<span className="font-mono text-[11px] md:text-[12px] text-gray-400 font-bold uppercase tracking-[0.1em]">
|
||||
[ PORT_ACCESS ]
|
||||
</span>
|
||||
<div
|
||||
|
|
@ -25,11 +25,11 @@ const PortalCard = ({ item, index }) => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<h3 className="font-mono text-[13px] font-extrabold text-black flex items-center gap-1 group-hover:text-blue-600 transition-colors">
|
||||
<h3 className="font-mono text-[16px] md:text-[18px] font-extrabold text-black flex items-center gap-2 group-hover:text-blue-600 transition-colors mt-1">
|
||||
<span className="opacity-40 group-hover:opacity-100 transition-opacity">→</span> {title.toUpperCase()}
|
||||
</h3>
|
||||
|
||||
<p className="font-serif text-[11px] italic text-gray-400 leading-tight">
|
||||
<p className="font-serif text-[13px] md:text-[14px] italic text-gray-500 leading-tight">
|
||||
{subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,55 +7,61 @@ const Section = ({ title, description, children, index, isFeatured, featuredImag
|
|||
|
||||
// Format index as 001, 002, etc.
|
||||
const figNumber = String(index + 1).padStart(3, '0');
|
||||
const isEven = index % 2 === 0;
|
||||
|
||||
return (
|
||||
<section className={`ms-container relative py-4 md:py-8 flex flex-col ${isFeatured ? 'md:flex-col lg:flex-row' : 'md:flex-row'} gap-6 md:gap-12`}>
|
||||
{/* Sidebar Illustration Info */}
|
||||
<div className={`${isFeatured ? 'lg:w-1/2' : 'md:w-1/3'} flex group`}>
|
||||
<div className="relative w-full">
|
||||
{/* Vertical Label - Desktop Only */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="hidden md:block vertical-text absolute -left-8 top-0 text-[10px] font-mono text-gray-300 tracking-widest uppercase font-bold"
|
||||
>
|
||||
FIG. {figNumber}
|
||||
</motion.div>
|
||||
|
||||
<div className="md:pr-4">
|
||||
<h2 className={`${isFeatured ? 'text-2xl md:text-3xl' : 'text-xl md:text-sm'} font-pixel text-blue-600 mb-6 md:mb-8 tracking-wider uppercase`}>
|
||||
{isFeatured ? `FEATURED: ${title}` : title}
|
||||
</h2>
|
||||
<p className={`${isFeatured ? 'text-[18px] md:text-[20px] leading-relaxed' : 'text-[15px] md:text-[14px] leading-relaxed'} font-serif text-gray-800 drop-cap opacity-95 group-hover:opacity-100 transition-opacity`}>
|
||||
{description}
|
||||
</p>
|
||||
<div className={isFeatured ? "w-full bg-blue-50/20 border-y-2 border-blue-50/50 py-4 my-8 relative shadow-sm" : "w-full"}>
|
||||
<section className={`ms-container relative py-8 md:py-16 flex flex-col ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} gap-8 lg:gap-16 items-start`}>
|
||||
{/* Sidebar Label - Desktop Only */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: isEven ? -10 : 10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className={`hidden lg:block vertical-text absolute ${isEven ? '-left-8' : '-right-8'} top-0 text-[11px] font-mono text-gray-300 tracking-[0.3em] uppercase font-bold`}
|
||||
>
|
||||
FIG. {figNumber}
|
||||
</motion.div>
|
||||
|
||||
{isFeatured && featuredImage && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={isInView ? { opacity: 1, scale: 1 } : {}}
|
||||
transition={{ duration: 1, delay: 0.2 }}
|
||||
className="mt-12 border border-gray-100 p-2 bg-white shadow-2xl shadow-blue-900/5"
|
||||
>
|
||||
<img src={featuredImage} alt="Featured Technical Illustration" className="w-full h-auto" />
|
||||
<div className="mt-4 flex justify-between items-center font-mono text-[9px] text-gray-400 uppercase tracking-widest px-2">
|
||||
<span>SCALE 1:15</span>
|
||||
<span>EXPLODED_VIEW_DIG.V1</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
{/* Content Column (Text & Buttons) */}
|
||||
<div className="w-full lg:w-[45%] flex flex-col z-10 w-full relative">
|
||||
<h2 className={`font-pixel text-blue-600 mb-6 tracking-wider uppercase leading-tight ${isFeatured ? 'text-3xl md:text-4xl lg:text-5xl drop-shadow-sm' : 'text-xl md:text-2xl'}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<div className="manual-text drop-cap mb-8">
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Grid Content */}
|
||||
<div className={`${isFeatured ? 'lg:w-1/2' : 'md:w-2/3'}`}>
|
||||
<div className={`grid grid-cols-1 ${isFeatured ? 'sm:grid-cols-1 md:grid-cols-2' : 'sm:grid-cols-2'} gap-4`}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Blueprint Column (Animation) */}
|
||||
<div className="w-full lg:w-[55%]">
|
||||
{featuredImage && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
className="blueprint-container"
|
||||
>
|
||||
{typeof featuredImage === 'string' ? (
|
||||
<img src={featuredImage} alt={title} className="w-full h-auto grayscale hover:grayscale-0 transition-all duration-700" />
|
||||
) : (
|
||||
<div className="w-full h-auto grayscale hover:grayscale-0 transition-all duration-700">
|
||||
{featuredImage}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-3 flex justify-between items-center font-mono text-[9px] text-gray-400 uppercase tracking-widest px-1">
|
||||
<span>SYSTEM_SCHEMATIC_V.1</span>
|
||||
<span>ID_{figNumber}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
59
src/components/illustrations/DevToolsBlueprint.jsx
Normal file
59
src/components/illustrations/DevToolsBlueprint.jsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const DevToolsBlueprint = () => {
|
||||
const layerTransition = { duration: 4.5, repeat: Infinity, ease: "easeInOut" };
|
||||
|
||||
const Iso = ({ children, yOffset = 0 }) => (
|
||||
<g transform={`translate(200, ${180 + yOffset}) scale(1, 0.5) rotate(45)`}>
|
||||
{children}
|
||||
</g>
|
||||
);
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 400 350" className="w-full h-auto text-blue-600" style={{ stroke: 'currentColor', strokeWidth: 1 }}>
|
||||
|
||||
{/* Base Layer */}
|
||||
<motion.g animate={{ y: [0, 5, 0] }} transition={{ ...layerTransition, delay: 0 }}>
|
||||
<Iso yOffset={60}>
|
||||
<rect x="-100" y="-100" width="200" height="200" fill="white" />
|
||||
<path d="M-80,-80 L80,-80 L80,80 L-80,80 Z" fill="none" strokeDasharray="4 2" strokeOpacity="0.5" />
|
||||
<circle cx="0" cy="0" r="50" fill="none" strokeWidth="2" strokeOpacity="0.4" />
|
||||
<circle cx="0" cy="0" r="10" fill="currentColor" fillOpacity="0.2" stroke="none" />
|
||||
<rect x="-100" y="-100" width="200" height="200" fill="none" strokeWidth="1.5" />
|
||||
</Iso>
|
||||
</motion.g>
|
||||
|
||||
{/* Middle Layer (Disk) */}
|
||||
<motion.g animate={{ y: [-40, -50, -40] }} transition={{ ...layerTransition, delay: 0.7 }}>
|
||||
<Iso yOffset={10}>
|
||||
<circle cx="0" cy="0" r="90" fill="rgba(255,255,255,0.9)" strokeWidth="1.5" />
|
||||
<circle cx="0" cy="0" r="30" fill="none" />
|
||||
<circle cx="0" cy="0" r="9" fill="currentColor" stroke="none" />
|
||||
</Iso>
|
||||
</motion.g>
|
||||
|
||||
{/* Top Layer (Processor/Chip) */}
|
||||
<motion.g animate={{ y: [-80, -95, -80] }} transition={{ ...layerTransition, delay: 1.4 }}>
|
||||
<Iso yOffset={-40}>
|
||||
<rect x="-60" y="-60" width="120" height="120" fill="rgba(255,255,255,0.9)" strokeWidth="1.5" />
|
||||
{/* Chip pins */}
|
||||
<path d="M-70,-40 L-60,-40 M-70,0 L-60,0 M-70,40 L-60,40" strokeWidth="2" />
|
||||
<path d="M70,-40 L60,-40 M70,0 L60,0 M70,40 L60,40" strokeWidth="2" />
|
||||
<rect x="-40" y="-40" width="80" height="80" fill="none" strokeWidth="2" />
|
||||
</Iso>
|
||||
</motion.g>
|
||||
|
||||
{/* Connection Lines */}
|
||||
<path d="M 100 120 L 100 240" strokeDasharray="4 4" strokeOpacity="0.3" fill="none" />
|
||||
<path d="M 300 120 L 300 240" strokeDasharray="4 4" strokeOpacity="0.3" fill="none" />
|
||||
|
||||
{/* Labels */}
|
||||
<text x="350" y="80" className="font-mono text-[9px] fill-current opacity-80 uppercase tracking-widest" textAnchor="end" stroke="none">SHELL_EXEC</text>
|
||||
<text x="350" y="160" className="font-mono text-[9px] fill-current opacity-80 uppercase tracking-widest" textAnchor="end" stroke="none">IMAGE_RASTERIZER</text>
|
||||
<text x="350" y="280" className="font-mono text-[9px] fill-current opacity-80 uppercase tracking-widest" textAnchor="end" stroke="none">PDF_PARSER</text>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default DevToolsBlueprint;
|
||||
62
src/components/illustrations/MaintenanceBlueprint.jsx
Normal file
62
src/components/illustrations/MaintenanceBlueprint.jsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const MaintenanceBlueprint = () => {
|
||||
return (
|
||||
<svg viewBox="0 0 400 350" className="w-full h-auto text-blue-600" style={{ stroke: 'currentColor', strokeWidth: 1.5 }}>
|
||||
<defs>
|
||||
<pattern id="grid-small" width="10" height="10" patternUnits="userSpaceOnUse">
|
||||
<path d="M 10 0 L 0 0 0 10" fill="none" strokeWidth="0.5" strokeOpacity="0.15" />
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<rect width="400" height="350" fill="url(#grid-small)" />
|
||||
|
||||
<g transform="translate(50, 50)">
|
||||
{/* Main Interface Frame */}
|
||||
<rect x="0" y="0" width="300" height="250" fill="rgba(255,255,255,0.95)" />
|
||||
<rect x="0" y="0" width="300" height="250" fill="none" strokeWidth="2" />
|
||||
|
||||
{/* Header bar */}
|
||||
<path d="M 0 30 L 300 30" strokeWidth="2" fill="none" />
|
||||
<circle cx="15" cy="15" r="4" fill="currentColor" stroke="none" />
|
||||
<circle cx="30" cy="15" r="4" fill="currentColor" stroke="none" />
|
||||
<circle cx="45" cy="15" r="4" fill="currentColor" stroke="none" />
|
||||
<text x="285" y="20" className="font-mono text-[9px] fill-current uppercase tracking-widest" stroke="none" textAnchor="end">TERMINAL_DIAGNOSTICS</text>
|
||||
|
||||
{/* Process Bar 1 */}
|
||||
<text x="20" y="70" className="font-mono text-[9px] fill-current uppercase tracking-widest" stroke="none">NET_PATCH_SEQ</text>
|
||||
<rect x="20" y="80" width="260" height="10" fill="none" />
|
||||
<motion.rect x="20" y="80" height="10" fill="currentColor" stroke="none" opacity="0.3"
|
||||
animate={{ width: [0, 260, 0] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
|
||||
{/* Process Bar 2 */}
|
||||
<text x="20" y="120" className="font-mono text-[9px] fill-current uppercase tracking-widest" stroke="none">RM8_VALIDATION</text>
|
||||
<rect x="20" y="130" width="260" height="10" fill="none" />
|
||||
<motion.rect x="20" y="130" height="10" fill="currentColor" stroke="none" opacity="0.3"
|
||||
animate={{ width: [0, 200, 200, 0] }}
|
||||
transition={{ duration: 3.5, repeat: Infinity, ease: "easeInOut", delay: 1 }}
|
||||
/>
|
||||
|
||||
{/* Diagnostic Grid Lights */}
|
||||
<text x="20" y="180" className="font-mono text-[9px] fill-current uppercase tracking-widest" stroke="none">SYSTEM_NODES</text>
|
||||
<g transform="translate(20, 195)">
|
||||
{/* Row of blinking squares */}
|
||||
{[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (
|
||||
<motion.rect key={`light-${i}`} x={i * 30} y="0" width="15" height="15" fill="currentColor" stroke="none"
|
||||
animate={{ opacity: [0.1, 0.8, 0.1] }}
|
||||
transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.2, ease: "linear" }}
|
||||
/>
|
||||
))}
|
||||
{[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (
|
||||
<rect key={`border-${i}`} x={i * 30} y="0" width="15" height="15" fill="none" strokeOpacity="0.5" />
|
||||
))}
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default MaintenanceBlueprint;
|
||||
70
src/components/illustrations/MediaBlueprint.jsx
Normal file
70
src/components/illustrations/MediaBlueprint.jsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const MediaBlueprint = () => {
|
||||
const Iso = ({ children, yOffset = 0 }) => (
|
||||
<g transform={`translate(200, ${180 + yOffset}) scale(1, 0.5) rotate(45)`}>
|
||||
{children}
|
||||
</g>
|
||||
);
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 400 350" className="w-full h-auto text-blue-600" style={{ stroke: 'currentColor', strokeWidth: 1.2 }}>
|
||||
|
||||
{/* Background Plane */}
|
||||
<motion.g animate={{ y: [0, 4, 0] }} transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}>
|
||||
<Iso yOffset={40}>
|
||||
<rect x="-100" y="-100" width="200" height="200" fill="white" />
|
||||
{/* Isometric Grid */}
|
||||
<path d="M-100,-60 L100,-60 M-100,-20 L100,-20 M-100,20 L100,20 M-100,60 L100,60" strokeOpacity="0.2" fill="none" />
|
||||
<path d="M-60,-100 L-60,100 M-20,-100 L-20,100 M20,-100 L20,100 M60,-100 L60,100" strokeOpacity="0.2" fill="none" />
|
||||
<rect x="-100" y="-100" width="200" height="200" fill="none" strokeWidth="1.5" />
|
||||
</Iso>
|
||||
</motion.g>
|
||||
|
||||
{/* Floating Media Waveform */}
|
||||
<motion.g animate={{ y: [-30, -35, -30] }} transition={{ duration: 5, repeat: Infinity, ease: "easeInOut", delay: 0.5 }}>
|
||||
<Iso yOffset={0}>
|
||||
{/* A surface looking like a gaussian bump - using paths in isometric space */}
|
||||
{/* We define points directly in local SVG space, they'll be projected. */}
|
||||
{/* Bottom plane of wave */}
|
||||
<path d="M-80,-20 L80,-20 L80,20 L-80,20 Z" fill="rgba(255,255,255,0.8)" strokeDasharray="2 2" strokeOpacity="0.5" />
|
||||
|
||||
{/* The Waveform Curve */}
|
||||
<motion.path
|
||||
d="M-80,0 Q-40,0 -20,-40 T0,-80 T20,-40 T80,0"
|
||||
fill="none" strokeWidth="2"
|
||||
animate={{ d: [
|
||||
"M-80,0 Q-40,0 -20,-40 T0,-80 T20,-40 T80,0",
|
||||
"M-80,0 Q-40,0 -20,-30 T0,-60 T20,-30 T80,0",
|
||||
"M-80,0 Q-40,0 -20,-40 T0,-80 T20,-40 T80,0"
|
||||
] }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
|
||||
{/* Secondary Sine Wave */}
|
||||
<motion.path
|
||||
d="M-80,0 Q-40,-40 0,0 T80,0"
|
||||
fill="none" strokeWidth="1.5" strokeOpacity="0.6" strokeDasharray="4 4"
|
||||
animate={{ d: [
|
||||
"M-80,0 Q-40,-40 0,0 T80,0",
|
||||
"M-80,0 Q-40,40 0,0 T80,0",
|
||||
"M-80,0 Q-40,-40 0,0 T80,0"
|
||||
] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
</Iso>
|
||||
</motion.g>
|
||||
|
||||
{/* Vertical Guides */}
|
||||
<path d="M 200 60 L 200 240" strokeDasharray="3 3" strokeOpacity="0.3" fill="none" />
|
||||
|
||||
{/* Labels */}
|
||||
<text x="350" y="80" className="font-mono text-[9px] fill-current opacity-80 uppercase tracking-widest" textAnchor="end" stroke="none">FREQUENCY_MOD</text>
|
||||
<text x="350" y="160" className="font-mono text-[9px] fill-current opacity-80 uppercase tracking-widest" textAnchor="end" stroke="none">MEDIA_BUFFER</text>
|
||||
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default MediaBlueprint;
|
||||
70
src/components/illustrations/PrimaryBlueprint.jsx
Normal file
70
src/components/illustrations/PrimaryBlueprint.jsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const PrimaryBlueprint = () => {
|
||||
return (
|
||||
<svg viewBox="0 0 400 350" className="w-full h-auto text-blue-600" style={{ stroke: 'currentColor', strokeWidth: 1.5 }}>
|
||||
{/* 2D Grid Background */}
|
||||
<defs>
|
||||
<pattern id="grid-2d" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M 20 0 L 0 0 0 20" fill="none" strokeWidth="0.5" strokeOpacity="0.2" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="400" height="350" fill="url(#grid-2d)" />
|
||||
|
||||
{/* Frame / Borders */}
|
||||
<rect x="10" y="10" width="380" height="330" fill="none" strokeOpacity="0.2" />
|
||||
<path d="M 0 10 L 10 10 M 390 10 L 400 10 M 0 340 L 10 340 M 390 340 L 400 340" strokeOpacity="0.5" />
|
||||
|
||||
{/* Group centered vertically on canvas */}
|
||||
<g transform="translate(30, 175)">
|
||||
{/* Main Pipeline */}
|
||||
<path d="M 20 0 L 140 0" strokeDasharray="4 4" strokeWidth="2" strokeOpacity="0.5" />
|
||||
|
||||
{/* Router Node Base */}
|
||||
<rect x="140" y="-30" width="60" height="60" fill="white" strokeWidth="2" />
|
||||
<circle cx="170" cy="0" r="15" fill="none" strokeWidth="2" />
|
||||
<circle cx="170" cy="0" r="5" fill="currentColor" fillOpacity="0.2" stroke="none" />
|
||||
|
||||
{/* Branch Lines */}
|
||||
<path d="M 200 0 L 240 0 L 240 -60 L 270 -60" fill="none" strokeWidth="2" />
|
||||
<path d="M 200 0 L 240 0 L 240 60 L 270 60" fill="none" strokeWidth="2" />
|
||||
|
||||
{/* Showcase Node */}
|
||||
<rect x="270" y="-80" width="50" height="40" fill="white" strokeWidth="1.5" />
|
||||
<path d="M 280 -70 L 310 -70 M 280 -60 L 300 -60" strokeWidth="1" fill="none" />
|
||||
|
||||
{/* Archive Node */}
|
||||
<rect x="270" y="40" width="50" height="40" fill="white" strokeWidth="1.5" />
|
||||
<path d="M 280 50 L 310 50 M 280 60 L 300 60" strokeWidth="1" fill="none" />
|
||||
|
||||
{/* Data Packet Animations - Top Branch */}
|
||||
<motion.circle r="4" fill="currentColor" stroke="none"
|
||||
animate={{ cx: [20, 140, 240, 240, 270], cy: [0, 0, 0, -60, -60], opacity: [0, 1, 1, 1, 0] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "linear" }}
|
||||
/>
|
||||
{/* Data Packet Animations - Bottom Branch */}
|
||||
<motion.circle r="4" fill="currentColor" stroke="none"
|
||||
animate={{ cx: [20, 140, 240, 240, 270], cy: [0, 0, 0, 60, 60], opacity: [0, 1, 1, 1, 0] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "linear", delay: 2 }}
|
||||
/>
|
||||
|
||||
{/* Logic Indicators */}
|
||||
<rect x="235" y="-30" width="10" height="10" fill="white" />
|
||||
<rect x="235" y="20" width="10" height="10" fill="white" />
|
||||
|
||||
{/* Labels - with white background to cut through lines */}
|
||||
<rect x="0" y="-25" width="70" height="15" fill="white" stroke="none" />
|
||||
<text x="5" y="-15" className="font-mono text-[9px] fill-current uppercase tracking-widest" stroke="none">SYS_INPUT</text>
|
||||
|
||||
<rect x="135" y="40" width="70" height="15" fill="white" stroke="none" />
|
||||
<text x="140" y="50" className="font-mono text-[9px] fill-current uppercase tracking-widest" stroke="none">CORE_ROUTER</text>
|
||||
|
||||
<text x="330" y="-60" className="font-mono text-[9px] fill-current opacity-80 uppercase tracking-widest" stroke="none">SHOWCASE</text>
|
||||
<text x="330" y="60" className="font-mono text-[9px] fill-current opacity-80 uppercase tracking-widest" stroke="none">ARCHIVE</text>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default PrimaryBlueprint;
|
||||
|
|
@ -125,24 +125,24 @@ export const groups = [
|
|||
id: 'primary',
|
||||
title: 'PRIMARY',
|
||||
icon: Briefcase,
|
||||
description: "Explore the underlying principles of the primary ecosystem. Each component is designed for maximum efficiency and conceptual clarity in your daily workflow."
|
||||
description: "Have you ever wondered how your digital presence is routed across different platforms? The primary resource layer acts as the centralized directory for all professional identities. These components are hard-coded for maximum reliability and persistent access to the core VNDK ecosystem."
|
||||
},
|
||||
{
|
||||
id: 'entertainment',
|
||||
title: 'ENTERTAINMENT',
|
||||
title: 'MEDIA_DISTRIBUTION',
|
||||
icon: Monitor,
|
||||
description: "Digital consumption and leisure systems. A curated selection of platforms for high-fidelity media streaming and interactive entertainment."
|
||||
description: "Digital consumption and leisure systems operate on a separate high-fidelity distribution plane. By utilizing unauthorized ad-blocking layers and clean streaming protocols, we ensure that media remains an uninterrupted experience within the portal."
|
||||
},
|
||||
{
|
||||
id: 'rm8pfix-vn',
|
||||
title: 'RM8PFIX-VN',
|
||||
title: 'SYSTEM_MAINTENANCE',
|
||||
icon: Wrench,
|
||||
description: "Specialized system utilities and maintenance protocols for local network environments. Ensuring stability and performance through automated tooling."
|
||||
description: "This terminal routes directly to the REDMAGIC hardware modification group. Representing flagship architecture (builds 8, 9, and 10 Pro), these devices feature top-tier Snapdragon processing and kernel-level flexibility, granting enthusiasts absolute administrative control to deeply customize their systems."
|
||||
},
|
||||
{
|
||||
id: 'dev',
|
||||
title: 'DEV TOOLS',
|
||||
title: 'DEVELOPMENT_STACK',
|
||||
icon: Cpu,
|
||||
description: "A comprehensive toolkit for the modern developer. From binary manipulation to layout verification, these utilities accelerate the build process."
|
||||
description: "Because our software tools are built on primitive data types, we need a robust stack to handle rasterization, PDF serialization, and IT utility execution. This toolkit provides the necessary abstractions to manipulate system state at the binary level."
|
||||
},
|
||||
];
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
/* Technical Layout Utilities */
|
||||
.ms-container {
|
||||
@apply max-w-[1100px] mx-auto px-6 md:px-12 py-8 md:py-12;
|
||||
@apply max-w-[1100px] mx-auto px-6 md:px-12;
|
||||
}
|
||||
|
||||
/* Dropped Cap */
|
||||
|
|
@ -55,21 +55,38 @@
|
|||
|
||||
/* Dot Grid Divider */
|
||||
.dot-divider {
|
||||
@apply w-full h-8 mb-6 md:mb-8;
|
||||
background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px);
|
||||
background-size: 12px 12px;
|
||||
@apply w-full h-8 mb-4;
|
||||
background-image: radial-gradient(circle, #e5e7eb 1.5px, transparent 1.5px);
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
/* Blueprint Image Container */
|
||||
.blueprint-container {
|
||||
@apply relative border border-gray-100 bg-white p-2 shadow-sm transition-all duration-500;
|
||||
background-image:
|
||||
linear-gradient(var(--accent-soft) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--accent-soft) 1px, transparent 1px);
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
.blueprint-container img {
|
||||
@apply mix-blend-multiply opacity-90;
|
||||
}
|
||||
|
||||
.manual-text {
|
||||
@apply text-[17px] md:text-[18px] leading-[1.6] text-gray-900;
|
||||
}
|
||||
|
||||
/* Card Styling (Technical Labels) */
|
||||
.tech-label {
|
||||
@apply border border-gray-100 bg-white p-4 transition-all duration-300;
|
||||
@apply border-2 border-gray-100 bg-white p-4 md:p-5 transition-all duration-300;
|
||||
box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.tech-label:hover {
|
||||
@apply border-blue-600 shadow-blue-100;
|
||||
box-shadow: 4px 4px 0px var(--accent-soft);
|
||||
transform: translate(-2px, -2px);
|
||||
@apply border-blue-600 shadow-blue-100 bg-blue-50/10;
|
||||
box-shadow: 6px 6px 0px var(--accent-soft);
|
||||
transform: translate(-3px, -3px);
|
||||
}
|
||||
|
||||
/* Vertical Text Helper */
|
||||
|
|
|
|||
Loading…
Reference in a new issue