xl3ehindtim/delta-site

Delta is the Fontys ICT excellence program where students get to explore and learn in real-world projects. This website aims to promote Delta and create a portfolio for its students.

Delta Program website

Delta is the Fontys ICT excellence program where students get to explore technologies and learn while participating in real-world projects with external stakeholders. Therefore this website aims to show what Delta is about and what projects we built.

Preview.mp4

💡 Ideas

Ideas are always welcome, check out the ideas tab!

Contributors

Do you want to contribute to the project? Please check out the Contributing guide for guidelines about how to proceed or have a look at the Wiki for more information.

delta-site's Issues

Stakeholder section

Within the Delta program we work with many stakeholders. Talk to Eric and Martijn to see if this is something that could be added to show our collaboration with the working field.

Incorporate this into a swiper with autoplay.

SEO improvements

At the moment the website contains the Yoast SEO plugin. SEO has not been thoroughly investigated and is at the moment no more than a sitemap.xml generated by Yoast SEO.

Investigate if and how pages can be improved, add keywords, and in turn make Delta more known on the world wide web!

Student detail page

Currently the detail page for students does not contain any information.

There is an opportunity here. It would be nice to be able to view all the projects a student participated in while studying in the Delta program at /student/{student name}.

Requirements:

• Student name
• Participated projects based on project groups linked to projects

Scroll to top after pagination

When the user click on the pagination buttons. The user will stay at the same place.

Request: Make it so that the user will move to the top of the project cards after using the pagination buttons.

Plugins in Git

Plugins are currently committed in Git. Look into replacing this with some kind of package manager so that releases can be used for stable versions.

This also applies to the Astra theme but not the Delta child theme.

Static content

Currently the homepage, about page, and projects page feature static images which are placed in the wp-content/uploads/static folder. To change these images they have to be redeployed on the production environment.

Could this be moved to a custom post type for easy of use?

Sitemap

The sitemap currently does not contain the necessary pages.

Look into how the sitemap is being generated and add static pages + dynamic post pages like projects.

Project card title visibility

When the project contains a light image both the title and subtitle are not clearly visible. Add some sort of gradient to make the bottom part of the image darker resulting in easier readability.

Project card description length

The project card hover description should feature a small introduction. Currently it is too large.

Change this to a smaller length for all the project cards.

Increase WordPress file upload size for Docker

The development environment, aka docker, has file size issues.
When uploading a media file on WordPress, we are limited to 2MB file sizes.
When using XAMP, this wasn't an issue. We could upload 20MB files.

I speculate that WordPress calculates the volume size from Docker.
If this would be increased, it would maybe solve the issue.

Production environment

• Register a domain name.
• Arrange a PHP & MySQL server (possibly managed) with Fontys.
• Move the codebase and setup the environment.

Hero scroll indicator

At the moment it may be unclear to visitors that they should scroll down the page. Add some kind of scroll indicator.

Team semester selection improvements

The team semester selection does not feel clean, improve this by adding an animation. Take a look at how Material UI tabs do this: https://mui.com/material-ui/react-tabs/

Logo

The current Delta logo is featured in white, black, or Fontys purple. Because our program is not black and white it actually is the opposite a more colored logo could be created.

Some random inspiration, this charger contains a logo/text which contains a subtle gradient which makes it more interesting! Keep in mind this change should only be the color!

Mobile horizontal overflow

On the project detail page there is a horizontal overflow resulting in weird behaviour. This seems to be due to the Swiperjs elements. Debug this and find a solution.

Mobile Text Spacing

The spacing on Mobile is not right or not set. The text needs to be fixed, and the buttons need to have spacing in between them.

Projects pagination

The projects pagination's dynamic loading work well, however when you navigate to another page your scroll height does not reflect this pagination change. Either add page parameters which reload the page and in turn change your scroll height or scroll to the top on page change.

Adding the promotional videos

Discussed in #55

^{Originally posted by kallepronk June 21, 2024}
About 2 years ago, a few delta's made new promotional material on youtube. We could show that on the about us as well.

Student Image Text Visability

The white text on the downside of the Student Images sometimes blends with the image causing difficulty in reading the student names. This can easily be fixed, by example by using a gradient shadow on the image element.

Timeline content

The timeline features some topics like "Open Learning" which are not explained in the story text. Add this information so that visitors get a clear image of our story.

Swiperjs video support

The swiper dragging does not function as expected with HTML5 video elements.
Expected result is that when you drag the swiper horizontally scrolls which is the expected usage.

ELLIE.-.Delta.-.Google.Chrome.2024-05-31.12-17-18.mp4

Overall layout and code improvements

The website was developed over a short period of time, which resulted in some messy code. If you have nothing to do, you could improve it!

• project card include_project_card(title, subtitle, description, imageUrl, pageUrl)
• student card include_student_card(text, imageUrl, pageUrl)
• hero element include_hero(text, imageUrl)
• styled sections resulting in equal responsive margins
• move inline css to style.css
• cleanup style.css

Scroll indication mobile flicker

While on mobile the scroll indication shows a flicker after going down teleporting to the top.

Statistics

Change the statistics to correctly represent Delta.

Projects: 150+
Add a year count using JavaScript from 2005

header is blue instead of transparent

The header is blue instead of transparent, it should be corrected to fit the latest design.