Next.jsMDXGitHub ActionsFigma

Portfolio: Full-Stack Next.js

By Taylor Segell
Picture of the author
Published on
Duration
6 months
Role
Full-Stack Developer
Atmosphere
Creative and Iterative
Technology
Next.js, MDX, Figma, Neo-Brutalism, VPS
Website Overview

Building a Bold Neo-Brutalist Next.js Website: A Fun Dive into Full-Stack Magic

Welcome to my Next.js portfolio, where web development meets unapologetic design flair! Picture this: a modern website built from scratch with a rebellious Neo-Brutalist aesthetic. It's bold, it's functional, and it packs a punch. Here's the scoop on how I tackled this project.


The Challenge: Beauty Meets Brains

The goal? Build a website that's not just functional but a jaw-dropper. I wanted to fuse cutting-edge web tech with a design that practically yells, "Look at me!" Neo-Brutalism became the perfect muse—raw, minimalistic, and bold enough to make a statement. Oh, and did I mention it also had to handle dynamic content, be super responsive, and scalable? No big deal, right?


The Plan of Attack

Here’s what went into making this beast of a website:

  • Figma: Started here with wireframes and a design system. Think bold fonts, geometric layouts, and enough contrast to wake you up in the morning.
  • Next.js: The secret weapon for fast, SEO-friendly websites. It's like the Swiss Army knife of React frameworks.
  • MDX: Markdown on steroids—perfect for content management that plays nice with React components.
  • GitHub Actions: Automated my workflows because life's too short for manual deployments.
  • VPS Hosting: Hosted on a Virtual Private Server because I like control, security, and uptime.

Execution: From Pixels to Code to Deployment

1. Design on Figma

The journey began with Figma. Imagine bold typography paired with raw, unpolished elements—because who needs frills when you're rocking Neo-Brutalism? It set the tone for the entire project.

2. Building in Next.js

With the design locked, I dove headfirst into Next.js. It's like LEGO bricks for web developers—flexible, fast, and perfect for SEO. MDX slid in like the ultimate team player, blending markdown and React like peanut butter and jelly.

3. Content Flexibility with MDX

Speaking of MDX, it became the backbone for managing content. Imagine writing blog posts with React components sprinkled in for fun. It's dynamic and user-friendly.

4. Automated Deployment with GitHub Actions

Every time I pushed updates to the main branch, GitHub Actions said, "I got this." It automated builds, tests, and deployments straight to the VPS. No hiccups, just smooth sailing.

5. Neo-Brutalism in Action

Finally, it was time to bring the design to life. Large blocky elements? Check. Monochromatic contrasts? You bet. The site feels like a daring architectural statement in digital form.


The Results: Mission Accomplished (and Then Some)

The final product? A website that's equal parts brain and beauty. With Next.js, MDX, and a sprinkle of automation magic, it's a scalable, dynamic platform that doesn't compromise on design. It’s live, and it’s loud—just the way I wanted.


What’s Next? A Sprinkle of AI Magic

The fun doesn’t stop here. Coming soon to the site:

  • AI Assistant: Imagine a chatbot that doesn’t just answer questions but learns and evolves. It’ll be like the ultimate "Ask Me Anything" companion, but smarter every time you talk to it.

Stay tuned for even more features designed to engage and dazzle!

Website Overview
Website Overview

This project exemplifies the fusion of functional web development and bold design—proving that websites can be both highly technical and visually striking at the same time.

Coming Soon

While the website is live, there are exciting features planned for future development:

  • AI Assistant: An intelligent assistant will be integrated into the website to act as an "Ask Me Anything" bot, capable of answering queries, providing insights, and offering interactive experiences for visitors. This AI assistant will continuously learn from interactions, making it smarter over time.

Stay tuned for these and more upcoming features that will enhance user engagement and make the site even more dynamic!

STAY TUNED

Are you on a mission to become a Bad Man or Women in Tech?
The best articles, links and news related to web development delivered once a week to your inbox.