[{"id":445,"created_at":"2025-05-02T06:09:21.846488+00:00","html":"\n\n\n\n \n \n My Full-Stack Portfolio\n \n \n\n\n\n \n

\n \n PPhatDev\n \n

\n Home\n About\n Projects\n Contact\n

\n \n

\n\n \n \n

\n\n \n

\n Hi, I'm Your Name\n

\n A Full-Stack Developer Crafting Digital Experiences.\n

\n View My Work\n Get In Touch\n

\n\n \n

About Me

\n $\"Your$ \n

\n I'm a passionate full-stack developer with a knack for building robust and scalable web applications. My journey in tech started with a curiosity for how things work, which quickly evolved into a love for bringing ideas to life through code.\n

\n I specialize in the MERN stack (MongoDB, Express.js, React/Next.js, Node.js) and have experience with various other technologies including Python, Django, and cloud platforms like AWS. I thrive in environments where I can continuously learn and tackle challenging problems.\n

\n When I'm not coding, you can find me exploring new technologies, contributing to open-source projects, or enjoying the outdoors. I'm always looking for opportunities to collaborate on exciting projects and make a positive impact.\n

\n\n \n

My Projects

\n \n

Project Title 1

A brief description of the project, highlighting the technologies used and its purpose.

\n React\n Node.js\n MongoDB\n

\n Live Demo\n GitHub Repo\n

\n\n \n

Project Title 2

Another project description, showcasing different skills or technologies.

\n Next.js\n TailwindCSS\n Firebase\n

\n Live Demo\n GitHub Repo\n

\n\n \n

Project Title 3

A third project description, demonstrating versatility.

\n Python\n Django\n PostgreSQL\n

\n Live Demo\n GitHub Repo\n

\n\n \n\n

\n\n \n

Get In Touch

\n \n

\n\n \n \n\n \n\n\n\n\n\n\n","css":"/* */","js":"// code here","user_id":"baa1ca2a-cb06-4bb5-8b6c-2274094f0820","project_key":"r9nGVM","description":"PPhatDev Portfolio","plugins":[],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":false,"hide_css":false,"messages":"[{\"messageId\":\"8958b597-f79f-4701-8207-7ffe914dc62c\",\"role\":\"user\",\"content\":\"Create Portfolio using nextjs + TailwindCSS route map with example code \"},{\"messageId\":\"DEVCANVAS_INITIAL_MESSAGE\",\"role\":\"user\",\"content\":\"This is my current code\"},{\"messageId\":\"DEVCANVAS_INITIAL_CODE\",\"role\":\"user\",\"content\":\"\\n\\t\\n\\n\\t\\n\\t\\t\\n\\t\\t\\n\\t\\tUntitled Project\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\n \\n\\t\\n\\t\\n\\t\\t\\n\\t\\t\\n \\n\\t\\n\"},{\"messageId\":\"1d814006-7b76-468f-8156-5df4c95b77c4\",\"role\":\"assistant\",\"content\":\"# Next.js + TailwindCSS Portfolio Starter\\n\\nHere's a complete portfolio starter with route mapping and example components. This implementation uses Next.js App Router and TailwindCSS for styling.\\n\\n```html\\n\\n\\n\\n\\n \\n \\n Portfolio Starter\\n \\n\\n\\n \\n \\n\\n \\n

\\n \\n

\\n

\\n Portfolio\\n

\\n

\\n Home\\n About\\n Projects\\n Contact\\n

\\n

\\n \\n

\\n

\\n\\n \\n

\\n

\\n Welcome to my\\n Portfolio\\n

\\n

\\n I'm a passionate developer creating modern web applications with Next.js and TailwindCSS.\\n

\\n

\\n \\n View Projects\\n \\n

\\n

\\n \\n Contact Me\\n \\n

\\n

\\n\\n \\n

\\n

Featured Projects

\\n

E-commerce Platform

\\n

A full-featured online store built with Next.js, Stripe, and MongoDB.

\\n

\\n View project →\\n

\\n

Task Management App

\\n

A productivity application with real-time collaboration features.

\\n

\\n View project →\\n

\\n

Portfolio Website

\\n

A responsive portfolio website built with Next.js and TailwindCSS.

\\n

\\n View project →\\n

\\n

\\n\\n \\n \\n

\\n\\n\\n\\n```\\n\\n## Next.js Project Structure\\n\\nHere's how your Next.js project would be organized:\\n\\n```\\nmy-portfolio/\\n├── app/\\n│ ├── layout.tsx # Root layout\\n│ ├── page.tsx # Home page\\n│ ├── about/\\n│ │ └── page.tsx # About page\\n│ ├── projects/\\n│ │ ├── page.tsx # Projects listing\\n│ │ └── [slug]/\\n│ │ └── page.tsx # Individual project pages\\n│ └── contact/\\n│ └── page.tsx # Contact page\\n├── components/\\n│ ├── Navbar.tsx # Navigation component\\n│ └── Footer.tsx # Footer component\\n├── tailwind.config.js # Tailwind configuration\\n└── package.json # Project dependencies\\n```\\n\\n## Example Code Files\\n\\n### `app/layout.tsx` (Root Layout)\\n```javascript\\nimport './globals.css'\\nimport { Inter } from 'next/font/google'\\nimport Navbar from '@/components/Navbar'\\nimport Footer from '@/components/Footer'\\n\\nconst inter = Inter({ subsets: ['latin'] })\\n\\nexport const metadata = {\\n title: 'My Portfolio',\\n description: 'A modern portfolio built with Next.js and TailwindCSS',\\n}\\n\\nexport default function RootLayout({\\n children,\\n}: {\\n children: React.ReactNode\\n}) {\\n return (\\n \\n \\n \\n

\\n {children}\\n

\\n