DEV Community: Nishant Gaurav

How to Build a Portfolio Website From Scratch – A Complete Journey

Nishant Gaurav — Fri, 13 Feb 2026 20:22:01 +0000

PART 1: The Full Journey

Preview: Light Mode

1. When I Started Building My Portfolio

When I decided to build my portfolio, I knew I didn’t want it to look like a “template-based” website. I wanted my site to show who I was as a developer: organized, clean, and systematic.

So long before I wrote even one line of code, I planned:

The sections I wanted to show on my portfolio.
How do recruiters view portfolios?
What is shown at the top of my portfolio (above the fold).
How to balance content with images on my portfolio.

The final structure is as follows:

Navbar
Hero / About
Projects
Skills
Achievements & Certifications
Contact
Footer

Goal:
“If someone spends 30 seconds on my site, they should be able to identify who I am technically.”

2. Structuring the HTML Layout

I built everything using semantic HTML + Bootstrap grid.

Each section was wrapped inside a <section> tag:

<section id="about"></section>
<section id="projects"></section>
<section id="skills"></section>

This allowed me to achieve:

Anchor navigation
SEO-friendly structure
Clean scroll targeting

Layout scaffolding:

<div class="container">
  <div class="row">
    <div class="col-md-6"></div>
  </div>
</div>

Bootstrap handled responsiveness, while custom CSS handled visual identity.

3. Designing the Navbar

Since the navbar is the first thing people see when they enter the application, it was important for me to keep it in the following ways:

Fixed at the top
Minimal
Navigation-focused

Key decisions:

Logo + Name branding
Anchor navigation links
Theme toggle switch

<nav class="navbar navbar-expand-lg fixed-top custom-header">

Hover animation:

.navbar-nav .nav-link::after {
  width: 0;
  transition: width 0.3s ease;
}

4. Building the Hero / About Section

This section had to communicate:

Who I am
What I do
What I’ve achieved

Two-column layout:

<div class="row align-items-center">
  <div class="col-md-5">Image</div>
  <div class="col-md-7">Content</div>
</div>

UI decisions:

Rounded profile image
Shadow wrapper
Using GIFs for accents.
Using bold text for highlights.
Resume links

