Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proposed redesign of Twitter/X open source website #274

Open
wants to merge 47 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
17ae7b5
Update README.md
leohuynguyenchi Feb 25, 2024
b510145
Update README.md
leohuynguyenchi Feb 25, 2024
cf4f28e
Merge branch 'twitter:main' into main
leohuynguyenchi Mar 26, 2024
b58249b
dep
leohuynguyenchi Apr 19, 2024
bcfab53
Merge branch 'main' of https://github.com/leohuynguyenchi/opensource-…
leohuynguyenchi Apr 19, 2024
4b75ed7
Started on Issues #4 and #5. See Issues and README.md for more info.
PipoAT Apr 20, 2024
7df7dd8
Continued work on Issue #5. See README.md for more details.
PipoAT Apr 20, 2024
50c0395
Implemented Issue #5 and Issue #8; Continued work on Issue #4
PipoAT Apr 20, 2024
299a6b6
Updated README.md with personal contributions through 4/20 at 12:00 pm
PipoAT Apr 20, 2024
0b60993
Hugo file
samwinkelmann Apr 20, 2024
cbd1ecc
front-end switch light-dark
leohuynguyenchi Apr 20, 2024
de02675
SCSS for the Switch
leohuynguyenchi Apr 21, 2024
ae9c912
Stated on Issue #9 and helped with issue #7
PipoAT Apr 21, 2024
3d56193
Implemented nav bar in Year In Review Page - Issue #6
PipoAT Apr 21, 2024
6ae0dc8
Fix footer not associate with light-dark switch
leohuynguyenchi Apr 21, 2024
47795b9
Merge pull request #11 from leohuynguyenchi/dev
leohuynguyenchi Apr 21, 2024
4852325
Fix switch bugs
leohuynguyenchi Apr 21, 2024
8f92662
Local Storage for switch
leohuynguyenchi Apr 21, 2024
43fee03
Implemented Issue #13
PipoAT Apr 21, 2024
61c0805
Centered the title/subtitles in the projects and membership pages - I…
PipoAT Apr 21, 2024
dd208df
ReadME file changes
leohuynguyenchi Apr 21, 2024
3aa55cd
Issue #9 - Starting development on displaying the project count regar…
PipoAT Apr 21, 2024
f029b36
SCSS for project cards
leohuynguyenchi Apr 21, 2024
0279e22
Merge branch 'dev' of https://github.com/leohuynguyenchi/opensource-p…
leohuynguyenchi Apr 21, 2024
ae1492c
Issue #4 - Reviewed proposed redesign, centered the text
PipoAT Apr 21, 2024
3b9a55e
border for cards
leohuynguyenchi Apr 21, 2024
fbf6204
Added personal contributions up until 4/21 at 3:00 PM
PipoAT Apr 21, 2024
0f6afb9
Border bug
leohuynguyenchi Apr 21, 2024
c5c62d9
Merge branch 'dev' of https://github.com/leohuynguyenchi/opensource-p…
leohuynguyenchi Apr 21, 2024
0e10f67
Year in review nav bar bug
leohuynguyenchi Apr 21, 2024
e27ea46
Project card visual updates
samwinkelmann Apr 21, 2024
4992c99
Merge branch 'dev' of https://github.com/leohuynguyenchi/opensource-p…
samwinkelmann Apr 21, 2024
b27f871
updated README.md with more personal contributions through 4/21 at 7 pm
PipoAT Apr 21, 2024
947fd97
Filter by Programming languages
leohuynguyenchi Apr 22, 2024
599b136
Merge branch 'dev' of https://github.com/leohuynguyenchi/opensource-p…
leohuynguyenchi Apr 22, 2024
ff49167
Layouts for filter
leohuynguyenchi Apr 22, 2024
625287c
Search bar and JS files changes
leohuynguyenchi Apr 22, 2024
6d787cd
New Home navigation link
leohuynguyenchi Apr 23, 2024
377462c
Merge pull request #23 from leohuynguyenchi/dev
leohuynguyenchi Apr 23, 2024
9f33477
Huy's reflection
leohuynguyenchi Apr 23, 2024
ae9500f
Updated README.md with personal contributions - Pipo
PipoAT Apr 23, 2024
5cbc559
Project status
leohuynguyenchi Apr 23, 2024
eb6dc86
Merge branch 'main' of https://github.com/leohuynguyenchi/opensource-…
leohuynguyenchi Apr 23, 2024
80c3767
Updated hours to reflect correct amount of time spent
PipoAT Apr 23, 2024
7d137d7
Merge branch 'main' of https://github.com/leohuynguyenchi/opensource-…
PipoAT Apr 23, 2024
abf0040
Merge branch 'main' of https://github.com/leohuynguyenchi/opensource-…
samwinkelmann Apr 23, 2024
6646af3
README updates - Sam
samwinkelmann Apr 23, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added .hugo_build.lock
Empty file.
169 changes: 168 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@

[![status: active](https://opensource.twitter.dev/status/active.svg)](https://opensource.twitter.dev/status/#active)

This is the Twitter Open Source website at https://opensource.twitter.dev.
Forked Twitter Open Source Website - Huy Nguyen

This repository contains a fork of the Twitter Open Source website (https://opensource.twitter.dev) built with Hugo. I'm collaborating with Andrew Pipo and Sam Winkelmann to work on this project to improve front-end/back-end functionalities, and animations throughout the web pages.

Current Status: Done

Forked from official repository on February 20th, 2024.

This site is built with [hugo], using a custom built-in theme. Follow the
standard instructions on the hugo website to [install] and [run] hugo. Just
Expand All @@ -16,3 +22,164 @@ data].
[install]: https://gohugo.io/getting-started/installing/
[run]: https://gohugo.io/getting-started/usage/
[update some repo data]: ./.github/workflows/update-data.yml

Disclaimer:

This is a personal fork and not an official Twitter project.


# Development/Contributions:
## Sam Winkelmann

### Project Brainstorming/Setup/Context - 6 hours
- Searching for an open source project to work on
- Understanding the project we chose
- Setting up project details on GitHub

### Environment Setup - 2 hours
- Setting up development environment (had issues)

### Home button implementation investigation - 2 hours
- Looking into the way to implement 'Home' button on top bar

### Investigation: Visual fixes accross the site - 2 hours
- Searching for alignment/visual issues on various pages, including the projects and home tabs

### Implementation of visual updates - 3 hours
- Fixing alignment/size of project cards

### Milestones/final report/final organization - 3 hours
- Finished up the organization aspects of the project

### Reflection - 2 hours
- Discussion with the group about the project/final thoughts
---
## Huy Nguyen
### Project searching: 2 hours

- Spent time in class and outside of class to search open-source project that could be good for our team to develop.

### Brainstorming: 3 hours

- Spent time brainstorm issues/tasks we could address for this open-source website.

### Local environment Set up: 1.5 hours

- Spent time installing, setting up local development environment.

- Identify which packages to install, applying YAGNI concept into practice (not to install unnecessary software/packages).

- Document installing progress in .txt file to help teammates install in the same progress.

### Development: 12 hours - Issues contributed: #1 #4 #9 #10 #12 #14 #15 #17 #18

- Handled the light-dark switch and added local storage to improve the website's appearance.

- Pair-programming with Andrew to address the navigation bar on "Year in review" page.

- Collaborated with the team to improve the outlook for Projects page including Project's search bar, project count when search bar is applied, and implement a filter board to display the specific projects that the programming language button applies.

- Collaborated with the team to implement a Home button on the navigation bar for each page.

### Reflection: 1.5 hours

- Reflecting the work that we've implemented for this project and consider any issues we could address.

- Communicate back and forth on issues we developed to make sure we handled all the problems within.

### Final Report: 4 hours

- Document everything we did including github links, tasks descriptions, build evidence, etc. for this open source projects.

- Work with team to check if there are anything we missed along the way and specify what we need to put in for each report section.

---
## Andrew T. Pipo
### Prior to 4/19/2024 - 7 hours
- Brainstorming/Researching Project Selection and Issues
- Establishing Local Environment

---

### 4/19/2024 - 4 hours

Started on Update to reflect name change - Twitter to X #5

- Started on removing all instances of Twitter and replace with X within the text - content of the main, projects, and memberships pages
- Replaced the logo with the X logo in the header of the main, projects, and memberships pages
- Removed instances of @TwitterOSS twitter handle as that is no longer an active twitter/X account
- Changed instances of Twitter to X in the footer of the main, projects, and memberships pages

Started on Projects: Improve outlook of each project section #4

- Experimented with SCSS
- Implemented background color to each Project card, discovering inconsistencies with the layout

---

### 4/20/2024 - 2 hours
Continued on Update to reflect name change - Twitter to X #5

- Replace the twitter logo with the X logo in the Year In Review Page
- Continued to remove instances of @TwitterOSS twitter handle as that is no longer an active twitter/X account
- Replaced the .ico file from the twitter logo to the X logo

Continued on Projects: Improve outlook of each project section #4

- Adjusted layout of card to be more consistent
- Applied same style to all buttons/links within card

Implemented Projects: Display project counts next to Projects title #8

- Added counted below the title of the projects page
- Implemented JavaScript to count the number of project-cards to indicate total projects on page

### 4/20/2024 - 0.5 hours
Working on Final Report

---

### 4/21/2024 - 4 hours
Started on Projects: Project counts should be updated and associate to search bar #9

- Investigated current search bar integration on Project page
- Removed original counter and replaced with existing counter that displayed the number results after a search inquiry
- Currently developing to have it display total projects if search bar query is blank

Aided in Alignment/layout adjustments throughout website #7
- Fixed the home page layout to remove unneccesary spacing and remove dead links
- Centered the title/subtitles in the projects and membership pages

Implemented Add Navigation Bar to Year in Review Page #6
- Implemented the navigation bar that is found on the other pages to be consistent with the rest of the website

Implemented Main: Improve the 3 icons in Our Philosophy section #13
- Added animations to the icons on the main page under the Philosophy section


### 4/21/2024 - 0.5 hours
Reviewed proposed changes to Projects: Improve outlook of each project section #4
- Accepted incoming changes and proposed aligning everything to the center

### 4/21/2024 - 2 hours
Worked on Final Report

---

### 4/22/2024 - 1 hour
Started Main: Implement an animation for the .svg file in Explore Project section #16
- Testing animation to ensure understanding of what file is accepting the .svg file in question
- In progress: Developing the correct animation to ensure that the content is still visible next to the image

### 4/22/2024 - 0.5 hours
Reviewed proposed changes to Projects: Filter categories by border colors #15
- Approved incoming changes with suggestion to display the programming language associated with the color/border
- Suggestion to add an "All" button to revert the filtering and to adjust the spacing and style of the button to match more of the project cards

---

### 4/23/2024 - 3 hours
Worked on Final Report
Updated Personal Contributions

---
3 changes: 2 additions & 1 deletion assets/css/_feather-core.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1873,7 +1873,8 @@ body {
line-height: var(--feather-line-height-body);
}
a {
color: var(--tw-color-text-link);
color: white;
// color: var(--tw-color-text-link);
text-decoration: none;
}
a:hover,
Expand Down
96 changes: 93 additions & 3 deletions assets/css/_main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,13 @@
--line-height-xjumbo: 2.5rem;
--font-size-mini-jumbo: 1.6rem;
--line-height-mini-jumbo: 1.8rem;
//Original Light mode colors
--primary-color: #302AE6;
--secondary-color: #536390;
--font-color: #424242;
--bg-color: #fff;
--heading-color: #292922;
--dark-color: black;
}

/* Animations */
Expand Down Expand Up @@ -47,7 +54,7 @@ html {
/* Containers */

body {
background-color: white;
// background-color: white;
display: flex;
min-height: 100vh;
flex-direction: column;
Expand All @@ -66,6 +73,8 @@ main {
padding: var(--feather-grid-mega) 0;
}
.section {
background-color: var(--bg-color);
color: var(--font-color);
padding: calc(var(--feather-grid-mega) * 2) 0;
}

Expand All @@ -85,7 +94,6 @@ nav, .header, .footer {
}

a:not(.Button) {
color: white;
text-decoration: none;

&:hover, &:active {
Expand Down Expand Up @@ -120,12 +128,84 @@ nav {
margin-right: var(--feather-grid-xxsmall);
}
}
//Dark mode
[data-theme="dark"] {
--primary-color: #9A97F3;
--secondary-color: #818cab;
--font-color: #e1e1ff;
--bg-color: #161625;
--heading-color: #818cab;
}
// Switch light-dark slider
.theme-switch-wrapper {
display: inline-block;
align-items: center;

em {
margin-left: 10px;
font-size: 1rem;
}
}
.theme-switch {
display: inline-block;
height: 25px;
position: relative;
width: 50px;
}

.theme-switch input {
display:none;
}

.slider {
margin: 8px -8px -8px 8px;
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}

.slider:before {
background-color: #fff;
bottom: 3px;
content: "";
height: 20px;
left: 3px;
position: absolute;
transition: .4s;
width: 20px;
}

input:checked + .slider {
background-color: #2196F3;
}

input:checked + .slider:before {
transform: translateX(23.5px);
}

.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

.theme-label {
padding-left: 10px;
font-family: cursive;
}

.home-link {
font-weight: var(--feather-font-weight-bold);
}

#nav-menu {
#nav-menu, #nav-menu-main {
margin: 0;
padding: 0;
li {
Expand Down Expand Up @@ -179,6 +259,8 @@ nav {
/* Headers */

.header, .footer {
background-color: var(--bg-color);
color: var(--font-color);
padding: var(--feather-grid-mega) 0;
}

Expand All @@ -192,6 +274,8 @@ nav {
}

.subtitle {
background-color: var(--bg-color);
color: var(--font-color);
margin: var(--feather-grid-large) 0;
}

Expand All @@ -209,6 +293,8 @@ nav {
}

a.foot-link {
background-color: var(--bg-color);
color: var(--font-color);
display: block;
line-height: var(--feather-line-height-xlarge);
}
Expand Down Expand Up @@ -251,15 +337,19 @@ a.foot-link {
/* Text */

body {
background-color: var(--bg-color);
// color: var(--font-color);
font-size: 0.8rem; // 16px
line-height: 1.5; // 24px
}

h2 {
color: var(--secondary-color);
margin: 1.5em 0 0.5em;
}

.center-text {
color: var(--secondary-color);
text-align: center;
}

Expand Down
Loading