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() {
|
export default function NavBar() {
|
||||||
return (
|
return (
|
||||||
<nav>
|
<Navbar className={styles.navbar}>
|
||||||
<a href="/">
|
<Container>
|
||||||
<p>Alt-Text</p>
|
<Navbar.Brand href="/" className={styles.navbarbrand}>
|
||||||
</a>
|
<Image src="/altgenlogo.png" alt="logo" width={48} height={48} />
|
||||||
</nav>
|
<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 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() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<main>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<title>Alt-Text | Home</title>
|
<title>Alt-Text | Home</title>
|
||||||
</Head>
|
</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>
|
</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