├── .eslintrc.json ├── .gitignore ├── README.md ├── components.json ├── next.config.mjs ├── package.json ├── pnpm-lock.yaml ├── postcss.config.mjs ├── public ├── assets │ ├── logo.png │ ├── profile.jpg │ ├── project_1.jpeg │ ├── project_2.jpeg │ ├── project_3.jpeg │ ├── testimonial_1_avatar.jpg │ └── testimonial_2_avatar.jpg ├── data.json ├── next.svg └── vercel.svg ├── src ├── app │ ├── blogs │ │ ├── how_the_blog_feature_works │ │ │ └── page.mdx │ │ ├── layout.tsx │ │ └── welcome_to_logsfolio │ │ │ └── page.mdx │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ └── page.tsx ├── components │ └── ui │ │ ├── avatar.tsx │ │ ├── badge.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── footer.tsx │ │ ├── navbar.tsx │ │ ├── sheet.tsx │ │ └── themeToggler.tsx ├── lib │ ├── serverUtils.ts │ └── utils.ts ├── mdx-components.tsx └── types │ ├── blog.ts │ └── data.ts ├── tailwind.config.ts └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Developer Portfolio Template 2 | 3 | Welcome to the Developer Portfolio Template! This open-source project allows you to quickly set up a personal portfolio website with minimal effort. The main data is sourced from a JSON file, making it easy to customize and update. 4 | 5 | ## Getting Started 6 | 7 | ### Prerequisites 8 | 9 | Ensure you have the following installed on your machine: 10 | 11 | - Node.js 12 | - npm or yarn or pnpm 13 | - Git 14 | 15 | ### Installation 16 | 17 | 1. **Clone the repository** 18 | 19 | ```sh 20 | git clone https://github.com/ariflogs/devfolio.git 21 | cd devfolio 22 | ``` 23 | 24 | 2. **Install dependencies** 25 | 26 | ```sh 27 | npm i pnpm -g 28 | pnpm install 29 | ``` 30 | 31 | 32 | 3. **Run the development server** 33 | 34 | ```sh 35 | pnpm run dev 36 | ``` 37 | 38 | Open http://localhost:3000 with your browser to see the result. 39 | 40 | 41 | ### Customization 42 | 43 | 1. **Update data.json** 44 | 45 | The main data source for the portfolio is a JSON file located at ***public/data.json***. Edit this file to reflect your personal information, skills, experience, projects, and other sections. 46 | 47 | 48 | 2. **Styling** 49 | 50 | Tailwind CSS is used for styling. You can customize the styles in the tailwind.config.js file and add your own styles in styles/globals.css. 51 | 52 | ### Deployment 53 | 54 | You can deploy your Next.js application to various hosting platforms such as Vercel, Netlify, or any platform that supports Node.js applications. 55 | 56 | 57 | ## Contributing 58 | Contributions are welcome! If you have any improvements or suggestions, please create a pull request or open an issue. 59 | 60 | ## License 61 | This project is licensed under the MIT License. 62 | 63 | --- 64 | 65 | Happy coding! If you have any questions, feel free to open an issue or [reach out](https://twitter.com/ariflogs). 66 | 67 | Buy Me A Coffee 68 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "src/app/globals.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | import withMDX from '@next/mdx' 2 | 3 | /** @type {import('next').NextConfig} */ 4 | const nextConfig = { 5 | pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'], 6 | }; 7 | 8 | export default withMDX()(nextConfig) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "devfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@mdx-js/loader": "^3.0.1", 13 | "@mdx-js/react": "^3.0.1", 14 | "@next/mdx": "^14.2.4", 15 | "@radix-ui/react-avatar": "^1.0.4", 16 | "@radix-ui/react-dialog": "^1.0.5", 17 | "@radix-ui/react-icons": "^1.3.0", 18 | "@radix-ui/react-slot": "^1.0.2", 19 | "@types/mdx": "^2.0.13", 20 | "class-variance-authority": "^0.7.0", 21 | "clsx": "^2.1.1", 22 | "lucide-react": "^0.383.0", 23 | "next": "14.2.3", 24 | "react": "^18", 25 | "react-dom": "^18", 26 | "tailwind-merge": "^2.3.0", 27 | "tailwindcss-animate": "^1.0.7" 28 | }, 29 | "devDependencies": { 30 | "@types/node": "^20", 31 | "@types/react": "^18", 32 | "@types/react-dom": "^18", 33 | "eslint": "^8", 34 | "eslint-config-next": "14.2.3", 35 | "postcss": "^8", 36 | "tailwindcss": "^3.4.1", 37 | "typescript": "^5" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /public/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Logging-Stuff/logsfolio/3b42fd7b29dfef622ec82fd714a66e0e89c5d4ec/public/assets/logo.png -------------------------------------------------------------------------------- /public/assets/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Logging-Stuff/logsfolio/3b42fd7b29dfef622ec82fd714a66e0e89c5d4ec/public/assets/profile.jpg -------------------------------------------------------------------------------- /public/assets/project_1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Logging-Stuff/logsfolio/3b42fd7b29dfef622ec82fd714a66e0e89c5d4ec/public/assets/project_1.jpeg -------------------------------------------------------------------------------- /public/assets/project_2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Logging-Stuff/logsfolio/3b42fd7b29dfef622ec82fd714a66e0e89c5d4ec/public/assets/project_2.jpeg -------------------------------------------------------------------------------- /public/assets/project_3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Logging-Stuff/logsfolio/3b42fd7b29dfef622ec82fd714a66e0e89c5d4ec/public/assets/project_3.jpeg -------------------------------------------------------------------------------- /public/assets/testimonial_1_avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Logging-Stuff/logsfolio/3b42fd7b29dfef622ec82fd714a66e0e89c5d4ec/public/assets/testimonial_1_avatar.jpg -------------------------------------------------------------------------------- /public/assets/testimonial_2_avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Logging-Stuff/logsfolio/3b42fd7b29dfef622ec82fd714a66e0e89c5d4ec/public/assets/testimonial_2_avatar.jpg -------------------------------------------------------------------------------- /public/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "visual": { 3 | "navbar": { 4 | "links": [ 5 | { 6 | "label": "Experience", 7 | "path": "#experience" 8 | }, 9 | { 10 | "label": "Projects", 11 | "path": "#projects" 12 | }, 13 | { 14 | "label": "Education", 15 | "path": "#education" 16 | }, 17 | { 18 | "label": "Testimonials", 19 | "path": "#testimonials" 20 | }, 21 | { 22 | "label": "Blogs", 23 | "path": "#blogs" 24 | } 25 | ] 26 | }, 27 | "home": { 28 | "sections": { 29 | "banner": true, 30 | "experience": true, 31 | "project": true, 32 | "education": true, 33 | "testimonial": true 34 | } 35 | } 36 | }, 37 | "personalInfo": { 38 | "name": "Arif Hossain", 39 | "title": "Full Stack Developer", 40 | "location": "Dhaka, Bangladesh", 41 | "bio": "I am a passionate full-stack developer with a strong background in building modern, scalable web applications. Lets collaborate andbring your ideas to life." 42 | }, 43 | "contactInfo": { 44 | "email": "devarifhossain@gmail.com", 45 | "phone": "123-456-7890", 46 | "linkedin": "https://www.linkedin.com/in/ariflogs/", 47 | "github": "https://github.com/ariflogs", 48 | "twitter": "https://twitter.com/ariflogs", 49 | "website": "https://johndoe.dev" 50 | }, 51 | "skills": { 52 | "languages": ["JavaScript", "Python", "Java", "C++"], 53 | "frameworks": ["React", "Node.js", "Express", "Django", "Spring Boot"], 54 | "databases": ["MySQL", "MongoDB", "PostgreSQL"], 55 | "tools": ["Git", "Docker", "Kubernetes", "Jenkins", "AWS", "GCP"] 56 | }, 57 | "projects": [ 58 | { 59 | "id": "1", 60 | "title": "Makers Tracker", 61 | "description": "A project goal tracking tool for professionals. It let's you create project, assign goals and generate analytics to track progress", 62 | "technologies": ["Typescript", "Next.js", "TailwindCSS", "MySQL"], 63 | "live_url": "https://makerstracker.com", 64 | "code_repo_url": "https://makerstracker.com", 65 | "cover": "/assets/project_1.jpeg" 66 | }, 67 | { 68 | "id": "2", 69 | "title": "Pricing Bees", 70 | "description": "A no-code pricing page builder. Build professional-looking pricing pages, customize looks, and get detailed analytics to optimize your pricing strategy.", 71 | "technologies": ["Typescript", "Next.js", "Shadcn/ui", "Convex"], 72 | "live_url": "https://pricingbees.com", 73 | "code_repo_url": "https://pricingbees.com", 74 | "cover": "/assets/project_2.jpeg" 75 | }, 76 | { 77 | "id": "3", 78 | "title": "Indie Hustles", 79 | "description": "A listing site for Indie hackers to promote their products", 80 | "technologies": ["Typescript", "Next.js", "TailwindCSS", "Airtable"], 81 | "live_url": "https://indiehustles.com", 82 | "code_repo_url": "https://indiehustles.com", 83 | "cover": "/assets/project_3.jpeg" 84 | } 85 | ], 86 | "workExperience": [ 87 | { 88 | "id": "1", 89 | "company": "Tech Corp", 90 | "companyWebsite": "https://example.com", 91 | "role": "Senior Full Stack Developer", 92 | "startDate": "Jan 2020", 93 | "endDate": "Present", 94 | "technologies": ["Socket.io", "Node.js", "Express", "React"], 95 | "keyResponsibilities": [ 96 | "Led a team of developers to create scalable web applications.", 97 | "Implemented RESTful and GraphQL APIs using Node.js and Express.", 98 | "Developed front-end applications using React and Next.js.", 99 | "Integrated third-party services and APIs to enhance application functionality.", 100 | "Mentored junior developers and conducted code reviews." 101 | ] 102 | }, 103 | { 104 | "id": "2", 105 | "company": "Web Solutions", 106 | "companyWebsite": "https://example.com", 107 | "role": "Full Stack Developer", 108 | "startDate": "Jun 2017", 109 | "endDate": "Dec 2019", 110 | "technologies": ["MongoDB", "Express", "React", "Node.js"], 111 | "keyResponsibilities": [ 112 | "Designed and developed web applications using JavaScript and React.", 113 | "Built and maintained server-side APIs with Node.js and Express.", 114 | "Collaborated with cross-functional teams to deliver high-quality products.", 115 | "Ensured applications are responsive and performant.", 116 | "Participated in Agile ceremonies and contributed to project planning." 117 | ] 118 | } 119 | ], 120 | "education": [ 121 | { 122 | "id": "1", 123 | "institution": "Coursera", 124 | "degree": "Full Stack Web Development with React", 125 | "description": "Completed a Coursera specialization that focused on building full-stack web applications using React, Node.js, Express, and MongoDB. Learned best practices for designing and implementing responsive, scalable, and secure web applications.", 126 | "startDate": "Sep 2013", 127 | "endDate": "May 2017" 128 | }, 129 | { 130 | "id": "2", 131 | "institution": "University of California, Berkeley", 132 | "degree": "Bachelor of Science in Computer Science", 133 | "description": "Completed a comprehensive curriculum in computer science, including courses in data structures, algorithms, software engineering, and artificial intelligence. Worked on several projects, including a web application for managing student organizations and a mobile app for tracking fitness activities.", 134 | "startDate": "Sep 2013", 135 | "endDate": "May 2017" 136 | } 137 | ], 138 | "testimonials": [ 139 | { 140 | "id": "1", 141 | "name": "Jane Smith", 142 | "avatar": "/assets/testimonial_1_avatar.jpg", 143 | "title": "Project Manager", 144 | "company": "Tech Solutions Inc.", 145 | "feedback": "John is a fantastic developer who consistently delivers high-quality work. His ability to solve complex problems is impressive." 146 | }, 147 | { 148 | "id": "2", 149 | "name": "Mike Johnson", 150 | "avatar": "/assets/testimonial_2_avatar.jpg", 151 | "title": "CEO", 152 | "company": "Web Innovators LLC", 153 | "feedback": "John is a highly skilled developer who brings a lot of value to our projects. His expertise in full stack development is top-notch." 154 | } 155 | ] 156 | } 157 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/blogs/how_the_blog_feature_works/page.mdx: -------------------------------------------------------------------------------- 1 | export const metadata = { 2 | title: "How the Blog Feature Work...", 3 | description: 4 | "Learn how to use MDX and NextJS to add static blogs in your website", 5 | isPublished: true, 6 | slug: "welcome_to_logsfolio", 7 | publishDate: "2nd Jul, 2024", 8 | }; 9 | 10 |
11 | 12 | # How the Blog Feature Work... 13 | 14 |
15 |
16 | 26 |
27 |
28 | -------------------------------------------------------------------------------- /src/app/blogs/layout.tsx: -------------------------------------------------------------------------------- 1 | import { NextRequest } from "next/server"; 2 | 3 | export default function BlogLayout({ 4 | children, 5 | params, 6 | }: Readonly<{ 7 | children: React.ReactNode; 8 | params: NextRequest; 9 | }>) { 10 | return
{children}
; 11 | } 12 | -------------------------------------------------------------------------------- /src/app/blogs/welcome_to_logsfolio/page.mdx: -------------------------------------------------------------------------------- 1 | export const metadata = { 2 | title: "Welcome to LogsFolio Website! 🙌", 3 | description: 4 | "Although there are many open-source portfolio websites out there, but most of them are hard to customize! I created Logsfolio solves if for you.", 5 | isPublished: true, 6 | slug: "welcome_to_logsfolio", 7 | publishDate: "2nd Jul, 2024", 8 | }; 9 | 10 |
11 | 12 | # Welcome to LogsFolio Website! 🙌 13 | 14 |
15 |
16 | 26 |
27 |
28 | 29 | This open-source project allows you to quickly set up a personal portfolio website with minimal effort. The main data is sourced from a JSON file, making it easy to customize and update. 30 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Logging-Stuff/logsfolio/3b42fd7b29dfef622ec82fd714a66e0e89c5d4ec/src/app/favicon.ico -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | html { 6 | scroll-behavior: smooth; 7 | } 8 | 9 | @layer base { 10 | :root { 11 | --background: 0 0% 100%; 12 | --foreground: 224 71.4% 4.1%; 13 | --card: 0 0% 100%; 14 | --card-foreground: 224 71.4% 4.1%; 15 | --popover: 0 0% 100%; 16 | --popover-foreground: 224 71.4% 4.1%; 17 | --primary: 262.1 83.3% 57.8%; 18 | --primary-foreground: 210 20% 98%; 19 | --secondary: 220 14.3% 95.9%; 20 | --secondary-foreground: 220.9 39.3% 11%; 21 | --muted: 220 14.3% 95.9%; 22 | --muted-foreground: 220 8.9% 46.1%; 23 | --accent: 220 14.3% 95.9%; 24 | --accent-foreground: 220.9 39.3% 11%; 25 | --destructive: 0 84.2% 60.2%; 26 | --destructive-foreground: 210 20% 98%; 27 | --border: 220 13% 91%; 28 | --input: 220 13% 91%; 29 | --ring: 262.1 83.3% 57.8%; 30 | --radius: 0.5rem; 31 | } 32 | 33 | .dark { 34 | --background: 224 71.4% 4.1%; 35 | --foreground: 210 20% 98%; 36 | --card: 224 71.4% 4.1%; 37 | --card-foreground: 210 20% 98%; 38 | --popover: 224 71.4% 4.1%; 39 | --popover-foreground: 210 20% 98%; 40 | --primary: 263.4 70% 50.4%; 41 | --primary-foreground: 210 20% 98%; 42 | --secondary: 215 27.9% 16.9%; 43 | --secondary-foreground: 210 20% 98%; 44 | --muted: 215 27.9% 16.9%; 45 | --muted-foreground: 217.9 10.6% 64.9%; 46 | --accent: 215 27.9% 16.9%; 47 | --accent-foreground: 210 20% 98%; 48 | --destructive: 0 62.8% 30.6%; 49 | --destructive-foreground: 210 20% 98%; 50 | --border: 215 27.9% 16.9%; 51 | --input: 215 27.9% 16.9%; 52 | --ring: 263.4 70% 50.4%; 53 | } 54 | } 55 | 56 | .blog-post h1 { 57 | font-size: 2.5em; 58 | } 59 | 60 | .blog-post h2 { 61 | font-size: 2em; 62 | } 63 | 64 | .blog-post h3 { 65 | font-size: 1.75em; 66 | } 67 | 68 | .blog-post h4 { 69 | font-size: 1.5em; 70 | } 71 | 72 | .blog-post h5 { 73 | font-size: 1.25em; 74 | } 75 | 76 | .blog-post h6 { 77 | font-size: 1em; 78 | } 79 | 80 | .blog-post p { 81 | margin: 0 0 1.5em; 82 | } 83 | 84 | .blog-post a { 85 | color: #3498db; 86 | text-decoration: none; 87 | } 88 | 89 | .blog-post a:hover { 90 | text-decoration: underline; 91 | } 92 | 93 | .blog-post strong { 94 | font-weight: bold; 95 | } 96 | 97 | .blog-post em { 98 | font-style: italic; 99 | } 100 | 101 | .blog-post blockquote { 102 | font-style: italic; 103 | color: #666; 104 | margin: 1.5em 10px; 105 | padding: 0.5em 10px; 106 | border-left: 5px solid #ccc; 107 | } 108 | 109 | .blog-post ul, ol { 110 | margin: 0 0 1.5em 1.5em; 111 | } 112 | 113 | .blog-post li { 114 | margin-bottom: 0.5em; 115 | } 116 | 117 | .blog-post code { 118 | font-family: 'Courier New', Courier, monospace; 119 | background-color: #f4f4f4; 120 | padding: 2px 4px; 121 | border-radius: 4px; 122 | color: #c7254e; 123 | } 124 | 125 | .blog-post pre { 126 | font-family: 'Courier New', Courier, monospace; 127 | background-color: #f4f4f4; 128 | padding: 10px; 129 | border-radius: 4px; 130 | overflow: auto; 131 | } 132 | 133 | .blog-post img { 134 | max-width: 100%; 135 | height: auto; 136 | } 137 | 138 | .blog-post figure { 139 | margin: 0 0 1.5em; 140 | } 141 | 142 | .blog-post figcaption { 143 | font-size: 0.9em; 144 | color: #666; 145 | text-align: center; 146 | } 147 | 148 | .blog-post hr { 149 | border: 0; 150 | height: 1px; 151 | background: #ccc; 152 | margin: 2em 0; 153 | } 154 | 155 | @media (max-width: 768px) { 156 | .blog-post h1 { 157 | font-size: 2em; 158 | } 159 | 160 | .blog-post h2 { 161 | font-size: 1.75em; 162 | } 163 | 164 | .blog-post h3 { 165 | font-size: 1.5em; 166 | } 167 | 168 | .blog-post h4 { 169 | font-size: 1.25em; 170 | } 171 | 172 | .blog-post h5 { 173 | font-size: 1em; 174 | } 175 | 176 | .blog-post h6 { 177 | font-size: 0.875em; 178 | } 179 | } 180 | 181 | body.dark { 182 | background: #000; 183 | color: #aeaeae; 184 | } 185 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Inter } from "next/font/google"; 3 | import "./globals.css"; 4 | import Footer from "@/components/ui/footer"; 5 | import Navbar from "@/components/ui/navbar"; 6 | 7 | const inter = Inter({ subsets: ["latin"] }); 8 | 9 | export const metadata: Metadata = { 10 | title: "Logsfolio | Developer Portfolio", 11 | description: 12 | "A clean looking FREE portfolio template for devs. Built with NextJS & TailwindCSS", 13 | }; 14 | 15 | export default function RootLayout({ 16 | children, 17 | }: Readonly<{ 18 | children: React.ReactNode; 19 | }>) { 20 | return ( 21 | 22 | 23 | 24 |
25 | {children} 26 |