Software Developer Portfolio ⚡️

A modern, clean and responsive portfolio built with Next.js 13

🚀 Personalized for Sebastian Mauricio Carabante

This is a customized version of developerFolio featuring an IT Manager & Infrastructure Expert profile. 👉 Visit my GitHub: @Carabantech

✨ Built with Next.js 13 App Router

This portfolio template uses the latest Next.js features including:

App Router for modern routing and layouts
Server Components for optimal performance
SCSS Modules for component-scoped styling
Lottie animations for engaging visuals
Responsive design for all devices

Just change src/portfolio.js to get your personal portfolio. Customize the theme by using your own color scheme in the src/styles/_globalColor.scss file.

If you'd like to contribute and make this much better for other users, have a look at Issues.

Created something awesome for your fork of the portfolio and want to share it? Feel free to open a pull request.

📂 Portfolio Sections

✔️ Summary and About me
✔️ Skills & Tech Stack
✔️ Education
✔️ Work Experience
✔️ Open Source Projects (GitHub Integration)
✔️ Big Projects
✔️ Achievements And Certifications 🏆
✔️ Blogs (Medium Integration)
✔️ Talks
✔️ Podcast
✔️ Contact Information
✔️ Twitter Timeline
✔️ GitHub Profile

To view a live example, click here.

🚀 Getting Started

Prerequisites

You'll need Git and Node.js (which comes with npm) installed on your computer.

Minimum versions required:

node >= 18.17.0
npm >= 9.0.0
git >= 2.17.0

Recommended:

Node.js 18 LTS or Node.js 20 LTS
npm 9.x or higher

Docker Support

You can also use Docker to run the project:

# Build the Docker image
docker build -t developerfolio:latest .

# Run the container
docker run -p 3000:3000 developerfolio:latest

💻 How To Use

From your command line, clone and run the project:

# Clone this repository
git clone https://github.com/Carabantech/developerFolio.git

# Go into the repository
cd developerFolio

# Setup environment variables
# For Linux/Mac
cp .env.example .env

# For Windows
copy .env.example .env

# Install dependencies
npm install

# Run the development server
npm run dev

Open http://localhost:3000 with your browser to see the result.

Other Available Commands

# Build for production
npm run build

# Start production server
npm run start

# Run linting
npm run lint

🔐 Environment Variables

This project uses environment variables for configuration. Create a .env file in the root directory based on .env.example.

Available Environment Variables

# Medium username for blog integration
MEDIUM_USERNAME=your_medium_username

# GitHub username (optional, for GitHub integration)
GITHUB_USERNAME=your_github_username

# Display GitHub data (true/false)
USE_GITHUB_DATA=true

Note: In Next.js, environment variables that need to be exposed to the browser must be prefixed with NEXT_PUBLIC_. Currently, this portfolio fetches data server-side, so the prefix is not required for these variables.

GitHub Integration

To enable GitHub integration:

Make sure .env file exists with your GITHUB_USERNAME
Set USE_GITHUB_DATA="true" in the .env file
In src/portfolio.js, set showGithubProfile to true

Note: The GitHub integration uses the public GitHub API which has rate limits. For development, a personal access token is not required, but for production deployments with frequent updates, consider using GitHub Actions (see Deployment section).

Open Source Projects Display:

Only pinned items from your GitHub profile will be shown. To pin repositories:

Go to your GitHub profile
Click "Customize your pins"
Select up to 6 repositories to display

For more details, visit the GitHub Setup Wiki.

Medium Blog Integration

To display your Medium articles:

Add your Medium username to .env:
```
MEDIUM_USERNAME=your_medium_username
```
In src/portfolio.js, set displayMediumBlogs to true

🎨 Customization

Personalize Your Portfolio Content

Edit /src/portfolio.js to customize your portfolio content:

/* Change this file to get your Personal Portfolio */

const greeting = {
  title: "Hi, I'm Sebastian",
  subTitle: emoji("IT Manager & Infrastructure Expert 🚀"),
  resumeLink: "https://your-resume-link.com"
};

const socialMediaLinks = {
  github: "https://github.com/Carabantech",
  linkedin: "https://www.linkedin.com/in/your-profile/",
  gmail: "your.email@gmail.com",
  // ... more social links
};

const skillsSection = { /* ... */ };
const techStack = { /* ... */ };
const workExperience = { /* ... */ };
const openSource = { /* ... */ };
const bigProjects = { /* ... */ };
const achievementSection = { /* ... */ };
const blogSection = { /* ... */ };
const contactInfo = { /* ... */ };
const twitterDetails = { /* ... */ };

Customize Colors and Styling

Modify the global color scheme in /src/styles/_globalColor.scss:

// Example color customization
$primary-color: #55198b;
$accent-color: #ff6b6b;
// ... more color variables

Update Page Metadata

Edit /src/app/head.jsx to update SEO metadata:

export default function Head() {
  return (
    <>
      <title>Your Name - Portfolio</title>
      <meta name="description" content="Your custom description" />
      {/* ... more meta tags */}
    </>
  )
}

Using Emojis

For adding emoji 😃 into texts in portfolio.js, use the emoji() function:

const greeting = {
  title: emoji("Hi, I'm John 👋")
};

This keeps emojis compatible across different browsers and platforms.

Customize Lottie Animations

Choose a Lottie animation from LottieFiles
Download it in JSON format
Replace the desired animation file in /src/assets/lottie/
To change animation options, edit /src/components/displayLottie/DisplayLottie.js

Refer to react-lottie docs for more configuration options.

Add Twitter Timeline

Insert your Twitter username in portfolio.js:

const twitterDetails = {
  userName: "your_twitter_username" // Don't use @ symbol
};

