📖 About

A modern, full-stack personal portfolio website featuring a minimalistic design, powerful search capabilities, and comprehensive content management. Built with React, Express.js, and powered by Elasticsearch.

🌐 Live Website: aldenluth.fi

✨ Features

🎨 Frontend

• Responsive Design: Mobile-first approach with tablet and desktop optimizations
• Dark/Light Theme: Automatic timezone-based theme switching with manual override
• Color Themes: 18 different color schemes to choose from
• Interactive Maps: SVG-based world map for travel gallery
• Custom Animations: Smooth transitions and micro-interactions
• Accessibility: Full keyboard navigation and screen reader support
• Progressive Web App: Offline capabilities and fast loading

🔍 Search Engine

• Elasticsearch Integration: Full-text search across all content
• Smart Suggestions: Auto-complete with fuzzy matching
• Multi-content Search: Search through writings, projects, and more
• Real-time Results: Instant search with debounced queries

📝 Content Management

• Notion Integration: Automatic syncing of blog posts from Notion
• Markdown Support: Full markdown rendering with custom components
• Syntax Highlighting: Code blocks with multiple language support
• Math Rendering: LaTeX support with KaTeX
• Table of Contents: Auto-generated with smooth scrolling

🚀 Projects Showcase

• GitHub Integration: Automatic repository syncing
• Image Galleries: Project screenshots with zoom functionality
• Technology Tags: Visual representation of tech stacks
• Live Demos: Direct links to deployed projects

📊 Additional Features

• CV Generation: Dynamic resume/CV with filtering
• Gallery System: Photo galleries organized by location
• Contact Forms: Integrated communication system
• Analytics Ready: Easy integration with analytics platforms
• Timezone Theming: Automatic theme switching based on my timezone (Asia/Jakarta)

🛠️ Tech Stack

Frontend

• React 19 - UI library with latest features
• TypeScript - Type-safe development
• Vite - Fast build tool and dev server
• Tailwind CSS - Utility-first styling
• Framer Motion - Smooth animations
• Radix UI - Accessible component primitives
• React Router - Client-side routing

Backend

• Node.js - JavaScript runtime
• Express.js - Web application framework
• TypeScript - Type-safe server development
• MySQL - Relational database
• Elasticsearch - Search engine
• Notion API - Content management integration
• GitHub API - Repository data fetching

DevOps & Deployment

• Docker - Containerization
• Kubernetes - Container orchestration
• Kind - Local Kubernetes development
• GitHub Actions - CI/CD pipeline
• ESLint - Code linting
• Husky - Git hooks

🚀 Quick Start

📖 Prerequisites

• Node.js 18+ and npm
• Docker and Docker Compose
• Kind (for Kubernetes deployment)
• Git

⚙️ Development Setup

1. Clone the repository

   git clone https://github.com/aldenluthfi/situsluthfi.git
   cd situsluthfi

2. Install dependencies

   # Install root dependencies
   npm install
   
   # Install frontend dependencies
   cd frontend && npm install && cd ..
   
   # Install backend dependencies
   cd backend && npm install && cd ..

3. Set up environment variables

   # Copy environment templates
   cp .env.example .env
   cp frontend/.env.example frontend/.env
   cp backend/.env.example backend/.env
   
   # Edit the .env files with your configuration

4. Start development servers

   Option A: Using Docker Compose (Recommended)

   docker-compose up -d

   Option B: Manual setup

   # Start MySQL and Elasticsearch (using Docker)
   docker run -d --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=yourpassword mysql:8.0
   docker run -d --name elasticsearch -p 9200:9200 -e "discovery.type=single-node" elasticsearch:9.0.1
   
   # Start backend
   cd backend && npm run dev &
   
   # Start frontend
   cd frontend && npm run dev

5. Access the application

   Option A: Using Docker Compose (Recommended)

   • Frontend: http://localhost:8080

   Option B: Manual setup

   • Frontend: http://localhost:5173
   • Backend: http://localhost:3000

💼 Production Deployment

Using Kubernetes with Kind:

./deploy.sh

Using Docker Compose:

docker-compose up -d

📁 Project Structure

situsluthfi/
├── frontend/                # React frontend application
│   ├── src/
│   │   ├── components/      # Reusable UI components
│   │   ├── pages/           # Page components
│   │   ├── hooks/           # Custom React hooks
│   │   ├── lib/             # Utility functions
│   │   └── assets/          # Static assets
│   ├── public/              # Public static files
│   └── package.json
├── backend/                 # Express.js backend API
│   ├── src/
│   │   ├── routes/          # API route handlers
│   │   ├── db/              # Database configuration
│   │   └── utils/           # Utility functions
│   ├── init.sql             # Database schema
│   └── package.json
├── k8s/                     # Kubernetes manifests
├── .github/                 # GitHub Actions workflows
├── docker-compose.yaml      # Development compose file
├── deploy.sh                # Deployment script
└── README.md

🔧 Configuration

Root .env:

MYSQL_USER=your_mysql_user
MYSQL_PASSWORD=your_mysql_password
MYSQL_ROOT_PASSWORD=your_root_password
MYSQL_DATABASE=your_database_name

Backend .env:

# Notion Integration
NOTION_API_KEY=your_notion_api_key
NOTION_WRITINGS_DATABASE_ID=your_database_id

# Database
MYSQL_HOST=localhost
MYSQL_PORT=3306
MYSQL_USER=your_user
MYSQL_PASSWORD=your_password
MYSQL_DATABASE=your_database

# Search Engine
ELASTICSEARCH_URL=http://localhost:9200

# GitHub Integration
GITHUB_TOKEN=your_github_token

Frontend .env:

VITE_EMAIL=your@email.com
VITE_INSTAGRAM=https://instagram.com/yourprofile
VITE_TWITTER=https://twitter.com/yourprofile
VITE_GITHUB=https://github.com/yourprofile
VITE_LINKEDIN=https://linkedin.com/in/yourprofile

📚 API Documentation

The backend API provides comprehensive endpoints for managing content, search functionality, and data synchronization. All endpoints return JSON responses and follow RESTful conventions.

Base URL: http://host:3000/api

🎲 Facts API

Get Random Fact

Endpoint	/facts
Method	GET
Description	Retrieve a random fact from the database
Parameters	None
Example Request	GET /api/facts
Example Responses	Status: 200 OK { "id": 1, "text": "Honey never spoils", "source": "National Geographic" }
	Status: 500 Internal Server Error { "error": "Failed to fetch facts" }

---

✍️ Writings API

Get Paginated Writings

Endpoint	/writings/get_page
Method	GET
Description	Retrieve paginated list of writings
Parameters	page (number, optional): Page number (default: 1)
	pagesize (number, optional): Items per page (default: 10)
Example Request	GET /api/writings/get_page?page=1&pagesize=5
Example Responses	Status: 200 OK { "results": [ { "id": "abc123", "title": "My First Blog Post", "slug": "my-first-blog-post", "tags": ["technology", "web"], "lastUpdated": "2024-01-15T10:30:00Z", "createdAt": "2024-01-10T08:00:00Z" } ], "total": 25, "page": 1, "pageSize": 5, "totalPages": 5 }
	Status: 500 Internal Server Error { "error": "Failed to retrieve paginated writings" }

Get Writing by Slug

Endpoint	/writings/:slug
Method	GET
Description	Retrieve full writing content by slug
Parameters	slug (string, required): URL-friendly identifier for the writing
Example Request	GET /api/writings/my-first-blog-post
Example Responses	Status: 200 OK { "id": "abc123", "title": "My First Blog Post", "slug": "my-first-blog-post", "tags": ["technology", "web"], "content": "# My First Blog Post\n\nThis is the content...", "lastUpdated": "2024-01-15T10:30:00Z", "createdAt": "2024-01-10T08:00:00Z" }
	Status: 500 Internal Server Error { "error": "Failed to retrieve writing" }

Search Writing Contents

Endpoint	/writings/search
Method	GET
Description	Search through writing contents using Elasticsearch
Parameters	q (string, required): Search query
	page (number, optional): Page number (default: 1)
	pagesize (number, optional): Items per page (default: 10)
