Add Content to Start Page

src/App.tsx

@@ -5,15 +5,7 @@
 import { Search } from './components/Search/Search';
 import { useGetSummary } from './Hooks/useGetSummary';
 import { Document } from './pages/Document';
-import { Start } from './pages/Start';
-
-/*
-#ff3f81
-#23153c
-#121417
-#1E293B
-#F5D547
-*/
+import { Home } from './pages/Home/Home';
 
 export const App = (): JSX.Element => {
     const { data: summary, isLoading, isError } = useGetSummary();
@@ -23,10 +15,10 @@
             {!isError && <LoadingSpinner isLoading={isLoading} />}
 
             <main>
                 <div className="max-w-[90rem] mx-auto px-4 sm:px-6 md:px-8">
                     {summary !== undefined && summary !== null && (
                         <div className="hidden lg:block fixed z-20 inset-0 left-[max(0px,calc(50%-45rem))] right-auto w-[19.5rem] pb-10 px-8 overflow-y-auto pt-[0.25rem]">
                             <nav className="lg:text-sm lg:leading-6 relative">
                                 <div className="sticky top-0 -ml-0.5">
                                     <Search summary={summary} />
                                 </div>
@@ -55,7 +47,7 @@
                         </div>
                     )}
                     <Routes>
-                        <Route path="/" element={<Start />} />
+                        <Route path="/" element={<Home />} />
                         {summary?.specifications.map((spec) => (
                             <Route
                                 path={spec.className}

src/components/LoadingSpinner/LoadingSpinner.tsx

@@ -14,11 +14,11 @@ export const LoadingSpinner = (props: ILoadingSpinner): JSX.Element => {
         <>
             {isLoading && (
                 <div id="backdrop">
-                    <div className="text-center">
+                    <div className="text--center">
                         <FontAwesomeIcon
                             icon={faSpinner}
                             spin
-                            className=" spinner-border"
+                            className=" spinner__border"
                             role="status"
                             aria-label="page is loading"
                         />

src/components/LoadingSpinner/styles.css

@@ -8,13 +8,13 @@
     @apply bg-davysGray/[0.5];
 }
 
-.text-center {
+.text--center {
     @apply flex;
     @apply justify-around;
     @apply items-center;
     @apply h-full;
 }
 
-.spinner-border {
+.spinner__border {
     @apply text-redNcs/[0.7] text-[8rem];
 }

src/components/shared/Layout/Layout.tsx

@@ -15,11 +15,11 @@
 
     return (
         <div className="lg:pl-[19.5rem]">
-            <div className="max-w-3xl mx-auto pt-10 xl:max-w-none xl:ml-0 xl:mr-[15.5rem] xl:pr-16">
+            <div className="max-w-3xl mx-auto py-10 xl:max-w-none xl:ml-0 xl:mr-[15.5rem] xl:pr-16">
                 {children}
 
                 {hasOnPageNav !== undefined && hasOnPageNav && (
                     <div className="fixed z-20 top-0 bottom-0 right-[max(0px,calc(50%-45rem))] w-[19.5rem] pb-10 overflow-y-hidden hidden xl:block">
                         <h4>On the Page</h4>
                         <nav>
                             <ul className="text-[0.875rem]">

src/components/shared/Tab/CustomTab.tsx

@@ -0,0 +1,48 @@
+import './styles.css';
+
+import { ReactNode } from 'react';
+import { Tab, TabList, TabPanel, useTabState } from 'reakit';
+
+interface ITab {
+    content: ReactNode;
+    header: string;
+}
+
+interface ICustomTab {
+    tabConfigs: ITab[];
+}
+
+export const CustomTab = (props: ICustomTab) => {
+    const { tabConfigs } = props;
+
+    const tab = useTabState();
+
+    return (
+        <div className="mb-12">
+            <TabList {...tab} aria-label="at home some code examples">
+                <div className="bg-[#27272B]">
+                    {tabConfigs.map((tabConfig) => (
+                        <Tab
+                            id={tabConfig.header}
+                            key={`tabH-${tabConfig.header}`}
+                            {...tab}
+                            className={`tab ${
+                                tab.selectedId === tabConfig.header
+                                    ? 'tab--selected'
+                                    : ''
+                            }  `}
+                        >
+                            {tabConfig.header}
+                        </Tab>
+                    ))}
+                </div>
+            </TabList>
+
+            {tabConfigs.map((tabConfig) => (
+                <TabPanel key={`tabC-${tabConfig.header}`} {...tab}>
+                    {tab.selectedId === tabConfig.header && tabConfig.content}
+                </TabPanel>
+            ))}
+        </div>
+    );
+};

src/components/shared/Tab/styles.css

@@ -0,0 +1,9 @@
+.tab {
+    @apply p-2 mr-2;
+}
+
+.tab--selected {
+    @apply border-t-4 border-claret border-solid;
+    @apply bg-eerieBlack;
+    @apply text-frenchRose font-semibold;
+}

src/index.css

@@ -49,7 +49,7 @@ h6 {
 }
 
 h1 {
-    @apply text-2xl;
+    @apply text-3xl;
     @apply mb-12;
 }
 
@@ -70,3 +70,7 @@ h6 {
     @apply font-medium;
     @apply mb-4;
 }
+
+p {
+    @apply mb-4;
+}

src/pages/Home/Home.tsx

@@ -0,0 +1,209 @@
+import './styles.css';
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+import {
+    faComputer,
+    faFileExport,
+    faWandSparkles,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { Layout } from '../../components/shared/Layout/Layout';
+import { CustomTab } from '../../components/shared/Tab/CustomTab';
+import { useScrollUp } from '../../Hooks/useScrollUp';
+
+const groovySnippet = {
+    content: (
+        <SyntaxHighlighter language="groovy" style={dracula} showLineNumbers>
+            {`var x = Tsr.of(3d).setRqsGradient(true)\nvar b = Tsr.of(-4d)\nvar w =Tsr.of(2d)\nvar y = ((x+b)*w)**2 y.backward(1)\n// x.getGradient(): "(1):[-8]"`}
+        </SyntaxHighlighter>
+    ),
+    header: 'Groovy',
+};
+
+const JavaSnippet = {
+    content: (
+        <SyntaxHighlighter language="java" style={dracula} showLineNumbers>
+            {`var x = Tsr.of(3d).setRqsGradient(true)\nvar b = Tsr.of(-4d);\nvar w = Tsr.of(2d);\nvar y = Tsr.of("((i0+i1)*i2)^2", x, b, w);\ny.backward(1);\n// x.getGradient(): "(1):[-8]"`}
+        </SyntaxHighlighter>
+    ),
+    header: 'Java',
+};
+
+const KotlinSnippet = {
+    content: (
+        <SyntaxHighlighter language="kotlin" style={dracula} showLineNumbers>
+            {`val x = Tsr.of(3.0).setRqsGradient(true)\nval b = Tsr.of(-4.0)\nval w = Tsr.of(2.0)\nval y = Tsr.of("((i0+i1)*i2)^2", x, b, w)\ny.backward(1.0)\n// x.getGradient(): "(1):[-8]"`}
+        </SyntaxHighlighter>
+    ),
+    header: 'Kotlin',
+};
+
+export const Home = (): JSX.Element => {
+    useScrollUp();
+
+    return (
+        <Layout>
+            <h1 className="home__headline">Neureka</h1>
+            <p className="home__description">
+                A lightweight open source platform independent nd-array library
+                for the JVM
+            </p>
+
+            <div className="flex justify-center">
+                <div className="mr-2">
+                    <div className="text-center">
+                        <FontAwesomeIcon
+                            icon={faFileExport}
+                            className="home__icons"
+                        />
+                    </div>
+                    <div className="text-center text-sm">
+                        Platform independent, extendable and compatible with any
+                        JVM language
+                    </div>
+                </div>
+                <div className="mr-2">
+                    <div className="text-center">
+                        <FontAwesomeIcon
+                            icon={faWandSparkles}
+                            className="home__icons"
+                        />
+                    </div>
+                    <div className="text-center text-sm">
+                        Completely open-source and free to use, MIT-Licenced
+                    </div>
+                </div>
+                <div>
+                    <div className="text-center">
+                        <FontAwesomeIcon
+                            icon={faComputer}
+                            className="home__icons"
+                        />
+                    </div>
+                    <div className="text-center text-sm">
+                        Vendor agnostic GPU acceleration through OpenCl
+                    </div>
+                </div>
+            </div>
+
+            <h2 className="text-center">Why Neureka?</h2>
+            <p>
+                Not only is it a flexible nd-array library for general purpose
+                use, but also a tensor library for doing deep learning.
+            </p>
+            <p className="mb-8">
+                Neureka trains your neural network using a computation graph
+                recorder. This is contrary to the approaches found in other
+                frameworks such as TensorFlow, Theano, Caffe, and CNTK which
+                require the definition of a computation graph ahead of time.
+            </p>
+            <div className="flex items-center">
+                <img
+                    src="https://gleethos.github.io/neureka/src/img/archimedes.jpg"
+                    alt="archimedes"
+                    className="home__image"
+                />
+                <p>
+                    In that case a developer has to build a neural network
+                    structure which cannot change during runtime. Neureka on the
+                    other hand uses the recorded computation graph in order to
+                    apply a technique called reverse-mode auto-differentiation.
+                    This technique allows your network structure to change
+                    during runtime arbitrarily with zero lag or overhead. This
+                    powerful feature was inspired by PyTorch which also uses a
+                    dynamic computation graph to achieve such a high degree of
+                    flexibility.
+                </p>
+            </div>
+
+            <h2 className="text-center">Why Java?</h2>
+            <p>
+                Although Java is a robust and safe language, it is often times
+                considered to be too verbose and explicit for simple prototyping
+                or more explorative workloads... Therefore popular machine
+                learning and tensor / deep learning libraries rely on python,
+                which in many cases offers a more concise syntax. So one might
+                come to wonder, why would anybody ever build a deep learning
+                library for Java? The answer is simple!
+            </p>
+
+            <h3 className="text-center">Nobody did!</h3>
+            <p className="mb-8">
+                This library was written for all JVM-languages, namely: Groovy,
+                Kotlin, Scala, and Jython just to name a few. Take a look at the
+                following examples side by side! Neureka can be integrated by
+                any language which compiles to, or understands JVM bytecode!
+            </p>
+            <CustomTab
+                tabConfigs={[groovySnippet, JavaSnippet, KotlinSnippet]}
+            />
+            <div>
+                Both code snippets express the following equations
+                <ul role="list" className="home__list">
+                    <li className="home__listItem">
+                        <code>f(x) = ((x-4)*2)^2 | f(3) = 4</code>
+                    </li>
+                    <li className="home__listItem">
+                        <code>f(x)&#39; = 8 * x - 32 | f(3)&#39; = -8</code>
+                    </li>
+                </ul>
+            </div>
+            <p>
+                Neurekas API is designed to enable operator overloading in
+                certain languages based on carefully chosen method names which
+                will be translated to operators. This makes it possible to use
+                tensors in mathematical expression in both Groovy and Kotlin to
+                allow for rapid prototyping and highly readable math heavy
+                code...
+            </p>
+            <ul role="list" className="home__list">
+                <li className="home__listItem">+ : plus(...)</li>
+                <li className="home__listItem">- : minus(...)</li>
+                <li className="home__listItem">* : times(...)</li>
+                <li className="home__listItem">/ : divide(...)</li>
+                <li className="home__listItem">...</li>
+            </ul>
+            <p>
+                If you prefer fast prototyping with Jupyter, then Neureka can be
+                used there too. <a href="http://beakerx.com/">BeakerX</a> is a
+                jupyter extension that supports many JVM languages like Groovy,
+                Scala, Clojure, Kotlin and Java.
+            </p>
+
+            <h2 className="text-center">Performance</h2>
+            <p>
+                Not only are the operations within the default backend
+                implemented as generalized, modular and concise as possible,
+                they are also optimized for multi-threading and specifically
+                designed to be auto-vectorizable by the JVM into SIMD machine
+                code instructions.
+            </p>
+            <p>
+                However performance wise Neureka still has lots of room for
+                improvement, but because it is a lightweight and highly
+                extensible library with a consistent API designed to allow for
+                the support of any backend, you can easily go the extra mile to
+                improve performance for your specific use case. like for example
+                implementing a more specialized kind of OpenCL kernel for
+                convolution...
+            </p>
+            <p>
+                Currently Neureka is mostly held back by the JVM&#39;s lack of
+                allowing for more memory localized types and also a lack of an
+                API for consistent SIMD vectorization.{' '}
+                <a href="https://openjdk.org/jeps/338">
+                    (...take a look at the upcoming vector API...)
+                </a>
+            </p>
+            <p>
+                This upcoming vector API alongside the introduction of
+                inline/value types from Project-Valhalla will greatly benefit
+                the performance of Neureka as well as improve Machine Learning
+                on the JVM in general.
+            </p>
+        </Layout>
+    );
+};

src/pages/Home/styles.css

@@ -0,0 +1,29 @@
+.home__listItem::before {
+    content: '•';
+    display: inline-block;
+    width: 1em;
+    margin-left: -1em;
+
+    @apply text-2xl;
+    @apply text-claret;
+}
+
+.home__list {
+    @apply ml-16 my-4;
+}
+
+.home__icons {
+    @apply text-claret text-5xl;
+}
+
+.home__image {
+    @apply rounded mr-4 w-44;
+}
+
+.home__description {
+    @apply text-center mb-12 text-lg italic;
+}
+
+.home__headline {
+    @apply text-center mb-4;
+}