🚀 Deployment

Deploying to Vercel (Recommended)

The easiest way to deploy your Next.js app is to use Vercel, the platform from the creators of Next.js.

Steps:

Push your code to GitHub
Go to Vercel
Import your GitHub repository
Configure environment variables if needed
Deploy!

Vercel will automatically detect Next.js and configure the build settings.

Deploying to Netlify

You can also deploy to Netlify:

Build settings for Netlify:

Build command: npm run build
Publish directory: .next

Important: Add a netlify.toml file in the root:

[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

Deploying to GitHub Pages

For GitHub Pages deployment with Next.js:

Install the required package:
```
npm install --save-dev gh-pages
```

Update next.config.js for static export:

const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
}

Add deployment scripts to package.json:

{
  "scripts": {
    "deploy": "next build && next export && gh-pages -d out"
  }
}

Run deployment:
```
npm run deploy
```

GitHub Actions (Automated Deployment)

The project includes a GitHub Actions workflow for automated deployment.

Setup:

Enable GitHub Actions in your repository settings
Configure environment variables in GitHub Secrets:
- MEDIUM_USERNAME
- GITHUB_USERNAME

The workflow will automatically:

Deploy your site when you push to the main branch
Run weekly to update GitHub profile data
Can be triggered manually via workflow_dispatch

See .github/workflows/deploy.yml for configuration details.

Environment Variables in Production

Remember to set your environment variables in your deployment platform:

Vercel: Project Settings → Environment Variables
Netlify: Site Settings → Build & Deploy → Environment
GitHub Pages: Repository Settings → Secrets and variables → Actions

🛠️ Technologies Used

Next.js 13 - React framework with App Router
React 18 - UI library
Sass/SCSS - CSS preprocessor with modules
Lottie React - Animation library
react-easy-emoji - Emoji rendering
react-awesome-reveal - Scroll animations
ESLint - Code linting

Illustrations & Assets

UnDraw - Open-source illustrations
LottieFiles - Animation files by Oblikweare

📁 Project Structure

developerFolio/
├── public/                 # Static files (favicon, images, etc.)
├── src/
│   ├── app/               # Next.js App Router
│   │   ├── head.jsx       # Page metadata
│   │   ├── layout.jsx     # Root layout
│   │   └── page.jsx       # Home page
│   ├── assets/            # Images, fonts, animations
│   │   ├── fonts/
│   │   ├── images/
│   │   └── lottie/
│   ├── client/            # Client-side data fetching
│   ├── components/        # Reusable components
│   │   ├── button/
│   │   ├── header/
│   │   ├── footer/
│   │   ├── socialMedia/
│   │   └── ...
│   ├── containers/        # Page sections/containers
│   │   ├── greeting/
│   │   ├── skills/
│   │   ├── education/
│   │   ├── workExperience/
│   │   ├── projects/
│   │   └── ...
│   ├── contexts/          # React contexts
│   ├── styles/            # Global styles
│   │   └── _globalColor.scss
│   ├── portfolio.js       # 📝 Main content configuration
│   └── utils.js           # Utility functions
├── .env                   # Environment variables (create this)
├── .env.example           # Environment variables template
├── next.config.js         # Next.js configuration
├── jsconfig.json          # JavaScript configuration
└── package.json           # Project dependencies

🔑 Key Files to Modify

src/portfolio.js - Your portfolio content and data
src/styles/_globalColor.scss - Color theme customization
src/app/head.jsx - SEO metadata
.env - Environment variables

🤝 Contributing

Contributions are welcome! If you have suggestions for improvements or want to add new features:

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

🗺️ Roadmap

Future improvements and features being considered:

Migration to Next.js 14/15 with latest features
Integration with LinkedIn API
Dark/Light theme toggle
Blog section with MDX support
Performance optimizations
Accessibility improvements
Multi-language support

📝 License

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

💬 Support

If you have any questions or need help:

📧 Email: Contact
💼 LinkedIn: Sebastian Mauricio Carabante
🐛 Issues: GitHub Issues

⭐ Show Your Support

Give a ⭐️ if this project helped you!

Name		Name	Last commit message	Last commit date
Latest commit History 455 Commits
.github		.github
public		public
publicmaster		publicmaster
src		src
.env		.env
.env.example		.env.example
.eslintrc.json		.eslintrc.json
.gitattributes		.gitattributes
.gitignore		.gitignore
.pre-commit-config.yaml		.pre-commit-config.yaml
.prettierignore		.prettierignore
.prettierrc		.prettierrc
Dockerfile		Dockerfile
README.md		README.md
fetch.js		fetch.js
jsconfig.json		jsconfig.json
netlify.toml		netlify.toml
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

Software Developer Portfolio ⚡️

A modern, clean and responsive portfolio built with Next.js 13

🚀 Personalized for Sebastian Mauricio Carabante

✨ Built with Next.js 13 App Router

📑 Table of Contents

📂 Portfolio Sections

🚀 Getting Started

Prerequisites

Docker Support

💻 How To Use

Other Available Commands

🔐 Environment Variables

Available Environment Variables

GitHub Integration

Medium Blog Integration

🎨 Customization

Personalize Your Portfolio Content

Customize Colors and Styling

Update Page Metadata

Using Emojis

Customize Lottie Animations

Add Twitter Timeline

🚀 Deployment

Deploying to Vercel (Recommended)

Deploying to Netlify

Deploying to GitHub Pages

GitHub Actions (Automated Deployment)

Environment Variables in Production

🛠️ Technologies Used

Illustrations & Assets

📁 Project Structure

🔑 Key Files to Modify

🤝 Contributing

🗺️ Roadmap

📝 License

💬 Support

⭐ Show Your Support

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages