DEVLOG 10 | OPENCIRCLE

I completed a few of my TO-DOs from the prev. devlog, but the navbar one is now gonna be procrastinated until deployment!

Here are all the changes made:

• Fixed the backend column of the UI breaking in responsive view.
• Made the loading bars to cover the whole backend column and added a pulse animation to them
• Ai-generated a short JS code snippet (See AI declaration) to make the loading bar go from 0% to the desired value visually
• Added a slide-left Animate on Scroll aniamtion to the individual list items in the backend column.

DEVLOG 9 | OPENCIRCLE

In this devlog, I furnished the TECH STACK section further

Here are all the changes made:

• Improved the 3x3 tiles by resizing the app icons (Not really since I just added padding and margins to evenly fit the image )
• Now each tile looks like an individual card where the top padding is much lower than the padding in all other directions to give lotta space underneath the icon.
• Added app name underneath the icon for each card
• Added hover aniamtions, lots of em. Added hover aimations to each app icon in both columns, the 3x3 tiles indivudually and the names of the apps in the BACKEND column.
• Added glassmorphism or a glassy bg to each of the tiles and list row in both columns
• Made the loading bars taller slightly for being more visually appealing
• I added a loading % text next to each bar and AI genrated (see AI usage desc.!) some short 15 line JS code snippet to increase that number from 0 to the actual value of the loading bar
• Added some my-3 or vertical margin to each list row but that caused the whole list to overflow so I just got rid of PythonAnywhere row. Idk why it was even there lol
• Added mx-2 or horizontal margins between the BACKEND div container and each list row to give em some room to breathe
• Added border-color-changing hover aniamtions to all tiles and list rows
• Added tooltips to each of the 3x3 tiles describing the use of the corresponding technology’s use in the project

TO-DO FOR DEVLOG 10:

• The UI under TECH STACK breaks in responsive view. Fix that.
• Do something abt the responsive navbar being ugly
• Add a loading bars animation where the loading bar loads from 0% to the desired value.

DEVLOG 8 | OPENCIRCLE

In this devlog, I completed the boilerplate layout for the TECH STACK section.

I also got rid of the old AI slop completely (Earlier I had tried to generate this boilerplate layout via AI but what I got back was absolute trash) and rewrote the entire thing from Scratch.

Here are all the changes made:

• Added actual icons to the 3x3 tiles
• Resized the tiles to fit the screen perfectly on mobile as well as PC
• Changed the borders of the individual cards (Their nature, radius and color)
• Added Animate on Scroll animations to each of the 9 cards. Each card fades towards the central tile from their respective cardinal and intercardinal directions. I had earlier designed the central tile itself to have a fade-in animation to match the vibe but when it looked bad I repalced it with a zoom-out animation which looked better.
• I also structured the Backend column with the help of daisyUI List element, where I added SVG icons from SimpleIcons and DevIcons to each individual row or list item.

TO-DO FOR DEVLOG 9:

1. Fix the navbar in responsive view pls
2. Finish the TECH STACK section once and for all by adding loading bars to each list item in the BACKEND column.

DEVLOG 7 | OPENCIRCLE

I watched this amazing 5 min yt tutorial on Tailwind Grids Classes:

https://www.youtube.com/watch?v=JITwwrVSteE
My time to result ratio was way too abnormally high for this devlog. The reason is that the old TECH STACK layout looked bad so I got rid of that and used Google AI to generate some boilerplate code which was…erm…absolute garbage.
So I spent my time tryna tweak some Tailwind classes to achieve the desired UI but at the end I got certified ‘Ai Slop’.
So, I did it the old-school way and restarted the work for the section from zero.

TASKS DONE:

• Redesigned the TECH STACK section, the columns layout and the heading remains the same. Then I watched the yt video linked above
• Messed around with the grids classes and several cards and border classes in Tailwind CSS like border-color, border-dotted, border-dashed, etc. Ik these are basics but c’mon I am doing frontend web dev for the first time so there were also pretty exciting to mess around, atleast for me.
• Laid down the skeletal structure for the cards and tested the responsiveness in diff. screen sizes. It didn’t break down in responsive view :D

I also fixed a size issue in the webpage. In responsive view the WHY US section used to bleed into the TECH STACK section since I was using h-full tailwind class for the same. So, I replaced that with h-auto min-h-screen pb-12which fixed the issue. Took me a while exploring the Tailwind docs for this solution tho. pb-12 adds bottom padding to ensure theres space between the 2 sections. Noice

DEVLOG 6 | OPENCIRCLE

These are all the changes made:

1. I started working on the Tech stack section of the landing page.
2. I also added hover animations for the navbar links and sub-links
3. I also explored SimpleIcons.org site and found it to be the perfect site which had all the svg icons i needed for the tech stack section.
4. I kinda procrastinated with the navbar to-do task from the prev devlog, time to do it more
5. I semi-vibe-coded this layout (Shoutout to Google AI) using vertical daisyUI dividers where I plan to have cards on one side and loading bars typa thing on the right side.
6. Also added an AOS animation for TECH STACK text -> it slides from right to left when the user scrolls onto this section. (I didn’t use AI for this part tho)
7. Most of my time in this devlog was spent in tweaking different text colors and styles, and especially those of the navbar links and def the bg color for the TECH STACK section header. I had to ensure that it looked good in both themes -> dark and coffee. Basically trying to fix the AI slop.
8. I also installed djLint VSC extension for formatting my django HTML files

TO-DO FOR DEVLOG 7:

1. Actually fix the navbar (or maybe not? :p)
2. Finish this section as planned

EDIT: In later devlogs I have removed this AI generated layout and written my own code in its place, so I am not gonna mention this in AI Usage Description since my final project won’t have this AI generated layout.
PFA: Image of the TECH STACK section with my mouse hovering the Why Us navbar link (mouse invisible in ss), along with a messy AI-generated layout for now.

DEVLOG 5 | OpenCircle

In this devlog, I did quite a lot of things.
I got rid of the boring carousel and placed a Stats element in its place. Then I generated a short Javascript code snippet via AI to count up the values of the numbers in the stats cards from 0 to n. I also made the navbar functional, with a smooth scroll.

Here are all the changes done this devlog:

1. Removed carousel and all related JS scripts
2. Placed stats card in its place and AI-generated a short JS code snippet for counting the values on those stats cards from 0 to n.
3. Formatted the table and put in actual data instead of garbage data. Added svg icons for the stats as well as the table.
4. Added glow to the svg icons for the stats cards.
5. Resized the table to take up most of the space
6. Added certain hover animations on each table row
7. Centered all table rows and the content inside them. The class=“text-center” technique didn’t work for the svg icons so I had to manually wrap em inside center tags.
8. Added a glassy background to the right container in the Why Us section.
9. Stylised the Why Us header.
10. Imported certain font families via CDN which I then used for the Why Us header.
11. Removed the footer for now as it was a constant nuisance. Idk why I even started my UI design with the footer first lol.
12. Added a flip-right AOS animation to the right container and a slide-right to the left one.
13. The dual theme system seems to work for this UI and so does the responsive view. This time in responsive everything went as planned and there weren’t any oversized or undersized elements.

TODO for Devlog 6:

1. MAKE THE NAVBAR IN RESPONSIVE VIEW MORE VISUALLY APPEALING AND FUNCTIONAL.
2. BEGIN WORKING ON THE NEXT SECTION I.E TECH STACK.

OpenCircle | DEVLOG 4

I tried my best to improve the terrible looking UI in the landing page and after some research I discovered two hidden gems: AOS and a parallax scroll.
here are all the changes made:

