elejeune.xyz

Personal portfolio website showcasing professional experience, projects, blog posts, and creative work.

• Professional Portfolio: Experience timeline, project showcase, and skills display
• Blog System: Markdown-based blog with dynamic loading from public/blog/
• Writing Section: Creative writing pieces with series support
• Hobbies & Interests:
  • Photography gallery with modal zoom functionality
  • Basketball timeline
  • Anime favorites and recommendations
• Contact Form: Telegram-integrated contact form with Altcha spam protection
• Responsive Design: Mobile-first approach with Tailwind CSS
• Smooth Animations: Framer Motion for page transitions and interactions

• Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Routing: React Router v6
• Animations: Framer Motion
• Icons: React Icons
• Forms: Altcha for spam protection
• Content: Markdown files for blog and writing sections

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm preview

Create a .env file in the root directory:

VITE_TELEGRAM_BOT_TOKEN=your_telegram_bot_token
VITE_TELEGRAM_CHAT_ID=your_telegram_chat_id

1. Create a bot by talking to @BotFather on Telegram
2. Get your bot token from BotFather
3. Get your Telegram user ID (chat_id) - you can use @userinfobot or @getidsbot
4. Set the environment variables above

elejeune.xyz/
├── public/
│   ├── blog/              # Markdown blog posts
│   ├── writing/           # Markdown writing pieces
│   ├── photography/       # Photography images
│   └── chibi/            # Assets and GIFs
├── src/
│   ├── components/        # Reusable React components
│   │   ├── layout/       # Header, Footer, Layout
│   │   └── sections/     # Page sections
│   ├── data/             # Static data (experience, projects, etc.)
│   ├── pages/            # Page components
│   ├── hooks/             # Custom React hooks
│   ├── services/          # API services (Telegram)
│   └── utils/            # Utility functions
├── package.json
└── vite.config.ts

Add markdown files to public/blog/ with YAML frontmatter:

---
title: Your Blog Post Title
date: 2024-01-01
category: technical
tags: ['react', 'typescript']
excerpt: A brief excerpt of your post
---

Your blog post content here...

Add markdown files to public/writing/ with YAML frontmatter:

---
title: Your Writing Title
date: 2024-01-01
category: oneshot
tags: ['fiction', 'drama']
excerpt: A brief excerpt
mood: contemplative
---

Your writing content here...

For series, organize files in subdirectories:

public/writing/series/series_name/
  - part1.md
  - part2.md
  ...

Edit tailwind.config.js to customize the color scheme:

colors: {
  'ele-dark': '#0a0a0f',
  'ele-space': '#1a1a2e',
  'ele-purple': '#6c5ce7',
  'ele-pink': '#fd79a8',
  // ...
}

Update src/data/personal.ts with your information:

• Name, title, bio
• Contact information
• Social media links
• Current position

Edit data files in src/data/:

• experience.ts - Work experience
• projects.ts - Project portfolio
• skills.ts - Skills and technologies
• recommendations.ts - Professional recommendations

The project is configured for static hosting. Build the project and deploy the dist/ folder:

npm run build

The dist/ folder contains all static assets ready for deployment to:

• Vercel
• Netlify
• GitHub Pages
• Any static hosting service

This project is private and personal.

Erwin Lejeune

• Portfolio: elejeune.xyz
• GitHub: @Guilyx
• LinkedIn: Erwin Lejeune

Built with ❤️ using React, TypeScript, and Vite