more projects.

fezcode · fezcode · commit 10ff466a8013 · 2025-10-15T02:26:57.000+03:00
diff --git a/public/data/Projects.md b/public/data/Projects.md
diff --git a/public/images/projects/project-one-image-1.avif b/public/images/projects/project-one-image-1.avif
diff --git a/public/images/projects/project-one-image-2.avif b/public/images/projects/project-one-image-2.avif
diff --git a/public/projects/project-one.md b/public/projects/project-one.md
@@ -0,0 +1,23 @@
+---
+title: Project One
+link: https://example.com/project-one
+pinned: true
+isActive: true
+technologies: [React, Node.js, MongoDB]
+---
+
+This is a short description of Project One. It involved developing a robust web application using modern React frameworks and a highly scalable backend.
+
+---
+
+This is the full content of Project One. The goal was to create an intuitive user experience with dynamic content loading and real-time updates.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+![Local Image 1](/images/projects/project-one-image-1.avif)
+
+Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus auctor mattis. Aliquam dictum egestas nulla. Curabitur a orci a ut laoreet. Nullam gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus auctor mattis. Aliquam dictum egestas nulla. Curabitur a orci a ut laoreet.
+
+![Local Image 2](/images/projects/project-one-image-2.avif)
+
+Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
diff --git a/public/projects/project-three.md b/public/projects/project-three.md
@@ -0,0 +1,13 @@
+---
+title: Project Three
+link: https://example.com/project-three
+pinned: false
+isActive: true
+technologies: [JavaScript, HTML, CSS]
+---
+
+This is a short description of Project Three. A simple frontend experiment with animations.
+
+---
+
+This is the full content of Project Three. It explores various CSS and JavaScript animation techniques.
diff --git a/public/projects/project-two.md b/public/projects/project-two.md
@@ -0,0 +1,13 @@
+---
+title: Project Two
+link: https://example.com/project-two
+pinned: true
+isActive: true
+technologies: [Python, Django, PostgreSQL]
+---
+
+This is a short description of Project Two. It's a backend-focused project for data processing and API development.
+
+---
+
+This is the full content of Project Two. It details the architecture and challenges faced during development.
diff --git a/src/components/ProjectCard.js b/src/components/ProjectCard.js
@@ -3,10 +3,10 @@ import { Link } from 'react-router-dom';
 
 const ProjectCard = ({ project }) => {
   return (
-    <Link to={`/projects/${project.slug}`} className="block bg-gray-800/50 p-6 rounded-lg shadow-lg hover:bg-gray-800/80 transition-colors border border-gray-700/50 cursor-pointer">
+    <Link to={`/projects/${project.slug}`} className="block bg-gray-800/50 p-6 rounded-lg shadow-lg hover:bg-gray-800/80 transition-colors border border-gray-700/50 cursor-pointer flex flex-col">
       <h3 className="text-xl font-semibold text-white">{project.title}</h3>
-      <p className="mt-2 text-gray-400">{project.description}</p>
-      <span className="mt-4 inline-block text-primary-400 hover:text-primary-500 transition-colors">
+      <p className="mt-2 text-gray-400 flex-grow">{project.description}</p>
+      <span className="mt-4 inline-block text-primary-400 hover:text-primary-500 transition-colors mt-auto">
         View Project &rarr;
       </span>
     </Link>
diff --git a/src/components/ProjectMetadata.js b/src/components/ProjectMetadata.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import Label from './Label';
+
+const ProjectMetadata = ({ project }) => {
+  if (!project) {
+    return null;
+  }
+
+  return (
+    <aside className="sticky top-24">
+      <div className="p-6 bg-gray-800/50 rounded-lg border border-gray-700/50">
+        <h3 className="text-lg font-semibold text-white mb-4">About Project</h3>
+        <div className="space-y-4">
+          <div>
+            <Label>Title</Label>
+            <p className="text-gray-300">{project.title}</p>
+          </div>
+          {project.link && (
+            <div>
+              <Label>Link</Label>
+              <p className="text-gray-300"><a href={project.link} target="_blank" rel="noopener noreferrer" className="text-indigo-400 hover:text-indigo-300">View Project</a></p>
+            </div>
+          )}
+          {project.pinned && (
+            <div>
+              <Label>Status</Label>
+              <p className="text-gray-300">Pinned</p>
+            </div>
+          )}
+          {project.technologies && project.technologies.length > 0 && (
+            <div>
+              <Label>Technologies</Label>
+              <div className="flex flex-wrap gap-2 mt-2">
+                {project.technologies.map(tech => (
+                  <span key={tech} className="bg-primary-400/10 text-primary-400 text-xs font-medium px-2.5 py-1 rounded-full">
+                    {tech}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </aside>
+  );
+};
+
+export default ProjectMetadata;
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
@@ -41,7 +41,7 @@ const HomePage = () => {
           </h2>
           <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
             {pinnedProjects.map(project => (
-              <ProjectCard key={project.slug} project={project} />
+              <ProjectCard key={project.slug} project={{ ...project, description: project.shortDescription }} />
             ))}
           </div>
         </div>
diff --git a/src/pages/ProjectPage.js b/src/pages/ProjectPage.js
@@ -1,7 +1,8 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 import { useProjects } from '../utils/projectParser';
+import ProjectMetadata from '../components/ProjectMetadata';
 
 const ProjectPage = () => {
   const { slug } = useParams();
@@ -22,13 +23,22 @@ const ProjectPage = () => {
   }
 
   return (
-    <div className="py-16 sm:py-24">
-      <div className="mx-auto max-w-3xl px-6 lg:px-8">
-        <h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">{project.title}</h1>
-        {project.image && <img src={project.image} alt={project.title} className="mt-8 w-full rounded-lg" />}
-        {project.link && <p className="mt-4 text-lg leading-8 text-gray-300"><a href={project.link} target="_blank" rel="noopener noreferrer" className="text-indigo-400 hover:text-indigo-300">View Project</a></p>}
-        <div className="mt-6 text-lg leading-8 text-gray-300 prose prose-invert">
-          <ReactMarkdown>{project.description}</ReactMarkdown>
+    <div className="bg-gray-900 py-16 sm:py-24">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="lg:grid lg:grid-cols-4 lg:gap-8">
+          <div className="lg:col-span-3">
+            <Link to="/projects" className="text-primary-400 hover:text-primary-500 transition-colors mb-8 block">
+              &larr; Back to Projects
+            </Link>
+            <h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">{project.title}</h1>
+            {project.image && <img src={project.image} alt={project.title} className="mt-8 w-full rounded-lg text-gray-200" />}
+            <div className="mt-6 text-lg leading-8 text-gray-300 prose prose-invert">
+              <ReactMarkdown>{project.fullContent}</ReactMarkdown>
+            </div>
+          </div>
+          <div className="hidden lg:block">
+            <ProjectMetadata project={project} />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/pages/ProjectsPage.js b/src/pages/ProjectsPage.js
@@ -25,10 +25,9 @@ const ProjectsPage = () => {
           </p>
         </div>
         <div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {projects.map(project => (
-            <ProjectCard key={project.slug} project={project} />
-          ))}
-        </div>
+                      {projects.map(project => (
+                        <ProjectCard key={project.slug} project={{ ...project, description: project.shortDescription }} />
+                      ))}        </div>
       </div>
     </div>
   );
diff --git a/src/utils/projectParser.js b/src/utils/projectParser.js
@@ -1,52 +1,5 @@
 import { useEffect, useState } from 'react';
-
-const parseProjectsMarkdown = (markdown) => {
-  const projects = [];
-  const projectSections = markdown.split('## ').slice(1); // Split by '## ' and remove the first empty element
-
-  projectSections.forEach(section => {
-    const lines = section.split('\n').filter(line => line.trim() !== '');
-    if (lines.length === 0) return;
-
-    const title = lines[0].trim();
-    const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-*|-*$/g, '');
-
-    let description = [];
-    let link = '';
-    let image = '';
-    let pinned = false;
-
-    for (let i = 1; i < lines.length; i++) {
-      const line = lines[i].trim();
-      if (line.startsWith('[Link to')) {
-        const match = line.match(/\[Link to .*?\]\((.*?)\)/);
-        if (match && match[1]) {
-          link = match[1];
-        }
-      } else if (line.startsWith('![') && line.includes('](')) {
-        const match = line.match(/!\[.*?\]\((.*?)\)/);
-        if (match && match[1]) {
-          image = match[1];
-        }
-      } else if (line.startsWith('Pinned:')) {
-        pinned = line.toLowerCase().includes('true');
-      } else {
-        description.push(line);
-      }
-    }
-
-    projects.push({
-      slug,
-      title,
-      description: description.join('\n'),
-      link,
-      image,
-      pinned,
-    });
-  });
-
-  return projects;
-};
+import fm from 'front-matter';
 
 export const useProjects = () => {
   const [projects, setProjects] = useState([]);
@@ -56,13 +9,33 @@ export const useProjects = () => {
   useEffect(() => {
     const fetchProjects = async () => {
       try {
-        const response = await fetch('/data/Projects.md');
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const markdown = await response.text();
-        const parsedProjects = parseProjectsMarkdown(markdown);
-        setProjects(parsedProjects);
+        // Fetch the list of project markdown files
+        // In a real app, you might have an API endpoint that lists these files
+        // For now, we'll assume a fixed list or glob for them if possible
+        const projectSlugs = ['project-one', 'project-two', 'project-three']; // Manually list for now
+
+        const fetchedProjects = await Promise.all(
+          projectSlugs.map(async (slug) => {
+            const response = await fetch(`/projects/${slug}.md`);
+            if (!response.ok) {
+              throw new Error(`HTTP error! status: ${response.status} for ${slug}.md`);
+            }
+            const text = await response.text();
+            const content = fm(text);
+
+            const parts = content.body.split('---');
+            const shortDescription = parts[0].trim();
+            const fullContent = parts.slice(1).join('---').trim();
+
+            return {
+              slug,
+              ...content.attributes,
+              shortDescription,
+              fullContent,
+            };
+          })
+        );
+        setProjects(fetchedProjects);
       } catch (e) {
         setError(e);
       } finally {
@@ -74,4 +47,4 @@ export const useProjects = () => {
   }, []);
 
   return { projects, loading, error };
-};
+};
