diff --git a/components/activelink.tsx b/components/activelink.tsx index e678488..c4cf33b 100644 --- a/components/activelink.tsx +++ b/components/activelink.tsx @@ -7,7 +7,7 @@ const ALink = styled.a<{active?: boolean}>` border-bottom: 1px solid transparent; ${({active}) => active && css` color: var(--fg) !important; - border-bottom-color: currentColor; + /*border-bottom-color: currentColor;*/ `} ` diff --git a/components/footer.tsx b/components/footer.tsx index e894b35..da8f60f 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -3,10 +3,10 @@ import Link from "next/link" const FooterCont = styled.footer` display: flex; - align-items: left; + align-items: center; justify-content: center; flex-direction: column; - border-top: var(--border-size) var(--border-type) var(--border-color); + /*border-top: var(--border-size) var(--border-type) var(--border-color);*/ margin-top: auto; padding: 0 1.2rem; @@ -29,7 +29,7 @@ const Footer = () => { <> -

© {new Date().getFullYear()} Elias Almqvist

+

© Copyright {new Date().getFullYear()}

) diff --git a/components/iconlink.tsx b/components/iconlink.tsx new file mode 100644 index 0000000..33c32be --- /dev/null +++ b/components/iconlink.tsx @@ -0,0 +1,16 @@ +import {IconDefinition} from "@fortawesome/fontawesome-svg-core" +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" +import styled from "styled-components" + +const ILink = styled.a` + font-size: 24px; + margin: 0 .4rem; +` + +const IconLink = ({href, icon, target, rel}: {href: string, icon: IconDefinition, target: string, rel: string}) => { + return ( + + ) +} + +export default IconLink diff --git a/package.json b/package.json index 7617fa7..6873d11 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,13 @@ "lint": "next lint" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.0", + "@fortawesome/free-brands-svg-icons": "^6.2.0", + "@fortawesome/free-solid-svg-icons": "^6.2.0", + "@fortawesome/react-fontawesome": "^0.2.0", "classnames": "^2.3.1", + "fontawesome": "^5.6.3", + "fortawesome": "^0.0.1-security", "next": "12.2.0", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/pages/_app.tsx b/pages/_app.tsx index e6fcff3..3a9b6b5 100755 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -3,6 +3,10 @@ import type { AppProps } from "next/app" import type { ReactElement, ReactNode } from "react" import type { NextPage } from "next" +import "@fortawesome/fontawesome-svg-core/styles.css"; +import { config } from "@fortawesome/fontawesome-svg-core"; +config.autoAddCss = false; + export type NextPageWithLayout = NextPage & { getLayout?: (page: ReactElement) => ReactNode } diff --git a/pages/index.tsx b/pages/index.tsx index 3dd3670..1614a63 100755 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,9 +1,11 @@ import type {NextPageWithLayout} from "./_app" import type { ReactElement } from "react" import Layout from "../components/layout" -import Nav from "../components/nav" import styled from "styled-components" import Link from "next/link" +import IconLink from "components/iconlink" +import {faBook, faEnvelope, faFolderOpen, faUniversity} from "@fortawesome/free-solid-svg-icons" +import {faGit, faGithub} from "@fortawesome/free-brands-svg-icons" export const Section = styled.section` display: flex; @@ -12,7 +14,7 @@ export const Section = styled.section` padding: 0 1rem; /*margin: 2rem 0;*/ margin: 0 0; - height: 100vh; + min-height: 100vh; h2, h3 { margin: 8px 0; @@ -30,6 +32,15 @@ export const Section = styled.section` ul li { margin: .5rem 2.5rem; } + + #img-container { + display: flex; + justify-content: center; + } + #img-container img { + width: 22rem; + height: auto; + } ` export const Code = styled.code` @@ -52,52 +63,59 @@ export const Nem = styled.span` opacity: .8; ` +export const LinkList = styled.div` + display: flex; + gap: 1.5rem; + font-size: 1.2rem; + border: unset; + justify-content: center; + + a { + color: var(--fg-button); + transition: var(--trans-time) opacity; + } + + a:hover { + opacity: .4; + } + + @media screen and (max-width: 960px) { + word-break: break-word; + } +` + +function getAge() { + let birth = 1050019200; + let now = Math.floor(Date.now() / 1000); + return now-birth; +} + +function secondsToYears(secs: number) { + return Math.floor(secs / 31557600.0); +} + const Page: NextPageWithLayout = () => { return ( <>

