Skip to content
View decoisme's full-sized avatar

Block or report decoisme

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
decoisme/README.md
# Decoisme - Premium Portfolio Website A stunning, Apple-inspired portfolio website built with Next.js 15, TypeScript, Tailwind CSS, and Supabase. Features smooth animations, clean design, and a powerful admin dashboard. ## ✨ Features ### Frontend - 🎨 **Apple-inspired Design** - Minimalist, premium aesthetic with attention to detail - 🌊 **Smooth Animations** - Framer Motion powered interactions and transitions - 🎭 **Dark Mode** - Seamless theme switching with next-themes - 📱 **Fully Responsive** - Mobile-first design that works on all devices - 🚀 **Performance Optimized** - Built with Next.js 15 App Router for optimal speed - 🎯 **Smooth Scrolling** - Lenis smooth scroll for cinematic experience ### Sections - **Hero Section** - Eye-catching introduction with animated gradients - **About Section** - Professional background with tech stack and experience timeline - **Projects Section** - Dynamic project showcase with Supabase integration - **Skills Section** - Animated skill display with progress indicators - **Contact Section** - Functional contact form with toast notifications ### Admin Dashboard - 🔐 **Secure Authentication** - Protected admin routes - 📊 **Project Management** - Full CRUD operations for portfolio projects - 📧 **Message Management** - View and manage contact form submissions - 📈 **Statistics** - Overview of projects and messages ## 🛠️ Tech Stack - **Framework:** Next.js 15 (App Router) - **Language:** TypeScript - **Styling:** Tailwind CSS - **UI Components:** shadcn/ui - **Animations:** Framer Motion - **Database:** Supabase - **Icons:** Lucide React - **Smooth Scroll:** Lenis - **Theme:** next-themes - **Notifications:** Sonner ## 🚀 Getting Started ### Prerequisites - Node.js 18+ installed - Supabase account (free tier works) - Git ### Installation 1. **Clone the repository** ```bash git clone cd decoisme ``` 2. **Install dependencies** ```bash npm install ``` 3. **Set up Supabase** a. Create a new project at [supabase.com](https://supabase.com) b. Go to SQL Editor and run the schema from `supabase-schema.sql` c. Get your project URL and anon key from Settings > API 4. **Configure environment variables** Create a `.env.local` file in the root directory: ```env NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key SUPABASE_SERVICE_ROLE_KEY=your_service_role_key # Admin credentials (for demo) ADMIN_EMAIL=admin@decoisme.com ADMIN_PASSWORD=your_secure_password ``` 5. **Run the development server** ```bash npm run dev ``` 6. **Open your browser** Navigate to [http://localhost:3000](http://localhost:3000) ## 📁 Project Structure ``` decoisme/ ├── app/ │ ├── admin/ # Admin dashboard pages │ ├── layout.tsx # Root layout with providers │ ├── page.tsx # Main portfolio page │ └── globals.css # Global styles ├── components/ │ ├── layout/ # Layout components (Navbar, Footer) │ ├── sections/ # Page sections (Hero, About, etc.) │ ├── providers/ # Context providers │ └── ui/ # Reusable UI components ├── lib/ │ ├── hooks/ # Custom React hooks │ ├── fonts.ts # Font configurations │ ├── supabase.ts # Supabase client & types │ └── utils.ts # Utility functions ├── public/ # Static assets └── supabase-schema.sql # Database schema ``` ## 🎨 Customization ### Update Personal Information 1. **Hero Section** - Edit `components/sections/hero-section.tsx` 2. **About Section** - Edit `components/sections/about-section.tsx` 3. **Contact Info** - Edit `components/sections/contact-section.tsx` ### Add Your Photo Replace the placeholder in `components/sections/hero-section.tsx` with your image: ```tsx

Your Name

``` ### Customize Colors Edit the color scheme in `app/globals.css` or use Tailwind classes directly. ### Add Projects Use the admin dashboard at `/admin` to add, edit, or delete projects dynamically. ## 🔐 Admin Dashboard 1. Navigate to `/admin` 2. Login with credentials (default: admin@decoisme.com) 3. Manage projects, view messages, and check statistics **Note:** For production, implement proper authentication using Supabase Auth. ## 📊 Supabase Setup ### Tables Created: - `projects` - Portfolio projects - `contact_messages` - Contact form submissions - `skills` - Skills and proficiencies (optional) ### Row Level Security (RLS): - Public read access for projects and skills - Authenticated write access for admin operations - Public insert for contact messages ## 🚀 Deployment ### Deploy to Vercel 1. Push your code to GitHub 2. Import project in [Vercel](https://vercel.com) 3. Add environment variables 4. Deploy! ### Environment Variables on Vercel Add all variables from `.env.local` to your Vercel project settings. ## 🎯 Performance Optimizations - ✅ Image optimization with Next.js Image component - ✅ Code splitting with App Router - ✅ Lazy loading for sections - ✅ Optimized fonts with next/font - ✅ Minimal JavaScript bundle - ✅ Server-side rendering where beneficial ## 📝 License This project is open source and available under the [MIT License](LICENSE). ## 🤝 Contributing Contributions, issues, and feature requests are welcome! ## 💬 Support For support, email hello@decoisme.com or open an issue on GitHub. ## 🙏 Acknowledgments - Design inspiration from Apple - UI components from shadcn/ui - Icons from Lucide React - Animations powered by Framer Motion --- Made with ❤️ using Next.js # decoisme

Popular repositories Loading

  1. test test Public

    HTML

  2. Akademiku2 Akademiku2 Public

    TypeScript

  3. DecoQ DecoQ Public

    Simulasi Verifikasi QRIS menggunakan Hash Validation

    TypeScript

  4. KlambineEnny KlambineEnny Public

    TypeScript

  5. decoisme decoisme Public

    TypeScript