Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shoaib-fateh/modern-portfolio21
a portfolio that blends modern web technologies: Next.js for seamless user interfaces, Three.js for engaging 3D visuals, Framer Motion for fluid animations, and TailwindCSS for stylish and responsive designs.
https://github.com/shoaib-fateh/modern-portfolio21
framer-motion nextjs tailwindcss treejs typescript
Last synced: 2 months ago
JSON representation
a portfolio that blends modern web technologies: Next.js for seamless user interfaces, Three.js for engaging 3D visuals, Framer Motion for fluid animations, and TailwindCSS for stylish and responsive designs.
- Host: GitHub
- URL: https://github.com/shoaib-fateh/modern-portfolio21
- Owner: shoaib-fateh
- Created: 2024-08-24T16:54:17.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-08-29T09:25:29.000Z (4 months ago)
- Last Synced: 2024-09-29T00:14:50.426Z (3 months ago)
- Topics: framer-motion, nextjs, tailwindcss, treejs, typescript
- Language: TypeScript
- Homepage: https://shoaibfateh21-shoaib-fatehs-projects.vercel.app
- Size: 17.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Explore My Next.js Portfolio
Dive into this project crafted with Next.js, Three.js, Framer Motion, and TailwindCSS.
## 🤖 Introduction
Welcome to a portfolio that blends modern web technologies: Next.js for seamless user interfaces, Three.js for engaging 3D visuals, Framer Motion for fluid animations, and TailwindCSS for stylish and responsive designs.
## ⚙️ Tech Stack
- **Next.js**: For server-side rendering and static site generation.
- **Three.js**: To bring 3D graphics and interactive elements.
- **Framer Motion**: For smooth and sophisticated animations.
- **Tailwind CSS**: To style the portfolio with a utility-first approach.
## 🔋 Features
- **Dynamic Hero Section**: Featuring a captivating introduction with an animated background.
- **Modern Layout**: Utilizing advanced CSS techniques for a sleek presentation.
- **Interactive 3D Elements**: Including 3D models and animations that engage users.
- **Animated Testimonials**: Showcasing feedback with eye-catching animations.
- **Professional Work Display**: Highlighting experience and achievements prominently.
- **Creative Canvas Effects**: Implementing HTML5 canvas for unique visual effects.
- **Responsive Design**: Ensuring a seamless experience across all devices.
## 🤸 Quick Start
To get started with the project locally:
**Prerequisites**
Make sure you have these installed:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/)
**Clone the Repository**
```bash
git clone https://github.com/shoaib-fateh/modern-portfolio21.git
cd portfolio
```
**Install Dependencies**
```bash
npm install
```
**Run the Project**
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) to view the live project.
## 🕸️ Code Snippets
data/index.ts
```typescript
export const navItems = [
{ name: "About", link: "#about" },
{ name: "Projects", link: "#projects" },
{ name: "Testimonials", link: "#testimonials" },
{ name: "Contact", link: "#contact" },
];
tailwind.config.ts
```
```typescript
import type { Config } from "tailwindcss";
const config: Config = {
darkMode: ["class"],
content: [
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
"./data/**/*.{ts,tsx}",
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
// Custom colors
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
// Custom animations
},
},
},
plugins: [],
};
export default config;
```