Thanks to visit codestin.com
Credit goes to Github.com

Skip to content
/ simple-portfolio Public template

Simple & modern portfolio page, fully customized and lighweight

License

Notifications You must be signed in to change notification settings

wylayy/simple-portfolio

Repository files navigation

Simple Portfolio Website

A stunning, modern portfolio website built with Next.js 16, featuring advanced animations, centralized configuration, and a minimal design aesthetic. Designed for developers who want a professional presence without the hassle.

Next.js React TailwindCSS Framer Motion TypeScript

✨ Key Features

  • 🎨 Modern & Minimalist Design: Clean aesthetics with a focus on typography and whitespace.
  • ⚙️ Centralized Configuration: Manage all content (text, links, projects) from a single settings.json file.
  • ⚡ High Performance: Optimized for speed with Next.js 16, achieving 95+ Lighthouse scores.
  • 🎬 Advanced Animations: Smooth page transitions, scroll reveals, and interactive elements using Framer Motion.
  • 📱 Fully Responsive: Looks perfect on all devices, from mobile phones to large desktops.
  • 🔍 SEO Optimized: Built-in metadata management for better search engine visibility.
  • 🧩 Component-Based: Modular architecture for easy maintenance and scalability.

🛠️ Tech Stack

🚀 Deployment

The easiest way to deploy is using Vercel.

  1. Push your code to a GitHub repository.
  2. Go to Vercel and "Add New Project".
  3. Import your repository.
  4. Click Deploy.

Deploy with Vercel

🎯 Configuration

The entire content of the website is driven by the settings.json file. You don't need to touch the code to update your information!

How to Edit Content

Open settings.json and modify the values:

{
  "personal": {
    "name": "Your Name",
    "title": "Full Stack Developer",
    "email": "[email protected]",
    // ...
  },
  "social": {
    "github": "https://github.com/yourusername",
    "linkedin": "https://linkedin.com/in/yourusername"
    // ...
  },
  "projects": [
    // Add your projects here
  ]
}

Customizing Colors

To change the color theme, edit app/globals.css:

:root {
  --background: #0a0a0a;  /* Main background color */
  --foreground: #f5f5f5;  /* Main text color */
  --accent: #ffffff;      /* Accent color for highlights */
  --muted: #6b7280;       /* Muted text color */
}

📁 Project Structure

simple-portfolio/
├── app/
│   ├── components/         # UI Components (Hero, About, Projects, etc.)
│   ├── globals.css         # Global styles & theme variables
│   ├── layout.tsx          # Root layout & SEO
│   └── page.tsx            # Main entry point
├── public/                 # Static assets (images, icons)
├── settings.json           # ⚡ Main Configuration File
├── next.config.ts          # Next.js config
├── tailwind.config.ts      # Tailwind config
└── tsconfig.json           # TypeScript config

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the project
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.


Created with ❤️ by Waylay