My Blog Progress: From Simple Beginnings to an Advanced Portfolio

When I started Nikolas Dev Journey, it was a basic Next.js project with a few static pages. My goal was to document my learning as a self-taught developer transitioning from philosophy to programming. Over time, through trial, error, and a lot of learning, this blog has evolved into a sophisticated portfolio showcasing my skills.

The Beginning: A Simple Blog

My first version was minimal: a homepage, an about page, and a blog with static content. I used Next.js for its simplicity and focused on getting the basics right.

1// Very basic first version
2export default function HomePage() {
3  return (
4    <div>
5      <h1>Welcome to Nikolas Dev Journey</h1>
6      <p>Follow my programming journey!</p>
7      <nav>
8        <a href="/about">About</a>
9        <a href="/blog">Blog</a>
10        <a href="/contact">Contact</a>
11      </nav>
12    </div>
13  );
14}

• Core pages: Homepage, About, Contact, and Blog.
• Tech stack: Next.js, React, and basic CSS.
• Goal: Create a space to share my learning journey.

First Steps in Design

Early on, I adopted a dark theme to give the blog a modern, developer-friendly look. I chose the Inter font for readability and introduced Fira Code for headings to add a technical vibe.

1:root {
2  --background: #1a202c;
3  --foreground: #e2e8f0;
4  --accent: #63b3ed;
5  --font-mono: 'Fira Code', monospace;
6}
7
8body {
9  background: var(--background);
10  color: var(--foreground);
11  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
12  margin: 0;
13  line-height: 1.6;
14}
15
16.hero-title {
17  font-size: clamp(2.5rem, 8vw, 4rem);
18  font-weight: 900;
19  color: var(--foreground);
20  text-align: center;
21}
22
23.hero-button {
24  background-color: var(--accent);
25  color: white;
26  padding: 0.8rem 1.5rem;
27  border: none;
28  border-radius: 10px;
29  cursor: pointer;
30  transition: all 0.3s ease;
31}
32
33.hero-button:hover {
34  background-color: #90cdf4;
35  transform: scale(1.05);
36}

• Dark theme: Background color #1a202c with high-contrast text.
• Fonts: Inter for body, Fira Code for headings.
• Responsive design: Ensured the blog looked good on mobile and desktop.

Project Structure Evolution

As the blog grew, I organized the codebase to support new features. The current structure reflects the addition of dynamic blog posts, API routes, and reusable components.

1/app
2  /api
3    /blog
4      route.js
5  /blog
6    page.js
7    /posts
8      /how-i-built-this-blog
9        page.js
10      /my-blog-progress
11        page.js
12  /about
13    page.js
14  /contact
15    page.js
16  /projects
17    page.js
18  /components
19    Navbar.js
20    Footer.js
21    Container.js
22    CodeBlock.js
23    /animations
24      FloatingCode.js
25  globals.css
26  layout.js
27  page.js

Adding Interactive Features

To make the blog more engaging, I introduced interactive features. The biggest upgrades were category tabs, a search bar, and a featured post section.

1'use client';
2import { useState, useEffect } from 'react';
3
4export default function BlogPage() {
5  const [posts, setPosts] = useState([]);
6  const [activeTab, setActiveTab] = useState('All');
7  const [searchQuery, setSearchQuery] = useState('');
8
9  useEffect(() => {
10    async function fetchPosts() {
11      const res = await fetch('/api/blog');
12      const data = await res.json();
13      setPosts(data);
14    }
15    fetchPosts();
16  }, []);
17
18  const filteredPosts = posts
19    .filter(post => activeTab === 'All' || post.category === activeTab)
20    .filter(post =>
21      post.title.toLowerCase().includes(searchQuery.toLowerCase())
22    );
23
24  return (
25    <main>
26      <input
27        type="text"
28        placeholder="Search posts..."
29        value={searchQuery}
30        onChange={(e) => setSearchQuery(e.target.value)}
31      />
32      <div className="blog-tabs">
33        {['All', 'Python', 'JavaScript'].map(category => (
34          <button
35            key={category}
36            onClick={() => setActiveTab(category)}
37          >
38            {category}
39          </button>
40        ))}
41      </div>
42    </main>
43  );
44}

• Tabs: Filter posts by categories like "Blog Development" and "Python".
• Search: A search bar to quickly find posts by title or excerpt.
• Featured post: Highlights my best work at the top of the blog page.

Improving User Experience

User experience became a priority as the blog grew. I added animations to make transitions smoother, improved accessibility with ARIA attributes, and ensured the site was fully responsive.

• Animations: Subtle fadeInUp effects for posts and tabs.
• Accessibility: ARIA roles for screen readers.
• Responsiveness: Grid layouts adapt to mobile screens seamlessly.

Lessons Learned and Future Plans

This journey taught me more than just coding. I learned to tackle errors, organize complex codebases, and prioritize user needs. Each challenge was a chance to grow as a developer.

• Error handling: Debugging hydration errors showed me the importance of server-client consistency.
• Code organization: Reusable components and API routes made scaling easier.
• User focus: Accessibility and responsiveness are key to a great portfolio.
• Performance optimization: Every feature should enhance user experience.
• Continuous iteration: The best blogs evolve constantly.

Looking ahead, I plan to add more interactive features, a comment system for reader engagement, and possibly a light theme toggle. My goal is to keep pushing the boundaries of what this blog can do while sharing my progress.

"From a single page to a dynamic portfolio, every line of code tells the story of my growth as a developer."