Implemented a homepage (desktop styling only). Added SCSS and Bootstrap integration.

main
xxmistacruzxx 2023-11-14 16:24:32 -05:00
parent d4261452f9
commit ab44844201
14 changed files with 378 additions and 9 deletions

View File

@ -1,11 +1,21 @@
import "./navbar.module.scss";
import Image from "next/image";
import { Navbar, Nav, Container, NavDropdown } from "react-bootstrap";
import styles from "./navbar.module.scss";
import ProfileIcon from "../profileicon/profileicon";
export default function NavBar() {
return (
<nav>
<a href="/">
<p>Alt-Text</p>
</a>
</nav>
<Navbar className={styles.navbar}>
<Container>
<Navbar.Brand href="/" className={styles.navbarbrand}>
<Image src="/altgenlogo.png" alt="logo" width={48} height={48} />
<h1>Alt-Gen</h1>
</Navbar.Brand>
<Container className={styles.rightContent}>
<Navbar.Collapse></Navbar.Collapse>
<ProfileIcon />
</Container>
</Container>
</Navbar>
);
}

View File

@ -0,0 +1,26 @@
.navbar {
background-color: var(--bs-light);
border-bottom: solid 1px var(--bs-gray-200);
> * {
width: 100%;
max-width: var(--max-width-xl);
display: flex;
flex-direction: row;
justify-content: space-between;
.navbarbrand {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
img {
height: 100%;
}
}
.rightContent {
display: flex;
}
}
}

View File

@ -0,0 +1,5 @@
import { Button } from "react-bootstrap";
export default function ProfileIcon() {
return <Button>Get Started</Button>;
}

View File

@ -1,12 +1,219 @@
import Head from "next/head";
import Link from "next/link";
import { Button, Image } from "react-bootstrap";
import NavBar from "~/components/navbar/navbar";
import styles from "~/styles/index.module.scss";
export default function Home() {
return (
<main>
<>
<Head>
<title>Alt-Text | Home</title>
</Head>
<h1>Alt-Text Home Page</h1>
</main>
<NavBar />
<main className={styles.pageContent}>
<div className={styles.sectionList}>
<div className={styles.sectionH}>
<div className={styles.contentBig}>
<h2>Alt-Gen</h2>
<p>An all-in-one solution for image accessibility in Ebooks.</p>
</div>
<div className={styles.graphic}>
<Image
src="altgenlogo.png"
style={{
borderRadius: "50%",
boxShadow:
"0 0 120px 30px #fff, 0 0 150px 100px #fbabff, 0 0 300px 150px #8ee1ed",
}}
alt="Alt-Gen Logo"
/>
</div>
</div>
<div className={`${styles.sectionV}`}>
<div className={`${styles.content}`}>
<h2>Our Story</h2>
<p>
The Free Ebook Foundation envisions a world where Ebooks will be
funded, distributed and maintained for the benefit of all, by
coordinating the efforts and resources of many.
</p>
<p>
Many projects, such as the Gutenberg Project and Unglue.it, have
made great progress in distributing Ebooks. However, many of
these Ebooks lack alternative text (alt-text) for their images,
making them inaccessible to those using screenreaders.
</p>
<p style={{ fontWeight: "500" }}>
There are about 470,000 images without alt-text in the Gutenberg
Project's collection alone.
</p>
</div>
<div className={styles.graphic}></div>
</div>
<div className={`${styles.sectionH}`}>
<div className={`${styles.content}`}>
<h2>The Solution</h2>
<p>
Alt-Gen is a software designed to scan through Ebooks and
generate captions for images lacking quality alt-text.
</p>
<p>
We utilize various modern technologies to accomplish this, such
as Image Caption AIs, Optical Character Recognition, and Large
Language Models.
</p>
</div>
<div className={styles.graphic}>
<Image
src="imagecaptioning.jpg"
alt="Robot looking at a tablet with thought bubbles above them."
/>
</div>
</div>
<div className={`${styles.sectionV}`}>
<div className={`${styles.content}`}>
<h2>Ways to use Alt-Gen</h2>
<p>
Being open source, there are multiple methods to use Alt-Gen.
</p>
</div>
<div className={styles.rowBoxes}>
<div>
<Image src="/pypi.png" alt="PyPi Logo" />
<h3>The PyPi Package</h3>
<p>
The inner workings of Alt-Gen are available via PyPi and
Github.
</p>
<p>
This allows for full customizability and integration into
one's own projects.
</p>
<div
style={{
display: "grid",
gridTemplateColumns: "49% 49%",
gap: "2%",
}}
>
<Button>PyPi</Button>
<Button variant="secondary">Github</Button>
</div>
</div>
<div>
<Image src="/django.png" alt="Django Logo" />
<h3>Hosting the API</h3>
<p>
The code for the logic server and API is available on Github.
</p>
<p>
This allows for anyone to self host their own service to
interact with and integrate with their own projects.
</p>
<div
style={{
display: "grid",
gridTemplateColumns: "100%",
}}
>
<Button>Github</Button>
</div>
</div>
<div>
<Image src="/altgenlogo.png" alt="Alt-Gen Logo" />
<h3>The Official Service</h3>
<p>You can also use this website!</p>
<p>
Simply create an account and upload your Ebook. We also
provide an easy to use dashboard to quickly proofread all the
alt-text in the Ebook.
</p>
<p>The code for this website is also available on Github.</p>
<div
style={{
display: "grid",
gridTemplateColumns: "49% 49%",
gap: "2%",
}}
>
<Button>Get Started</Button>
<Button variant="secondary">Github</Button>
</div>
</div>
</div>
</div>
<div className={`${styles.sectionH}`}>
<div className={`${styles.content}`}>
<h2>The Developers</h2>
<p>
Alt-Gen is developed by a group of students from Stevens
Institute of Technology for their senior design project.
</p>
<p>
The project is managed by Eric Hellman from the Free Ebook
Foundation.
</p>
</div>
<div className={styles.graphic}>
<Image
src="stevens_free_ebook_foundation.png"
alt="Stevens Institute of Technology and Free Ebook Foundation Logos"
/>
</div>
</div>
<div className={`${styles.sectionV}`}>
<div className={styles.profiles}>
<div>
<Link href={"https://github.com/eshellman"}>
<Image
src="https://avatars.githubusercontent.com/u/926513?v=4"
style={{ border: "solid 2px #576F7D" }}
/>
<p>Eric Hellman</p>
</Link>
</div>
<div>
<Link href={"https://github.com/Byrne13"}>
<Image src="https://avatars.githubusercontent.com/u/132776007?v=4" />
<p>Jack Byrne</p>
</Link>
</div>
<div>
<Link href={"https://github.com/xxmistacruzxx"}>
<Image src="https://avatars.githubusercontent.com/u/25290819?v=4" />
<p>David Cruz</p>
</Link>
</div>
<div>
<Link href={""}>
<Image src="" />
<p>Jared Donnelly</p>
</Link>
</div>
<div>
<Link href={"https://github.com/kethan351"}>
<Image src="https://avatars.githubusercontent.com/u/101610058?v=4" />
<p>Ethan Kleschinsky</p>
</Link>
</div>
<div>
<Link href={"https://github.com/tylerklane"}>
<Image src="https://avatars.githubusercontent.com/u/105730362?v=4" />
<p>Tyler Lane</p>
</Link>
</div>
<div>
<Link href={"https://github.com/carsonblee"}>
<Image src="https://avatars.githubusercontent.com/u/100440205?v=4" />
<p>Carson Lee</p>
</Link>
</div>
</div>
</div>
</div>
</main>
</>
);
}