Example Request	GET /api/writings/search?q=javascript&page=1&pagesize=5
Example Responses	Status: 200 OK { "results": [ { "id": "abc123", "title": "JavaScript Best Practices", "content": "...", "highlight": { "content": ["Learn JavaScript fundamentals"], "title": ["JavaScript Best Practices"] } } ], "total": { "value": 8, "relation": "eq" }, "page": 1, "pageSize": 5, "totalPages": 2 }
	Status: 400 Bad Request { "error": "Missing search query" }

Sync All Writings

Endpoint	/writings/sync
Method	GET
Description	Synchronize all writings from Notion
Parameters	None
Example Responses	Status: 200 OK { "message": "All writings synced successfully" }
	Status: 500 Internal Server Error { "error": "Failed to sync all writings" }

Sync Writing by Slug

Endpoint	/writings/sync/:slug
Method	GET
Description	Synchronize specific writing content and index to Elasticsearch
Parameters	slug (string, required): URL-friendly identifier for the writing
Example Responses	Status: 200 OK { "message": "Writing content synced successfully" }
	Status: 500 Internal Server Error { "error": "Failed to sync writing content" }

---

🐙 GitHub API

Get User Repositories

Endpoint	/github/repositories
Method	GET
Description	Retrieve all user repositories from database
Parameters	None
Example Responses	Status: 200 OK { "count": 15, "repositories": [ { "id": 123456, "name": "awesome-project", "description": "An awesome project built with React", "languages": {"JavaScript": 75, "CSS": 25}, "stargazers_count": 42, "forks_count": 8, "topics": ["react", "frontend"], "created_at": "2024-01-01T00:00:00Z", "updated_at": "2024-01-15T12:00:00Z", "license": {"key": "mit", "name": "MIT License", "url": "https://...", "node_id": "...", "spdx_id": "MIT"}, "html_url": "https://github.com/user/awesome-project", "readme": "# Awesome Project\n\nThis is awesome...", "cover_light_url": "https://raw.githubusercontent.com/.../light.png", "cover_dark_url": "https://raw.githubusercontent.com/.../dark.png", "icon_map": {"react": "https://cdn.jsdelivr.net/.../react.svg"} } ] }
	Status: 500 Internal Server Error { "error": "Failed to fetch repositories" }

Get Repository by Name

Endpoint	/github/repositories/:name
Method	GET
Description	Retrieve specific repository by name
Parameters	name (string, required): Repository name
Example Request	GET /api/github/repositories/awesome-project
Example Responses	Status: 200 OK { "id": 123456, "name": "awesome-project", "description": "An awesome project built with React", "languages": {"JavaScript": 75, "CSS": 25}, "stargazers_count": 42, "forks_count": 8, "topics": ["react", "frontend"], "created_at": "2024-01-01T00:00:00Z", "updated_at": "2024-01-15T12:00:00Z", "license": {"key": "mit", "name": "MIT License", "url": "https://...", "node_id": "...", "spdx_id": "MIT"}, "html_url": "https://github.com/user/awesome-project", "readme": "# Awesome Project..." }
	Status: 404 Not Found { "error": "Repository not found" }
	Status: 500 Internal Server Error { "error": "Failed to fetch repository" }

Sync Repositories

Endpoint	/github/repositories/sync
Method	GET
Description	Synchronize repositories from GitHub API and index to Elasticsearch
Parameters	None
Example Responses	Status: 200 OK { "message": "Repositories synced successfully" }
	Status: 500 Internal Server Error { "error": "Failed to sync repositories" }

---

🔍 Search API

Universal Search

Endpoint	/search
Method	GET
Description	Search across all content types (writings and repositories)
Parameters	q (string, required): Search query
	page (number, optional): Page number (default: 1)
	pagesize (number, optional): Items per page (default: 10)
Example Request	GET /api/search?q=react&page=1&pagesize=10
Example Responses	Status: 200 OK { "results": [ { "id": "abc123", "title": "React Best Practices", "content": "Learn React...", "_type": "writing", "highlight": { "title": ["React Best Practices"] } }, { "id": 123456, "name": "react-components", "description": "Reusable React components", "_type": "repository", "highlight": { "name": ["react-components"] } } ], "total": { "value": 25, "relation": "eq" }, "page": 1, "pageSize": 10, "totalPages": 3, "breakdown": { "writings": {"count": 15, "total": 25}, "repositories": {"count": 10, "total": 25} } }
	Status: 400 Bad Request { "error": "Search query is required" }
	Status: 500 Internal Server Error { "error": "Failed to perform search" }

