test

app/Projects/Buildify/page.tsx

@@ -0,0 +1,122 @@
+import Header from "@/app/Components/Header";
+import Image from "next/image";
+import Picture1 from "./img/Picture1.png";
+import Picture2 from "./img/Picture2.png";
+import Picture3 from "./img/Picture3.png";
+import Picture4 from "./img/Picture4.png";
+import Picture5 from "./img/Picture5.png";
+import Picture6 from "./img/Picture6.png";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Buildify",
+  description: "CV/Resume Sharing and Authentication Application",
+};
+export default function Buildify() {
+  return (
+    <>
+      <Header />
+      <div className="m-10 border border-gray-700 rounded-md bg-gray-950 lg:flex max-sm:m-5">
+        <div className="lg:w-2/3 border-r border-gray-700">
+          <div className="projects-grid">
+            <h1 className="text-5xl">Buildify</h1>
+            <p className="pb-5 card-body">
+              CV/Resume Sharing and Authentication Application
+            </p>
+            <p className="text-lg ">
+              This project is a CV/Resume Sharing and Authentication Application
+              designed to help individuals manage and share their resumes/CVs
+              while ensuring the authenticity of the information. The
+              application provides a platform for users to update their career
+              progress and for organizations to verify the credentials of
+              potential employees.
+            </p>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Goal of the Project</h1>
+            <p>
+              The primary goal of the project is to develop an application that
+              simplifies the process of creating, sharing, and authenticating
+              CVs/resumes. This ensures that organizations can trust the
+              information presented by job applicants, thereby improving the
+              hiring process and reducing fraudulent claims.
+            </p>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Key Features</h1>
+            <ul className="list-disc list-inside">
+              <li>
+                Creating CVs/Resumes: Users can create and update their
+                CVs/resumes.
+              </li>
+              <li>
+                Certificate Authentication: Users can upload and get their
+                certificates authenticated to add credibility to their resumes.
+              </li>
+              <li>
+                Secure User and Admin Login: The application employs JWT (JSON
+                Web Token) for generating secure tokens, ensuring that only
+                authenticated users and admins can access the system.
+              </li>
+              <li>
+                Search Functionality: Organizations and other users can search
+                for and view authenticated resumes.
+              </li>
+              <li>
+                Admin Portal: Administrators have a dedicated web application to
+                manage users, resumes, and authentication processes.
+              </li>
+            </ul>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Program Languages and Tools Used</h1>
+            <ul className="list-disc list-inside">
+              <li>React.js</li>
+              <li>TypeScript</li>
+              <li>Flutter</li>
+              <li>Dart</li>
+              <li>OpenAI</li>
+              <li>Visual Studio Code.</li>
+              <li>Android Studio.</li>
+            </ul>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Team</h1>
+            <ul className="list-disc list-inside">
+              <li>Saad Alkathiri</li>
+              <li>Marouf Alsubaie</li>
+            </ul>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Conclusion</h1>
+            <p>
+              The CV/Resume Sharing and Authentication Application enhances the
+              trustworthiness of resumes by ensuring that all information is
+              verified and authenticated. This project aims to facilitate a more
+              reliable hiring process for organizations and provide individuals
+              with a credible platform to showcase their career achievements.
+              Future work will focus on better integration with organizations
+              for seamless authentication and design enhancements for an
+              improved user experience.
+            </p>
+          </div>
+          <div className="p-12">
+            <h1 className="title p-2">full documentation</h1>
+            <p>You can find the full documentation here</p>
+            <a className="text-blue-600" href="https://s3d340.com/Buildify">
+              https://s3d340.com/Buildify
+            </a>
+          </div>
+        </div>
+        <div className="lg:w-1/3 grid grid-cols-2 gap-4">
+          <Image src={Picture1} alt="Picture1" className="p-3" />
+          <Image src={Picture2} alt="Picture2" className="p-3" />
+          <Image src={Picture3} alt="Picture3" className="p-3" />
+          <Image src={Picture4} alt="Picture4" className="p-3" />
+          <Image src={Picture5} alt="Picture5" className="p-3" />
+          <Image src={Picture6} alt="Picture6" className="p-3" />
+        </div>
+      </div>
+    </>
+  );
+}

app/Projects/Library/page.tsx

@@ -0,0 +1,136 @@
+import Header from "@/app/Components/Header";
+import Image from "next/image";
+import Picture1 from "./img/Picture1.png";
+import Picture4 from "./img/Picture4.png";
+import Picture6 from "./img/Picture6.png";
+import Picture8 from "./img/Picture8.png";
+import Picture9 from "./img/Picture9.png";
+import Picture10 from "./img/Picture10.png";
+import Picture13 from "./img/Picture13.png";
+import Picture16 from "./img/Picture16.png";
+import { Metadata } from "next";
+export const metadata: Metadata = {
+  title: "Library",
+  description: "E-COMMERCE Platform for Educational and Recreational Books",
+};
+export default function Library() {
+  return (
+    <>
+      <Header />
+      <div className="m-10 border border-gray-700 rounded-md bg-gray-950 lg:flex max-sm:m-5">
+        <div className="lg:w-2/3 border-r border-gray-700">
+          <div className="projects-grid">
+            <h1 className="text-4xl pb-5 max-sm:title">
+              E-COMMERCE Platform for Educational and Recreational Books
+            </h1>
+            <p className=" text-lg">
+              My second graduation project for my bachelor&apos;s degree
+              It&apos;s an application for creating CVs and making
+              authentication links for your certificates.
+            </p>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Introduction</h1>
+            <p>
+              This project represents the beginning of my career in programming
+              and is my graduation project for my associate degree. It showcases
+              my skills and knowledge in developing a comprehensive e-commerce
+              platform dedicated to selling various types of books, including
+              educational, self-help, and novels.
+            </p>
+          </div>
+
+          <div className="projects-grid">
+            <h1 className="title p-2">Project Idea</h1>
+            <p>
+              The project&apos;s primary goal is to create a user-friendly
+              website that facilitates the purchase of educational and
+              recreational books. The platform aims to encourage reading and
+              provide a seamless shopping experience for students and book
+              enthusiasts.
+            </p>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Objectives</h1>
+            <ul className="list-disc list-inside">
+              <li>
+                Simplify the process of buying books and supplies for customers
+              </li>
+              <li>Ensure ease of use for the website </li>
+            </ul>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Tools and Technologies</h1>
+            <ul className="list-disc list-inside">
+              <li>WampServer: For creating a local server environment.</li>
+              <li>phpMyAdmin: For database management. </li>
+              <li>
+                Visual Studio Code: For code editing and development using PHP,
+                HTML, CSS, and JavaScript.
+              </li>
+              <li>
+                GitHub: For version control and collaboration among team
+                members.
+              </li>
+              <li>
+                Visual Paradigm: For designing diagrams like use case,
+                flowchart, and ERD.
+              </li>
+            </ul>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Programming Languages</h1>
+            <ul className="list-disc list-inside">
+              <li>PHP.</li>
+              <li>HTML and CSS. </li>
+              <li>SQL</li>
+              <li>JavaScript</li>
+            </ul>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Development Model</h1>
+            <p>
+              Incremental Development: Chosen because it allows for easy
+              modifications and improvements in the project specifications over
+              time.
+            </p>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Team</h1>
+            <ul className="list-disc list-inside">
+              <li>Saad Alkathiri</li>
+              <li>Marouf AlSubaie </li>
+              <li>Fares AlQahtani </li>
+            </ul>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Conclusion</h1>
+            <p>
+              This project has been a valuable learning experience, helping us
+              improve our skills and work as a cohesive team. We hope our
+              efforts result in a useful and appreciated platform for book
+              lovers and students.
+            </p>
+          </div>
+          <div className="p-12">
+            <h1 className="title p-2">full documentation</h1>
+            <p>You can find the full documentation here</p>
+            <a className="text-blue-600" href="https://s3d340.com/E-COMMERCE">
+              https://s3d340.com/E-COMMERCE
+            </a>
+          </div>
+        </div>
+        <div className="lg:w-1/3">
+          <Image src={Picture1} alt="Picture1" className="p-3" />
+          <Image src={Picture4} alt="Picture4" className="p-3" />
+          <Image src={Picture6} alt="Picture6" className="p-3" />
+          <Image src={Picture8} alt="Picture8" className="p-3" />
+          <Image src={Picture9} alt="Picture9" className="p-3" />
+          <Image src={Picture10} alt="Picture10" className="p-3" />
+          <Image src={Picture13} alt="Picture13" className="p-3" />
+          <Image src={Picture16} alt="Picture16" className="p-3" />
+        </div>
+      </div>
+    </>
+  );
+}

app/Projects/Portfolio/page.tsx

@@ -0,0 +1,110 @@
+import Header from "@/app/Components/Header";
+import Image from "next/image";
+import Picture1 from "./img/Screenshot 2024-06-21 004106.png";
+import Picture2 from "./img/Screenshot 2024-06-21 004132.png";
+import Picture3 from "./img/Screenshot 2024-06-21 004200.png";
+import Picture4 from "./img/Screenshot 2024-06-21 004223.png";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Portfolio",
+  description: "My Portfolio Website",
+};
+export default function Portfolio() {
+  return (
+    <>
+      <Header />
+      <div className="m-10 border border-gray-700 rounded-md bg-gray-950 lg:flex max-sm:m-5">
+        <div className="lg:w-2/3 border-r border-gray-700">
+          <div className="projects-grid">
+            <h1 className="text-5xl">Portfolio Website</h1>
+            <p className="pb-5 card-body">
+              This project Is being used and updated
+            </p>
+
+            <p className="text-lg">
+              This portfolio website is a showcase of my expertise in
+              programming and design, highlighting my achievements in creating
+              intuitive and engaging digital experiences.
+            </p>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Goal of the Project</h1>
+            <p>
+              The primary goal of this project is to present my skills,
+              projects, and professional achievements in a visually appealing
+              and easily navigable format. It aims to attract potential
+              employers or clients by demonstrating my proficiency in modern web
+              development and design technologies.
+            </p>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Key Features</h1>
+            <ul className="list-disc list-inside">
+              <li>
+                Professional Showcase: Displays a curated selection of my
+                projects, skills, and professional milestones.
+              </li>
+              <li>
+                Responsive Design: Ensures optimal viewing experience across a
+                wide range of devices, from desktops to mobile phones.
+              </li>
+              <li>
+                Interactive Elements: Incorporates engaging animations and
+                interactive components to enhance user experience.
+              </li>
+              <li>
+                Contact Form: Provides an easy way for potential clients or
+                employers to get in touch.
+              </li>
+            </ul>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Program Languages and Tools Used</h1>
+            <ul className="list-disc list-inside">
+              <li>React: For building the user interface.</li>
+              <li>
+                Next.js: For server-side rendering and enhanced performance.
+              </li>
+              <li>Tailwind CSS: For streamlined and responsive styling.</li>
+              <li>
+                TypeScript: For type safety and enhanced code maintainability.
+              </li>
+              <li>
+                Framer Motion: For creating smooth animations and transitions.
+              </li>
+              <li>MongoDB: For managing and storing content data.</li>
+            </ul>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Conclusion</h1>
+            <p>
+              This portfolio website effectively demonstrates my capabilities in
+              web development and design, offering a comprehensive view of my
+              professional skills and accomplishments. By leveraging modern
+              technologies, it provides an engaging and seamless user experience
+              that reflects my commitment to creating high-quality digital
+              solutions.
+            </p>
+          </div>
+          <div className="p-12">
+            <h1 className="title p-2">full documentation</h1>
+            <p>You can find the full Project files in Github</p>
+            <a
+              className="text-blue-600"
+              href="https://github.com/DevilCode0/MyPortfolioPage"
+            >
+              https://github.com/DevilCode0/MyPortfolioPage
+            </a>
+          </div>
+        </div>
+        <div className="lg:w-1/3">
+          <Image src={Picture1} alt="Picture1" />
+          <Image src={Picture2} alt="Picture2" />
+          <Image src={Picture3} alt="Picture3" />
+          <Image src={Picture4} alt="Picture4" />
+        </div>
+      </div>
+    </>
+  );
+}

app/Projects/Server/page.tsx

@@ -0,0 +1,89 @@
+import Header from "@/app/Components/Header";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Home Server",
+  description: "My Home Server",
+};
+export default function page() {
+  return (
+    <>
+      <Header />
+      <div className="m-10 border border-gray-700 rounded-md bg-gray-950 max-sm:m-5">
+        <div className=" border-gray-700">
+          <div className="projects-grid">
+            <h1 className="text-5xl">Home Server</h1>
+            <p className="pb-5 card-body">
+              This project Is being used and updated
+            </p>
+
+            <p className="text-lg">
+              This project is a home server equipped with ZFS redundant storage,
+              hosting over 30 Docker containers that support various services
+              including smart home automation, DNS, Git, VPN, and NextCloud.
+            </p>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Goal of the Project</h1>
+            <p>
+              The primary goal of this project is to create a reliable and
+              secure home server that centralizes and manages multiple services
+              efficiently. By using Docker containers and ZFS storage, the
+              project aims to ensure data redundancy, ease of management, and
+              high availability for essential home and development services.
+            </p>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Key Features</h1>
+            <ul className="list-disc list-inside">
+              <li>
+                ZFS Redundant Storage: Ensures data integrity and protection
+                through advanced features like snapshots, replication, and
+                self-healing.
+              </li>
+              <li>
+                Smart Home Server: Manages and automates various smart home
+                devices for improved convenience and energy efficiency.
+              </li>
+              <li>
+                DNS Server: Provides a local DNS service for faster and more
+                reliable network name resolution.
+              </li>
+              <li>
+                Git Server: Hosts Git repositories for version control and
+                collaborative development.
+              </li>
+              <li>
+                VPN Server: Offers secure remote access to the home network,
+                ensuring privacy and protection.
+              </li>
+              <li>
+                NextCloud: Provides a personal cloud solution for file storage,
+                synchronization, and sharing.
+              </li>
+            </ul>
+          </div>
+          <div className="projects-grid">
+            <h1 className="title p-2">Conclusion</h1>
+            <p>
+              The home server project demonstrates the effective use of Docker
+              and ZFS to create a versatile and robust home network
+              infrastructure. By integrating multiple services, it offers
+              enhanced data security, improved home automation, and streamlined
+              management of development and personal resources.
+            </p>
+          </div>
+          <div className="p-12">
+            <h1 className="title p-2">full documentation</h1>
+            <p>
+              Due to the private nature of this home server project, detailed
+              documentation is not available for public distribution. This
+              ensures the security and privacy of the personal and sensitive
+              information managed by the server.
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}