-
Admin Dashboard
-
Welcome, Admin!
-
- Logout
-
+
+
Dashboard Overview
+
+ {/* Stats Grid */}
+
+
+
+ {/* Quick Actions */}
+
Quick Actions
+
+
+
Add Project
+
+
+
Write Article
+
+
)
}
diff --git a/src/pages/admin/PostEditor.tsx b/src/pages/admin/PostEditor.tsx
new file mode 100644
index 0000000..b85f1ad
--- /dev/null
+++ b/src/pages/admin/PostEditor.tsx
@@ -0,0 +1,148 @@
+import { useEffect, useState } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { supabase } from '@/lib/supabase'
+import { ImageUpload } from '@/components/ui/image-upload'
+import { Loader2, Save, ArrowLeft } from 'lucide-react'
+
+export default function PostEditor() {
+ const { id } = useParams()
+ const navigate = useNavigate()
+ const isEditing = id !== 'new'
+
+ const [loading, setLoading] = useState(false)
+ const [formData, setFormData] = useState({
+ title: '',
+ slug: '',
+ excerpt: '',
+ content: '',
+ cover_image: '',
+ tags: [] as string[],
+ published: false
+ })
+
+ useEffect(() => {
+ if (isEditing) fetchPost(id!)
+ }, [id])
+
+ const fetchPost = async (id: string) => {
+ const { data } = await supabase.from('posts').select('*').eq('id', id).single()
+ if (data) setFormData({ ...data, tags: data.tags || [] })
+ }
+
+ const handleChange = (e: React.ChangeEvent
) => {
+ setFormData({ ...formData, [e.target.name]: e.target.value })
+ }
+
+ const handleSlugGen = () => {
+ const slug = formData.title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
+ setFormData(prev => ({ ...prev, slug }))
+ }
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ setLoading(true)
+
+ try {
+ if (isEditing) {
+ await supabase.from('posts').update(formData).eq('id', id)
+ } else {
+ await supabase.from('posts').insert([formData])
+ }
+ navigate('/admin')
+ } catch (error) {
+ console.error('Error saving post:', error)
+ alert('Error saving post')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+
+
+
navigate('/admin')} className="text-slate-500 hover:text-blue-500">
+
+
{isEditing ? 'Edit Article' : 'New Article'}
+
+
+
+
([])
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ fetchPosts()
+ }, [])
+
+ const fetchPosts = async () => {
+ const { data } = await supabase.from('posts').select('*').order('created_at', { ascending: false })
+ if (data) setPosts(data)
+ setLoading(false)
+ }
+
+ const handleDelete = async (id: string) => {
+ if (!window.confirm('Are you sure you want to delete this post?')) return
+
+ await supabase.from('posts').delete().eq('id', id)
+ setPosts(posts.filter(p => p.id !== id))
+ }
+
+ if (loading) return
+
+ return (
+
+
+
Manage Articles
+
+
New Article
+
+
+
+
+
+
+
+ Title
+ Status
+ Views
+ Actions
+
+
+
+ {posts.map((post) => (
+
+
+ {post.title}
+ /{post.slug}
+
+
+
+ {post.published ? 'Published' : 'Draft'}
+
+
+
+ {post.view_count || 0}
+
+
+
+
+ handleDelete(post.id)} className="inline-flex p-2 text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors">
+
+
+
+ ))}
+ {posts.length === 0 && (
+
+
+ No articles found. Write your first one!
+
+
+ )}
+
+
+
+
) => {
+ setFormData({ ...formData, [e.target.name]: e.target.value })
+ }
+
+ const handleSlugGen = () => {
+ // Auto-generate slug from title
+ const slug = formData.title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '')
+ setFormData(prev => ({ ...prev, slug }))
+ }
+
+ const handleAddTag = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && tagInput.trim()) {
+ e.preventDefault()
+ if (!formData.tech_stack.includes(tagInput.trim())) {
+ setFormData(prev => ({ ...prev, tech_stack: [...prev.tech_stack, tagInput.trim()] }))
+ }
+ setTagInput('')
+ }
+ }
+
+ const removeTag = (tagFn: string) => {
+ setFormData(prev => ({ ...prev, tech_stack: prev.tech_stack.filter(t => t !== tagFn) }))
+ }
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ setLoading(true)
+
+ try {
+ if (isEditing) {
+ await supabase.from('projects').update(formData).eq('id', id)
+ } else {
+ await supabase.from('projects').insert([formData])
+ }
+ navigate('/admin')
+ } catch (error) {
+ console.error('Error saving project:', error)
+ alert('Error saving project')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ return (
+
+
+
navigate('/admin')} className="text-slate-500 hover:text-blue-500">
+
+
{isEditing ? 'Edit Project' : 'New Project'}
+
+
+
+
([])
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ fetchProjects()
+ }, [])
+
+ const fetchProjects = async () => {
+ const { data } = await supabase.from('projects').select('*').order('created_at', { ascending: false })
+ if (data) setProjects(data)
+ setLoading(false)
+ }
+
+ const handleDelete = async (id: string) => {
+ if (!window.confirm('Are you sure you want to delete this project?')) return
+
+ await supabase.from('projects').delete().eq('id', id)
+ setProjects(projects.filter(p => p.id !== id))
+ }
+
+ if (loading) return
+
+ return (
+
+
+
Manage Projects
+
+
New Project
+
+
+
+
+
+
+
+ Title
+ Tech Stack
+ Links
+ Actions
+
+
+
+ {projects.map((project) => (
+
+
+ {project.title}
+ /{project.slug}
+
+
+
+ {project.tech_stack?.slice(0, 3).map((t: string) => (
+
+ {t}
+
+ ))}
+ {project.tech_stack?.length > 3 && +{project.tech_stack.length - 3} }
+
+
+
+ {project.demo_url && (
+
+
+ )}
+
+
+ handleDelete(project.id)} className="inline-flex p-2 text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors">
+
+
+
+ ))}
+ {projects.length === 0 && (
+
+
+ No projects found. Create your first one!
+
+
+ )}
+
+
+
+
([])
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ fetchPosts()
+ }, [])
+
+ const fetchPosts = async () => {
+ const { data, error } = await supabase
+ .from('posts')
+ .select('*')
+ .eq('published', true)
+ .order('created_at', { ascending: false })
+
+ if (!error && data) {
+ setPosts(data)
+ }
+ setLoading(false)
+ }
+
+ if (loading) return
+
+ return (
+
+
Blog & Tutorials
+
+
+ {posts.map((post) => (
+
+ {post.cover_image && (
+
+
+
+
+
+ {new Date(post.created_at).toLocaleDateString()}
+
+ {post.tags?.map((tag: string) => (
+ #{tag}
+ ))}
+
+
+
+
+ {post.title}
+
+
+
+ {post.excerpt || 'No description available.'}
+
+
+ Read Article →
+
+
+ ))}
+
+
(null)
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ if (slug) fetchPost(slug)
+ }, [slug])
+
+ const fetchPost = async (slug: string) => {
+ const { data, error } = await supabase
+ .from('posts')
+ .select('*')
+ .eq('slug', slug)
+ .eq('published', true)
+ .single()
+
+ if (!error && data) {
+ setPost(data)
+ }
+ setLoading(false)
+ }
+
+ if (loading) return
+
+ if (!post) {
+ return (
+
+
Post not found
+
+
+
+
+ )
+}
diff --git a/src/pages/public/Home.tsx b/src/pages/public/Home.tsx
index 0fc4ecf..1a20202 100644
--- a/src/pages/public/Home.tsx
+++ b/src/pages/public/Home.tsx
@@ -1,11 +1,125 @@
+import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
+import { ArrowRight, Code, Terminal, Zap } from 'lucide-react'
+import { supabase } from '@/lib/supabase'
+import { ProjectCard } from '@/components/ui/project-card'
+import { motion } from 'framer-motion'
export default function Home() {
+ const [data, setData] = useState<{projects: any[], posts: any[]}>({ projects: [], posts: [] })
+
+ useEffect(() => {
+ fetchHomeData()
+ }, [])
+
+ const fetchHomeData = async () => {
+ const [projectsRes, postsRes] = await Promise.all([
+ supabase.from('projects').select('*').limit(3).order('created_at', { ascending: false }),
+ supabase.from('posts').select('*').limit(3).eq('published', true).order('created_at', { ascending: false })
+ ])
+
+ setData({
+ projects: projectsRes.data || [],
+ posts: postsRes.data || []
+ })
+ }
+
return (
-
-
Dyzulk Portfolio
-
Welcome to the future portfolio.
-
Go to Admin Dashboard
+
+ {/* Hero Section */}
+
+
+
+
+
+
+ Build. Deploy. Scale.
+
+
+ Full-stack developer specializing in modern web technologies, serverless architectures, and high-performance applications.
+
+
+
+
+
+
+ {/* Services/Tech Stack */}
+
+
+ {[
+ { icon: Code, title: "Frontend Dev", desc: "React, TypeScript, Tailwind CSS, Next.js" },
+ { icon: Terminal, title: "Backend Systems", desc: "Node.js, Supabase, PostgreSQL, APIs" },
+ { icon: Zap, title: "Performance", desc: "Serverless (Cloudflare), Optimization, SEO" }
+ ].map((item, i) => (
+
+
+
{item.title}
+
{item.desc}
+
+ ))}
+
+
+ {/* Recent Projects */}
+
+
+
+
Featured Projects
+
Some of my latest work.
+
+
+ View All
+
+
+ {data.projects.map((project) => (
+
+ ))}
+
+
+ {/* Recent Posts */}
+
+
+
+
+
Latest Articles
+
Thoughts on technology and coding.
+
+
+ Read Blog
+
+
+
+ {data.posts.map((post) => (
+
+
+
+
+ {post.title}
+
+
+ {post.excerpt}
+
+
{new Date(post.created_at).toLocaleDateString()}
+
+
+ ))}
+
+
)
}
diff --git a/src/pages/public/Projects.tsx b/src/pages/public/Projects.tsx
new file mode 100644
index 0000000..b69aac4
--- /dev/null
+++ b/src/pages/public/Projects.tsx
@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react'
+import { supabase } from '@/lib/supabase'
+import { ProjectCard } from '@/components/ui/project-card'
+import { Loader2 } from 'lucide-react'
+
+export default function Projects() {
+ const [projects, setProjects] = useState
([])
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ fetchProjects()
+ }, [])
+
+ const fetchProjects = async () => {
+ const { data, error } = await supabase
+ .from('projects')
+ .select('*')
+ .order('created_at', { ascending: false })
+
+ if (!error && data) {
+ setProjects(data)
+ }
+ setLoading(false)
+ }
+
+ if (loading) {
+ return (
+
+
+ )
+ }
+
+ return (
+
+
+
My Portfolio
+
+ Showcase of my detailed projects and technical case studies.
+
+
+
+
+ {projects.map((project) => (
+
+ ))}
+
+
+ {projects.length === 0 && (
+
+ No projects found yet.
+
+ )}
+