saad/portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
Saad AlKathiri
2025-03-27 18:26:47 +03:00
parent 12fc59c524
commit 5d25258f20
59 changed files with 6281 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/Components/AboutMe.tsx Normal file
View File

@@ -0,0 +1,26 @@
export default function AboutMe() {
return (
<div className="bg-gray-950 p-10 pb-32">
<h1 className="title">About me</h1>
<div className="flex">
<div className="xl:w-1/3 max-xl:hidden"></div>
<div className="xl:w-2/3 w-full items-center justify-center justify flex">
<div>
<h1 className="text-3xl">
A{" "}
<span className="drop-shadow-glow text-sky-300">
Software Engineer
</span>
</h1>
<p className="pb-5">With experience in</p>
<li>DevOps</li>
<li>FullStack Development</li>
<li>Application Dvelopment</li>
<li>Docker Containerization</li>
<li>3D Designing</li>
</div>
</div>
</div>
</div>
);
}

9
app/Components/Header.tsx Normal file
View File

@@ -0,0 +1,9 @@
export default function Header() {
return (
<div className="border-b border-gray-500 flex p-2">
<a className="" href="/">
HOME
</a>
</div>
);
}

138
app/Components/Projects.tsx Normal file
View File

@@ -0,0 +1,138 @@
"use client";
import React from "react";
import { motion } from "framer-motion";
import { useRouter } from "next/navigation";
export default function Projects() {
const [Select, setSelect] = React.useState("empty");
const router = useRouter();
return (
<motion.div
className="m-10 p-3 border border-gray-700 rounded-md bg-gray-950"
initial={{ x: 100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
>
<h1 className="title p-5">Projects</h1>
<div className="flex">
<div className="w-1/2 max-lg:w-full">
<div
onClick={() => router.push("/Projects/Portfolio")}
className="m-4 p-3 border border-gray-700 rounded-md hover:bg-gray-800 cursor-pointer"
onMouseOver={() => {
setSelect("Portfolio");
}}
>
<h1 className="float-right">June 2024</h1>
<h1 className="card-title">Portfolio page</h1>
<p className="card-body">
A beige to show my experience and skills
</p>
</div>
<div
onClick={() => router.push("/Projects/Buildify")}
className="m-4 p-3 border border-gray-700 rounded-md hover:bg-gray-800 cursor-pointer"
onMouseOver={() => setSelect("Buildify")}
>
<h1 className="float-right">May 2024</h1>
<h1 className="card-title">Buildify</h1>
<p className="card-body">
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
onClick={() => router.push("/Projects/Server")}
className="m-4 p-3 border border-gray-700 rounded-md hover:bg-gray-800 cursor-pointer"
onMouseOver={() => setSelect("Server")}
>
<h1 className="float-right">December 2022</h1>
<h1 className="card-title">Home Server</h1>
<p className="card-body">
A file server with ZFS redundant storage, hosting more than 30
Docker
</p>
</div>
<div
onClick={() => router.push("/Projects/Library")}
className="m-4 p-3 border border-gray-700 rounded-md hover:bg-gray-800 cursor-pointer"
onMouseOver={() => setSelect("Library")}
>
<h1 className="float-right">January 2022</h1>
<h1 className="card-title">Library store website</h1>
<p className="card-body">
A graduation project for my associate&apos;s degree.
</p>
</div>
</div>
<motion.div
className="w-1/2 m-4 p-3 border border-gray-700 rounded-md max-lg:hidden"
hidden={Select !== "empty"}
></motion.div>
<motion.div
className="w-1/2 m-4 p-3 border border-gray-700 rounded-md max-lg:hidden relative"
hidden={Select !== "Portfolio"}
>
<h1 className="text-xl p-3">Portfolio page</h1>
<p>
A showcase of my expertise in programming and design, highlighting
my achievements in creating intuitive digital experiences.
</p>
<ul className="list-disc list-inside">
<p>Crafted using :</p>
<li>React</li>
<li>Next.js</li>
<li>Tailwind CSS</li>
<li>TypeScript</li>
<li>Framer Motion</li>
<li>MongoDB</li>
</ul>
</motion.div>
<motion.div
className="w-1/2 m-4 p-3 border border-gray-700 rounded-md max-lg:hidden"
hidden={Select !== "Buildify"}
>
<h1 className="text-xl p-3">Buildify</h1>
<p>
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>
<ul className="list-disc list-inside">
<li>React</li>
<li>Next.js</li>
<li>Flutter</li>
</ul>
</motion.div>
<motion.div
className="w-1/2 m-4 p-3 border border-gray-700 rounded-md max-lg:hidden"
hidden={Select !== "Server"}
>
<h1 className="text-xl p-3">Home Server</h1>
<p>
A file server with ZFS redundant storage, hosting more than 30
Docker containers including:
</p>
<ul className="list-disc list-inside">
<li>Smart home server</li>
<li>DNS server</li>
<li>Git server</li>
<li>VPN server</li>
<li>NextCloud</li>
</ul>
</motion.div>
<motion.div
className="w-1/2 m-4 p-3 border border-gray-700 rounded-md max-lg:hidden"
hidden={Select !== "Library"}
>
<h1 className="text-xl p-3">Library store website</h1>
<p>
A graduation project for my associate&apos;s degree. We used HTML,
CSS, and JavaScript for the front-end, and PHP and SQL for the
back-end.
</p>
</motion.div>
</div>
</motion.div>
);
}

104
app/Components/SendMessage.tsx Normal file
View File

@@ -0,0 +1,104 @@
"use client";
import axios from "axios";
import React from "react";
import { motion } from "framer-motion";
export default function SendMessage() {
const [infomis, setinfomis] = React.useState("");
async function handleSubmit(e: any) {
e.preventDefault();
const name = e.target.name.value;
const email = e.target.email.value;
const subject = e.target.subject.value;
const body = e.target.body.value;
let error = false;
if (name === "") {
e.currentTarget.name.className = "inputEroor";
error = true;
}
if (email === "") {
e.currentTarget.email.className = "inputEroor";
error = true;
}
if (subject === "") {
e.currentTarget.subject.className = "inputEroor";
error = true;
}
if (body === "") {
e.currentTarget.body.className = "inputEroor w-full";
error = true;
}
if (error) {
return;
}
console.log(name, email, subject, body);
await axios
.post("/api/message", { name, email, subject, body })
.catch((err) => {
console.log(err);
})
.then((response: any) => {
if (response.data.success) {
e.target.name.value = "";
e.target.email.value = "";
e.target.subject.value = "";
e.target.body.value = "";
setinfomis("Message sent successfully");
}
});
}
return (
<motion.form
initial={{ x: 100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
onSubmit={handleSubmit}
className="m-10 p-3 border border-gray-700 rounded-md bg-gray-950"
>
<h1 className="text-3xl pl-10 p-5">Send a message</h1>
<input
type="text"
name="name"
id="name"
placeholder="Name"
className="input"
onClick={(e) => {
e.currentTarget.className = "input";
}}
/>
<input
name="email"
id="email"
placeholder="Email"
className="input"
onClick={(e) => {
e.currentTarget.className = "input";
}}
/>
<input
type="subject"
name="subject"
id="subject"
placeholder="Subject"
className="input"
onClick={(e) => {
e.currentTarget.className = "input";
}}
/>
<textarea
name="body"
id="body"
cols={10}
rows={3}
placeholder="Message"
className="input w-11/12"
onClick={(e) => {
e.currentTarget.className = "input w-full";
}}
/>
<h2 className="text-green-600">{infomis}</h2>
<button className="ml-5 m-5 inline-block text-white font-bold py-2 px-4 rounded-full bg-gradient-to-r from-sky-500 to-blue-700 border border-transparent transform hover:scale-110 hover:border-white transition-transform duration-3000 ease-in-out w-28 text-center">
Send
</button>
</motion.form>
);
}

12
app/Components/footer.tsx Normal file
View File

@@ -0,0 +1,12 @@
export default function Footer() {
return (
<div className="p-10 bg-gray-950 text-xl text-white">
<div className="border-l-2 pl-9 border-white">
<p>saad@s3d340.com</p>
<p>s3d340@gmail.com</p>
<p>+966 535235140</p>
</div>
<p className="pt-5">© 2024 - Saad Alkathiri.</p>
</div>
);
}

BIN
app/Projects/Buildify/img/Picture1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 295 KiB

BIN
app/Projects/Buildify/img/Picture2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
app/Projects/Buildify/img/Picture3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
app/Projects/Buildify/img/Picture4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
app/Projects/Buildify/img/Picture5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
app/Projects/Buildify/img/Picture6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

122
app/Projects/Buildify/page.tsx Normal file
View File

@@ -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>
</>
);
}

BIN
app/Projects/Library/img/Picture1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 851 KiB

BIN
app/Projects/Library/img/Picture10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 728 KiB

BIN
app/Projects/Library/img/Picture11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
app/Projects/Library/img/Picture12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
app/Projects/Library/img/Picture13.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
app/Projects/Library/img/Picture14.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
app/Projects/Library/img/Picture16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
app/Projects/Library/img/Picture2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
app/Projects/Library/img/Picture3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
app/Projects/Library/img/Picture4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 558 KiB

BIN
app/Projects/Library/img/Picture5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
app/Projects/Library/img/Picture6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
app/Projects/Library/img/Picture7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
app/Projects/Library/img/Picture8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
app/Projects/Library/img/Picture9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

136
app/Projects/Library/page.tsx Normal file
View File

@@ -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>
</>
);
}

BIN
app/Projects/Portfolio/img/Screenshot 2024-06-21 004106.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
app/Projects/Portfolio/img/Screenshot 2024-06-21 004132.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
app/Projects/Portfolio/img/Screenshot 2024-06-21 004200.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
app/Projects/Portfolio/img/Screenshot 2024-06-21 004223.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

110
app/Projects/Portfolio/page.tsx Normal file
View File

@@ -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>
</>
);
}

89
app/Projects/Server/page.tsx Normal file
View File

@@ -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>
</>
);
}

BIN
app/Thumbs.db Normal file
View File

Binary file not shown.

29
app/api/message/route.ts Normal file
View File

@@ -0,0 +1,29 @@
import {conict} from "@/dbconfig/config";
import message from "@/dbconfig/models/message";
import { NextRequest,NextResponse } from "next/server";
conict()
export async function POST(request: NextRequest) {
console.log("run");
try {
const { name,email,subject,body } = await request.json();
const newMessage = new message({
name,
email,
subject,
body,
});
const savedMessage = await newMessage.save();
console.log(savedMessage);
return NextResponse.json({
message: "User created successfully",
success: true,
});
} catch (error: any) {
return NextResponse.json({ error: error.message }, { status: 500 });
}
}

BIN
app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

24
app/globals.css Normal file
View File

@@ -0,0 +1,24 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.input {
@apply bg-slate-800 rounded-sm m-3
}
.inputEroor {
@apply border border-red-500 bg-slate-800 rounded-sm m-3
}
.card-title{
@apply text-left text-lg pb-2
}
.card-body{
@apply text-gray-400
}
.title{
@apply text-3xl pb-20
}
.projects-grid{
@apply p-12 border-b border-gray-700 max-sm:p-5
}
}

32
app/layout.tsx Normal file
View File

@@ -0,0 +1,32 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Footer from "./Components/footer";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: {
default: "Saad Alkathiri",
template: "%s | Saad Alkathiri",
},
description: "Portfolio page for Saad",
twitter: {
card: "summary_large_image",
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={(inter.className, "bg-gray-900 text-white")}>
{children}
<Footer />
</body>
</html>
);
}

BIN
app/opengraph-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

59
app/page.tsx Normal file
View File

@@ -0,0 +1,59 @@
import Image from "next/image";
import SendMessage from "./Components/SendMessage";
import Projects from "./Components/Projects";
import AboutMe from "./Components/AboutMe";
export default function Home() {
return (
<>
<div className="h-screen flex items-center">
<div className="xl:w-1/2 max-md:w-full justify-center flex">
<div className="text-white p-12 w-5/6">
<h1 className="text-5xl xl:text-7xl drop-shadow-glow ">
Saad Alkathiri
</h1>
<p className="p-2">
Software engineer with a strong foundation in computer programming
and experience in web development, devops, and docker
containerization. Seeking an opportunity to contribute my
technical expertise and passion for software production. Committed
to delivering high-quality solutions and continuously expanding my
knowledge in the ever-evolving field of software engineering.
</p>
<div className="flex pt-11">
<a href="https://www.linkedin.com/in/saad-alkathiri/">
<svg
className="fill-slate-50 hover:fill-slate-400 hover:scale-110 transition-transform duration-3000 ease-in-out"
width="40px"
height="40px"
viewBox="0 0 16 16"
>
<path d="M12.225 12.225h-1.778V9.44c0-.664-.012-1.519-.925-1.519-.926 0-1.068.724-1.068 1.47v2.834H6.676V6.498h1.707v.783h.024c.348-.594.996-.95 1.684-.925 1.802 0 2.135 1.185 2.135 2.728l-.001 3.14zM4.67 5.715a1.037 1.037 0 01-1.032-1.031c0-.566.466-1.032 1.032-1.032.566 0 1.031.466 1.032 1.032 0 .566-.466 1.032-1.032 1.032zm.889 6.51h-1.78V6.498h1.78v5.727zM13.11 2H2.885A.88.88 0 002 2.866v10.268a.88.88 0 00.885.866h10.226a.882.882 0 00.889-.866V2.865a.88.88 0 00-.889-.864z" />
</svg>
</a>
<a href="https://github.com/DevilCode0/">
<svg
className="fill-slate-50 hover:fill-slate-400 hover:scale-110 transition-transform duration-3000 ease-in-out"
width="40px"
height="40px"
viewBox="0 0 16 16"
>
<path d="M8 1C4.133 1 1 4.13 1 7.993c0 3.09 2.006 5.71 4.787 6.635.35.064.478-.152.478-.337 0-.166-.006-.606-.01-1.19-1.947.423-2.357-.937-2.357-.937-.319-.808-.778-1.023-.778-1.023-.635-.434.048-.425.048-.425.703.05 1.073.72 1.073.72.624 1.07 1.638.76 2.037.582.063-.452.244-.76.444-.935-1.554-.176-3.188-.776-3.188-3.456 0-.763.273-1.388.72-1.876-.072-.177-.312-.888.07-1.85 0 0 .586-.189 1.924.716A6.711 6.711 0 018 4.381c.595.003 1.194.08 1.753.236 1.336-.905 1.923-.717 1.923-.717.382.963.142 1.674.07 1.85.448.49.72 1.114.72 1.877 0 2.686-1.638 3.278-3.197 3.45.251.216.475.643.475 1.296 0 .934-.009 1.688-.009 1.918 0 .187.127.404.482.336A6.996 6.996 0 0015 7.993 6.997 6.997 0 008 1z" />{" "}
</svg>
</a>
</div>
<a
href="https://next.s3d340.com/s/LppJa2K7ZgdGwtZ"
className="mt-4 inline-block text-white font-bold py-2 px-4 rounded-full bg-gradient-to-r from-sky-500 to-blue-700 border border-transparent transform hover:scale-110 hover:border-white transition-transform duration-3000 ease-in-out"
>
Download my CV
</a>
</div>
</div>
<div className="xl:w-1/2 md:w-full justify-center flex phone:max-md:hidden"></div>
</div>
<AboutMe />
<Projects />
<SendMessage />
</>
);
}

12
app/robots.ts Normal file
View File

@@ -0,0 +1,12 @@
import { MetadataRoute } from 'next'
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: "*",
allow: "/",
disallow: "/private/",
},
sitemap: `${process.env.SITE_URL}/sitemap.xml`,
};
}

30
app/sitemap.ts Normal file
View File

@@ -0,0 +1,30 @@
import { MetadataRoute } from 'next'
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: `${process.env.SITE_URL}`,
priority: 1,
},
{
url: `${process.env.SITE_URL}/Projects/Portfolio`,
priority: 0.1,
},
{
url: `${process.env.SITE_URL}/Projects/Buildify`,
priority: 0.1,
},
{
url: `${process.env.SITE_URL}/Projects/Server`,
priority: 0.1,
},
{
url: `${process.env.SITE_URL}/Projects/Library`,
priority: 0.1,
},
{
url: `${process.env.SITE_URL}`,
priority: 0.1,
},
];
}

2
app/svg/github-svgrepo-com.svg Normal file
View File

@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#000000" fill-rule="evenodd" d="M8 1C4.133 1 1 4.13 1 7.993c0 3.09 2.006 5.71 4.787 6.635.35.064.478-.152.478-.337 0-.166-.006-.606-.01-1.19-1.947.423-2.357-.937-2.357-.937-.319-.808-.778-1.023-.778-1.023-.635-.434.048-.425.048-.425.703.05 1.073.72 1.073.72.624 1.07 1.638.76 2.037.582.063-.452.244-.76.444-.935-1.554-.176-3.188-.776-3.188-3.456 0-.763.273-1.388.72-1.876-.072-.177-.312-.888.07-1.85 0 0 .586-.189 1.924.716A6.711 6.711 0 018 4.381c.595.003 1.194.08 1.753.236 1.336-.905 1.923-.717 1.923-.717.382.963.142 1.674.07 1.85.448.49.72 1.114.72 1.877 0 2.686-1.638 3.278-3.197 3.45.251.216.475.643.475 1.296 0 .934-.009 1.688-.009 1.918 0 .187.127.404.482.336A6.996 6.996 0 0015 7.993 6.997 6.997 0 008 1z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 975 B

2
app/svg/linkedin-svgrepo-com.svg Normal file
View File

@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#000000" d="M12.225 12.225h-1.778V9.44c0-.664-.012-1.519-.925-1.519-.926 0-1.068.724-1.068 1.47v2.834H6.676V6.498h1.707v.783h.024c.348-.594.996-.95 1.684-.925 1.802 0 2.135 1.185 2.135 2.728l-.001 3.14zM4.67 5.715a1.037 1.037 0 01-1.032-1.031c0-.566.466-1.032 1.032-1.032.566 0 1.031.466 1.032 1.032 0 .566-.466 1.032-1.032 1.032zm.889 6.51h-1.78V6.498h1.78v5.727zM13.11 2H2.885A.88.88 0 002 2.866v10.268a.88.88 0 00.885.866h10.226a.882.882 0 00.889-.866V2.865a.88.88 0 00-.889-.864z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 724 B