Professional Portfolio Website

Personal Portfolio Website for Developers, Made with Next.js

Preview Site

Next.jsReactJavaScriptTailwind CSSPortfolioDeveloperSEO

P

r

o

f

e

s

i

o

n

a

l

P

o

r

t

f

o

l

i

o

W

e

b

s

i

t

e

Personal Portfolio Website for Developers, Made with Next.js

Project Overview

A polished, professional portfolio site tailored for developers. This project serves as a digital resume, complete with project showcases, skill highlights, and contact integrations. Emphasis on responsive design and user-friendly layout.

Key Features

Clean, modern personal portfolio layout
Fully responsive design on all devices
Project cards with hover effects and links
Integrated contact form with validation
Animated transitions with Framer Motion
Dark/light theme switcher
SEO-ready with structured metadata
Scroll-based reveal animations
Customizable skill list and bio section
Live previews and GitHub links for each project

Tech Stack

Next.js

Provides routing, SSR/SSG, and fast load times for portfolio pages.

React

Used for creating reusable components like project cards, forms, and navigation.

Tailwind CSS

Ensures consistent spacing, typography, and responsive layout.

Framer Motion

Brings UI to life with subtle animations and smooth transitions.

Hashnode & Code

React | Page.tsx


  import { useState } from 'react';

export default function PortfolioPage() {
  const [filter, setFilter] = useState('all');

  const projects = [
    { id: 1, title: "Nature Site", category: "web" },
    { id: 2, title: "Mobile App", category: "mobile" },
    { id: 3, title: "UI Design", category: "design" },
  ];

  const skills = ["HTML/CSS", "React", "Next.js", "Tailwind", "UI Design"];

  const filteredProjects = filter === 'all'
    ? projects
    : projects.filter(p => p.category === filter);

  return (
    <main className="p-6 space-y-12">
      <header className="text-center">
        <h1 className="text-4xl font-bold">OdynDev</h1>
        <p className="text-gray-600">Front-end Developer | React & Next.js</p>
      </header>

      <section>
        <h2 className="text-2xl font-semibold mb-2">Skills</h2>
        <ul className="list-disc list-inside">
          {skills.map(skill => <li key={skill}>{skill}</li>)}
        </ul>
      </section>

      <section>
        <h2 className="text-2xl font-semibold mb-2">Projects</h2>
        <div className="flex gap-2 mb-4">
          <button onClick={() => setFilter('all')} className="btn">All</button>
          <button onClick={() => setFilter('web')} className="btn">Web</button>
          <button onClick={() => setFilter('mobile')} className="btn">Mobile</button>
          <button onClick={() => setFilter('design')} className="btn">Design</button>
        </div>
        <div className="grid gap-4">
          {filteredProjects.map(project => (
            <div key={project.id} className="border p-4 rounded">
              <h3 className="font-bold">{project.title}</h3>
              <p className="text-sm text-gray-500">{project.category}</p>
            </div>
          ))}
        </div>
      </section>

      <section>
        <h2 className="text-2xl font-semibold mb-2">Contact</h2>
        <p>Email: <a href="mailto:contact@odyndev.com" className="text-blue-600">contact@odyndev.com</a></p>
      </section>

      <footer className="text-center text-gray-400">2025 OdynDev</footer>
    </main>
  );
}

Interested in This Project?

If you’re building your own portfolio or just want a behind-the-scenes look at how this one came together, let’s talk! I’d love to help or share some tips.

Nature Website Parallax