readme tweaks and polishing!

compsoc-edinburgh · Jul 16, 2023 · 7638243 · 7638243
1 parent a0c01d1
commit 7638243
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -1,27 +1,60 @@
 # [![logo](https://github.com/compsoc-edinburgh/project-share-web/assets/38633386/f33978b6-c0fe-4a13-9bdf-e91e9752b46b)](https://projectshare.comp-soc.com/)
 
-
-Hello world! Welcome to Project Share's GitHub repository. 
+Hello world! Welcome to Project Share's GitHub repository.
 
 ## What is Project Share?
-Project Share is a vibrant society at the University of Edinburgh where students meet to share their ongoing tech projects. The website serves as the society's digital heart, showcasing our projects, mission, and team members. 
 
-## Contribution Guide
-Are you excited to jump in and contribute? Awesome! Here's how you can help:
+Project Share is a vibrant society at the University of Edinburgh where students meet to share their ongoing tech projects. The website serves as the society's digital heart, showcasing our projects, mission, and team members.
+
+## How to add your project
+
+Awesome! Here's how you can do it:
+
+0. If you're unfamiliar with creating Pull Requests (PRs), we recommend you watch or read some of these [guides](https://opensource.com/article/19/7/create-pull-request-github) to do so. There are many!
+
+1. Add any images and video files you would want to display inside the `public/media/projects` folder. Make sure to have descriptive names and not upload files larger than 1mb or 2mb (please!).
+
+2. Open up `constants.ts`. Here is where all of the data to display the projects is stored.
 
-1. First, create an issue or make a pull request.
-2. Make sure you're making changes on a separate branch (not on main!)
-3. Once you've made your tweaks, submit your PR and we'll review it as soon as we can.
+3. In this file, you want to add your own details about your project. Fields that contain a `?` can be skipped. Look at other fields and copy the layout!
 
-Please follow these steps to ensure the process is as smooth as possible. If you need more help, don't hesitate to ask on our [Discord Server](https://discord.gg/wNGukFdBgp).
+```
+export interface Project {
+  id: number
+  title: string
+  creators: [{
+    name: string
+    avatarURL?: string
+    contactURL?: string
+  }...]
+  description: string
+  projectURL?: string
+  media: string
+  icon?: string
+}
+```
+4. To preview your changes, run these commands on your terminal. Make sure that the terminal is in the project's root directory. A link will show up which you can use to preview the website!
+```
+$ npm install
+```
+```
+$ npm run dev
+```
+
+5. Once you've made your tweaks, commit your changes, submit your PR and we'll review it as soon as we can!
+
+If you need more help, don't hesitate to ask on our [Discord Server](https://discord.gg/wNGukFdBgp).
 
 ## Technology Stack
