My Portfolio
Project Overview
My portfolio is more than just a showcase; it's a dynamic space where each project showcases creativity and technical finesse. Using Next.js and Tailwind CSS, I've created visually stunning presentations and ensured an engaging user journey. Plus, you can switch between dark and light modes for a personalized browsing experience. Dive in and explore, where every project reflects my commitment to both style and functionality.
Tool I Used
Development
In developing my portfolio project using Next.js and Tailwind CSS, I embraced an iterative approach, constantly refining and enhancing the features and design elements. Leveraging the power of Next.js allowed for efficient component-based development, while Tailwind CSS facilitated a streamlined and responsive styling process. The use of these technologies not only provided a robust foundation but also allowed for seamless integration of new projects and updates, ensuring a dynamic and visually appealing portfolio.
Highlights
I crafted my portfolio with the aim of highlighting my journey in both development and design. I iteratively improved development functions and refined my designs. By dedicating time to mastering Next.js and Tailwind CSS, my intention was to not only fulfill the current purpose of the website but also to establish a foundation for future growth and enhanced interactivity.
What i learned
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { useEffect, useState, createContext, useContext } from "react";
const ThemeContext = createContext(null);
export default function ThemeContextProvider({ children }) {
const [theme, setTheme] = useState("light");
const toggleTheme = () => {
if (theme === "light") {
setTheme("dark");
window.localStorage.setItem("theme", "dark");
document.documentElement.classList.add("dark");
} else {
setTheme("light");
window.localStorage.setItem("theme", "light");
document.documentElement.classList.remove("dark");
}
};
Bright themes can be particularly challenging, especially when working in a dark room or for users with vision issues exacerbated by extreme light or dark themes. The implementation of the dark-light mode option was a crucial and highly effective aspect of this project, offering users the flexibility to choose based on their preferences and needs.