Profile Website banner

Profile Website

21 devlogs
22h 30m 29s

A website that stores a portfolio of the networking related things I’ve done.

This project uses AI

Used the google AI summaries for debugging.

Demo Repository

Loading README...

101zh

In an effort to write better devlogs here’s what’s been done:

  • Lab write-ups now open in a new tab
  • Make all clickable things move up and underline when hovered over
  • Make “View Repo” and “View Write-up” buttons have a larger font size
  • Refactors some animated-underline css into a separate css file
  • Removed company logos off write-ups because of trademark laws (commit link)

Here’s a link to the PR of the changes

0
101zh

Shipped this project!

Hours: 21.36
Cookies: 🍪 291
Multiplier: 13.63 cookies/hr

I created a website with that contains my various networking related labs. The hardest part was designing the homepage because everything I tried to come up didn’t look natural. I eventually arrived at what I currently have, since I liked how my labs page was setup and wondered if I could do something similar on the homepage.

101zh

Now, uses smaller image sizes for lab thumbnails, so that the loading is faster (the video with the slower loading times is the one with larger file sizes)
Additional stuff

  • Wrote README
  • Cleaned up various things to prepare to ship
0
101zh

Created a popup for when users click a lab, so they can see a description of the purpose of the lab

0
101zh

Added a small bio only when the viewport width is greater than 550px

0
101zh

Autogenerate first 3 labs on the homepage as a preview

Attachment
Attachment
Attachment
0
101zh

Outline homepage structure

Attachment
Attachment
Attachment
0
101zh

Make the title/header part of the homepage respond to media queries in css

0
101zh

Make labs page work mostly for mobile

0
101zh

Design the homepage

  • Added a background image around the title area
  • Added my profile picture
  • Added some sample bio text
Attachment
0
101zh
  • Added buttons to the labs
  • Reverted the weird offset I was doing to other lab boxes when hovering over one of the labs
  • Made the labs rise quicker and expand quicker to make that animation “pop” a bit more
0
101zh

Added a symbol next to button to get to networking portfolio

Attachment
0
101zh

Offset labs to avoid clipping when hovering over a lab

0
101zh

Use a grid to autosize the labs for different zoom sizes and aspect ratios

0
101zh

prototype homepage

Attachment
0
101zh

add a subtle pulsing animation for the buttons

0
101zh

Prototyped some cool glowy buttons!

0
101zh

Got rid of round look to the lab containers
Added CSS transitions for the lab blocks

3

Comments

Alec
Alec 3 months ago

woahhh these write ups are soo cool! are you a Cisco intern?

101zh
101zh 3 months ago

Uhhh… I happen to have a lot of access to Cisco networking equipment at my school. So, I can experiment with different network and router configurations, which is what my write ups are about.
( ^u^)

Alec
Alec 3 months ago

ohh i see

thats really cool!

101zh

Added networking labs and adjusted UI containers for labs

Attachment
0
101zh

Wrote some java script that pulls data from a JSON file to generate these “lab” boxes

Attachment
0
101zh

Prototyped the design of a grid of blocks to show the networking labs that I’ve done

Attachment
0
101zh

Outlined the website structure and added Jost* for font

Attachment
0