Minimal Portfolio

7 |

8 |

13 | Contact 14 | 20 | 26 |

32 |                <button
33 |                   type="button"
34 |                   className="text-center inline-block px-8 py-3 w-max text-base font-medium rounded-md text-white bg-gradient-to-r from-yellow-500 to-pink-500 drop-shadow-md hover:stroke-white"
35 |                >
36 |                   Work With Me
37 |                </button>
38 |             </form>
39 |          </div>
40 |       </div>
41 |    )
42 | }
43 | 
44 | export default Contact;

--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function Footer() {
 4 | 	return (
 5 | 		<div className="py-5 text-center">
 6 | 				<div className="container max-w-screen-lg mx-auto">
 7 | 					<div>
 8 | 						<div className="flex flex-wrap justify-center gap-2">
 9 | 							<a 
10 | 								href="https://twitter.com/forrestpknight"
11 | 								className="bg-stone-400 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded-full">
12 | 								<svg
13 | 									className="w-5 h-5 fill-current"
14 | 									role="img"
15 | 									xmlns="http://www.w3.org/2000/svg"
16 | 									viewBox="0 0 24 24"
17 | 								>
18 | 									<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
19 | 								</svg>
20 | 							</a>
21 | 							<a 
22 | 								href="https://linkedin.com/in/forrestpknight"
23 | 								className="bg-stone-400 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded-full">
24 | 								<svg
25 | 								className="w-5 h-5 fill-current"
26 | 								role="img"
27 | 								viewBox="0 0 256 256"
28 | 								xmlns="http://www.w3.org/2000/svg"
29 | 								>
30 | 								<g>
31 | 									<path d="M218.123122,218.127392 L180.191928,218.127392 L180.191928,158.724263 C180.191928,144.559023 179.939053,126.323993 160.463756,126.323993 C140.707926,126.323993 137.685284,141.757585 137.685284,157.692986 L137.685284,218.123441 L99.7540894,218.123441 L99.7540894,95.9665207 L136.168036,95.9665207 L136.168036,112.660562 L136.677736,112.660562 C144.102746,99.9650027 157.908637,92.3824528 172.605689,92.9280076 C211.050535,92.9280076 218.138927,118.216023 218.138927,151.114151 L218.123122,218.127392 Z M56.9550587,79.2685282 C44.7981969,79.2707099 34.9413443,69.4171797 34.9391618,57.260052 C34.93698,45.1029244 44.7902948,35.2458562 56.9471566,35.2436736 C69.1040185,35.2414916 78.9608713,45.0950217 78.963054,57.2521493 C78.9641017,63.090208 76.6459976,68.6895714 72.5186979,72.8184433 C68.3913982,76.9473153 62.7929898,79.26748 56.9550587,79.2685282 M75.9206558,218.127392 L37.94995,218.127392 L37.94995,95.9665207 L75.9206558,95.9665207 L75.9206558,218.127392 Z M237.033403,0.0182577091 L18.8895249,0.0182577091 C8.57959469,-0.0980923971 0.124827038,8.16056231 -0.001,18.4706066 L-0.001,237.524091 C0.120519052,247.839103 8.57460631,256.105934 18.8895249,255.9977 L237.033403,255.9977 C247.368728,256.125818 255.855922,247.859464 255.999,237.524091 L255.999,18.4548016 C255.851624,8.12438979 247.363742,-0.133792868 237.033403,0.000790807055" />
32 | 								</g>
33 | 								</svg>
34 | 							</a>
35 | 							<a
36 | 								href="https://youtube.com/fknight"
37 | 								className="bg-stone-400 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded-full">
38 | 								<svg
39 | 								className="w-5 h-5 fill-current"
40 | 								xmlns="http://www.w3.org/2000/svg"
41 | 								viewBox="0 0 16 16"
42 | 								>
43 | 								<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z" />
44 | 								</svg>
45 | 							</a>
46 | 							<a 
47 | 								href="https://github.com/forrestknight"
48 | 								className="bg-stone-400 p-2 font-semibold text-white inline-flex items-center space-x-2 rounded-full">
49 | 								<svg
50 | 								xmlns="http://www.w3.org/2000/svg"
51 | 								xmlnsXlink="http://www.w3.org/1999/xlink"
52 | 								aria-hidden="true"
53 | 								role="img"
54 | 								className="w-5"
55 | 								preserveAspectRatio="xMidYMid meet"
56 | 								viewBox="0 0 24 24"
57 | 								>
58 | 								<g fill="none">
59 | 									<path
60 | 										fillRule="evenodd"
61 | 										clipRule="evenodd"
62 | 										d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385c.6.105.825-.255.825-.57c0-.285-.015-1.23-.015-2.235c-3.015.555-3.795-.735-4.035-1.41c-.135-.345-.72-1.41-1.23-1.695c-.42-.225-1.02-.78-.015-.795c.945-.015 1.62.87 1.845 1.23c1.08 1.815 2.805 1.305 3.495.99c.105-.78.42-1.305.765-1.605c-2.67-.3-5.46-1.335-5.46-5.925c0-1.305.465-2.385 1.23-3.225c-.12-.3-.54-1.53.12-3.18c0 0 1.005-.315 3.3 1.23c.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23c.66 1.65.24 2.88.12 3.18c.765.84 1.23 1.905 1.23 3.225c0 4.605-2.805 5.625-5.475 5.925c.435.375.81 1.095.81 2.22c0 1.605-.015 2.895-.015 3.3c0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"
63 | 										fill="currentColor"
64 | 									/>
65 | 								</g>
66 | 								</svg>
67 | 							</a>
68 | 						</div>
69 | 					</div>
70 | 				</div>
71 | 			<p className="text-sm mt-2  opacity-50">
72 | 				© {new Date().getFullYear()} Forrest Knight. All rights reserved.
73 | 			</p>
74 | 		</div>
75 | 	);
76 | }
77 | 
78 | export default Footer;

