Welcome to my Portfolio App, a personal project showcasing my work, skills, and projects.
🖥 Responsive UI with Tailwind CSS
📩 Newsletter Subscription Form (React Hook Form + Zod validation)
📞 Contact Form (Similar to Newsletter Form)
🌙 Dark Mode Support
⚡ Fast Performance with Next.js
📄 Projects Showcase
🔗 Social Media Links
🎨 Typography Enhancements with @tailwindcss/typography
📝 Content Management with MDX and gray-matter package
Framework: Next.js
Styling: Tailwind CSS + @tailwindcss/typography
Form Handling: React Hook Form + Zod
UI Components: ShadCN Components
Notifications: Sonner
Content: MDX for Posts & Projects
1️⃣ Clone the Repository
git clone https://github.com/yourusername/portfolio.git cd portfolio
2️⃣ Install Dependencies
npm install
or
yarn install
3️⃣ Start the Development Server
npm run dev
or
yarn dev
Open http://localhost:3000 in your browser.
The subscription form uses react-hook-form and zod for validation.
The contact form follows the same structure as the newsletter form.
To modify validation rules, update schemas inside lib/schemas.ts.
Tailwind CSS handles the styling.
Modify global styles in styles/global.css.
All blog posts and projects are written in MDX format.
To add a new post, create a .mdx file inside the relevant content directory.
Update the socialLinks array in components/Footer.tsx.
Push your project to GitHub.
Connect the repository to Vercel.
Deploy with:
vercel
Fork the repository
Create a new branch (git checkout -b feature-name)
Commit changes (git commit -m "Add new feature")
Push to GitHub (git push origin feature-name)
Open a Pull Request 🎉
This project is MIT Licensed.
✨ Made with ❤️ by Magda