Achievement Section - #30
Conversation
…ned in a banner style with glowing effects. I attempted to add a glow effect along the border, which didn’t work, but I was able to make the trophy glow in a cycle using keyframes, my first time experimenting with it. I plan to implement a carousel similar to the one on the MIL website. For now, this commit establishes the basic structure of the achievements page.
shashankshaga
changed the title
|
|
Thanks for sending the image over discord, but I prefer if it is added to your PR, also make sure to assign me as a reviewer so I get notified that this PR requires review! |
DaniParr
left a comment
DaniParr
left a comment
There was a problem hiding this comment.
This is a good starting point, but I would suggest creating a separate file as its own JSX component, as well as writing a standalone CSS file.
Additionally, make sure to extract all the achievements from our website, note them in a JSON file and create a function that generates the React components after parsing the JSON file. That way when we want to add new achievements to the website, it is as easy as modifying the JSON file.
DaniParr
changed the title
|
Also why does it say NaviGator on the header, shouldn't it be SubjuGator? |
…n file that interacts with the react components to update data, updated css I created a separate JSON file to store the data, which is then fed into the Achievements.jsx component. I moved the Achievements section out of the Home page into its own component for better modularity y. Finally, I added CSS to style the section, including gradient headings, a continuous scrolling carousel, bounce animations for the achievement cards, and glow effects.
|
@shashankshaga Can I get a new screenshot of what the changes look like? |
I added a key frame bounce effect as well as a continuous motion of the banners. Also updated all the information in a json file which then using a react component updated the information into the banner. The UI looks a little unprofessional but I will make the final updates and fix that. 
|
2 participants
I attempted to add a glow effect along the border, which didn’t work, but I was able to make the trophy glow in a cycle using keyframes, my first time experimenting with it. I plan to implement a carousel similar to the one on the MIL website. For now, this commit establishes the basic structure of the achievements page.