$ whoami

-

> I am a Computer Science & Engineering student with a passion for programming, physics, mathematics and anything *NIX (Linux, UNIX etc) related.

+

> I am a {secondsToYears(getAge())} year old Computer Science & Engineering student with a passion for programming, physics, mathematics and anything *NIX (Linux, UNIX etc) related.

{/*TODO: Add GitHub code frequency/contrib here*/}

Most of my projects are open-source, and if you are interested, you can find all of my projects on my git-server or GitHub. You can also check out /projects to view all of my projects (including hardware projects and so on).

-
-
-

Skills

-

Here are programming languages/technologies that I know/use (not limited to or ranked in any particular order):

-

Programming Languages

- - -

Technologies

- -
+ {/* +
+ +
+ */} + + + + + + + +

Contact

diff --git a/styles/globals.css b/styles/globals.css index f6fa4df..3d00b2e 100755 --- a/styles/globals.css +++ b/styles/globals.css @@ -17,7 +17,7 @@ --fg-link: #88aaa3; --fg-code: #ffbe85; --fg-gold: #fff190; - --emph-shadow: 0 0 1px; + --emph-shadow: 0 0 2px; --bg: #1d2021; --bg-dark: #282828; diff --git a/yarn.lock b/yarn.lock index b34daf5..439d425 100644 --- a/yarn.lock +++ b/yarn.lock @@ -163,6 +163,39 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" +"@fortawesome/fontawesome-common-types@6.2.0": + version "6.2.0" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz#76467a94aa888aeb22aafa43eb6ff889df3a5a7f" + integrity sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg== + +"@fortawesome/fontawesome-svg-core@^6.2.0": + version "6.2.0" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz#11856eaf4dd1d865c442ddea1eed8ee855186ba2" + integrity sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw== + dependencies: + "@fortawesome/fontawesome-common-types" "6.2.0" + +"@fortawesome/free-brands-svg-icons@^6.2.0": + version "6.2.0" + resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.2.0.tgz#ce072179677f9b5d6767f918cfbf296f357cc1d0" + integrity sha512-fm1y4NyZ2qKYNmYhdMz9VAWRw1Et7PMHNunSw3W0SVAwKwv6o0qiJworLH3Y9SnmhHzAymXJwCX1op22FFvGiA== + dependencies: + "@fortawesome/fontawesome-common-types" "6.2.0" + +"@fortawesome/free-solid-svg-icons@^6.2.0": + version "6.2.0" + resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz#8dcde48109354fd7a5ece8ea48d678bb91d4b5f0" + integrity sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA== + dependencies: + "@fortawesome/fontawesome-common-types" "6.2.0" + +"@fortawesome/react-fontawesome@^0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4" + integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw== + dependencies: + prop-types "^15.8.1" + "@humanwhocodes/config-array@^0.9.2": version "0.9.5" resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz" @@ -1053,6 +1086,16 @@ flatted@^3.1.0: resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.6.tgz" integrity sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ== +fontawesome@^5.6.3: + version "5.6.3" + resolved "https://registry.yarnpkg.com/fontawesome/-/fontawesome-5.6.3.tgz#73f0b865fa2b0b384e69d531c05a02c643b72f95" + integrity sha512-FCc+CawwsJWWprVEg9X14yI7zI+l9YVAyhzgu70qwGeDn0tLLDH/dVfqgij72g4BBGgLGfK2qnvFGAmYUkhaWg== + +fortawesome@^0.0.1-security: + version "0.0.1-security" + resolved "https://registry.yarnpkg.com/fortawesome/-/fortawesome-0.0.1-security.tgz#1c85341f2fa14e1adb28ccfaecfa7ef63796e6fa" + integrity sha512-o/pwn9ZSnveFLYP0d5IejSwz0rpGMDQsBaYVvR8WXSvnxILIwh7IUJK0P90QMF4cnIyouVF2BGrz0LEVSyzimA== + fs.realpath@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"