BIN
public/altgenlogo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 181 KiB

BIN
public/django.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 99 KiB

BIN
public/imagecaptioning.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

BIN
public/pypi.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

2
styles/custom.scss Normal file
View File

@ -0,0 +1,2 @@
$success: teal;
@import "~bootstrap/scss/bootstrap";

View File

@ -0,0 +1,4 @@
@import "./custom.scss";
:root {
--max-width-xl: 1140px;
}

115
styles/index.module.scss Normal file
View File

@ -0,0 +1,115 @@
.pageContent {
max-width: var(--max-width-xl);
margin-left: auto;
margin-right: auto;
}
.sectionList {
padding-left: 2em;
padding-right: 2em;
}
.sectionH {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 20px;
padding-top: 3em;
padding-bottom: 3em;
}
.sectionV {
display: flex;
flex-direction: column;
padding-top: 3em;
padding-bottom: 3em;
text-align: center;
}
.contentBig {
h2 {
font-size: min(10vw, 8em);
}
p {
font-size: min(5vw, 3.5em);
}
}
.content {
h2 {
font-size: min(6vw, 4em);
}
p {
font-size: min(2vw, 2em);
}
}
.graphic {
display: flex;
flex-direction: row;
align-items: center;
img {
z-index: -1;
width: min(300px, 30vw);
border-radius: 5px;
}
}
.rowBoxes {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: 20px;
> div {
max-width: 300px;
background-color: var(--bs-gray-200);
padding: 20px;
border-radius: 5px;
img {
width: 250px;
margin-bottom: 10px;
}
}
}
.profiles {
display: flex;
flex-direction: row;
justify-content: center;
gap: 15px;
> div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 5px;
border-radius: 5px;
a {
text-decoration: none;
color: var(--bs-black);
transition: all 200ms;
}
a:hover {
color: var(--bs-gray-600);
img {
box-shadow: 0 0 5px 1px black;
}
}
img {
border: solid 2px #a32638;
width: 128px;
aspect-ratio: 1 / 1;
border-radius: 50%;
transition: all 200ms;
}
p {
text-decoration: none;
margin: 0px;
}
}
}