It looks like this is a web page, not a feed. I looked for a feed associated with this page, but couldn't find one. Please enter the address of your feed to validate.

Source: http://hoffer.cx

  1. <!-- HTML by Phil Hoffer -->
  2. <!DOCTYPE html>
  3. <html lang="de">
  4.  
  5.  
  6.  
  7. <head>
  8.  
  9. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  10. <meta http-equiv="cache-control" content="no-store">
  11. <meta name="viewport" content="width=device-width, initial-scale=1">
  12.  
  13. <title>Phil Hoffer &middot; Portfolio &middot; Graz, Austria</title>
  14.  
  15. <link rel="stylesheet" type="text/css" href="framework/style_2024-10-07.css">
  16. <script src="framework/jquery-3.6.2.min.js"></script>
  17.  
  18. <meta name="robots" content="index, follow">
  19. <meta name="author" content="Phil Hoffer - rotane">
  20. <meta name="description" lang="de" content="Portfolio von Grafikdesigner DI Phil Hoffer in Graz, Österreich.">
  21. <meta name="keywords" lang="de" content="Phil Hoffer, Philipp Hoffer, rotane, Designer, Grafikdesign, Layout, Editorial Design, Kommunikationsdesign, Informationsdesign, Webdesign, Screendesign, Portfolio, Graz, Österreich">
  22. <meta name="keywords" lang="en" content="Phil Hoffer, Philipp Hoffer, rotane, designer, graphic design, layout, communication design, information design, web design, screen design, portfolio, Graz, Austria">
  23.  
  24. <meta property="og:title" content="Phil Hoffer Portfolio">
  25. <meta property="og:type" content="profile">
  26. <meta property="og:description" content="Portfolio von Grafikdesigner DI Phil Hoffer in Graz, Österreich.">
  27. <meta property="og:image" content="http://rotane.hoffer.cx/framework/og-image@2x.jpg">
  28. <meta property="og:url" content="http://rotane.hoffer.cx">
  29. <meta property="og:locale" content="de_AT">
  30. <meta property="og:updated_time" content="2024-07-15">
  31.  
  32. <link rel="shortcut icon" href="favicon.ico">
  33. <link rel="icon" href="favicon.ico" type="image/x-icon">
  34. <link rel="icon" href="framework/favicon-16x16.png" type="image/png" sizes="16x16">
  35. <link rel="icon" href="framework/favicon-32x32.png" type="image/png" sizes="32x32">
  36. <link rel="apple-touch-icon" sizes="180x180" href="framework/apple-touch-icon.png">
  37. <link rel="mask-icon" href="framework/safari-pinned-tab.svg" color="#5bbad5">
  38. <link rel="manifest" href="framework/site.webmanifest">
  39. <meta name="apple-mobile-web-app-title" content="Phil Hoffer">
  40. <meta name="msapplication-config" content="browserconfig.xml">
  41. <meta name="msapplication-TileColor" content="#ffffff">
  42. <meta name="theme-color" content="#ffffff">
  43. <meta name="google-site-verification" content="SE1qUbTwp4F1wEkbSaEdqSs6TRzKrZXpU0tK94KmPCQ">
  44.  
  45. </head>
  46.  
  47.  
  48. <!-- Google tag (gtag.js) -->
  49. <script async src="https://www.googletagmanager.com/gtag/js?id=G-H5C6CVSQF7"></script>
  50. <script>
  51.  window.dataLayer = window.dataLayer || [];
  52.  function gtag(){dataLayer.push(arguments);}
  53.  gtag('js', new Date());
  54.  
  55.  gtag('config', 'G-H5C6CVSQF7');
  56. </script>
  57.  
  58.  
  59.  
  60. <body>
  61.  
  62. <nav>
  63.  
  64. <div class="container">
  65. <a href="#home"><span>Home</span></a>
  66. <a href="#arbeiten"><span>Projekte</span></a>
  67. <a href="#leistungen"><span>Leistungen</span></a>
  68. <a href="#logos"><span>Kunden</span></a>
  69. <a href="#kontakt"><span>Kontakt</span></a>
  70. <a href="photo" class="last out"><span>Fotografie</span></a>
  71. </div>
  72.  
  73. </nav>
  74.  
  75.  
  76.  
  77. <main>
  78.  
  79.  
  80.  
  81. <header class="container" id="home">
  82.  
  83. <h1>Phil Hoffer</h1>
  84. <h2>Portfolio</h2>
  85.  
  86. <p>Ich arbeite <i>effektiv</i> und <i>maßgeschneidert</i> für Sie und Ihre Vision.</p>
  87. <p>Meine langjährige Erfahrung, fundierte Ausbildung und Kreativität garantieren Ihnen eine <i>professionelle</i> und <i>hochwertige</i> Umsetzung Ihrer Ideen – analog und digital.</p>
  88.  
  89. </header>
  90.  
  91.  
  92.  
  93. <section class="container" id="arbeiten">
  94.  
  95. <h3>Ausgewählte Projekte</h3>
  96.  
  97. <p>Klicke für Details</p>
  98.  
  99. <div class="grid">
  100.  
  101. <!-- thumbnail 19 Bundesschatz -->
  102. <div><a onclick="openmodal('#modal19')" href="#modal">
  103. <img src="arbeiten/thumbs/bundesschatz.jpg" alt="">
  104. <div class="alttext">
  105. <h5>Bundesschatz</h5>
  106. <p>Illustration für die 5 Anlageprodukte der Republik Österreich.</p>
  107. </div>
  108. </a></div>
  109.  
  110. <!-- thumbnail 4 Eibiswald Sonderbeilage -->
  111. <div><a onclick="openmodal('#modal04')" href="#modal">
  112. <img src="arbeiten/thumbs/eibiswald_wohlfuhlen.jpg" alt="">
  113. <div class="alttext">
  114. <h5>Eibiswald</h5>
  115. <p>Gestaltung und Satz einer Sonder&shy;ausgabe der Gemeinde&shy;zeitung zum Thema Tourismus für die Markt&shy;gemeinde Eibiswald.</p>
  116. </div>
  117. </a></div>
  118.  
  119. <!-- thumbnail 2 TED -->
  120. <div><a onclick="openmodal('#modal02')" href="#modal">
  121. <img src="arbeiten/thumbs/ted_flyer.jpg" alt="">
  122. <div class="alttext">
  123. <h5>Technische Dokumentation</h5>
  124. <p>Branding (inklusive mehrerer 2D-Illustrationen und 3D-Renderings) für den Master&shy;lehrgang “Technische Doku&shy;mentation” der FH&nbsp;Joanneum Graz.</p>
  125. </div>
  126. </a></div>
  127.  
  128. <!-- thumbnail 9 murChat -->
  129. <div><a onclick="openmodal('#modal09')" href="#modal">
  130. <img src="arbeiten/thumbs/murchat.jpg" alt="">
  131. <div class="alttext">
  132. <h5>murChat</h5>
  133. <p>Logodesign, Gestaltung und Layout der Zeitung für das Beteiligungs&shy;projekt “Junges Aichfeld” der steirischen Gemeinden Fohnsdorf, Judenburg und Zeltweg.</p>
  134. </div>
  135. </a></div>
  136.  
  137. <!-- thumbnail 1 Neuhofen -->
  138. <div><a onclick="openmodal('#modal01')" href="#modal">
  139. <img src="arbeiten/thumbs/neuhofen.jpg" alt="">
  140. <div class="alttext">
  141. <h5>Neuhofen</h5>
  142. <p>Neugestaltung und Satz von über 35 Ausgaben der Gemeinde&shy;zeitung für die Markt&shy;gemeinde Neuhofen an der Krems.</p>
  143. </div>
  144. </a></div>
  145.  
  146. <!-- thumbnail 20 nowa -->
  147. <div><a onclick="openmodal('#modal20')" href="#modal">
  148. <img src="arbeiten/thumbs/nowa.jpg" alt="">
  149. <div class="alttext">
  150. <h5>nowa</h5>
  151. <p>Grafische Begleitung des Projekts “Erasmus+ Wirkung 101” – von Konzeption bis zur Umsetzung: Zeichnen eines mehrseitigen Comics, Gestaltung einer Infografik, Satz und Layout der gesamten Broschüre.</p>
  152. </div>
  153. </a></div>
  154.  
  155. <!-- thumbnail 8 Zukunft Stadt -->
  156. <div><a onclick="openmodal('#modal08')" href="#modal">
  157. <img src="arbeiten/thumbs/zukunftstadt.jpg" alt="">
  158. <div class="alttext">
  159. <h5>Initiative zukunft:stadt</h5>
  160. <p>Logo und Anwendungen für das Gemein&shy;schafts&shy;projekt der Städte Bruck an der Mur, Knittel&shy;feld, Leibnitz, Trofaiach und Weiz.</p>
  161. </div>
  162. </a></div>
  163.  
  164. <!-- thumbnail 11 Weiz Kindersommer -->
  165. <div><a onclick="openmodal('#modal11')" href="#modal">
  166. <img src="arbeiten/thumbs/weizferien.jpg" alt="">
  167. <div class="alttext">
  168. <h5>Kindersommer Weiz</h5>
  169. <p>Gestaltung Ferien&shy;programm&shy;heft 2019 für die Stadt&shy;gemeinde Weiz.</p>
  170. </div>
  171. </a></div>
  172.  
  173. <!-- thumbnail 18 Weiz Bildungsbroschüre -->
  174. <div><a onclick="openmodal('#modal18')" href="#modal">
  175. <img src="arbeiten/thumbs/weizbro.jpg" alt="">
  176. <div class="alttext">
  177. <h5>Broschüren für Weiz</h5>
  178. <p>Gestaltung Bildungs-/&shy;Familien&shy;broschüre, Service&shy;broschüren sowie Image&shy;broschüren für die Stadt&shy;gemeinde Weiz.</p>
  179. </div>
  180. </a></div>
  181.  
  182. <!-- thumbnail 10 Eisenstrasse -->
  183. <div><a onclick="openmodal('#modal10')" href="#modal">
  184. <img src="arbeiten/thumbs/eisenstrasse.jpg" alt="">
  185. <div class="alttext">
  186. <h5>Stadtbus Eisenstraße</h5>
  187. <p>Marke, Bus&shy;beklebung, Inserate, Folder und Fahrpläne.</p>
  188. </div>
  189. </a></div>
  190.  
  191. <!-- thumbnail 12 Moser-Sujbert -->
  192. <div><a onclick="openmodal('#modal12')" href="#modal">
  193. <img src="arbeiten/thumbs/moser.jpg" alt="">
  194. <div class="alttext">
  195. <h5>Zahnarzt Dr. Anna Moser-Sujbert</h5>
  196. <p>Gestaltung und Programmierung einer Website, sowie Erstellung von Druck&shy;sorten.</p>
  197. </div>
  198. </a></div>
  199.  
  200. <!-- thumbnail 6 ESOPP -->
  201. <div><a onclick="openmodal('#modal06')" href="#modal">
  202. <img src="arbeiten/thumbs/esopp.jpg" alt="">
  203. <div class="alttext">
  204. <h5>ESOPP Scada</h5>
  205. <p>Neugestaltung/Proof-of-Concept eines Human-Machine-Interfaces für eine Papierwalz&shy;maschine mit Fokus auf Modernisierung, Benutzer&shy;freundlichkeit und Vermarkt&shy;barkeit.</p>
  206. </div>
  207. </a></div>
  208.  
  209. <!-- thumbnail 7 TBK -->
  210. <div><a onclick="openmodal('#modal07')" href="#modal">
  211. <img src="arbeiten/thumbs/tbk.jpg" alt="">
  212. <div class="alttext">
  213. <h5>TBK</h5>
  214. <p>Neugestaltung mehrerer Bedien&shy;elemente einer Maschine für Oberflächenan&shy;alysen.</p>
  215. </div>
  216. </a></div>
  217.  
  218. <!-- thumbnail 5 Energie Graz 2012 -->
  219. <div><a onclick="openmodal('#modal05')" href="#modal">
  220. <img src="arbeiten/thumbs/energiegraz_2012.jpg" alt="">
  221. <div class="alttext">
  222. <h5>Energie Graz</h5>
  223. <p>Satz und Mit&shy;gestaltung Geschäfts&shy;bericht 2012.</p>
  224. </div>
  225. </a></div>
  226.  
  227. <!-- thumbnail 13 Mureck -->
  228. <div><a onclick="openmodal('#modal13')" href="#modal">
  229. <img src="arbeiten/thumbs/mureck.jpg" alt="">
  230. <div class="alttext">
  231. <h5>Stadtgemeinde Mureck</h5>
  232. <p>Logo für den Begleit&shy;prozess zur Gemeinde&shy;fusion, Gestaltung und Satz von mehreren Sonder&shy;ausgaben der Gemeinde&shy;zeitung.</p>
  233. </div>
  234. </a></div>
  235.  
  236. <!-- thumbnail 3 Visitenkarte -->
  237. <!--
  238. <div><a onclick="openmodal('#modal03')" href="#modal">
  239. <img src="arbeiten/thumbs/rotane_visitenkarte.jpg" alt="">
  240. <div class="alttext">
  241. <h5>Phil Hoffer</h5>
  242. <p>Eigenmarke.</p>
  243. </div>
  244. </a></div>
  245. -->
  246.  
  247. <!-- thumbnail 17 Kalender -->
  248. <div><a onclick="openmodal('#modal17')" href="#modal">
  249. <img src="arbeiten/thumbs/kalender.jpg" alt="">
  250. <div class="alttext">
  251. <h5>Fotokalender</h5>
  252. <p>Fotografie und Gestaltung (Layout, Kalendarium) für mehrere Wand&shy;kalender.</p>
  253. </div>
  254. </a></div>
  255.  
  256. <!-- thumbnail 15 Musicmap -->
  257. <div><a onclick="openmodal('#modal15')" href="#modal">
  258. <img src="arbeiten/thumbs/musicmap.png" alt="">
  259. <div class="alttext">
  260. <h5>Musicmap</h5>
  261. <p>Eine Informations&shy;grafik, die meinen Musikgeschmack widerspiegelt. Nach dem Sammeln der Daten wurden sie sortiert und wie ein U-Bahn-Plan dargestellt – ver&shy;schiedene Linien für ver&shy;schiedene Genres, die beliebtesten Künstler nach innen.</p>
  262. </div>
  263. </a></div>
  264.  
  265. <!-- thumbnail 14 Albumart -->
  266. <div><a onclick="openmodal('#modal14')" href="#modal">
  267. <img src="arbeiten/thumbs/albumart.jpg" alt="">
  268. <div class="alttext">
  269. <h5>Custom Album Art</h5>
  270. <p>Eine meiner Leidenschaften ist die Neu&shy;gestaltung von Cover Artworks. Einerseits als Finger&shy;übung für Photo&shy;shop, anderer&shy;seits für eine stylische iTunes-Musik-Bibliothek am Computer.</p>
  271. </div>
  272. </a></div>
  273.  
  274. <!-- thumbnail 16 Twoism -->
  275. <!--
  276. <div><a onclick="openmodal('#modal16')" href="#modal">
  277. <img src="arbeiten/thumbs/twoism.jpg" alt="">
  278. <div class="alttext">
  279. <h5>One on Twoism, Vol. 6</h5>
  280. <p>Cover&shy;design (und Finalist der Aus&shy;schreibung) für die 6. Ausgabe des Musik&shy;projekts “One on Twoism”.</p>
  281. </div>
  282. </a></div>
  283. -->
  284.  
  285. </div>
  286.  
  287. </section> <!-- Projekte -->
  288.  
  289.  
  290.  
  291. <section class="container" id="leistungen">
  292.  
  293. <h3>Leistungen</h3>
  294.  
  295. <ul class="grid">
  296. <li class="edi">
  297. <img src="graphics/graphic_editorial.png" alt="">
  298. <div class="text">
  299. <h4>Editorial Design</h4>
  300. <p>Gestaltung und Satz von Zeitungen, Magazinen und Büchern</p>
  301. </div>
  302. </li>
  303.  
  304. <li class="kom">
  305. <img src="graphics/graphic_kommunikation.png" alt="">
  306. <div class="text">
  307. <h4>Kommunikations&shy;design</h4>
  308. <p>Grafik, Logos, Illustrationen, Corporate Identity (Visitenkarten, Drucksachen, Flyer, Plakate)</p>
  309. </div>
  310. </li>
  311.  
  312. <li class="inf">
  313. <img src="graphics/graphic_information.png" alt="">
  314. <div class="text">
  315. <h4>Informations&shy;design</h4>
  316. <p>Infografiken, Piktogramme</p>
  317. </div>
  318. </li>
  319.  
  320. <li class="web">
  321. <img src="graphics/graphic_web.png" alt="">
  322. <div class="text">
  323. <h4>Web- und Screen&shy;design</h4>
  324. <p>Websiten, Social Media-Betreuung, Interfaces</p>
  325. </div>
  326. </li>
  327. </ul>
  328.  
  329. </section> <!-- Leistungen -->
  330.  
  331.  
  332.  
  333. <section class="container" id="tools">
  334.  
  335. <h4>Tools & Skills</h4>
  336.  
  337. <ul>
  338. <li class="outer ind"><div class="inner">Adobe InDesign<span>: 100&thinsp;%</span></div></li>
  339. <li class="outer ps" ><div class="inner">Adobe Photoshop<span>: 100&thinsp;%</span></div></li>
  340. <li class="outer ill"><div class="inner">Adobe Illustrator<span>: 90&thinsp;%</span></div></li>
  341. <li class="outer htm"><div class="inner">HTML, CSS<span>: Fließend</span></div></li>
  342. <li class="outer php"><div class="inner">PHP, JavaScript<span>: Fortgeschritten</span></div></li>
  343. <li class="outer pho"><div class="inner">Fotografie<span>: Professionell</span></div></li>
  344. <li class="outer off"><div class="inner">Microsoft Office</div></li>
  345. <li class="outer ger"><div class="inner">Deutsch<span>: Muttersprache</span></div></li>
  346. <li class="outer eng"><div class="inner">Englisch<span>: C2 Niveau</span></div></li>
  347. </ul>
  348.  
  349. </section> <!-- Tools & Skills -->
  350.  
  351.  
  352.  
  353. <section class="container" id="cv">
  354.  
  355. <h4>Lebenslauf</h4>
  356.  
  357. <ul>
  358. <li class="row"><div class="col-1">seit 2005</div><div class="col-2">Selbstständiger Grafikdesigner</div></li>
  359. <li class="row"><div class="col-1">seit 2007</div><div class="col-2">Freier Mitarbeiter bei der <a href="http://www.gmk.co.at" target="_blank">GMK – Gesell&shy;schaft für Marketing und Kommunikation</a> in Graz</div></li>
  360. <li class="row"><div class="col-1">2010&thinsp;–&thinsp;2014</div><div class="col-2">Technical Consultant bei <a href="https://www.razorshift.com" target="_blank">Razor&shy;shift Entertainment</a></div></li>
  361. <li class="row"><div class="col-1">2009&thinsp;–&thinsp;2012</div><div class="col-2">Creative Staff bei <a href="https://www.deviantart.com" target="_blank">DeviantArt</a></div></li>
  362. <li class="row"><div class="col-1">2008&thinsp;–&thinsp;2010</div><div class="col-2">Freelancer bei <a href="https://www.napalmriot.com/" target="_blank">Napalm Riot (später RiotCore)</a></div></li>
  363. <li class="row"><div class="col-1">2006</div><div class="col-2">Grafikdesigner bei <a href="https://1pt.com.au" target="_blank">Pro&shy;Grafica</a> in Sydney, Australien</div></li>
  364. <li class="row"><div class="col-1">2005</div><div class="col-2">Praktikum als Grafiker bei <a href="https://www.effektiv.it" target="_blank">Effektiv</a> in Südtirol</div></li>
  365. <li class="row"><div class="col-1">2001&thinsp;–&thinsp;2005</div><div class="col-2">Studium Informations&shy;design (<a onclick="openmodal('#modal98')" class="infodesignlink" title="Was ist Informationsdesign?" href="#infodesign">Was ist das eigentlich?</a>) mit Abschluss Diplom-Ingenieur an der <a href="https://www.fh-joanneum.at" target="_blank">FH&nbsp;Joanneum</a> in Graz</div></li>
  366. </ul>
  367.  
  368. </section> <!-- Lebenslauf -->
  369.  
  370.  
  371.  
  372. <section class="container" id="logos">
  373.  
  374. <h3>Kunden & Partner</h3>
  375.  
  376. <ul class="grid">
  377. <li><img src="graphics/logo_bfi.png" alt=""></li>
  378. <li><img src="graphics/logo_deviantart.png" alt=""></li>
  379. <li><img src="graphics/logo_effektiv.png" alt=""></li>
  380. <li><img src="graphics/logo_eibiswald.png" alt=""></li>
  381. <li><img src="graphics/logo_egg.png" alt=""></li>
  382. <li><img src="graphics/logo_esopp.png" alt=""></li>
  383. <li><img src="graphics/logo_fhj.png" alt=""></li>
  384. <li><img src="graphics/logo_gmk.png" alt=""></li>
  385. <!-- <li><img src="graphics/logo_grobming.png" alt=""></li> -->
  386. <li><img src="graphics/logo_hallotag.png" alt=""></li>
  387. <li><img src="graphics/logo_knittelfeld.png" alt=""></li>
  388. <!-- <li><img src="graphics/logo_leoben.png" alt=""></li> -->
  389. <li><img src="graphics/logo_sujbert.png" alt=""></li>
  390. <!-- <li><img src="graphics/logo_murchat.png" alt=""></li> -->
  391. <!-- <li><img src="graphics/logo_mureck.png" alt=""></li> -->
  392. <!-- <li><img src="graphics/logo_napalmriot.png" alt=""></li> -->
  393. <li><img src="graphics/logo_neuhofen.png" alt=""></li>
  394. <li><img src="graphics/logo_oebfa.png" alt=""></li>
  395. <li><img src="graphics/logo_pep.png" alt=""></li>
  396. <li><img src="graphics/logo_prografica.png" alt=""></li>
  397. <li><img src="graphics/logo_razorshift.png" alt=""></li>
  398. <li><img src="graphics/logo_redeye.png" alt=""></li>
  399. <!-- <li><img src="graphics/logo_riotcore.png" alt=""></li> -->
  400. <li><img src="graphics/logo_tbk.png" alt=""></li>
  401. <li><img src="graphics/logo_treechip.png" alt=""></li>
  402. <li><img src="graphics/logo_volkshilfe.png" alt=""></li>
  403. <li><img src="graphics/logo_weiz.png" alt=""></li>
  404. </ul>
  405.  
  406. </section> <!-- Logos & Kunden -->
  407.  
  408.  
  409.  
  410. <section id="kontakt" class="container">
  411.  
  412. <h3>Kontakt</h3>
  413.  
  414. <p>Haben Sie Interesse, mit mir zu arbeiten? Ich freue mich auf Ihre Nachricht!</p>
  415. <h4><a href="tel:004369910582429">+43 699 10582429</a></h4>
  416. <h4><a href="mailto:hello@hoffer.cx">hello@hoffer.cx</a></h4>
  417.  
  418. </section> <!-- Kontakt -->
  419.  
  420.  
  421.  
  422. </main>
  423.  
  424.  
  425.  
  426. <footer>
  427.  
  428. <div class="shadow"></div>
  429.  
  430. <div class="container">
  431. <ul class="links">
  432. <li><a href="https://www.linkedin.com/in/rotane" target="_blank"><img src="graphics/link_linkedin.png" alt=""></a></li>
  433. <li><a href="https://www.xing.com/profile/Phil_Hoffer" target="_blank"><img src="graphics/link_xing.png" alt=""></a></li>
  434. <li><a href="https://www.instagram.com/rotaneco" target="_blank"><img src="graphics/link_instagram.png" alt=""></a></li>
  435. <li><a href="https://www.deviantart.com/rotane" target="_blank"><img src="graphics/link_deviantart.png" alt=""></a></li>
  436. <!-- <li><a href="https://steamcommunity.com/id/rotane" target="_blank"><img src="graphics/link_steam.png" alt=""></a></li> -->
  437. <!-- <li><a href="https://letterboxd.com/rotane" target="_blank"><img src="graphics/link_letterboxd.png" alt=""></a></li> -->
  438. <!-- <li><a href="https://www.last.fm/user/rotane" target="_blank"><img src="graphics/link_lastfm.png" alt=""></a></li> -->
  439. <li><a href="https://www.facebook.com/rotane" target="_blank"><img src="graphics/link_facebook.png" alt=""></a></li>
  440. <!-- <li><a href="https://twitter.com/rotane" target="_blank"><img src="graphics/link_x.png" alt=""></a></li> -->
  441. <li><a href="https://rotane.bsky.social" target="_blank"><img src="graphics/link_bsky.png" alt=""></a></li>
  442. </ul>
  443. <ul class="text">
  444. <li>&copy;&thinsp;2000&thinsp;–&thinsp;2024 DI (FH) Phil Hoffer</li>
  445. <li><a href="mailto:job@hoffer.cx">job@hoffer.cx</a></li>
  446. <li><a onclick="openmodal('#modal99')" class="impressumlink" href="#impressum">Impressum</a></li>
  447. </ul>
  448. </div>
  449.  
  450. </footer>
  451.  
  452.  
  453.  
  454. <!-- === modals WITH slideshow === -->
  455.  
  456. <!-- modal 1 Neuhofen -->
  457. <aside id="modal01" class="modal animate-opacity">
  458. <div class="modal-content">
  459. <div class="slides01">
  460. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/neuhofen_1.jpg" alt=""></div>
  461. <h5>Neuhofen</h5>
  462. <p>Übersicht einiger Titelseiten</p>
  463. </div>
  464. <div class="slides01">
  465. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/neuhofen_3.jpg" alt=""></div>
  466. <h5>Neuhofen</h5>
  467. <p>Innenseiten</p>
  468. </div>
  469. <div class="slides01">
  470. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/neuhofen_2.jpg" alt=""></div>
  471. <h5>Neuhofen</h5>
  472. <p>Innenseiten</p>
  473. </div>
  474. <div class="slides01">
  475. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/neuhofen_5.jpg" alt=""></div>
  476. <h5>Neuhofen</h5>
  477. <p>Innenseiten</p>
  478. </div>
  479. <div class="slides01">
  480. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/neuhofen_4.jpg" alt=""></div>
  481. <h5>Neuhofen</h5>
  482. <p>Innenseiten, mit Sub-Branding für das FORUM Neuhofen</p>
  483. </div>
  484. <button class="button-left" onclick="plusDivs(-1, 0)">&#10094;</button>
  485. <button class="button-right" onclick="plusDivs(1, 0)">&#10095;</button>
  486. <button class="button-topright" onclick="closemodal()">&times;</button>
  487. </div>
  488. </aside>
  489.  
  490. <!-- modal 2 TED -->
  491. <aside id="modal02" class="modal animate-opacity">
  492. <div class="modal-content">
  493. <div class="slides02">
  494. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/ted_flyer_1.jpg" alt=""></div>
  495. <h5>Technische Dokumentation</h5>
  496. <p>Titelseite vom Flyer</p>
  497. </div>
  498. <div class="slides02">
  499. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/ted_web_1.jpg" alt=""></div>
  500. <h5>Technische Dokumentation</h5>
  501. <p>Website der FH Joanneum mit Illustration im Hintergrund</p>
  502. </div>
  503. <div class="slides02">
  504. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/ted_facebook_3.jpg" alt=""></div>
  505. <h5>Technische Dokumentation</h5>
  506. <p>Facebook-Header</p>
  507. </div>
  508. <div class="slides02">
  509. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/ted_hero_2.jpg" alt=""></div>
  510. <h5>Technische Dokumentation</h5>
  511. <p>Detailansicht 2D-Illustration</p>
  512. </div>
  513. <div class="slides02">
  514. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/ted_hero_3.jpg" alt=""></div>
  515. <h5>Technische Dokumentation</h5>
  516. <p>Detailansicht sekundäre 2D-Illustration</p>
  517. </div>
  518. <div class="slides02">
  519. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/ted_hero_lego.jpg" alt=""></div>
  520. <h5>Technische Dokumentation</h5>
  521. <p>3D-Rendering im LEGO-Stil</p>
  522. </div>
  523. <button class="button-left" onclick="plusDivs(-1, 1)">&#10094;</button>
  524. <button class="button-right" onclick="plusDivs(1, 1)">&#10095;</button>
  525. <button class="button-topright" onclick="closemodal()">&times;</button>
  526. </div>
  527. </aside>
  528.  
  529. <!-- modal 4 Eibiswald Sonderbeilage -->
  530. <aside id="modal04" class="modal animate-opacity">
  531. <div class="modal-content">
  532. <div class="slides04">
  533. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/eibiswald_wohlfuhlen_2.jpg" alt=""></div>
  534. <h5>Eibiswald</h5>
  535. <p>Sonderausgabe im Umfang von 60 Seiten</p>
  536. </div>
  537. <div class="slides04">
  538. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/eibiswald_wohlfuhlen_3.jpg" alt=""></div>
  539. <h5>Eibiswald</h5>
  540. <p>Detailansicht Innenseiten</p>
  541. </div>
  542. <button class="button-left" onclick="plusDivs(-1, 2)">&#10094;</button>
  543. <button class="button-right" onclick="plusDivs(1, 2)">&#10095;</button>
  544. <button class="button-topright" onclick="closemodal()">&times;</button>
  545. </div>
  546. </aside>
  547.  
  548. <!-- modal 5 Energie Graz 2012 -->
  549. <aside id="modal05" class="modal animate-opacity">
  550. <div class="modal-content">
  551. <div class="slides05">
  552. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/energiegraz_2012_1.jpg" alt=""></div>
  553. <h5>Energie Graz</h5>
  554. <p>Geschäftsbericht Cover</p>
  555. </div>
  556. <div class="slides05">
  557. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/energiegraz_2012_2b.jpg" alt=""></div>
  558. <h5>Energie Graz</h5>
  559. <p>Geschäftsbericht Innenseiten</p>
  560. </div>
  561. <div class="slides05">
  562. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/energiegraz_2012_4.jpg" alt=""></div>
  563. <h5>Energie Graz</h5>
  564. <p>Geschäftsbericht Innenseiten</p>
  565. </div>
  566. <div class="slides05">
  567. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/energiegraz_2012_6.jpg" alt=""></div>
  568. <h5>Energie Graz</h5>
  569. <p>Geschäftsbericht Innenseiten</p>
  570. </div>
  571. <button class="button-left" onclick="plusDivs(-1, 3)">&#10094;</button>
  572. <button class="button-right" onclick="plusDivs(1, 3)">&#10095;</button>
  573. <button class="button-topright" onclick="closemodal()">&times;</button>
  574. </div>
  575. </aside>
  576.  
  577. <!-- modal 7 TBK -->
  578. <aside id="modal07" class="modal animate-opacity">
  579. <div class="modal-content">
  580. <div class="slides07">
  581. <div class="imageholder"><img class="modal-content" src="arbeiten/tbk_1.jpg" alt=""></div>
  582. <h5>TBK</h5>
  583. <p>Status Display “Alles in Ordnung”</p>
  584. </div>
  585. <div class="slides07">
  586. <div class="imageholder"><img class="modal-content" src="arbeiten/tbk_2.jpg" alt=""></div>
  587. <h5>TBK</h5>
  588. <p>Status Display mit diversen Warnhinweisen</p>
  589. </div>
  590. <button class="button-left" onclick="plusDivs(-1, 4)">&#10094;</button>
  591. <button class="button-right" onclick="plusDivs(1, 4)">&#10095;</button>
  592. <button class="button-topright" onclick="closemodal()">&times;</button>
  593. </div>
  594. </aside>
  595.  
  596. <!-- modal 8 Zukunft Stadt -->
  597. <aside id="modal08" class="modal animate-opacity">
  598. <div class="modal-content">
  599. <div class="slides08">
  600. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/zukunftstadt_1.jpg" alt=""></div>
  601. <h5>Initiative zukunft:stadt</h5>
  602. <p>Logo</p>
  603. </div>
  604. <div class="slides08">
  605. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/zukunftstadt_2.jpg" alt=""></div>
  606. <h5>Initiative zukunft:stadt</h5>
  607. <p>Rollups</p>
  608. </div>
  609. <button class="button-left" onclick="plusDivs(-1, 5)">&#10094;</button>
  610. <button class="button-right" onclick="plusDivs(1, 5)">&#10095;</button>
  611. <button class="button-topright" onclick="closemodal()">&times;</button>
  612. </div>
  613. </aside>
  614.  
  615. <!-- modal 10 Eisenstrasse -->
  616. <aside id="modal10" class="modal animate-opacity">
  617. <div class="modal-content">
  618. <div class="slides10">
  619. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/eisenstrasse_1.jpg" alt=""></div>
  620. <h5>Stadtbus Eisenstraße</h5>
  621. <p>Logo</p>
  622. </div>
  623. <div class="slides10">
  624. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/eisenstrasse_3.jpg" alt=""></div>
  625. <h5>Stadtbus Eisenstraße</h5>
  626. <p>Folder</p>
  627. </div>
  628. <div class="slides10">
  629. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/eisenstrasse_2.jpg" alt=""></div>
  630. <h5>Stadtbus Eisenstraße</h5>
  631. <p>Busbeklebung</p>
  632. </div>
  633. <button class="button-left" onclick="plusDivs(-1, 6)">&#10094;</button>
  634. <button class="button-right" onclick="plusDivs(1, 6)">&#10095;</button>
  635. <button class="button-topright" onclick="closemodal()">&times;</button>
  636. </div>
  637. </aside>
  638.  
  639. <!-- modal 11 Weiz Kindersommer -->
  640. <aside id="modal11" class="modal animate-opacity">
  641. <div class="modal-content">
  642. <div class="slides11">
  643. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/weizferien_1.jpg" alt=""></div>
  644. <h5>Kindersommer Weiz</h5>
  645. <p>Programmheft Titelseite</p>
  646. </div>
  647. <div class="slides11">
  648. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/weizferien_2.jpg" alt=""></div>
  649. <h5>Kindersommer Weiz</h5>
  650. <p>Programmheft Innenseiten</p>
  651. </div>
  652. <button class="button-left" onclick="plusDivs(-1, 7)">&#10094;</button>
  653. <button class="button-right" onclick="plusDivs(1, 7)">&#10095;</button>
  654. <button class="button-topright" onclick="closemodal()">&times;</button>
  655. </div>
  656. </aside>
  657.  
  658. <!-- modal 13 Mureck -->
  659. <aside id="modal13" class="modal animate-opacity">
  660. <div class="modal-content">
  661. <div class="slides13">
  662. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/mureck_1.jpg" alt=""></div>
  663. <h5>Stadtgemeinde Mureck</h5>
  664. <p>Zeitungen Titelseiten</p>
  665. </div>
  666. <div class="slides13">
  667. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/mureck_2.jpg" alt=""></div>
  668. <h5>Stadtgemeinde Mureck</h5>
  669. <p>Zeitungen Innenseiten</p>
  670. </div>
  671. <button class="button-left" onclick="plusDivs(-1, 8)">&#10094;</button>
  672. <button class="button-right" onclick="plusDivs(1, 8)">&#10095;</button>
  673. <button class="button-topright" onclick="closemodal()">&times;</button>
  674. </div>
  675. </aside>
  676.  
  677. <!-- modal 14 Albumart -->
  678. <aside id="modal14" class="modal animate-opacity">
  679. <div class="modal-content">
  680. <div class="slides14">
  681. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/albumart_1.jpg" alt=""></div>
  682. <h5>Custom Album Art</h5>
  683. <p>Eine Auswahl an selbstgestalteten Covers</p>
  684. </div>
  685. <div class="slides14">
  686. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/albumart_2.jpg" alt=""></div>
  687. <h5>Custom Album Art</h5>
  688. <p>Projekt “The Elder Scrolls” Soundtrack Serie</p>
  689. </div>
  690. <div class="slides14">
  691. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/albumart_3.jpg" alt=""></div>
  692. <h5>Custom Album Art</h5>
  693. <p>Projekt “The Tolkien Ensemble” Box Set</p>
  694. </div>
  695. <div class="slides14">
  696. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/albumart_4.jpg" alt=""></div>
  697. <h5>Custom Album Art</h5>
  698. <p>Projekt “Mass Effect” Soundtrack Serie</p>
  699. </div>
  700. <button class="button-left" onclick="plusDivs(-1, 9)">&#10094;</button>
  701. <button class="button-right" onclick="plusDivs(1, 9)">&#10095;</button>
  702. <button class="button-topright" onclick="closemodal()">&times;</button>
  703. </div>
  704. </aside>
  705.  
  706. <!-- modal 17 Kalender -->
  707. <aside id="modal17" class="modal animate-opacity">
  708. <div class="modal-content">
  709. <div class="slides17">
  710. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/kalender_2022_1.jpg" alt=""></div>
  711. <h5>Fotokalender “BergeSeenTrail 2022”</h5>
  712. <p>Titelseite</p>
  713. </div>
  714. <div class="slides17">
  715. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/kalender_2022_2.jpg" alt=""></div>
  716. <h5>Fotokalender “BergeSeenTrail 2022”</h5>
  717. <p>Monatsseiten</p>
  718. </div>
  719. <div class="slides17">
  720. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/kalender_2021_1.jpg" alt=""></div>
  721. <h5>Fotokalender “Sonnenstunden 2021”</h5>
  722. <p>Titelseite</p>
  723. </div>
  724. <div class="slides17">
  725. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/kalender_2021_2.jpg" alt=""></div>
  726. <h5>Fotokalender “Sonnenstunden 2021”</h5>
  727. <p>Monatsseiten</p>
  728. </div>
  729. <div class="slides17">
  730. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/kalender_2020_1.jpg" alt=""></div>
  731. <h5>Fotokalender “Reflexionen 2020”</h5>
  732. <p>Titelseite</p>
  733. </div>
  734. <div class="slides17">
  735. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/kalender_2020_2.jpg" alt=""></div>
  736. <h5>Fotokalender “Reflexionen 2020”</h5>
  737. <p>Monatsseiten</p>
  738. </div>
  739. <div class="slides17">
  740. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/kalender_2019_1.jpg" alt=""></div>
  741. <h5>Fotokalender “Stimmungen 2019”</h5>
  742. <p>Titelseite</p>
  743. </div>
  744. <div class="slides17">
  745. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/kalender_2019_2.jpg" alt=""></div>
  746. <h5>Fotokalender “Stimmungen 2019”</h5>
  747. <p>Monatsseiten</p>
  748. </div>
  749. <div class="slides17">
  750. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/kalender_2018_1.jpg" alt=""></div>
  751. <h5>Fotokalender “abstrakt achtzehn”</h5>
  752. <p>Titelseite</p>
  753. </div>
  754. <div class="slides17">
  755. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/kalender_2018_2.jpg" alt=""></div>
  756. <h5>Fotokalender “abstrakt achtzehn”</h5>
  757. <p>Monatsseiten</p>
  758. </div>
  759. <div class="slides17">
  760. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/kalender_2017_1.jpg" alt=""></div>
  761. <h5>Fotokalender “Landschaften 2017”</h5>
  762. <p>Titelseite</p>
  763. </div>
  764. <div class="slides17">
  765. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/kalender_2017_2.jpg" alt=""></div>
  766. <h5>Fotokalender “Landschaften 2017”</h5>
  767. <p>Monatsseiten</p>
  768. </div>
  769. <div class="slides17">
  770. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/kalender_2015_1.jpg" alt=""></div>
  771. <h5>Fotokalender 2015</h5>
  772. <p>Titelseite</p>
  773. </div>
  774. <div class="slides17">
  775. <div class="imageholder"><img class="modal-content animate-opacity" src="arbeiten/kalender_2015_2.jpg" alt=""></div>
  776. <h5>Fotokalender 2015</h5>
  777. <p>Monatsseiten</p>
  778. </div>
  779. <button class="button-left" onclick="plusDivs(-1, 10)">&#10094;</button>
  780. <button class="button-right" onclick="plusDivs(1, 10)">&#10095;</button>
  781. <button class="button-topright" onclick="closemodal()">&times;</button>
  782. </div>
  783. </aside>
  784.  
  785. <!-- modal 18 Weiz Broschüren -->
  786. <aside id="modal18" class="modal animate-opacity">
  787. <div class="modal-content">
  788. <div class="slides18">
  789. <div class="imageholder"><img class="modal-content" src="arbeiten/weizbildung_1.jpg" alt=""></div>
  790. <h5>Familienbroschüre Weiz</h5>
  791. <p>Informationsbroschüre im Umfang von 48 Seiten</p>
  792. </div>
  793. <div class="slides18">
  794. <div class="imageholder"><img class="modal-content" src="arbeiten/weizservice_1.jpg" alt=""></div>
  795. <h5>Servicebroschüre Weiz</h5>
  796. <p>Informationsbroschüre im Umfang von 56 Seiten</p>
  797. </div>
  798. <button class="button-left" onclick="plusDivs(-1, 11)">&#10094;</button>
  799. <button class="button-right" onclick="plusDivs(1, 11)">&#10095;</button>
  800. <button class="button-topright" onclick="closemodal()">&times;</button>
  801. </div>
  802. </aside>
  803.  
  804. <!-- modal 20 nowa -->
  805. <aside id="modal20" class="modal animate-opacity">
  806. <div class="modal-content">
  807. <div class="slides20">
  808. <div class="imageholder"><img class="modal-content" src="arbeiten/nowa_2.jpg" alt=""></div>
  809. <h5>nowa</h5>
  810. <p>Eine Doppelseite aus der Broschüre</p>
  811. </div>
  812. <div class="slides20">
  813. <div class="imageholder"><img class="modal-content" src="arbeiten/nowa_1.jpg" alt=""></div>
  814. <h5>nowa</h5>
  815. <p>Infografik, die den gesamten Prozess verdeutlicht</p>
  816. </div>
  817. <button class="button-left" onclick="plusDivs(-1, 12)">&#10094;</button>
  818. <button class="button-right" onclick="plusDivs(1, 12)">&#10095;</button>
  819. <button class="button-topright" onclick="closemodal()">&times;</button>
  820. </div>
  821. </aside>
  822.  
  823.  
  824.  
  825. <!-- === modals WITHOUT slideshow === -->
  826.  
  827. <!-- modal 3 Visitenkarte -->
  828. <aside id="modal03" class="modal animate-opacity">
  829. <div class="modal-content">
  830. <div class="slides03">
  831. <div class="imageholder"><img class="modal-content" src="arbeiten/rotane_visitenkarte_1.jpg" alt=""></div>
  832. <h5>Phil Hoffer</h5>
  833. <p>Visitenkarten</p>
  834. </div>
  835. <button class="button-topright" onclick="closemodal()">&times;</button>
  836. </div>
  837. </aside>
  838.  
  839. <!-- modal 6 ESOPP -->
  840. <aside id="modal06" class="modal animate-opacity">
  841. <div class="modal-content">
  842. <div class="slides06">
  843. <div class="imageholder"><img class="modal-content" src="arbeiten/esopp_1.jpg" alt=""></div>
  844. <h5>ESOPP Scada</h5>
  845. <p>Screendesign eines Interfaces für den Techniker</p>
  846. </div>
  847. <button class="button-topright" onclick="closemodal()">&times;</button>
  848. </div>
  849. </aside>
  850.  
  851. <!-- modal 9 murChat -->
  852. <aside id="modal09" class="modal animate-opacity">
  853. <div class="modal-content">
  854. <div class="slides09">
  855. <div class="imageholder"><img class="modal-content" src="arbeiten/murchat_1.jpg" alt=""></div>
  856. <h5>murChat</h5>
  857. <p>1. Ausgabe der Zeitung</p>
  858. </div>
  859. <button class="button-topright" onclick="closemodal()">&times;</button>
  860. </div>
  861. </aside>
  862.  
  863. <!-- modal 12 Moser-Sujbert -->
  864. <aside id="modal12" class="modal animate-opacity">
  865. <div class="modal-content">
  866. <div class="slides12">
  867. <div class="imageholder"><img class="modal-content" src="arbeiten/moser_1.jpg" alt=""></div>
  868. <h5>Zahnarzt Dr. Anna Moser-Sujbert</h5>
  869. <p>Responsive Website</p>
  870. </div>
  871. <button class="button-topright" onclick="closemodal()">&times;</button>
  872. </div>
  873. </aside>
  874.  
  875. <!-- modal 15 Musicmap -->
  876. <aside id="modal15" class="modal animate-opacity">
  877. <div class="modal-content">
  878. <div class="slides15">
  879. <div class="imageholder"><img class="modal-content" src="arbeiten/musicmap_1.png" alt=""></div>
  880. <h5>Musicmap</h5>
  881. <p>Infografik / Datenvisualisierung</p>
  882. </div>
  883. <button class="button-topright" onclick="closemodal()">&times;</button>
  884. </div>
  885. </aside>
  886.  
  887. <!-- modal 16 Twoism -->
  888. <aside id="modal16" class="modal animate-opacity">
  889. <div class="modal-content">
  890. <div class="slides16">
  891. <div class="imageholder"><img class="modal-content" src="arbeiten/twoism_1.jpg" alt=""></div>
  892. <h5>One on Twoism, Volume 6</h5>
  893. <p>Gestaltung von Cover, Booklet, CD und Inlay</p>
  894. </div>
  895. <button class="button-topright" onclick="closemodal()">&times;</button>
  896. </div>
  897. </aside>
  898.  
  899. <!-- modal 19 Bundesschatz-->
  900. <aside id="modal19" class="modal animate-opacity">
  901. <div class="modal-content">
  902. <div class="slides19">
  903. <div class="imageholder"><img class="modal-content" src="arbeiten/bundesschatz_1.jpg" alt=""></div>
  904. <h5>Bundesschatz</h5>
  905. <p>Zeichnung der 5 Illustrationen, hier im Einsatz auf der Website</p>
  906. </div>
  907. <button class="button-topright" onclick="closemodal()">&times;</button>
  908. </div>
  909. </aside>
  910.  
  911.  
  912.  
  913. <!-- modal Informationsdesign -->
  914. <aside id="modal98" class="modal animate-opacity">
  915. <div class="modal-content">
  916. <h5>Was ist Informationsdesign?</h5>
  917. <p>Informationsdesign ist im weitesten Sinne die Selektion, Organisation und Präsentation von Informationen und Daten jeglicher Art. Diese Daten werden effektiv, effizient, gut lesbar und zielgruppengerecht aufbereitet – und natürlich soll die Darstellung auch gut aussehen.</p>
  918. <p>Das Studium an der FH Joanneum ging jedoch weit über die Erstellung von Infografiken hinaus. Das Curriculum beinhaltete nicht nur eine Grundausbildung zum Grafikdesigner, auch wurden Neue Medien, Typografie, Fotografie, Ausstellungsdesign, Informatik, Usability, Marketing, Branding und Identity, Illustration und Animation, Audio- und Videoproduktion, Recht und Betriebswirtschaftslehre gelehrt.</p>
  919. <p>Informationsdesign steht also in Zusammenhang mit verschiedenen Disziplinen. Und der Informationsgrafiker ist am besten alles auf einmal: Allrounder, Designer, Teamplayer und Detailfanatiker.</p>
  920. <button class="button-topright" onclick="closemodal()">&times;</button>
  921. </div>
  922. </aside>
  923.  
  924. <!-- modal Impressum -->
  925. <aside id="modal99" class="modal animate-opacity">
  926. <div class="modal-content">
  927. <h5>Impressum</h5>
  928. <p><b>Inhaber, Gestaltung und Programmierung:</b></p>
  929. <p>DI (FH) Philipp Hoffer<br>Wassergasse 6<br>8010 Graz, Austria<br><a href="mailto:job@hoffer.cx">job@hoffer.cx</a></p>
  930. <p>Unternehmensgegenstand: Werbegrafik</p>
  931. <p>Diese Daten dürfen nicht zu Werbezwecken genutzt werden.</p>
  932. <p><b>Rechtliches:</b></p>
  933. <p>Vervielfältigung oder Verwendung von Grafiken oder/und Texten dieser Website in anderen elektronischen oder gedruckten Publikationen ist ohne ausdrückliche Zustimmung nicht gestattet. Wir übernehmen keine Haftung für die Aktualität, Richtigkeit und Vollständigkeit der auf dieser Website bereitgestellten Informationen. Dies gilt auch für all jene externen Daten dieses Web-Auftritts, auf die mittels eines Hyperlinks verwiesen wird.</p>
  934. <p><b>Cookies:</b></p>
  935. <p>Diese Website verwendet keine Cookies.</p>
  936. <p><b>Erklärung zur Informationspflicht (Datenschutzerklärung):</b></p>
  937. <p>Ihre Daten werden ausschließlich auf Grundlage der gesetzlichen Bestimmungen (DSGVO, TKG 2003) verarbeitet.</p>
  938. <p><b>Credits:</b></p>
  939. <p>Diese Website verwendet Grafiken von <a href="https://www.flaticon.com" target="_blank">flaticon</a>, <a href="https://www.freepik.com" target="_blank">freepik</a>, <a href="https://www.ls.graphics" target="_blank">Lstore Graphics</a>, <a href="https://www.mockupworld.co" target="_blank">Mockupworld</a> und <a href="https://freemockupzone.com" target="_blank">Mockup Zone</a>.</p>
  940. <button class="button-topright" onclick="closemodal()">&times;</button>
  941. </div>
  942. </aside>
  943.  
  944.  
  945.  
  946. <script>
  947.  
  948. var slideIndex = [1,1,1,1,1,1,1,1,1,1,1,1,1];
  949. var slideId = ["slides01", "slides02", "slides04", "slides05", "slides07", "slides08", "slides10", "slides11", "slides13", "slides14", "slides17", "slides18", "slides20"]
  950. showDivs(1, 0);
  951. showDivs(1, 1);
  952. showDivs(1, 2);
  953. showDivs(1, 3);
  954. showDivs(1, 4);
  955. showDivs(1, 5);
  956. showDivs(1, 6);
  957. showDivs(1, 7);
  958. showDivs(1, 8);
  959. showDivs(1, 9);
  960. showDivs(1, 10);
  961. showDivs(1, 11);
  962. showDivs(1, 12);
  963.  
  964. function plusDivs(n, no) {
  965.  showDivs(slideIndex[no] += n, no);
  966. }
  967.  
  968. function showDivs(n, no) {
  969.  var i;
  970.  var x = document.getElementsByClassName(slideId[no]);
  971.  if (n > x.length) {slideIndex[no] = 1}
  972.  if (n < 1) {slideIndex[no] = x.length}
  973.  for (i = 0; i < x.length; i++) {
  974.    x[i].style.display = "none";  
  975.  }
  976.  x[slideIndex[no]-1].style.display = "block";  
  977. }
  978.  
  979. // open modal
  980. function openmodal(modalId) {
  981.  $(modalId).addClass('modal-visible');
  982.  window.history.pushState({ isPopup: true }, "modal");
  983. }
  984.  
  985. // close any open modal
  986. function hidemodal() {
  987.  $('.modal').removeClass('modal-visible');
  988. }
  989.  
  990. // to close a modal, call this function
  991. // it sends a history back state (see next function)
  992. // via https://stackoverflow.com/questions/69706014
  993. function closemodal() {
  994.  window.history.back();
  995. }
  996.  
  997. // on history back, call funtion that closes any open modal
  998. window.addEventListener('popstate', event => {
  999.  if (event.state?.isPopup) {
  1000.    hidemodal();
  1001.  }
  1002. });
  1003.  
  1004. // script to close a modal when clicked outside of it
  1005. // is also sends a history back state (see above)
  1006. window.onclick = function(event) {
  1007.  if (event.target.classList.contains("modal")) {
  1008.    window.history.back();
  1009.  }
  1010. }
  1011.  
  1012. </script>
  1013.  
  1014.  
  1015.  
  1016. </body>
  1017.  
  1018. </html>

Home · About · News · Docs · Terms

 
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda