A personal portfolio website showcasing design and development work. Built with clean architecture, layered design patterns, and modern web technologies.
/talk
This project follows a layered architecture for better separation of concerns:
Components ā Stores ā Services ā API Client ā API Endpoints
ā ā
UI State Redis/JSON
src/lib/services.ts
)src/lib/store.svelte.ts
)src/lib/server/index.ts
)package.json
)# Clone the repository
git clone <repository-url>
cd folio
# Install dependencies
pnpm install
# Start development server
pnpm dev
The site will be available at http://localhost:5173
Create a .env
file for full functionality:
# Required for write operations
REDIS_URL=your_redis_connection_string
ADMIN_TOKEN=your_secret_admin_token
Without Redis: Read operations fall back to src/lib/projects.json
, but write operations will fail.
src/
āāā lib/
ā āāā services.ts # API service layer
ā āāā store.svelte.ts # Reactive stores
ā āāā apiClient.ts # Enhanced fetch with auth
ā āāā types.ts # TypeScript interfaces
ā āāā markdown.ts # Markdown parser
ā āāā formatting.ts # String utilities
ā āāā utils.ts # General helpers
ā āāā components/ # Reusable UI components
ā ā āāā start/ # Admin components
ā ā āāā talk/ # Chat components
ā āāā _fx/ # Visual effects
ā āāā server/ # Server-side utilities
ā āāā index.ts # Barrel export
ā āāā redis.server.ts
ā āāā security.server.ts
ā āāā api-utils.server.ts
ā āāā media-scanner.server.ts
ā āāā talk.server.ts
āāā routes/
ā āāā (public)/ # Public pages
ā ā āāā about/
ā ā āāā projects/
ā āāā (private)/ # Admin interface
ā ā āāā start/
ā āāā (canvas)/ # Experimental projects
ā ā āāā talk/
ā āāā api/ # REST API endpoints
ā āāā projects/
ā āāā case-studies/
ā āāā media/
ā āāā talk/
āāā static/ # Static assets
āāā assets/
āāā videos/
# Development mode with hot reload
pnpm dev
# Type checking
pnpm check
# Linting and formatting
pnpm lint
pnpm format
# Build for production
pnpm build
All API calls are centralized in src/lib/services.ts
:
import { ProjectService } from '$lib/services';
// Fetch all projects
const projects = await ProjectService.fetchAll();
// Create project (with auto auth)
const newProjects = await ProjectService.create(project);
Stores manage reactive state and delegate to services:
import { Projects } from '$lib/store.svelte';
// In component
onMount(() => {
Projects.fetchProjects(); // Calls ProjectService internally
});
Access the admin dashboard at /start
(requires auth):
Two methods supported:
x-admin-token
header with ADMIN_TOKEN
valueadmin_token
validated against RedisCase studies support rich markdown with custom syntax:

!
# Install Vercel CLI
pnpm add -g vercel
# Deploy
vercel
Set environment variables in Vercel dashboard:
REDIS_URL
ADMIN_TOKEN
ADMIN_IP
(optional)Compatible with any Node.js hosting platform. Ensure:
pnpm build
node build
The project is designed to support multiple sub-projects under /(canvas)
:
app.css
src/lib/components
See "Design System Recommendations" section below for expansion guidelines.
See LICENSE file.
Built with ā¤ļø using SvelteKit 5