--------------------------------------------------------------------------------
/src/components/Intro.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function Intro() {
 4 |    return (
 5 |       <div className="flex items-center justify-center flex-col text-center pt-20 pb-6">
 6 |          <h1 className="text-4xl md:text-7xl dark:text-white mb-1 md:mb-3 font-bold">Forrest</h1>
 7 |          <p className="text-base md:text-xl mb-3 font-medium">Software Engineer & Web Developer</p>
 8 |          <p className="text-sm max-w-xl mb-6 font-bold">
 9 |             I'm an indie full-stack developer and content creator building my
10 |             version of the digital world one step at a time. All coding projects
11 |             are built from the ground up, from planning and designing all the way
12 |             to solving real-life problems with code.
13 |             <br />
14 |             All video content is built the same way, from ideation and planning,
15 |             all the way to finalizing the content with artistic touches. I publish
16 |             that content on my YouTube channel{' '}
17 |             <a
18 |                href="https://youtube.com/fknight"
19 |                target="_blank"
20 |                className="text-cyan-600 hover:underline underline-offset-2 decoration-2 decoration-red-600"
21 |                rel="noreferrer noopener"
22 |             >
23 |                ForrestKnight
24 |             </a>{' '}
25 |             to more than 400k subscribers.
26 |          </p>
27 |       </div>
28 |    )
29 | }
30 | 
31 | export default Intro;

--------------------------------------------------------------------------------
/src/components/Portfolio.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import portfolio from '../data/portfolio';
 3 | import PortfolioItem from './PortfolioItem';
 4 | 
 5 | function Portfolio() {
 6 |    return (
 7 |       <div className="flex flex-col md:flex-row items-center justify-center">
 8 |          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 9 |             {portfolio.map(project => (
10 |                <PortfolioItem 
11 |                   imgUrl={project.imgUrl}
12 |                   title={project.title}
13 |                   stack={project.stack}
14 |                   link={project.link}
15 |                />
16 |             ))}
17 |          </div>
18 |       </div>
19 |    )
20 | }
21 | 
22 | export default Portfolio;

--------------------------------------------------------------------------------
/src/components/PortfolioItem.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function PortfolioItem({ title, imgUrl, stack, link }) {
 4 |    return (
 5 |       <a 
 6 |          href={link}
 7 |          target="_blank"
 8 |          rel="noopener noreferrer"
 9 |          className="border-2 border-stone-900 dark:border-white rounded-md overflow-hidden"
10 |       >
11 |          <img
12 |             src={imgUrl}
13 |             alt="portfolio" 
14 |             className="w-full h-36 md:h-48 object-cover cursor-pointer"
15 |          />
16 |          <div className="w-full p-4">
17 |             <h3 className="text-lg md:text-xl dark:text-white mb-2 md:mb-3 font-semibold ">{title}</h3>
18 |             <p className="flex flex-wrap gap-2 flex-row items-center justify-start text-xs md:text-sm dark:text-white ">
19 |                {stack.map(item => (
20 |                   <span className="inline-block px-2 py-1 font-semibold border-2 border-stone-900 dark:border-white rounded-md">
21 |                      {item}
22 |                   </span>
23 |                ))}
24 |             </p>
25 |          </div>
26 |       </a>
27 |    )
28 | }
29 | 
30 | export default PortfolioItem;

--------------------------------------------------------------------------------
/src/components/Timeline.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import timeline from '../data/timeline';
 3 | import TimelineItem from './TimelineItem';
 4 | import Title from './Title';
 5 | 
 6 | function Timeline() {
 7 |    return (
 8 |       <div className="flex flex-col md:flex-row justify-center my-20">
 9 |          <div className="w-full md:w-7/12">
10 |             <Title>Timeline</Title>
11 |             {timeline.map(item => (
12 |                <TimelineItem 
13 |                   year={item.year}
14 |                   title={item.title}
15 |                   duration={item.duration}
16 |                   details={item.details}
17 |                />
18 |             ))}
19 |          </div>
20 |       </div>
21 |    )
22 | }
23 | 
24 | export default Timeline;