.about_img--wrapper {
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

5. Projects Section: Card Architecture

I designed projects as product tiles.

<div class="col-md-6 col-lg-4">
  <div class="project-card"></div>
</div>

Design decisions:

25px radius
Muted teal background
Hover lift

.project-card:hover {
  transform: translateY(5px);
}

6. Skills Section: Visualizing Competence

Custom progress bars:

<div class="skill-bar">
  <div class="skill-fill" style="width:85%"></div>
</div>

.skill-bar { background: #7c8d8f; }
.skill-fill { background: #1f2022; }

Split into two columns for balance.

7. Achievements & Certifications:

Image-driven proof cards.

.achievement-img-wrapper {
  height: 260px;
  overflow: hidden;
}

Hover zoom:

.achievement-card:hover .achievement-img {
  transform: scale(1.05);
}

8. Contact Section:

Two layers:
Quick Links

LinkedIn
Email
GitHub

Contact Form

<form>
  <input type="text">
  <textarea></textarea>
</form>

Hover elevation:

.contact-card:hover {
  transform: translateY(5px);
}

9. Footer: Closing Identity

Logo
Copyright
Social icons

.footer-icon:hover {
  transform: scale(1.1);
}

10. Dark & Light Mode Implementation:

Theme toggle via JS & Persistence:

toggleBtn.addEventListener("change", () => {
  body.classList.toggle("dark-mode");
});

localStorage.setItem("theme","dark");

Dark Mode

Dark-Mode Decisions:

body.dark-mode {
  background-color: #0f1115;
  color: #e6e6e6;
}

Adjustments:

Gradient cards
Teal skill bars
Dark inputs

Goal: Reduce eye strain.

11. Layout Engineering:

Bootstrap Grid → Structure
Flexbox → Alignment

display: flex;
align-items: center;

12. Color & Typography:

Palette:

#7eaeb4 Accent
#393E46 Dark
#f4f5f7 Light

.card-title {
  font-family: 'Courier New';
}

13. Responsiveness:

@media (max-width: 767px) {
  .skill-bar { height: 12px; }
}

14. Challenges:

Dark mode contrast
Card consistency
Image scaling
Navbar shadows

15. Micro-UI Decisions:

Hover lifts
Underline nav animation
Skill transitions
Icon scaling
Section accents

PART 2: What I Learned

HTML Semantics

<section id="projects"></section>

CSS Positioning

position: fixed;

Flexbox

display: flex;

Grid

<div class="row"></div>

Responsive Design

img { max-width: 100%; }

Media Queries

@media (max-width:768px) {}

Theme Switching

localStorage.setItem("theme","dark");

Clean UI Principles

Spacing
Contrast
Hierarchy

Final Reflection

This portfolio became more than a website.

It taught me:

UI architecture
Theme systems
Responsive thinking
Developer storytelling

And it represents me better than any resume.

Building Production-Grade Networking Foundations — From Single Server to Kubernetes

Nishant Gaurav — Thu, 05 Feb 2026 17:49:44 +0000

Why Networking Fundamentals Are Important for CS/IT Students

For any CS/IT student, networking is not just a subject; it is the backbone of all digital systems.

Whether you are building:

Web applications
Mobile backends
Cloud systems
Microservices architectures

Everything depends on Data Communication across networks.

Understanding networking helps in:

Debugging production issues
Designing scalable systems
Securing applications
Cracking system design & interview rounds

It bridges the gap between coding and real-world deployment.

1. Evolution of Modern Application Networking

Let’s start with the big picture — how application networking evolves as systems scale.

This visual represents the journey from:

Single Server → Multiple Servers
Security Segmentation
Internet Access
Cloud Migration
Docker Containers
Kubernetes Orchestration

It shows that networking is not static; it grows with system complexity. As applications gain users, traffic increases. This forces architectural and networking transformations.

2. Single Server Architecture — The Starting Point

Every application begins simply.

At this stage:

The entire application runs on one machine
Backend, frontend, and database share resources
Deployment and networking are straightforward

How Users Reach the Server

This introduces IP Addressing.

An IP address is a unique numeric identifier assigned to every device on a network.

Example: 203.0.109.88

When a user sends a request:

The browser contacts the IP
Request travels via routers
Server responds

This process follows the TCP/IP Model, where:

IP handles addressing
TCP ensures reliable delivery

Role of DNS

Humans cannot remember IPs, so we use DNS (Domain Name System).

DNS translates:

travelDestination.com → 203.0.109.88

It works like the internet’s phonebook.

Without DNS, accessing websites would require memorizing numeric IPs.

3. Multiple Applications on a Single Server

As applications grow, multiple services run on the same server.

Example services:

Web Application
MySQL Database
Payment Service

But they share the same IP.

So how does the server differentiate requests?

Answer: Ports

Ports are logical communication channels.

Common ports:

80 → HTTP (Web)
443 → HTTPS (Secure Web)
3306 → MySQL

Port range: 0 – 65535

Think of:

IP → Building address
Port → Apartment number

This mapping happens at the Transport Layer (OSI Model).

4. Security & Network Segmentation

Running everything together creates risk.

Problem: Single Point of Failure

If one layer is compromised:

The entire system is exposed
The database becomes vulnerable

Solution: Network Segmentation

The network is divided into subnets:

Frontend Layer (Subnet 1)
Application Layer (Subnet 2)
Database Layer (Subnet 3)

This improves:

Security
Traffic control
Fault isolation

Supporting Components

Routers

Direct traffic between subnets
Choose optimal paths

Firewalls

Control incoming/outgoing traffic

Types shown:

Host-based firewall
Network firewall

This layered approach reduces the attack surface, a key cybersecurity principle.

5. Private Servers & Internet Access (NAT)

When databases and backend services move to private networks, they lose direct internet access.

Private servers use private IP ranges like:

10.x.x.x
172.16.x.x
192.168.x.x

These are not routable on the public internet.

Solution: NAT (Network Address Translation)

NAT allows private servers to access the internet via a gateway.

Working:

Private server sends a request
NAT gateway replaces private IP with public IP
Internet responds
Gateway maps response back

Benefits:

IP conservation
Security masking
Controlled exposure

Limitations:

Bottleneck risk
Latency increase
Mapping overhead

6. Moving to the Cloud

To overcome hardware and scaling limits, systems migrate to cloud platforms.

Concept

Instead of owning servers, we rent infrastructure.

This introduces Cloud Networking.

Key Component: VPC (Virtual Private Cloud)

A VPC is an isolated virtual network inside the cloud.

It contains:

Public Subnet → Frontend
Private Subnet → App & DB

Internet Gateway

Connects VPC resources to the internet.

Benefits

High availability
Auto scaling
Managed infrastructure
Better isolation

Cloud networking still follows TCP/IP and OSI principles, just virtualized.

7. Containerization with Docker

As microservices grow, dependency management becomes complex.

Problem

Different runtimes
Library conflicts
Deployment inconsistency

Solution: Containers

A container package:

Code
Runtime
Libraries
Dependencies

So it runs identically everywhere.

Container Networking

Bridge Network (Single Host)
Containers communicate internally.

Overlay Network (Multi-Host)

Containers communicate across servers.

Port Mapping

Example:

9090 → 9090

Maps the host port to the container port so external users can access services. This integrates container workloads into existing network stacks.

8. Orchestrating with Kubernetes

When containers scale across many servers, orchestration is required.

Kubernetes automates:

Scheduling
Scaling
Auto-healing
Networking

Pods

Smallest deployable unit.

Contain one or more containers
Get temporary IPs

Problem: Pods are dynamic.

If a Pod dies, its IP changes.

Kubernetes Services

Provide:

Stable IP
Load balancing
Service discovery

They act as a bridge between users and Pods.

Ingress Controller

Handles external traffic routing.

Functions:

Single entry point
URL-based routing
Reduces need for multiple public IPs
This is production-grade networking.

Additional Networking Concepts (Value Add)

To connect everything academically:

OSI Model in This Architecture

Layer	Role Here
Application	Web apps, APIs
Transport	TCP ports
Network	IP routing
Data Link	MAC communication
Physical	Cloud/DC hardware

TCP/IP Model Mapping

Application → HTTP, DNS
Transport → TCP/UDP
Internet → IP, NAT
Network Access → Ethernet, Wi-Fi

Network Types

LAN → Within data center/VPC

MAN → City-wide ISP networks

WAN → Internet backbone

Cloud systems operate across WANs.

Conclusion

My journey through Networking Fundamentals transformed how I view software systems.

Key takeaways:

Applications start simple, but networking grows with scale
IP addressing and DNS enable global connectivity
Ports allow multi-service communication
Segmentation improves security
NAT enables controlled internet access
Cloud networking virtualizes infrastructure
Docker standardizes deployments
Kubernetes orchestrates at scale