1. Added bg-fixed to the bg of the hero section to enable parallax scroll in order to maintain a smooth transiton between sections while scrolling
2. Added AOS (Animate on Scroll) animations to several different sections of the site to make em more lively.
3. Added the carousel and had issues regarding its size. I got its size to work in PC view but not in responsive view.
4. With some Javascript, I added a mechanism where that annoying sharp scroll to the carousel body doesn’t happen whenever you press one of the buttons on the carousel.

For future devlogs, I aim to make the carousel work in responsive view also (rn it looks too smol) as well as if possible imrpove the UI.

DEVLOG 3 | OpenCircle

I discovered the use of dividers in Tailwind CSS in this devlog and had a hard time taming them. Some times the layout would work out in mobile responsive view while sometimes in the normal pc view only. sometimes in neither. i referred to daisyui docs and combined the usage of the carousel and table (only garbage data for now) with the help of a vertical red divider. Here are all the frontend achievements for this devlog:

1. Added scale-in animation for the navbar links and made em smooth
2. Added the second section of the landing page -> Why Us? It aims to highlight the vast differences between the principles of normal social media platofrms and OpenCircle in the eyes of a disabled person.
3. The site has so far been made responsive as seen in the attached video.

Yes ik there hasn’t been much development for this devlog and the sophisticated tailwind css classes are really to blame. And I’m lowkey dissatisfied with the webpage’s current look since the first impression the user gets is actually pretty amazing with the ai-generated background and all but as he scrolls down he finds a color gradient and the excitement dies. I tried to AI-generate another bg image which would make this transition gradual but I failed. Hope to make the UI less terrible in future devlogs.

DEVLOG 2 | OpenCircle

In this devlog, I styled the navbar and added the hero section using daisyUI (plugin for TailwindCSS). Unlike my last devlog which was mostly backend based this one along with the next few devlogs will be centred around designing and beautifying the frontend of the site.

These are all the changes done:

1. Made the OpenCircle logo in MS Paint (Not logged in total time taken though)
2. Fixed Footer
3. FIxed Navbar
4. Added a dual theme setup (Default-Dark, Alt. - Coffee)
5. Added an icon on the navbar to switch themes
6. Made the navbar sticky and sorta translucent when scrolling to other parts of the webpage.
7. Designed the Hero Section, the background image of which was generated by Nano Banana 2. Also added a “GET STARTED” button with rounded corners and a bounce animation which will lead the user to the Authentication page.
8. Since the site is built using DaisyUI, it is inherently responsive.

DEVLOG 1 | OpenCircle

NOTE- IT SEEMS LIKE THE ATTACHED IMAGE HASN’T BEEN PROCESSED PROPERLY AND ITS IMPOSSIBLE TO EDIT IT NOW. BUT DW MOST OF THE TIME SPENT WAS FOR LAYING THE BACKEND PIPELINE AND ONLY AROUND 10 MINS FOR DESIGNING THE FRONTEND, WHICH ALSO IS JUST A MERE NAVBAR AND A FOOTER.

This was my first time ever interacting with the Django Python backend interface. It took me some time navigating the files and URLs. After around an hour of work I have finally been able to design a boilerplate design where I have used DaisyUI (built on top of Tailwaind) via CDN for styling, and Python for backend. (Django) This includes the navbar and the footer HTML and thats it.
I decided it was wise to first develop a project URLs structure before setting up the url pipeline, so here you go:

- OpenCircle (Pre-built app 1)

-- / [Landing page, contains signup/login form along with other introdcutory stuff]
-- /account [Django creates account and instantly authorizes user]
-- /ui

–The actual user interface (APP 2, under /ui)

-- /ui/ [Contains recommended posts, notifications, friend requests etc.]
-- /ui/post/ [When user wants to post a image or video or blog]
-- /ui/friends/<Optional friend Name> [Shows friends list, if a specific friend is clicked then the profile of that user appears, eg /ui/friends/jared]
-- /ui/dm/<Optional username> [Lets user see all direct messages sent]