-Our website is built with the power of React, Styled Components, and React Router. Additionally, we auto-deploy with GitHub Pages. 
+
+Our website is built with the power of React, styled-components, and react-router. Additionally, we auto-deploy with GitHub Pages! To read about the actual front-end engineering, check the [BTS](https://projectshare.comp-soc.com/components)!
 
 ## Contact Us
-Got questions? Join the conversation on our [Discord Server](https://discord.gg/wNGukFdBgp). Our friendly admins are always ready to assist you. 
+
+Got questions? Join the conversation on our [Discord Server](https://discord.gg/wNGukFdBgp). We are always happy to help!
 
 ## License
+
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
 Remember, coding is a journey, not a destination. Let's continue to grow and learn together. Welcome to the Project Share community!
diff --git a/src/Footer/Footer.tsx b/src/Footer/Footer.tsx
@@ -8,10 +8,9 @@ const StyledFooterWrapper = styled.div`
   display: flex;
 
   height: 15vh;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 1rem;
   padding: 2rem 0;
   background-color: ${ACCENT_COLOR}09;
   font-size: 0.75rem;
@@ -24,14 +23,29 @@ const Footer = () => {
   return (
     <SketchLines top bottom margin={5000}>
       <StyledFooterWrapper>
-        <Logo size={64} />
-        {'❤️'}
-        <img
-          src="./media/logos/comp-soc.png"
-          alt="CompSoc"
-          width="100px"
-          draggable={false}
-        />
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '0.5rem',
+            alignItems: 'center',
+          }}>
+          <Logo size={64} />
+          {'❤️'}
+          <img
+            src="./media/logos/comp-soc.png"
+            alt="CompSoc"
+            width="100px"
+            draggable={false}
+          />
+        </div>
+        <span
+          style={{
+            color: 'black',
+          }}>
+          Project Share is a{' '}
+          <a href="https://comp-soc.com/special-interest-groups">CompSoc SIG</a>
+        </span>
       </StyledFooterWrapper>
     </SketchLines>
   )

diff --git a/src/Header/Links.tsx b/src/Header/Links.tsx
@@ -15,19 +15,19 @@ const Links = () => {
   return (
     <SketchLines top bottom margin={20}>
       <StyledLinksWrapper>
-        <StyledLink as={Link} to="/projects">
-          /projects
-        </StyledLink>
-        <StyledLink as={Link} to="/team">
-          /team
-        </StyledLink>
         <StyledLink
           as="a"
           href={DISCORD_INVITE_LINK}
           target="_blank"
           rel="noopener noreferrer">
           Discord
         </StyledLink>
+        <StyledLink as={Link} to="/projects">
+          /projects
+        </StyledLink>
+        {/* <StyledLink as={Link} to="/team">
+          /team
+        </StyledLink> */}
       </StyledLinksWrapper>
     </SketchLines>
   )

diff --git a/src/NextMeetup/NextMeetup.tsx b/src/NextMeetup/NextMeetup.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components'
-import { NEXT_MEETUP, SECONDARY_COLOR } from '../constants'
+import { DISCORD_INVITE_LINK, NEXT_MEETUP, SECONDARY_COLOR } from '../constants'
 import Dot from '../components/Dot'
+import BouncingEllipsis from '../components/BouncingEllipsis'
 
 const StyledWrapper = styled.div`
   position: relative;
@@ -56,6 +57,21 @@ function formatDate(date: Date): string {
 }
 
 const NextMeeting = () => {
+  if (!NEXT_MEETUP)
+    return (
+      <StyledWrapper>
+        <StyledTitle>
+          Next meet-up
+          <BouncingEllipsis />
+        </StyledTitle>
+        <StyledDetail>
+          TBC
+          <Dot />
+          Check <a href={DISCORD_INVITE_LINK}>Discord</a> soon!
+        </StyledDetail>
+      </StyledWrapper>
+    )
+
   const eventEndTime = new Date(NEXT_MEETUP.date.getTime() + 60 * 60 * 1000)
 
   const eventURL = `https://www.google.com/calendar/render?action=TEMPLATE&text=${
@@ -70,7 +86,10 @@ const NextMeeting = () => {
 
   return (
     <StyledWrapper>
-      <StyledTitle>Next meet-up</StyledTitle>
+      <StyledTitle>
+        Next meet-up
+        <BouncingEllipsis />
+      </StyledTitle>
       <StyledDetail>
         {formatDate(NEXT_MEETUP.date)}
 

diff --git a/src/Pages/Projects.tsx b/src/Pages/Projects.tsx
@@ -18,6 +18,7 @@ const Projects = () => {
         <code>/projects</code>
       </h2>
       <BackLink />
+
       <ProjectList projects={PROJECTS} />
     </StyledMain>
   )

diff --git a/src/components/BouncingEllipsis.tsx b/src/components/BouncingEllipsis.tsx
@@ -0,0 +1,39 @@
+import styled, { keyframes } from 'styled-components'
+
+const bounce = keyframes`
+    0%, 10% {
+        transform: translateY(0);
+    }
+    5% {
+        transform: translateY(-0.3em);
+    }
+`
+
+const BouncingEllipsisWrapper = styled.span`
+  display: inline-flex;
+  position: relative;
+  width: 1.5em;
+`
+
+const Dot = styled.span`
+  animation: ${bounce} 5s infinite;
+  margin: 0em;
+  &:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  &:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+`
+
+const BouncingEllipsis = () => {
+  return (
+    <BouncingEllipsisWrapper>
+      <Dot>.</Dot>
+      <Dot>.</Dot>
+      <Dot>.</Dot>
+    </BouncingEllipsisWrapper>
+  )
+}
+
+export default BouncingEllipsis
diff --git a/src/constants.ts b/src/constants.ts
@@ -4,17 +4,21 @@ export const SKETCH_COLOR = ACCENT_COLOR + '33' // slightly more transparent
 
 export const SECONDARY_COLOR = '#000000'
 
-export const NEXT_MEETUP: {
-  title: string
-  date: Date
-  location: string
-  description: string
-} = {
-  title: 'Project Share!',
-  date: new Date('2023-09-20T18:30:00'),
-  location: 'AT 2.04',
-  description: 'Bring your laptop!',
-}
+export const NEXT_MEETUP:
+  | {
+      title: string
+      date: Date
+      location: string
+      description: string
+    }
+  | undefined = undefined
+
+//   {
+//   title: 'Project Share!',
+//   date: new Date('2023-09-20T18:30:00'),
+//   location: 'AT 2.04',
+//   description: 'Bring your laptop!',
+// }
 
 export const DISCORD_INVITE_LINK = 'https://discord.gg/wNGukFdBgp'
 
@@ -31,7 +35,7 @@ export interface Project {
   description: string
   projectURL?: string
   media: string
-  icon: string | undefined
+  icon?: string
 }
 
 export const PROJECTS_SHOWN_ON_HOMEPAGE = 2