Implemented a homepage (desktop styling only). Added SCSS and Bootstrap integration.
xxmistacruzxx
parent
d4261452f9
commit
ab44844201
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { Button } from "react-bootstrap";
|
||||
|
||||
export default function ProfileIcon() {
|
||||
return <Button>Get Started</Button>;
|
||||
}
|
||||
211
pages/index.jsx
211
pages/index.jsx
|
|
@ -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>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
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 |
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
|
|
@ -0,0 +1,2 @@
|
|||
$success: teal;
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
@import "./custom.scss";
|
||||
:root {
|
||||
--max-width-xl: 1140px;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue