Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test #61

Open
wants to merge 9 commits into
base: dependabot/npm_and_yarn/lodash-4.17.21
Choose a base branch
from
Open

test #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
65a5a2c
Update index.js
bjcarlson42 Oct 8, 2021
b63a325
update: README.md updates
Oct 8, 2021
884668f
fix: 150px -> 250px
Oct 8, 2021
f8da1c0
200px
Oct 8, 2021
a07b3ac
Update README.md
bjcarlson42 Oct 8, 2021
c6e310b
fix: github followers 100 limit and blog search bar.
Dec 28, 2021
e3e6562
Merge pull request #55 from bjcarlson42/github-followers
bjcarlson42 Dec 28, 2021
6a59481
chore: Updating some data, small UI improvements.
Jan 4, 2022
cac2143
Update README.md
bjcarlson42 Jan 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 24 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
# benjamincarlson.io

My personal portfolio website hosted at [https://benjamincarlson.io](https://benjamincarlson.io).
<div align="center">
<h1>benjamincarlson.io</h1>
<img src="public/home_screen_light.png" height="200px"></img>
<img src="public/home_screen_dark.png" height="200x"></img>
</div>

## Overview

My personal website has changed over the years - from a static HTML/CSS/JS site to Wordpress to Jekyll to Gatsby to Django (I made a site with django but never deployed it due to it costing so much!) and finally to Next.js/React. This site has my writing, projects, gear, tutorials, experience, and much more.
My personal portfolio website hosted at [https://benjamincarlson.io](https://benjamincarlson.io). My personal website has changed over the years - from a static HTML/CSS/JS site to Wordpress to Jekyll to Gatsby to Django (I made a site with django but never deployed it due to it costing so much!) and finally to Next.js/React. This site has my writing, projects, gear, tutorials, experience, and much more.

Feel free to fork this repo and make it into your own website! Below you will find instructions, features, and the tech stack.

## Running Locally

Expand Down Expand Up @@ -66,10 +70,24 @@ yarn dev

Navigate to [http://localhost:3000](http://localhost:3000).

## Technologies
## Features

- Light/Dark mode
- Realtime Statistics via SWR and Nex.js API routes
- Responsive Design
- Blog
- Google Analytics
- Google AdSense

## Tech Stack

- JS Framework: [Next.js](https://nextjs.org/)
- CSS Framework: [Chakra](https://chakra-ui.com/)
- CSS Framework: [Chakra UI](https://chakra-ui.com/)
- Blog Code Syntax: [Prism.js](https://prismjs.com/)
- Blog: [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote)
- Database(Blog post view and like count): [Firebase](https://firebase.google.com)
- Deployment: [Vercel](https://vercel.com/)

## Contributing

Contributions are welcome! Feel free to tackle an issue or even implement a new feature. Simply submit a PR and I'll take a look.
11 changes: 11 additions & 0 deletions components/Container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,27 @@ import {
useColorModeValue,
Flex,
Box,
Text,
Link,
} from '@chakra-ui/react'
import Footer from '../components/Footer'
import Navigation from '../components/Navigation'
import Hero from './Hero'
import { useRouter } from 'next/router'
import { GitHubIcon } from './CustomIcons'

const Container = ({ children }) => {
const router = useRouter()
return (
<>
<Link isExternal href="https://github.com/sponsors/bjcarlson42">
<Box bgGradient='linear(to-l, #7928CA, #FF0080)'>
<Flex justify="center" align="center" py={1} color="white">
<GitHubIcon />
<Text ml={2}>Sponsor Me On GitHub!</Text>
</Flex>
</Box>
</Link>
<Box h={8} bgColor={useColorModeValue("rgb(248, 250, 252)", "gray.900")} />
<Navigation />
<Box h={8} bgColor={useColorModeValue("rgb(248, 250, 252)", "gray.900")} />
Expand Down
4 changes: 3 additions & 1 deletion components/Hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ export default function Hero() {
size="md"
rightIcon={<YoutubeIcon fontSize="xl" />}
boxShadow={useColorModeValue("0px 8px 26px rgba(0, 0, 0, 0.2)", "0px 8px 26px rgba(0, 0, 0, 0.7)")}
_hover={{ transform: "translateY(-2px)", opacity: .85, bgColor: useColorModeValue("red.400", "red.500") }}
>
Visit my YouTube
</Button>
Expand All @@ -80,6 +81,7 @@ export default function Hero() {
size="md"
rightIcon={<GitHubIcon fontSize="xl" />}
boxShadow={useColorModeValue("0px 8px 26px rgba(0, 0, 0, 0.2)", "0px 8px 26px rgba(0, 0, 0, 0.7)")}
_hover={{ transform: "translateY(-2px)", bgColor: useColorModeValue("gray.100", "gray.800") }}
>
Sponsor me on GitHub
</Button>
Expand All @@ -94,7 +96,7 @@ export default function Hero() {
transition={{ duration: .7, delay: 1.6 }}
>
<AspectRatio ratio={16 / 9}>
<iframe src="https://www.youtube.com/embed/Cn0OKuG2mzM" alt="Featured YouTube video" allowFullScreen={true} style={{ borderRadius: 10 }} />
<iframe src="https://www.youtube.com/embed/uNKBWrkMO_Q" alt="Featured YouTube video" allowFullScreen={true} style={{ borderRadius: 10 }} />
</AspectRatio>
</motion.div>
</Box>
Expand Down
25 changes: 21 additions & 4 deletions pages/api/github.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,27 @@ export default async (req, res) => {
"Authorization": "Token " + process.env.GITHUB_KEY
}
// followers
const url = "https://api.github.com/users/bjcarlson42/followers?per_page=1000"
const response = await fetch(url, { "headers": headers })
const json = await response.json()
const numFollwers = Object.keys(json).length
let url = "https://api.github.com/users/bjcarlson42/followers?per_page=100&page=1" // each page has 100 followers

// fetch followers from url and repeat until a page with no followers is found
let numFollwers = 0
let page = 1

while (true) {
const response = await fetch(url, {
headers
})
const json = await response.json()
numFollwers += json.length

if (json.length === 0) {
break
}

page++
url = `https://api.github.com/users/bjcarlson42/followers?per_page=100&page=${page}`
}

// projects
const url2 = "https://api.github.com/users/bjcarlson42/repos?per_page=1000"
const response2 = await fetch(url2, { "headers": headers })
Expand Down
13 changes: 8 additions & 5 deletions pages/blog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ import {
Stack,
Input,
InputGroup,
InputRightElement
InputRightElement,
Link,
Text,
} from '@chakra-ui/react'
import fs from 'fs'
import matter from 'gray-matter'
Expand All @@ -29,10 +31,10 @@ export default function Blog({ posts }) {
(a, b) =>
Number(new Date(b.publishedAt)) - Number(new Date(a.publishedAt))
)
// .filter((frontMatter) =>
// frontMatter?.title?.toLowerCase()?.includes(searchValue?.toLowerCase()) ||
// frontMatter?.summary?.toLowerCase()?.includes(searchValue?.toLowerCase())
// )
.filter((frontMatter) =>
frontMatter.data?.title?.toLowerCase()?.includes(searchValue.toLowerCase()) ||
frontMatter.data?.summary?.toLowerCase()?.includes(searchValue.toLowerCase())
)

return (
<>
Expand Down Expand Up @@ -71,6 +73,7 @@ export default function Blog({ posts }) {
<Heading letterSpacing="tight" as="h1" size="2xl" my={4}>
Blog ({posts.length} posts)
</Heading>
<Text mb={2}>I now write for <Link isExternal href="https://www.coffeeclass.io/articles" color="blue.500">coffeeclass.io</Link>. Visit that site to view all my tutorials!</Text>
<InputGroup mb={4} mr={4} w="100%">
<Input
aria-label="Search by post title or summary"
Expand Down
71 changes: 28 additions & 43 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export default function Index() {
>
<Box as="section" mt={10} mb={20}>
<Heading letterSpacing="tight" mt={8} size="lg" fontWeight={700} as="h2" mb={4}>About Me</Heading>
<Text color={colorSecondary[colorMode]}>Hi everyone 👋, I'm Benjamin Carlson. I go to <Link color="blue.500" href="https://www2.ccsu.edu/" isExternal>Central Connect State University</Link> where I study computer science and mathematics. My personal website is where I showcase my projects, writing, statistics, experience, and more. It also serves as a sandbox to play around with new technologies, as seen by the <Link href="https://github.com/bjcarlson42/benjamincarlson.io#overview" color={linkColor[colorMode]} isExternal>evolution</Link> of this website! Feel free to reach out via email or any social media.</Text>
<Text color={colorSecondary[colorMode]}>Hi everyone 👋, I'm Benjamin Carlson. I go to <Link color="blue.500" href="https://www2.ccsu.edu/" isExternal>Central Connecticut State University</Link> where I study computer science and mathematics. My personal website is where I showcase my projects, writing, statistics, experience, and more. It also serves as a sandbox to play around with new technologies, as seen by the <Link href="https://github.com/bjcarlson42/benjamincarlson.io#overview" color={linkColor[colorMode]} isExternal>evolution</Link> of this website! Feel free to reach out via email or any social media.</Text>
</Box>

<Box as="section" mt={10} mb={20}>
Expand All @@ -82,8 +82,8 @@ export default function Index() {
description="coffeeclass.io is a tutorial website I started to teach programming and computer science skills in a fun and easy to learn manner."
repoHref="https://github.com/carlson-technologies/coffeeclass.io"
demoHref="https://www.coffeeclass.io?utm_source=website&utm_campaign=benjamincarlson.io"
languageColor="#f1e05a"
language="JavaScript"
languageColor="#2b7489"
language="TypeScript"
/>
<ProjectCard
title="benjamincarlson.io"
Expand All @@ -110,23 +110,31 @@ export default function Index() {
{/* <Flex align="center" mt={4}> */}
<SimpleGrid minChildWidth="200px" spacing="20px" my={10}>
<Flex flexDir="column">
<Icon as={YoutubeIcon} color="red.500" fontSize="2xl" mb={1} />
<Heading as="h3" size="md" fontWeight={400} mb={2} letterSpacing="tight">YouTube</Heading>
<Text>I started uploading YouTube videos in 2020 when the pandemic started. I mostly upload programming tutorial videos but I also upload developer vlogs and informational videos. I have uploaded (almost) weekly since then and have grown my channel to an audience of over 3.4k subscribers and 350k views!</Text>
<Icon as={YoutubeIcon} color="red.500" fontSize="2xl" mb={2} />
<Heading as="h3" size="md" fontWeight={400} mb={2} letterSpacing="tight">
<Link href='https://youtube.com/benjamincarlson' color={linkColor[colorMode]} isExternal>YouTube</Link>
</Heading>
<Text>I started uploading YouTube videos in 2020 when the pandemic started. I mostly upload programming tutorial videos but I also upload developer vlogs and informational videos. I have uploaded (almost) weekly since then and have grown my channel to an audience of over 4k subscribers and 450k views!</Text>
</Flex>
<Flex flexDir="column">
<Icon as={SiMedium} fontSize="2xl" mb={1} />
<Heading as="h3" size="md" fontWeight={400} mb={2} letterSpacing="tight">Medium</Heading>
<Text>Medium was the first publication I started. I wrote my first article in <Link color="blue.500" href="https://levelup.gitconnected.com/using-javascript-to-scramble-a-rubiks-cube-306f52908f18" isExternal>March 2020</Link>, and since then I have written about a dozen more articles. Nowadays I write less for Medium and more for coffeeclass.io.</Text>
<Icon as={SiMedium} fontSize="2xl" mb={2} />
<Heading as="h3" size="md" fontWeight={400} mb={2} letterSpacing="tight">
<Link href='https://benjamincarlson.medium.com' color={linkColor[colorMode]} isExternal>Medium</Link>
</Heading>
<Text>Medium was the first publication I started. I wrote my <Link color="blue.500" href="https://levelup.gitconnected.com/using-javascript-to-scramble-a-rubiks-cube-306f52908f18" isExternal>first article</Link> in March 2020, and since then I have written about a dozen more articles. Nowadays I write less for Medium and more for coffeeclass.io.</Text>
</Flex>
<Flex flexDir="column">
<Icon as={FiCoffee} color="yellow.500" fontSize="2xl" mb={1} />
<Heading as="h3" size="md" fontWeight={400} mb={2} letterSpacing="tight">coffeeclass.io</Heading>
<Icon as={FiCoffee} color="yellow.500" fontSize="2xl" mb={2} />
<Heading as="h3" size="md" fontWeight={400} mb={2} letterSpacing="tight">
<Link href='https://www.coffeeclass.io' color={linkColor[colorMode]} isExternal>coffeeclass.io</Link>
</Heading>
<Text>Because I enjoyed uploading YouTube videos about programming and writing about programming on Medium, I decided to start my own programming tutorial website, coffeeclass.io. If you are interested in writing about code, see our <Link color="blue.500" href="https://www.coffeeclass.io/contribute/getting-started" isExternal>getting started</Link> page.</Text>
</Flex>
<Flex flexDir="column">
<Icon as={BsGear} color="gray.500" fontSize="2xl" mb={1} />
<Heading as="h3" size="md" fontWeight={400} mb={2} letterSpacing="tight">engineering.coffeeclass.io</Heading>
<Icon as={BsGear} color="gray.500" fontSize="2xl" mb={2} />
<Heading as="h3" size="md" fontWeight={400} mb={2} letterSpacing="tight">
<Link href='https://www.engineering.coffeeclass.io' color={linkColor[colorMode]} isExternal>engineering.coffeeclass.io</Link>
</Heading>
<Text>The behind the scenes look at coffeeclass.io. On this site I write about the development of coffeeclass.io. Everything from the current tech stack, future plans, growing pains, and more.</Text>
</Flex>
</SimpleGrid>
Expand All @@ -148,42 +156,19 @@ export default function Index() {
</Flex>
</Box>

{/* <Box as="section" mt={10} mb={20}>
<Heading letterSpacing="tight" mt={8} size="lg" fontWeight={700} as="h2" mb={4}>Experience 👨‍💼</Heading>
<Flex align="center" overflowX="auto">
<Text>Experience 1</Text>
<Icon mx={4} as={ChevronRightIcon} />
<Text>Experience 2</Text>
<Icon mx={4} as={ChevronRightIcon} />
<Text>Experience 3</Text>
<Icon mx={4} as={ChevronRightIcon} />
<Text>Experience 4</Text>
<Icon mx={4} as={ChevronRightIcon} />
<Text>Experience 5</Text>
<Icon mx={4} as={ChevronRightIcon} />
<Text>Experience 1</Text>
<Icon mx={4} as={ChevronRightIcon} />
<Text>Experience 2</Text>
<Icon mx={4} as={ChevronRightIcon} />
<Text>Experience 3</Text>
<Icon mx={4} as={ChevronRightIcon} />
<Text>Experience 4</Text>
<Icon mx={4} as={ChevronRightIcon} />
<Text>Experience 5</Text>
</Flex>
</Box> */}

<Todo />
<TechStack />

<Text mt={10}>Looks like you've made it to the end of this page... feel free to <Link href="https://youtube.com/benjamincarlson" isExternal color={linkColor[colorMode]}>check out my YouTube channel</Link> or
visit <Link href="https://www.coffeeclass.io/?utm_source=website&utm_campaign=benjamincarlson.io" isExternal color={linkColor[colorMode]}>coffeeclass.io</Link> where
you can find even more programming content.
</Text>
<Box as="section">
<Text mt={10}>Looks like you've made it to the end of this page... feel free to <Link href="https://youtube.com/benjamincarlson" isExternal color={linkColor[colorMode]}>check out my YouTube channel</Link> or
visit <Link href="https://www.coffeeclass.io/?utm_source=website&utm_campaign=benjamincarlson.io" isExternal color={linkColor[colorMode]}>coffeeclass.io</Link> where
you can find even more programming content.
</Text>
</Box>
</motion.div>

</Flex>
</Container>
</>
)
}
}
Binary file added public/home_screen_dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/home_screen_light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.