You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
5.7 KiB
102 lines
5.7 KiB
import { Head } from '@inertiajs/react';
|
|
import { PageProps } from '@/types';
|
|
import Guest from '@/Layouts/GuestLayout';
|
|
import Authenticated from '@/Layouts/AuthenticatedLayout';
|
|
import ProjectBanner from '@/Components/ProjectBanner';
|
|
|
|
const About = ({ auth }: PageProps) => {
|
|
const renderAboutContent = () => (
|
|
<div id="About" className="px-6 py-4">
|
|
<div id="project-desc" className="hero my-16 pb-16 rounded-lgmin-h-screen bg-cover"
|
|
style={{backgroundImage: 'url(assets/images/img-banner.png)'}}>
|
|
<div className="hero-content flex-row">
|
|
<ProjectBanner />
|
|
|
|
<article id="description" className="w-full">
|
|
<h2 className="my-8 p-4 bg-secondary-background font-bold text-3xl leading-[44px]">About Project CodeHub</h2>
|
|
<p className="text-justify font-normal text-lg leading-[28px]">Project CodeHub is a website accessible for the Department of Science and Technology (DOST) IT Department,
|
|
which curates repositories of source codes and instructional materials
|
|
about different web technologies and programming languages
|
|
that would help the IT Department employees build their own projects easily.</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div className="divider"><p className="my-8 p-4 bg-secondary-background font-bold text-3xl leading-[44px]">Technology Stack</p></div>
|
|
|
|
<div id="techStack">
|
|
<div className="flex justify-center mt-12 mb-8 stats shadow">
|
|
<div className="stat bg-primary-background">
|
|
<div className="stat-value font-semibold text-3xl leading-[44px]">Web Technologies</div>
|
|
<div className="stat-actions">
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">HTML</div>
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">PHP</div>
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">CSS</div>
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline">JS</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="stat bg-primary-background">
|
|
<div className="stat-value font-semibold text-3xl leading-[44px]">Development Frameworks</div>
|
|
<div className="stat-actions">
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">Node.js</div>
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline">Composer</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="stat bg-primary-background">
|
|
<div className="stat-value font-semibold text-3xl leading-[44px]">Database</div>
|
|
<div className="stat-actions">
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">Apache Server</div>
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">phpMyAdmin</div>
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline">MySQL</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-center mt-4 mb-12 stats shadow">
|
|
<div className="stat bg-primary-background">
|
|
<div className="stat-value font-semibold text-3xl leading-[44px]">Backend Frameworks</div>
|
|
<div className="stat-actions">
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">Laravel</div>
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline">Axios</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="stat bg-primary-background">
|
|
<div className="stat-value font-semibold text-3xl leading-[44px]">Frontend Frameworks</div>
|
|
<div className="stat-actions">
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">ReactJS</div>
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">TailwindCSS</div>
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">daisyUI</div>
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline mr-1">StorySet</div>
|
|
<div className="badge badge-lg bg-info-background text-info-main badge-outline">FeatherIcons</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Head title="About" />
|
|
<div>
|
|
{auth.user ? (
|
|
<Authenticated user={auth.user}>
|
|
{renderAboutContent()}
|
|
</Authenticated>
|
|
) : (
|
|
<>
|
|
<Guest>
|
|
{renderAboutContent()}
|
|
</Guest>
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default About;
|