Here's a detailed documentation for your Next.js portfolio project to include in the README file:
This is the repository for my personal portfolio website, developed using Next.js along with SCSS for styling. The portfolio showcases my work, skills, and contact information.
This portfolio site is a representation of my skills, projects, and experience in web development and computer science. It is designed to be fast, responsive, and fully optimized for SEO, ensuring a smooth user experience on both desktop and mobile devices.
- Responsive Design: Fully responsive and mobile-friendly layout.
- Dynamic Content: Dynamically loaded content for projects and skills.
- Fast Loading: Optimized performance using Next.js static generation (SSG) and server-side rendering (SSR).
- SCSS Styling: The project uses SCSS to manage the styling with reusable variables and mixins.
- SEO Optimized: Each page has meta tags and structured data to improve search engine rankings.
- Dark Mode Support: The site supports a dark mode to enhance user experience during nighttime browsing.
- Easy Deployment: Deployed using Vercel for continuous deployment and seamless integration.
- Frontend: Next.js - React-based framework with server-side rendering and static site generation.
- Styling: SCSS - Syntactically Awesome Style Sheets for easier and maintainable CSS.
- Deployment: Vercel - Hosting and continuous deployment for Next.js projects.
- Icons: Font Awesome for vector icons and social media icons.
To get a local copy of this project up and running, follow these steps:
-
Clone the repository:
git clone https://github.com/mugunth140/portfolio.git cd your-portfolio-repo -
Install the dependencies:
npm install
To start the development server:
npm run devThis will run the app in development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits, and you will also see linting errors in the console.
To build the project for production:
npm run buildThis creates an optimized production build, which can be previewed by running:
npm start├── components # Reusable UI components
├── pages # Next.js pages
│ ├── _app.js # Global Next.js app settings
│ ├── index.js # Homepage
│ └── [page].js # Other pages like about, projects, contact
├── public # Static files like images, fonts
├── styles # SCSS stylesheets
│ ├── components # Component-specific styles
│ ├── globals.scss # Global styles and resets
│ └── variables.scss # SCSS variables and mixins
├── .gitignore # Git ignore file
└── package.json # Node.js dependencies and scriptsThis project uses SCSS for styling, organized in a modular way for maintainability:
- Global Styles: Defined in
globals.scss, including base styles, typography, and resets. - Variables and Mixins: Stored in
variables.scssfor easy management of theme-related settings like colors and typography. - Component Styles: Each component has its own SCSS file to scope styles and avoid conflicts.
To add a new component style, simply create a new SCSS file in the styles/components directory and import it in the corresponding React component.
// Example: styles/components/Header.scss
.header {
background-color: $primary-color;
padding: 20px;
}Then, import it in the component:
import '../styles/components/Header.scss';The project is hosted on Vercel for continuous integration and deployment. The setup is seamless with Next.js as Vercel offers one-click deployment for this framework.
- Connect your GitHub repository to Vercel.
- Every push to the
mainbranch will trigger an automatic deployment. - Optionally, you can create environment variables on Vercel for things like API keys if required.
If you have any questions or suggestions, feel free to reach out:
- Website: mugunth.me
- Email: [email protected]
- GitHub: github.com/mugunth140