1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { Github, Linkedin, Mail, Twitter, Instagram, Heart } from "https://esm.sh/lucide-react@0.263.1";
4
5export default function Footer() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { Mail, Phone, MapPin, Send, Clock, CheckCircle } from "https://esm.sh/lucide-react@0.263.1";
4
5export default function Contact() {
13 const [isSubmitted, setIsSubmitted] = useState(false);
14
15 const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
16 setFormData({
17 ...formData,
20 };
21
22 const handleSubmit = async (e: React.FormEvent) => {
23 e.preventDefault();
24 setIsSubmitting(true);
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { ExternalLink, Github, Filter } from "https://esm.sh/lucide-react@0.263.1";
4
5export default function Portfolio() {
13 description: "Modern e-commerce website with payment integration and admin dashboard",
14 imageUrl: "https://maxm-imggenurl.web.val.run/modern-ecommerce-website-with-clean-design-shopping-cart-product-grid",
15 technologies: ["React", "Node.js", "MongoDB", "Stripe"],
16 projectUrl: "#"
17 },
40 description: "Personal portfolio website for a photographer with gallery and contact form",
41 imageUrl: "https://maxm-imggenurl.web.val.run/photographer-portfolio-website-with-image-gallery-dark-theme",
42 technologies: ["React", "TypeScript", "Tailwind CSS"],
43 projectUrl: "#"
44 },
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { Code, Palette, Smartphone, Search, Zap, Shield } from "https://esm.sh/lucide-react@0.263.1";
4
5export default function Services() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { Award, Users, Coffee, Clock } from "https://esm.sh/lucide-react@0.263.1";
4
5export default function About() {
14 { name: "HTML/CSS", level: 95 },
15 { name: "JavaScript", level: 90 },
16 { name: "React", level: 88 },
17 { name: "Node.js", level: 85 },
18 { name: "UI/UX Design", level: 92 },
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { ArrowDown, Github, Linkedin, Mail } from "https://esm.sh/lucide-react@0.263.1";
4
5export default function Hero() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { Menu, X } from "https://esm.sh/lucide-react@0.263.1";
4
5export default function Header() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import Header from "./Header.tsx";
4import Hero from "./Hero.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import App from "./components/App.tsx";
5
34
35- **`/index.ts`**: Main entry point that sets up Hono routing and middleware
36- **`/components/`**: React components for rendering the blog
37 - **`Layout.tsx`**: Shared layout with header, footer, and styling
38 - **`HomePage.tsx`**: Renders the blog homepage with featured and recent posts
51### Technical Stack
52
53- **React**: For server-side rendering components
54- **Hono**: Lightweight web framework for routing
55- **Custom CSS**: For styling with CSS custom properties for theming
951. **CSS Custom Properties**: All colors are defined as CSS variables in `:root` for light mode and `[data-theme="dark"]` for dark mode
962. **System Preference Detection**: Uses `@media (prefers-color-scheme: dark)` to automatically apply dark mode for users who prefer it
973. **Theme Toggle Component**: A React component (`ThemeToggle.tsx`) that renders the toggle button and includes the JavaScript for theme switching
984. **Persistent Storage**: Theme preference is saved to `localStorage` and restored on page load
995. **Syntax Highlighting**: Different highlight.js themes are loaded for light and dark modes using media queries
