From abe93126fbf282ad0defbb2e4ef6301119180688 Mon Sep 17 00:00:00 2001 From: thanavreddy Date: Sun, 13 Jul 2025 12:52:05 +0530 Subject: [PATCH 1/3] added projects page with basic template --- about/index.html | 3 + coc/index.html | 6 + index.html | 3 + projects/index.html | 380 +++++++++++++++++++++++++++++++++++++++++++ stylesheet/style.css | 242 +++++++++++++++++++++++++++ 5 files changed, 634 insertions(+) create mode 100644 projects/index.html diff --git a/about/index.html b/about/index.html index 2a5e048..e34b710 100644 --- a/about/index.html +++ b/about/index.html @@ -52,6 +52,9 @@
  • GitHub
    • +
  • + Projects +
  • COC
    • diff --git a/coc/index.html b/coc/index.html index 12441c4..29ced1a 100644 --- a/coc/index.html +++ b/coc/index.html @@ -80,6 +80,12 @@ >GitHub +
  • + Projects +
    • +
  • + About +
  • COC
    • diff --git a/index.html b/index.html index ea8c409..a96662e 100644 --- a/index.html +++ b/index.html @@ -103,6 +103,9 @@ >GitHub +
  • + Projects +
  • About
    • diff --git a/projects/index.html b/projects/index.html new file mode 100644 index 0000000..7e533d6 --- /dev/null +++ b/projects/index.html @@ -0,0 +1,380 @@ + + + + + + + + Projects | CBIT Open Source Community + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +

    COSC Projects

    +

    Welcome to our comprehensive showcase of technical achievements! This page highlights the innovative tools and event websites created by our community members. From practical utilities that enhance productivity to engaging event platforms that bring the community together, these projects represent the collaborative spirit and technical excellence of the CBIT Open Source Community.

    +
    +
    + +
    +
    +

    Community Tools

    +

    Explore the powerful tools built by our community members to solve real-world problems and enhance productivity.

    + +
    +
    +
    + Qr Certificate Generator + +
    +
    +

    A comprehensive web application for generating verifiable certificates with QR codes. Built with Next.js and FastAPI, this tool enables bulk certificate generation with GitHub Pages integration for hosting and verification.

    + +
    +

    Key Features:

    +
      +
    • Bulk certificate generation from Excel data
      • +
    • QR code integration for certificate verification
      • +
    • GitHub Pages deployment for hosting
      • +
    • Drag-and-drop positioning for text and QR codes
      • +
    • Support for PNG/JPG templates and SVG conversion
      • +
    • Dark/Light theme support
      • +
    +
    + +
    +

    Tech Stack:

    +
    + Next.js + TypeScript + FastAPI + Python + Tailwind CSS + React Konva + AG Grid +
    +
    + +
    +

    Main Contributors:

    +
    + @muzaffarmhd + @mdimado + @gjaynir0508 +
    +
    +
    +
    +
    +
    +
    + +
    +
    +

    Event Websites Archive

    +

    A chronological showcase of event websites created by our community, highlighting the evolution of our technical skills and design aesthetics.

    + +
    +
    +
    2025
    +
    +
    +
    + HackWeek 2025 +
    +
    +

    A comprehensive week-long hackathon platform featuring multiple tracks, real-time updates, and interactive participant engagement.

    +
    +

    Tech Stack:

    +
    + Next.js + React + Vercel +
    +
    +
    +

    Contributors:

    +
    + Team 2024-25 +
    +
    +
    +
    + +
    +
    + OpenSys 2025 + +
    +
    +

    The Open-Source Symposium featuring multiple competitive events including Mazerift, Decipher, and Odyssey with interactive registrations and real-time updates.

    +
    +

    Tech Stack:

    +
    + React + Vercel + CSS3 +
    +
    +
    +

    Contributors:

    +
    + Team 2024-25 +
    +
    +
    +
    +
    +
    + +
    +
    2024
    +
    +
    +
    + CBIT Hacktoberfest 24 + + +
    +
    +

    A celebration of open source featuring a 24-hour hackathon with Preptember preparation month, mentor showcases, and comprehensive event timeline.

    +
    +

    Tech Stack:

    +
    + React + Next.js + Vercel + CSS3 +
    +
    +
    +

    Contributors:

    +
    + Team 2023-24 +
    +
    +
    +
    +
    +
    + +
    +
    2023
    +
    +
    +
    +

    OpenSys 2023

    + +
    +
    +

    The third edition of OpenSys featuring multiple technical events and competitions for the CBIT community.

    +
    +

    Tech Stack:

    +
    + HTML5 + CSS3 + JavaScript +
    +
    +
    +

    Contributors:

    +
    + Team 2022-23 +
    +
    +
    +
    +
    +
    + +
    +
    2022
    +
    +
    +
    +

    Hacktoberfest 2022

    + +
    +
    +

    CBIT's celebration of Hacktoberfest 2022 with workshops, coding challenges, and open source contributions.

    +
    +

    Tech Stack:

    +
    + HTML5 + CSS3 + JavaScript +
    +
    +
    +

    Contributors:

    +
    + Team 2021-22 +
    +
    +
    +
    +
    +
    + +
    +
    2021
    +
    +
    +
    +

    Hacktoberfest 2021

    + +
    +
    +

    Virtual Hacktoberfest celebration featuring online workshops, contribution drives, and community building events.

    +
    +

    Tech Stack:

    +
    + HTML5 + CSS3 + JavaScript +
    +
    +
    +

    Contributors:

    +
    + Team 2020-21 +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
    + + + + diff --git a/stylesheet/style.css b/stylesheet/style.css index 9b5d5a7..c823ead 100644 --- a/stylesheet/style.css +++ b/stylesheet/style.css @@ -379,4 +379,246 @@ footer a:visited { background-color: #0185c2; width: 235px; padding: 12.5px; +} + +/* Projects Page Styles */ +.section-projects, .section-archive { + margin: 2rem 0; +} + +.project.card { + background: #fff; + width : 50vw; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 1.5rem; + margin: 1rem 0; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +/* .project.card:hover { + transform: translateY(-2px); + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); +} */ +.archived_event_title{ + font-size: 1.5rem; + font-weight: 500; + text-decoration: none; +} +.card__header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; + border-bottom: 2px solid #03a9f4; + padding-bottom: 0.5rem; +} + +.card__header h3 { + margin: 0; + color: #212121; + font-size: 1.5rem; +} + +.card__links { + display: flex; + gap: 0.5rem; +} + +.card__links a { + background: #03a9f4; + color: white; + padding: 0.5rem 1rem; + border-radius: 4px; + text-decoration: none; + font-size: 0.9rem; + transition: background-color 0.2s ease; +} + +.card__links a:hover { + background: #0185c2; +} + +.card__description p { + color: #666; + line-height: 1.6; + margin-bottom: 1rem; +} + +.card__features { + margin: 1rem 0; +} + +.card__features h4, .card__tech-stack h4, .card__contributors h4 { + color: #212121; + margin: 0.5rem 0; + font-size: 1rem; +} + +.card__features ul { + list-style: none; + padding: 0; + margin: 0; +} + +.card__features li { + color: #666; + margin: 0.25rem 0; + padding-left: 1rem; + position: relative; +} + +.card__features li::before { + content: "✓"; + color: #03a9f4; + font-weight: bold; + position: absolute; + left: 0; +} + +.tech-tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin: 0.5rem 0; +} + +.tech-tag { + background: #e3f2fd; + color: #1976d2; + padding: 0.25rem 0.75rem; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 500; +} + +.contributors { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin: 0.5rem 0; +} + +.contributors a { + background: #f5f5f5; + color: #333; + padding: 0.25rem 0.75rem; + border-radius: 4px; + text-decoration: none; + font-size: 0.9rem; + transition: background-color 0.2s ease; +} + +.contributors a:hover { + background: #e0e0e0; +} + +/* Timeline Styles */ +.timeline { + position: relative; + margin: 2rem 0; +} + +.timeline::before { + content: ''; + position: absolute; + left: 2rem; + top: 0; + bottom: 0; + width: 2px; + background: #03a9f4; +} + +.timeline-item { + position: relative; + margin: 2rem 0; + padding-left: 5rem; +} + +.timeline-year { + position: absolute; + left: 0; + top: 0; + width: 4rem; + height: 4rem; + background: #03a9f4; + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 1rem; + z-index: 1; +} + +.events { + margin-left: 1rem; +} + +.event.card { + background: #fff; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + padding: 1.5rem; + margin: 1rem 0; + border-left: 4px solid #03a9f4; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.event.card:hover { + transform: translateX(5px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); +} + +.status-archived { + background: #ffa726; + color: white; + padding: 0.25rem 0.75rem; + border-radius: 4px; + font-size: 0.8rem; + font-weight: 500; +} + +/* Responsive Design */ +@media only screen and (max-width: 48em) { + .card__header { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .timeline::before { + left: 1rem; + } + + .timeline-item { + padding-left: 3rem; + } + + .timeline-year { + width: 2rem; + height: 2rem; + font-size: 0.8rem; + } + + .tech-tags, .contributors { + justify-content: flex-start; + } +} + +@media only screen and (max-width: 36em) { + .timeline-item { + padding-left: 2.5rem; + } + + .timeline-year { + width: 1.5rem; + height: 1.5rem; + font-size: 0.7rem; + } + + .events { + margin-left: 0.5rem; + } } \ No newline at end of file From 6c6fa34098ae4a307fcae689f24b8edd7e79d4a2 Mon Sep 17 00:00:00 2001 From: thanavreddy Date: Sun, 13 Jul 2025 13:08:43 +0530 Subject: [PATCH 2/3] grid changes --- projects/index.html | 786 +++++++++++++++++++++++++++---------------- stylesheet/style.css | 10 +- 2 files changed, 497 insertions(+), 299 deletions(-) diff --git a/projects/index.html b/projects/index.html index 7e533d6..285b746 100644 --- a/projects/index.html +++ b/projects/index.html @@ -1,310 +1,436 @@ - - - - + + + + - Projects | CBIT Open Source Community - + Projects | CBIT Open Source Community + - - - - - + + + + + - - - - - - + + + + + + - - - - + + + + - + - - - - - + + + + + - - - + + + +
    +
    +
    + +
    +
    +
    +
    -
    -
    - -
    - -
    + -
    -
    -
    -

    COSC Projects

    -

    Welcome to our comprehensive showcase of technical achievements! This page highlights the innovative tools and event websites created by our community members. From practical utilities that enhance productivity to engaging event platforms that bring the community together, these projects represent the collaborative spirit and technical excellence of the CBIT Open Source Community.

    -
    -
    +
    +
    +
    +

    COSC Projects

    +

    + Welcome to our comprehensive showcase of technical achievements! + This page highlights the innovative tools and event websites created + by our community members. From practical utilities that enhance + productivity to engaging event platforms that bring the community + together, these projects represent the collaborative spirit and + technical excellence of the CBIT Open Source Community. +

    +
    +
    -
    -
    -

    Community Tools

    -

    Explore the powerful tools built by our community members to solve real-world problems and enhance productivity.

    - -
    -
    -
    - Qr Certificate Generator - -
    -
    -

    A comprehensive web application for generating verifiable certificates with QR codes. Built with Next.js and FastAPI, this tool enables bulk certificate generation with GitHub Pages integration for hosting and verification.

    - -
    -

    Key Features:

    -
      -
    • Bulk certificate generation from Excel data
      • -
    • QR code integration for certificate verification
      • -
    • GitHub Pages deployment for hosting
      • -
    • Drag-and-drop positioning for text and QR codes
      • -
    • Support for PNG/JPG templates and SVG conversion
      • -
    • Dark/Light theme support
      • -
    +
    +
    +

    Community Tools

    +

    + Explore the powerful tools built by our community members to solve + real-world problems and enhance productivity. +

    + +
    +
    +
    + Qr Certificate Generator
    +
    +

    + A comprehensive web application for generating verifiable + certificates with QR codes. Built with Next.js and FastAPI, + this tool enables bulk certificate generation with GitHub + Pages integration for hosting and verification. +

    -
    -

    Tech Stack:

    -
    - Next.js - TypeScript - FastAPI - Python - Tailwind CSS - React Konva - AG Grid +
    +

    Key Features:

    +
      +
    • Bulk certificate generation from Excel data
      • +
    • QR code integration for certificate verification
      • +
    • GitHub Pages deployment for hosting
      • +
    • Drag-and-drop positioning for text and QR codes
      • +
    • Support for PNG/JPG templates and SVG conversion
      • +
    • Dark/Light theme support
      • +
    +
    + +
    +

    Tech Stack:

    +
    + Next.js + TypeScript + FastAPI + Python + Tailwind CSS + React Konva + AG Grid +
    -
    -
    -

    Main Contributors:

    -
    - @muzaffarmhd - @mdimado - @gjaynir0508 +
    +

    Main Contributors:

    +
    + @muzaffarmhd + @mdimado + @gjaynir0508 +
    -
    -
    +
    -
    -
    -

    Event Websites Archive

    -

    A chronological showcase of event websites created by our community, highlighting the evolution of our technical skills and design aesthetics.

    - -
    -
    -
    2025
    -
    -
    -
    - HackWeek 2025 -
    -
    -

    A comprehensive week-long hackathon platform featuring multiple tracks, real-time updates, and interactive participant engagement.

    -
    -

    Tech Stack:

    -
    - Next.js - React - Vercel -
    +
    +
    +

    Event Websites Archive

    +

    + A chronological showcase of event websites created by our community, + highlighting the evolution of our technical skills and design + aesthetics. +

    + +
    +
    +
    2025
    +
    +
    +
    + HackWeek 2025
    -
    -

    Contributors:

    -
    - Team 2024-25 +
    +

    + A comprehensive week-long hackathon platform featuring + multiple tracks, real-time updates, and interactive + participant engagement. +

    +
    +

    Tech Stack:

    +
    + Next.js + React + Vercel +
    +
    +
    +

    Contributors:

    +
    + Team 2024-25 +
    -
    -
    -
    - OpenSys 2025 - -
    -
    -

    The Open-Source Symposium featuring multiple competitive events including Mazerift, Decipher, and Odyssey with interactive registrations and real-time updates.

    -
    -

    Tech Stack:

    -
    - React - Vercel - CSS3 -
    -
    -

    Contributors:

    -
    - Team 2024-25 +
    +

    + The Open-Source Symposium featuring multiple competitive + events including Mazerift, Decipher, and Odyssey with + interactive registrations and real-time updates. +

    +
    +

    Tech Stack:

    +
    + React + Vercel + CSS3 +
    +
    +
    +

    Contributors:

    +
    + Team 2024-25 +
    -
    -
    -
    2024
    -
    -
    -
    - CBIT Hacktoberfest 24 +
    +
    2024
    +
    +
    +
    + CBIT Hacktoberfest 24 - -
    -
    -

    A celebration of open source featuring a 24-hour hackathon with Preptember preparation month, mentor showcases, and comprehensive event timeline.

    -
    -

    Tech Stack:

    -
    - React - Next.js - Vercel - CSS3 -
    -
    -

    Contributors:

    -
    - Team 2023-24 +
    +

    + A celebration of open source featuring a 24-hour hackathon + with Preptember preparation month, mentor showcases, and + comprehensive event timeline. +

    +
    +

    Tech Stack:

    +
    + React + Next.js + Vercel + CSS3 +
    +
    +
    +

    Contributors:

    +
    + Team 2023-24 +
    -
    -
    -
    2023
    -
    -
    -
    -

    OpenSys 2023

    - -
    -
    -

    The third edition of OpenSys featuring multiple technical events and competitions for the CBIT community.

    -
    -

    Tech Stack:

    -
    - HTML5 - CSS3 - JavaScript -
    -
    -

    Contributors:

    -
    - Team 2022-23 +
    +

    + The third edition of OpenSys featuring multiple technical + events and competitions for the CBIT community. +

    +
    +

    Tech Stack:

    +
    + HTML5 + CSS3 + JavaScript +
    +
    +
    +

    Contributors:

    +
    + Team 2022-23 +
    -
    -
    -
    2022
    -
    -
    -
    -

    Hacktoberfest 2022

    - -
    -
    -

    CBIT's celebration of Hacktoberfest 2022 with workshops, coding challenges, and open source contributions.

    -
    -

    Tech Stack:

    -
    - HTML5 - CSS3 - JavaScript -
    -
    -

    Contributors:

    -
    - Team 2021-22 +
    +

    + CBIT's celebration of Hacktoberfest 2022 with workshops, + coding challenges, and open source contributions. +

    +
    +

    Tech Stack:

    +
    + HTML5 + CSS3 + JavaScript +
    +
    +
    +

    Contributors:

    +
    + Team 2021-22 +
    -
    -
    -
    2021
    -
    -
    -
    -

    Hacktoberfest 2021

    - -
    -
    -

    Virtual Hacktoberfest celebration featuring online workshops, contribution drives, and community building events.

    -
    -

    Tech Stack:

    -
    - HTML5 - CSS3 - JavaScript -
    -
    -

    Contributors:

    -
    - Team 2020-21 +
    +

    + Virtual Hacktoberfest celebration featuring online + workshops, contribution drives, and community building + events. +

    +
    +

    Tech Stack:

    +
    + HTML5 + CSS3 + JavaScript +
    +
    +
    +

    Contributors:

    +
    + Team 2020-21 +
    @@ -312,69 +438,133 @@

    Contributors:

    -
    -
    +
    - - -
    + + +
    - + diff --git a/stylesheet/style.css b/stylesheet/style.css index c823ead..4b2ef9c 100644 --- a/stylesheet/style.css +++ b/stylesheet/style.css @@ -382,13 +382,21 @@ footer a:visited { } /* Projects Page Styles */ +.project_cards { + width: 100%; + display: grid; + /* grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); */ + grid-gap: 1em; + gap: 1em; + align-items: start; +} .section-projects, .section-archive { margin: 2rem 0; } .project.card { background: #fff; - width : 50vw; + max-width: 50rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 1.5rem; From 307b20f2af27007d431854b1867903f0c7890cc8 Mon Sep 17 00:00:00 2001 From: thanavreddy Date: Sun, 13 Jul 2025 15:08:08 +0530 Subject: [PATCH 3/3] removed blue line in about cards,hover animations of event cards --- projects/index.html | 38 ++++++++++++++++++++++++++++---------- stylesheet/style.css | 15 +++++++++++---- 2 files changed, 39 insertions(+), 14 deletions(-) diff --git a/projects/index.html b/projects/index.html index 285b746..5f2abf1 100644 --- a/projects/index.html +++ b/projects/index.html @@ -136,7 +136,7 @@

    Community Tools

    -
    +
    Event Websites Archive
    2025
    -
    +
    Contributors:
    -
    +
    Contributors:
    2024
    -
    +
    Contributors:
    2023
    -
    -

    OpenSys 2023

    +
    + OpenSys 2023 @@ -372,8 +378,14 @@

    Contributors:

    2022
    -
    -

    Hacktoberfest 2022

    +
    + Hacktoberfest 2022 @@ -406,8 +418,14 @@

    Contributors:

    2021
    -
    -

    Hacktoberfest 2021

    +
    + Hacktoberfest 2021 diff --git a/stylesheet/style.css b/stylesheet/style.css index 4b2ef9c..1f75af8 100644 --- a/stylesheet/style.css +++ b/stylesheet/style.css @@ -393,7 +393,14 @@ footer a:visited { .section-projects, .section-archive { margin: 2rem 0; } - +.project_card__header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; + border-bottom: 2px solid #03a9f4; + padding-bottom: 0.5rem; +} .project.card { background: #fff; max-width: 50rem; @@ -418,7 +425,7 @@ footer a:visited { justify-content: space-between; align-items: center; margin-bottom: 1rem; - border-bottom: 2px solid #03a9f4; + /* border-bottom: 2px solid #03a9f4; */ padding-bottom: 0.5rem; } @@ -574,10 +581,10 @@ footer a:visited { transition: transform 0.2s ease, box-shadow 0.2s ease; } -.event.card:hover { +/* .event.card:hover { transform: translateX(5px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); -} +} */ .status-archived { background: #ffa726;