first commit

AutoKill · Jan 3, 2024 · 8682c56 · 8682c56
commit 8682c56
Show file tree

Hide file tree

Showing 21 changed files with 5,323 additions and 0 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/README.md b/README.md
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
@@ -0,0 +1,25 @@
+import Animation from '@/components/animation';
+
+export default function Contact() {
+  return (
+    <Animation>
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold">Contact 📥</h1>
+        <p className="opacity-90">
+          Send an email to{' '}
+          <span className="font-semibold">[email protected]</span> if you
+          want to contact me or if you have any questions. I&apos;ll try to
+          respond to you as quickly as I can. I appreciate you visiting my
+          website, and I hope to speak with you soon.
+        </p>
+        <a
+          className="bg-white/5 border border-white/10 block border-b-4 cursor-pointer p-3 rounded-lg text-center hover:scale-105 transition-all"
+          href="mailto:[email protected]"
+          target="_blank"
+        >
+          Send email
+        </a>
+      </div>
+    </Animation>
+  );
+}
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,39 @@
+import { Analytics } from "@vercel/analytics/react";
+import "../styles/tailwind.css";
+import { Metadata, Viewport } from "next";
+import { Inter } from "next/font/google";
+import Navbar from "@/components/navbar";
+import Footer from "@/components/footer";
+
+export const metadata: Metadata = {
+  title: "Hey, I'm AutoKill",
+  description: "A software engineer from Belgrade, Serbia.",
+};
+
+export const viewport: Viewport = {
+  themeColor: "#f87171",
+};
+
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap",
+});
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className={inter.className}>
+      <body>
+        <div className="mx-auto max-w-3xl px-5">
+          <Navbar />
+          {children}
+          <Analytics />
+          <Footer />
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -0,0 +1,12 @@
+import Animation from '@/components/animation';
+
+export default function NotFound() {
+  return (
+    <Animation>
+      <div className="text-center">
+        <h1 className="text-4xl font-bold">404</h1>
+        <p className="text-xl">Page not found</p>
+      </div>
+    </Animation>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,50 @@
+import Animation from "@/components/animation";
+import Technologies from "@/components/technologies";
+import Works from "@/components/works";
+
+export default function Home() {
+  return (
+    <Animation>
+      <div className="space-y-10">
+        <div className="space-y-4">
+          <h1 className="text-5xl font-bold">
+            Hey there, I&apos;m{" "}
+            <span className="text-red-400 bg-clip-text">AutoKill</span> 👋
+          </h1>
+          <p className="opacity-90">
+            A software engineer from Belgrade, Serbia. I develop mainly backend
+            software, but I can also do frontend. I love exploring new
+            technologies and I&apos;m not afraid of trying new things.
+          </p>
+        </div>
+
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold">Technologies 💡</h1>
+          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+            <Technologies />
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold">Works 🔧</h1>
+          <p className="opacity-90">
+            I built a lot of things, most of them private. If you want to see
+            all my public & open source projects, check out my{" "}
+            <a
+              className="text-red-400 hover:underline underline-offset-4"
+              href="https://github.com/AutoKill"
+              target="_blank"
+            >
+              GitHub profile
+            </a>
+            . Below you can find some of my public projects.
+          </p>
+          {/* <hr className="mt-3 h-px bg-white/20 border-0" /> */}
+          <div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
+            <Works />
+          </div>
+        </div>
+      </div>
+    </Animation>
+  );
+}
diff --git a/components/animation.tsx b/components/animation.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { AnimatePresence, motion } from 'framer-motion';
+
+export default function Animation({ children }: { children: React.ReactNode }) {
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 20 }}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -0,0 +1,7 @@
+export default function Footer() {
+  return (
+    <div className="py-6 mb-2">
+      <hr className="mt-3 h-px bg-white/20 border-0" />
+    </div>
+  );
+}
diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -0,0 +1,41 @@
+import Link from 'next/link';
+import Socials from './socials';
+
+interface Props {
+  name: string;
+  href: string;
+}
+
+const data: Props[] = [
+  {
+    name: 'home',
+    href: '/',
+  },
+  {
+    name: 'contact',
+    href: '/contact'
+  }
+];
+
+export default function Navbar() {
+  return (
+    <div className="py-6 mb-2">
+      <div className="flex flex-row space-x-2 items-center">
+        <div className="flex-1">
+          <div className="flex space-x-4">
+            {data.map((item) => (
+              <div
+                key={item.name}
+                className="font-semibold cursor-pointer hover:text-white/60 transition-all"
+              >
+                <Link href={item.href}>{item.name}</Link>
+              </div>
+            ))}
+          </div>
+        </div>
+        <Socials />
+      </div>
+      <hr className="mt-3 h-px bg-white/20 border-0" />
+    </div>
+  );
+}
diff --git a/components/socials.tsx b/components/socials.tsx
@@ -0,0 +1,36 @@
+import { FaDiscord, FaGithub } from 'react-icons/fa6';
+
+const data = [
+  {
+    url: 'https://github.com/AutoKill',
+    icon: FaGithub,
+    newTab: true,
+    rel: 'noreferrer',
+  },
+  {
+    url: 'https://discord.com/users/1096880369111945257',
+    icon: FaDiscord,
+    newTab: true,
+    rel: 'noreferrer',
+  },
+];
+
+export default function Socials() {
+  return (
+    <>
+      <div className="flex h-full gap-5">
+        {data.map((item) => (
+          <a
+            key={item.url}
+            href={item.url}
+            target={item.newTab ? '_blank' : undefined}
+            rel={item.rel}
+            className="text-white/60 hover:text-white transition-all"
+          >
+            <item.icon className="h-5 w-5" />
+          </a>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/components/technologies.tsx b/components/technologies.tsx
@@ -0,0 +1,108 @@
+import {
+  FaCss3,
+  FaDocker,
+  FaGit,
+  FaGithub,
+  FaHtml5,
+  FaJava,
+  FaPython,
+  FaReact,
+  FaUbuntu,
+} from 'react-icons/fa6';
+import {
+  SiCsharp,
+  SiJavascript,
+  SiTailwindcss,
+  SiTypescript,
+  SiNextdotjs,
+  SiMongodb,
+  SiMysql,
+} from 'react-icons/si';
+
+interface Props {
+  name: string;
+  icon: any;
+}
+
+const data: Props[] = [
+  {
+    name: 'Java',
+    icon: FaJava,
+  },
+  {
+    name: 'JavaScript',
+    icon: SiJavascript,
+  },
+  {
+    name: 'TypeScript',
+    icon: SiTypescript,
+  },
+  {
+    name: 'C#',
+    icon: SiCsharp,
+  },
+  {
+    name: 'Python',
+    icon: FaPython,
+  },
+  {
+    name: 'HTML',
+    icon: FaHtml5,
+  },
+  {
+    name: 'CSS',
+    icon: FaCss3,
+  },
+  {
+    name: 'React',
+    icon: FaReact,
+  },
+  {
+    name: 'Next.js',
+    icon: SiNextdotjs,
+  },
+  {
+    name: 'TailwindCSS',
+    icon: SiTailwindcss,
+  },
+  {
+    name: 'Ubuntu',
+    icon: FaUbuntu,
+  },
+  {
+    name: 'Git',
+    icon: FaGit,
+  },
+  {
+    name: 'GitHub',
+    icon: FaGithub,
+  },
+  {
+    name: 'Docker',
+    icon: FaDocker,
+  },
+  {
+    name: 'MongoDB',
+    icon: SiMongodb,
+  },
+  {
+    name: 'MySQL',
+    icon: SiMysql,
+  },
+];
+
+export default function Technologies() {
+  return (
+    <>
+      {data.map((item, i) => (
+        <div
+          className="flex items-center space-x-2 hover:text-red-400 transition-all"
+          key={i}
+        >
+          <item.icon />
+          <p className="pointer-events-none">{item.name}</p>
+        </div>
+      ))}
+    </>
+  );
+}