--------------------------------------------------------------------------------
/src/components/TimelineItem.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function TimelineItem({ year, title, duration, details }) {
 4 |    return (
 5 |       <ol className="flex flex-col md:flex-row relative border-l border-stone-200 dark:border-stone-700">
 6 |          <li className="mb-10 ml-4">
 7 |             <div className="absolute w-3 h-3 bg-stone-200 rounded-full mt-1.5 -left-1.5 border border-white dark:border-stone-900 dark:bg-stone-700" />
 8 |             <p className="flex flex-wrap gap-4 flex-row items-center justify-start text-xs md:text-sm">
 9 |                <span className="inline-block px-2 py-1 font-semibold text-white dark:text-stone-900 bg-stone-900 dark:bg-white rounded-md">
10 |                   {year}
11 |                </span>
12 |                <h3 className="text-lg font-semibold text-stone-900 dark:text-white">
13 |                   {title}
14 |                </h3>
15 |                <div className="my-1 text-sm font-normal leading-none text-stone-400 dark:text-stone-500">
16 |                   {duration}
17 |                </div>
18 |             </p>
19 |             <p className="my-2 text-base font-normal text-stone-500 dark:text-stone-400">
20 |                {details}
21 |             </p>
22 |          </li>
23 |       </ol>
24 |    )
25 | }
26 | 
27 | export default TimelineItem;

--------------------------------------------------------------------------------
/src/components/Title.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function Title({ children, id }) {
 4 |    return (
 5 |       <h1
 6 |          id={id && id}
 7 |          className="text-2xl font-bold underline underline-offset-8 decoration-4 mb-5 text-stone-900 dark:text-white"
 8 |       >
 9 |          {children}
10 |       </h1>
11 |    )
12 | }
13 | 
14 | export default Title;

--------------------------------------------------------------------------------
/src/data/portfolio.js:
--------------------------------------------------------------------------------
 1 | export default [
 2 |    {
 3 |       title: 'Terminal Website',
 4 |       imgUrl: '/assets/terminal-website.jpg',
 5 |       stack: ['HTML', 'CSS', 'JavaScript'],
 6 |       link: 'https://fkcodes.com',
 7 |    },
 8 |    {
 9 |       title: 'Developer Portfolio',
10 |       imgUrl: '/assets/dev-portfolio.jpg',
11 |       stack: ['React', 'Tailwind', 'Vite'],
12 |       link: 'https://thehackershideout.com',
13 |    },
14 |    {
15 |       title: 'AI Nerf Gun',
16 |       imgUrl: '/assets/ai-nerf-gun.jpg',
17 |       stack: ['Python', 'C++', 'Robotics'],
18 |       link: 'https://youtu.be/A8eegxL82PI',
19 |    },
20 | ]

--------------------------------------------------------------------------------
/src/data/timeline.js:
--------------------------------------------------------------------------------
 1 | export default [
 2 |    {
 3 |       year: 'Today',
 4 |       title: 'YouTube Content Creator',
 5 |       duration: '6 years',
 6 |       details: 
 7 |          'My humble attempt at building my version of the digital world one step at a time by documenting my coding journey and creating software engineering and computer science content to help those coming behind me.',
 8 |    },
 9 |    {
10 | 		year: 'Today',
11 | 		title: 'Solo Indie Developer',
12 | 		duration: '4 years',
13 | 		details:
14 | 			"I'm a solo indie developer building software for myself and clients to showcase on YouTube. All coding projects are built from the ground up, from planning and designing all the way to solving real-life problems with code.",
15 | 	},
16 | 	{
17 | 		year: '2019',
18 | 		title: 'Software Engineer',
19 | 		duration: '2 years',
20 | 		details:
21 | 			'I helped build an enterprise application for a Fortune 500 company in an Agile team setting. Our tech stack consisted of TypeSciprt, Angular, Java, Gradle, and a handful of other languages and tools.',
22 | 	},
23 | 	{
24 | 		year: '2018',
25 | 		title: "Bachelor's Degree in Computer Science",
26 | 		duration: '5 years',
27 | 		details:
28 | 			'I pursued the knowledge that a computer science degree had to offer. I learned about computer architecture, computer science theory, an array of programming, and aspects of artificial intelligence.',
29 | 	},
30 | 	{
31 | 		year: '2013',
32 | 		title: 'First Line of Code',
33 | 		duration: 'the beginning',
34 | 		details:
35 | 			"I wrote my first line of real code that started this journey into digital craftsmanship that I never could've imagined, especially as someone who never saw themselves as anything other than a blue collar worker.",
36 | 	},
37 | ]

--------------------------------------------------------------------------------
/src/styles/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;

--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	content: ['./index.html', './src/**/*.{jsx, js}'],
 3 | 	darkMode: 'class',
 4 | 	theme: {
 5 | 		extend: {
 6 | 			fontFamily: {
 7 | 				inter: ['inter', 'serif'],
 8 | 			},
 9 | 		},
10 | 	},
11 | 	plugins: [],
12 | };
13 |

--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()]
7 | })
8 |

--------------------------------------------------------------------------------