Search Writings

Endpoint	/search/writings
Method	GET
Description	Search specifically within writings
Parameters	q (string, required): Search query
	page (number, optional): Page number (default: 1)
	pagesize (number, optional): Items per page (default: 10)
Example Request	GET /api/search/writings?q=javascript&page=1&pagesize=5
Example Responses	Status: 200 OK { "results": [ { "id": "abc123", "title": "JavaScript Best Practices", "content": "...", "highlight": { "content": ["Learn JavaScript fundamentals"] } } ], "total": { "value": 8, "relation": "eq" }, "page": 1, "pageSize": 5, "totalPages": 2 }
	Status: 400 Bad Request { "error": "Search query is required" }
	Status: 500 Internal Server Error { "error": "Failed to search writings" }

Search Repositories

Endpoint	/search/repositories
Method	GET
Description	Search specifically within repositories
Parameters	q (string, required): Search query
	page (number, optional): Page number (default: 1)
	pagesize (number, optional): Items per page (default: 10)
Example Request	GET /api/search/repositories?q=react&page=1&pagesize=5
Example Responses	Status: 200 OK { "results": [ { "id": 123456, "name": "react-components", "description": "Reusable React components", "highlight": { "name": ["react-components"] } } ], "total": { "value": 5, "relation": "eq" }, "page": 1, "pageSize": 5, "totalPages": 1 }
	Status: 400 Bad Request { "error": "Search query is required" }
	Status: 500 Internal Server Error { "error": "Failed to search repositories" }

---

📄 PDF API

Generate CV PDF

Endpoint	/pdf/generate-cv
Method	POST
Description	Generate PDF from LaTeX content
Request Body	latexContent (string, required): LaTeX source code
	filename (string, optional): Custom filename (default: "cv")
	type (string, optional): CV type filter
	mode (string, optional): Display mode
	theme (string, optional): Color theme
Example Request	POST /api/pdf/generate-cv Content-Type: application/json { "latexContent": "\documentclass{article} [...]", "filename": "my-cv", "type": "full", "mode": "system", "theme": "blue" }
Example Responses	Status: 200 OK { "pdfUrl": "/api/pdf/view/my-cv-a1b2c3.pdf" }
	Status: 400 Bad Request { "error": "LaTeX content is required" }
	Status: 422 Unprocessable Entity { "error": "LaTeX compilation failed. Please check your content." }

Serve PDF

Endpoint	/pdf/view/:filename
Method	GET
Description	Serve generated PDF file
Parameters	filename (string, required): PDF filename with extension
Headers	Content-Type: application/pdf Content-Disposition: inline; filename="original-filename.pdf" Content-Length: [buffer-length]
Example Request	GET /api/pdf/view/my-cv-a1b2c3.pdf
Example Responses	Status: 200 OK Content-Type: application/pdf Content-Disposition: inline; filename="my-cv.pdf" Content-Length: 50432 [Binary PDF data]
	Status: 404 Not Found { "error": "PDF not found" }

📞 Contact

Feel free to reach out if you:

• Have questions about the project or implementation
• Want to collaborate on similar web development projects
• Need help with the technologies used in this portfolio
• Are interested in discussing potential opportunities

You can contact me via Email, hi@aldenluth.fi

⚖️ License

This repository is licensed under the GNU General Public License v3.0.

With this license, you are allowed to:

• Use, copy, modify, and distribute the software
• Create derivative works and commercial applications
• Include the software in larger projects
• Access and study the source code

However, you must:

• Keep the same GPL v3.0 license for any derivative works
• Provide source code for any distributed modifications
• Include copyright and license notices
• Document any changes made to the original code

🙏 Acknowledgments

• shadcn/ui for the component library inspiration
• Tailwind CSS for the utility-first CSS framework
• Notion for content management
• Elasticsearch for powerful search capabilities